作业16——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>BIUBIUBIU</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div>
        <div class="img">
            <a href="https://baike.so.com/doc/5040370-5267074.html"><img src="http://pic1.win4000.com/wallpaper/e/53e18dbb02abb.jpg"></a>
            <div class="desc"><a href="https://baike.so.com/doc/5040370-5267074.html">2222</a></div>
        </div>
        <div class="img">
            <a href="https://www.zhihu.com/question/30454189">
                <img src="http://attachments.gfan.com/forum/attachments2/201410/31/000920jl0jdq270le88d9r.jpg">
            </a>
            <div class="desc"><a href="https://www.zhihu.com/question/30454189">3333</a></div>
        </div>
        <div class="img">
            <a href="http://image.so.com/i?src=360pic_strong&z=1&i=2&cmg=5fa9918b43bdd880a720ad048811374f&q=猫">
                <img src="http://attachments.gfan.com/forum/201503/18/213547yy3u5muo8v3j3r6f.jpg"></a>
            <div class="desc"><a href="http://image.so.com/i?src=360pic_strong&z=1&i=2&cmg=5fa9918b43bdd880a720ad048811374f&q=猫">4444</a></div>
        </div>
    </div>
    <br>
    <div class="clearfloat">
        <img src="http://pic1.win4000.com/wallpaper/e/53e18dbb02abb.jpg"><br>
        <img src="http://attachments.gfan.com/forum/attachments2/201410/31/000920jl0jdq270le88d9r.jpg"><br>
        <img src="http://attachments.gfan.com/forum/201503/18/213547yy3u5muo8v3j3r6f.jpg"><br>
    </div>
</body>
</html>

 

posted @ 2017-10-20 13:07  lililililililli  阅读(271)  评论(0)  编辑  收藏  举报