Day.02.09 旅游网头部简单案例

<!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

最后编辑于：2017.12.05 14:54:34

Day.02.09 旅游网头部简单案例

推荐阅读更多精彩内容