网页头部区域的CSS练习--PHP培训第十期线上班

根据昨天所学试着写了下一个网页的头部区域，感觉在书写和代码熟悉上差的还是太多，有些效果不知道用什么属性写，明天再多看看视频回播。

运行后的效果如下：

所用的图片素材来源于课件作业图片，使用PS切图得到：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php中文网</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        a {
            text-decoration: none;
        }
        .header {
            padding: 30px 0;
            height: 100px;
            box-sizing:border-box;
        }
        .w1200 {
            width: 1200px;
            margin: 0 auto;
        }
        .left {
            float: left;
        }
        .right {
            float: right;
        }
        .logo {
            width: 530px;
            float: left;
        }
        .search {
            width: 360px;
            height: 35px;
            float: left;
            border: 1px solid #cccccc;
            border-radius: 10px;
        }
        .search img {
            float: right;
            padding-right: 10px;
        }
        .liks_pic {
            width: 300px;
        }
        .liks_pic img {
            margin-left: 10px;
        }
        .main_nav {
            height: 40px;
            position: relative;
        }
         .nav {
            width: 280px;
             float: left;
             margin-right: 20px;
        }
        .pic {
            float: left;
            border-right: 1px solid #cccccc;
        }
        .nav_img {
            width: 42px;
            float: left;
        }
        .zd {
            width: 40px;
            float: left;
            margin-left: 5px;
        }
        .links a {
            margin-left: 10px;
        }
        .banner {
            margin-top: 20px;
        }
    </style>
</head>
<body>
<header class="header w1200">
<div class="logo">
    <img src="images/logo.jpg" alt="PHP中文网">
</div>
    <div class="search">
        <img src="images/search.jpg" alt="搜索">
    </div>
    <div class="liks_pic right">
        <img src="images/ico01.jpg" alt="">
        <img src="images/ico2.jpg" alt="">
        <img src="images/ico3.jpg" alt="">
        <img src="images/ico4.jpg" alt="">
        <img src="images/ico5.jpg" alt="">
        <img src="images/ico6.jpg" alt="">
    </div>
</header>
<div class="main_nav w1200">
    <div class="nav">
        <div class="pic">
            <div class="nav_img">
                <img src="images/php1.jpg" alt="">
            </div>
            <div class="zd">
                <a>资讯</a>
                <a>学习</a>
            </div>
        </div>
        <div class="links">
            <a href="">器材</a>
            <a href="">大师</a>
            <a href="">学院</a>
            <a href="">实战</a>
            <a href="">大赛</a>
            <a href="">裤子</a>
            <a href="">影视</a>
            <a href="">其它</a>
        </div>
    </div>
    <div class="nav">
        <div class="pic">
            <div class="nav_img">
                <img src="images/php1.jpg" alt="">
            </div>
            <div class="zd">
                <a>资讯</a>
                <a>学习</a>
            </div>
        </div>
        <div class="links">
            <a href="">器材</a>
            <a href="">大师</a>
            <a href="">学院</a>
            <a href="">实战</a>
            <a href="">大赛</a>
            <a href="">裤子</a>
            <a href="">影视</a>
            <a href="">其它</a>
        </div>
    </div>
    <div class="nav">
        <div class="pic">
            <div class="nav_img">
                <img src="images/php1.jpg" alt="">
            </div>
            <div class="zd">
                <a>资讯</a>
                <a>学习</a>
            </div>
        </div>
        <div class="links">
            <a href="">器材</a>
            <a href="">大师</a>
            <a href="">学院</a>
            <a href="">实战</a>
            <a href="">大赛</a>
            <a href="">裤子</a>
            <a href="">影视</a>
            <a href="">其它</a>
        </div>
    </div>
    <div class="nav">
        <div class="pic">
            <div class="nav_img">
                <img src="images/php1.jpg" alt="">
            </div>
            <div class="zd">
                <a>资讯</a>
                <a>学习</a>
            </div>
        </div>
        <div class="links">
            <a href="">器材</a>
            <a href="">大师</a>
            <a href="">学院</a>
            <a href="">实战</a>
            <a href="">大赛</a>
            <a href="">裤子</a>
            <a href="">影视</a>
            <a href="">其它</a>
        </div>
    </div>
</div>
<div class="banner w1200">
    <div class="left">
        <img src="images/ads01.jpg" alt="单反广告">
    </div>
    <div class="right">
        <img src="images/ads02.jpg" alt="美女">
    </div>
</div>
</body>
</html>

上面写的代码在布局及CSS属性上自己感觉不是太理想，会存在老师课上说的后期修改某个元素后可能导致页面错位等问题，但由于是第一次写，对这些东西不是太熟悉，大致的效果已经达到，后期再多多看下视频复习，争取能够快速写出好的代码。

相关文章