导航条2 ，图片展示

代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航条</title>
    <style type="text/css">
        /*清除默认样式*/
        *{
            margin: 0;
            padding: 0;
        }
        .box{width:960px;height:40px;margin:50px auto;background-color: #55a8ea}

        .box li{
            display:inline-block;
            float: left;
            text-align: :center;
        }

        .box a{
            display: inline-block;
            text-align: center;
            padding:10px 10px;
            text-decoration: none;
            color:#fff;
            font:14px '雅黑';
        }
        .box a:hover{
            background-color: #cc0000;
        }
        .box .box1{width:100px;background-color:#00619f;}

        .box img{position: absolute;
            left:20px;
            top:-10px;}







图片展示

        .pic_box{width:960px;height:250px;border:1px solid #eeeeee;
            margin:100px auto;}
        .line_box{ width:920px; height:199px;margin:0 auto; border-top:1px #eeeeee solid;}
        p{padding-left: 20px;
            font:18px 微软雅黑;
            color:#000;
            display: inline-block;
            border-bottom:2px solid red;
            margin:0 1px;
        }
        .a{display:block;
            float:left;padding:20px 14.5px 25px 0;}
        .aa{display:block;
            float:left;padding:20px 14.5px 25px 14.5px;}
        .aaa{display:block;
            float:left;padding:20px 0 25px 14.5px;}
        .b{display:block;
            float:left;padding:0 14.5px 39px 0;}
        .bb{display:block;
            float:left;padding:0 14.5px 39px 14.5px;}
        .bbb{display:block;
            float:left;padding:0 0 39px 14.5px;}
        </style>
</head>
<body>
    <!-- 创建导航条的结构 -->
    <ul class="box">
        <li >
            <a class = 'box1' href="#" >首页</a>
        </li>
        <li><a href="#">网站建设</a></li>
        <li><a href="#">程序开发</a></li>
        <li><a href="#">网络营销</a></li>
        <li><a href="#" style = 'position: relative;'>企业VI <img src = 'image/new.png'> </a></li>
        <li><a href="#">案例展示</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>



<!--图片展示 -->
    <div class="pic_box">
        <p>图片展示</p>
        <div class = 'line_box'>
            <img src="image/goods.jpg"  class = 'a'>
            <img src="image/goods.jpg"  class = 'aa'>
            <img src="image/goods.jpg"  class = 'aa'>
            <img src="image/goods.jpg"  class = 'aa'>
            <img src="image/goods.jpg"  class = 'aaa'>
            <img src="image/goods.jpg"  class = 'b'>
            <img src="image/goods.jpg"  class = 'bb'>
            <img src="image/goods.jpg"  class = 'bb'>
            <img src="image/goods.jpg"  class = 'bb'>
            <img src="image/goods.jpg"  class = 'bbb'>
        </div>
    </div>
</body>
</html>
效果

Image 2.png
导航条2 ，图片展示

推荐阅读更多精彩内容
