Day.02.09 旅游网头部简单案例
2017-02-09 本文已影响9人
挂树上的骷髅怪
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 旅游网头部 </title>
<style type="text/css">
*{
margin:0px;
padding:0px;
font-size:12px;
}/*通配符选择器*/
#box{
width:950px;
height:400px;
background-color:silver;
margin:0 auto;
}
.header{
width:950px;
height:180px;
background:url('header_bg.jpg') no-repeat;/*不是平铺效果*/
}
.nav ul{
list-style-type:none;/*去掉li前面的小圆点*/
float:right;
border-top:4px solid #66CCFF;
margin-right:23px;
}
.nav li{
background:url('top_nav_li_bg.gif') no-repeat top right;
padding-top:7px;
padding-left:9px;
padding-right:9px;
float:left;
}
/*在鼠标不指向的情况下*/
.nav a:link{
color:#CCFFFF;
text-decoration:none;/*去掉下划线*/
}
/*在鼠标指向的情况下*/
.nav a:hover{
color:#FFF;
text-decoration:underline;/*加上下划线*/
}
</style>
</head>
<body>
<div id="box">
<div class="header">
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">站点地图</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
小结:
1.越小的地方越难写;
2.前面改记住的又忘了不少;
3.php div+css到后面越来越难了;
旅游网头部.png
