码迷,mamicode.com
首页 > 其他好文 > 详细

懒人代码-顶部栏

时间:2016-06-08 15:34:27      阅读:163      评论:0      收藏:0      [点我收藏+]

标签:

技术分享

	<div class="header">
<!-- 	.header {											body{     		body的margin=0和padding=0就能保证页面充满整个屏幕
	height: 58px;												margin: 0;
	background: #000 url(img/head_bg.jpg) repeat-x;				padding: 0;
} 															}	
p{					.h-t {																			.h-c {
	margin: 0;			font-size: 14px; 确定文字的大小和margin就确定了td的高度,和图片高度一样就可以了			color: #fff;	
}						color: #db8a38;																}
					}
-->
		<table>    
			<tbody>
				<tr>  	  <!--  表格每一行的高度取决于最高的td,当第二个td文字高度小于图片高度的时候tr就是图片的高度,当图片高度小于第二个td高度的时候tr高度就是第二个td高度 -->
					<td >
					  <a href="default.html"><img src="img/logo.png" alt="手机版安族网" /></a>
					</td>
					<td>
						<p class="h-t">
							<strong>安族网手机版</strong>
						</p>
						<p class="h-c">经典Android下载站!</p>
					</td>
				</tr>
			</tbody>
		</table>
	</div>

 技术分享

<!-- .nav {													.nav a {			.nav .on {
	height: 25px;												color: #fff;		color: #f93;	
	text-align: center;										}					}
	background: #444 url(img/nav_bg.jpg)    repeat-x;
	color: #fff;
	line-height: 25px;
} -->
	<div class="nav">
		<a href="default.htm" class="on">首页</a> | <a href="soft.html">软件</a> |
		<a href="game.html">游戏</a> | <a href="theme.html">主题</a> | <a
			href="used.html">必备</a>
	</div>

 

懒人代码-顶部栏

标签:

原文地址:http://www.cnblogs.com/yaowen/p/5570009.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!