CSS实例：图片导航块

  1. 认识CSS的 盒子模型。
  2. CSS选择器的灵活使用。
  3. 实例:
    1. 图片文字用div等元素布局形成HTML文件。
    2. 新建相应CSS文件，并link到html文件中。
    3. CSS文件中定义样式
      1. div.img：border,margin,width,float
      2. div.img img：width，height
      3. div.desc：text-align,padding
      4. div.img:hover：border
      5. div.clearfloat：clear 
        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动漫</title>
    <link  rel="stylesheet" type="text/css" href="../static/css/1020.css">
</head>
<body>
    <div>
        <div class="img">
            <a href="https://www.baidu.com/s?wd=%E5%A4%A9%E7%A9%BA%E4%B9%8B%E5%9F%8E&ie=utf-8&rsv_op=LcRK8Y78WfN2RSc73d2bITZUYNNTaYNaWTSf1QSKJTKXNOObaV2cZR68PgaYKM6MbIhfaMfXVP7Q53Y20b79YK402a56W0c2&tn=78040160_34_pg&ch=2&rsv_op=b7VTPZ6aLY8KMI62ObWaLN6PLSVfbSfZQ9VV5bSJJVT62XT6113UKQOdYdM80UdRfc5fOZSXKbI5JZ29QIhNO1fdPXOYII2U">
                <img src="http://p3.so.qhmsg.com/bdr/_240_/t01b295a369995356b8.jpg"></a>
            <div class="desc"><a href="https://www.baidu.com/s?wd=%E5%A4%A9%E7%A9%BA%E4%B9%8B%E5%9F%8E&ie=utf-8&rsv_op=LcRK8Y78WfN2RSc73d2bITZUYNNTaYNaWTSf1QSKJTKXNOObaV2cZR68PgaYKM6MbIhfaMfXVP7Q53Y20b79YK402a56W0c2&tn=78040160_34_pg&ch=2&rsv_op=b7VTPZ6aLY8KMI62ObWaLN6PLSVfbSfZQ9VV5bSJJVT62XT6113UKQOdYdM80UdRfc5fOZSXKbI5JZ29QIhNO1fdPXOYII2U">天空之城</a></div>
        </div>
        <div class="img">
            <a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&ch=2&tn=78040160_34_pg&wd=%E4%BD%A0%E7%9A%84%E5%90%8D%E5%AD%97&oq=%25E5%25A4%25A9%25E7%25A9%25BA%25E4%25B9%258B%25E5%259F%258E&rsv_pq=96260c9800009576&rsv_t=63da9sbz77i%2FxPleJ4eZn1geODmtnTSrEQ6QGrmJzCXNa1KIYpMdjDx%2B2br2utaWdo8JC9I&rqlang=cn&rsv_enter=1&rsv_sug3=6&rsv_sug1=5&rsv_sug7=100&bs=%E5%A4%A9%E7%A9%BA%E4%B9%8B%E5%9F%8E">
                <img src="http://p2.so.qhimgs1.com/bdr/_240_/t01add8634ab9c7f592.jpg"></a>
            <div class="desc"><a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&ch=2&tn=78040160_34_pg&wd=%E4%BD%A0%E7%9A%84%E5%90%8D%E5%AD%97&oq=%25E5%25A4%25A9%25E7%25A9%25BA%25E4%25B9%258B%25E5%259F%258E&rsv_pq=96260c9800009576&rsv_t=63da9sbz77i%2FxPleJ4eZn1geODmtnTSrEQ6QGrmJzCXNa1KIYpMdjDx%2B2br2utaWdo8JC9I&rqlang=cn&rsv_enter=1&rsv_sug3=6&rsv_sug1=5&rsv_sug7=100&bs=%E5%A4%A9%E7%A9%BA%E4%B9%8B%E5%9F%8E">你的名字</a></div>
        </div>
        <div class="img">
            <a href="https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&ch=2&tn=78040160_34_pg&wd=%E5%9C%B0%E6%B5%B7%E6%88%98%E8%AE%B0&oq=%25E4%25BD%25A0%25E7%259A%2584%25E5%2590%258D%25E5%25AD%2597&rsv_pq=d4dd2d3700009223&rsv_t=773cDBYwbIUIqyFOJ%2B8ab5atQi9MmD5Bvpv2eHkw64HgSeusxKOo5ANhW1kN1fySzSSw8Qc&rqlang=cn&rsv_enter=0&inputT=6226&rsv_sug3=21&rsv_sug1=18&rsv_sug7=100&bs=%E4%BD%A0%E7%9A%84%E5%90%8D%E5%AD%97">
                <img src="http://p1.so.qhimgs1.com/bdr/_240_/t017740ad1e1c86f6ed.jpg"></a>
            <div class="desc"><a href="https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&ch=2&tn=78040160_34_pg&wd=%E5%9C%B0%E6%B5%B7%E6%88%98%E8%AE%B0&oq=%25E4%25BD%25A0%25E7%259A%2584%25E5%2590%258D%25E5%25AD%2597&rsv_pq=d4dd2d3700009223&rsv_t=773cDBYwbIUIqyFOJ%2B8ab5atQi9MmD5Bvpv2eHkw64HgSeusxKOo5ANhW1kN1fySzSSw8Qc&rqlang=cn&rsv_enter=0&inputT=6226&rsv_sug3=21&rsv_sug1=18&rsv_sug7=100&bs=%E4%BD%A0%E7%9A%84%E5%90%8D%E5%AD%97">地海战记</a></div>
        </div>
        <div class="img">
            <a href="https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&ch=2&tn=78040160_34_pg&wd=%E5%8D%83%E4%B8%8E%E5%8D%83%E5%AF%BB&oq=%25E5%259C%25B0%25E6%25B5%25B7%25E6%2588%2598%25E8%25AE%25B0&rsv_pq=d3f388710000975a&rsv_t=9475Gn244%2FzJIJiDeAqE0liTDBV7iwcLf%2BPCEVio28IC8zcOW%2FcqBJZ3pfh110gYpYVmjMk&rqlang=cn&rsv_enter=0&inputT=11138&rsv_sug3=53&rsv_sug1=49&rsv_sug7=100&bs=%E5%9C%B0%E6%B5%B7%E6%88%98%E8%AE%B0">
                <img src="http://p3.so.qhimgs1.com/bdr/_240_/t0115fcb4a40caee333.jpg"></a>
            <div class="desc"><a href="https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&ch=2&tn=78040160_34_pg&wd=%E5%8D%83%E4%B8%8E%E5%8D%83%E5%AF%BB&oq=%25E5%259C%25B0%25E6%25B5%25B7%25E6%2588%2598%25E8%25AE%25B0&rsv_pq=d3f388710000975a&rsv_t=9475Gn244%2FzJIJiDeAqE0liTDBV7iwcLf%2BPCEVio28IC8zcOW%2FcqBJZ3pfh110gYpYVmjMk&rqlang=cn&rsv_enter=0&inputT=11138&rsv_sug3=53&rsv_sug1=49&rsv_sug7=100&bs=%E5%9C%B0%E6%B5%B7%E6%88%98%E8%AE%B0">千与千寻</a></div>
        </div>
    </div>

    <div class="clearfloat">
        <div class="img">
            <a href="https://www.so.com/s?ie=utf-8&src=hao_360so_suggest_b&shb=1&hsid=5f8903d02f0ca2b9&q=%E6%9A%97%E6%9D%80%E6%95%99%E5%AE%A4">
                <img src="http://p1.so.qhimgs1.com/bdr/_240_/t011d8c1057cdb51dcd.jpg"></a>
            <div class="desc"><a href="https://www.so.com/s?ie=utf-8&src=hao_360so_suggest_b&shb=1&hsid=5f8903d02f0ca2b9&q=%E6%9A%97%E6%9D%80%E6%95%99%E5%AE%A4">暗杀教室</a></div>
        </div>
        <div class="img">
            <a href="https://www.so.com/s?q=%E8%A8%80%E5%8F%B6%E4%B9%8B%E5%BA%AD&src=srp_suggst_d&fr=hao_360so_suggest_b&psid=06c11754747e90899c536c284af23bab&eci=739ae9987e0d4625&nlpv=suggest_d">
                <img src="http://p5.so.qhimgs1.com/bdr/_240_/t01b99e37b588f122cb.jpg"></a>
            <div class="desc"><a href="https://www.so.com/s?q=%E8%A8%80%E5%8F%B6%E4%B9%8B%E5%BA%AD&src=srp_suggst_d&fr=hao_360so_suggest_b&psid=06c11754747e90899c536c284af23bab&eci=739ae9987e0d4625&nlpv=suggest_d">言叶之庭</a></div>
        </div>
        <div class="img">
            <a href="https://www.so.com/s?ie=utf-8&src=hao_360so_suggest_b&shb=1&hsid=5f8903d02f0ca2b9&q=another%E5%8A%A8%E6%BC%AB">
                <img src="http://p1.so.qhimgs1.com/bdr/_240_/t016ba3e0f787425c6d.jpg"></a>
            <div class="desc"><a href="https://www.so.com/s?ie=utf-8&src=hao_360so_suggest_b&shb=1&hsid=5f8903d02f0ca2b9&q=another%E5%8A%A8%E6%BC%AB">ANOTHER</a></div>
        </div>
        <div class="img">
            <a href="https://www.so.com/s?ie=utf-8&src=hao_360so_suggest_b&shb=1&hsid=5f8903d02f0ca2b9&q=%E5%A3%B0%E4%B9%8B%E5%BD%A2">
                <img src="http://p3.so.qhimgs1.com/bdr/_240_/t01524134f45cdf4303.jpg"></a>
            <div class="desc"><a href="https://www.so.com/s?ie=utf-8&src=hao_360so_suggest_b&shb=1&hsid=5f8903d02f0ca2b9&q=%E5%A3%B0%E4%B9%8B%E5%BD%A2">声之形</a></div>
        </div>
    </div>
</body>
</html>
        img{
    width:200px;
}
.img{
    border: 1px solid #eeeeee;
    width: 180px;
    float:left;
    margin:10px;
}
.img img{
    width:100%;
    height: auto;
}
.desc{
    text-align: center;
    padding: 10px;
}
img.hover{
    border: 1px solid#777777;
}
.clearfloat{
    clear: both;
}

         

         

         

         

posted on 2017-10-20 13:32  106洪瑜  阅读(467)  评论(0)  编辑  收藏  举报