CSS实例：图片导航块

1.认识CSS的 盒子模型。

2.CSS选择器的灵活使用。

3.实例:

 1.图片文字用div等元素布局形成HTML文件。

 2.新建相应CSS文件，并link到html文件中。

CSS文件中定义样式

    1.div.img：border,margin,width,float
    2.div.img img：width，height
    1. 3.div.desc：text-align,padding
    3. 4.
    4. div.img:hover：border
    6. 5.
  • div.clearfloat：clear
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>img</title>
    <link rel="stylesheet" type="text/css" href="11.css">

</head>
<body>


    <div>
        <div class="img">
            <a href="https://www.baidu.com/">
                <img src="http://t10.baidu.com/it/u=1976396238,3943718676&fm=173&s=9CA96E968AB192D653BBE2A70300F04B&w=450&h=300&img.JPEG"></a>
            <div class="desc"><a href="https://www.baidu.com/">太阳黑子</a></div>
            </div>

         <div class="img">
            <a href="https://www.baidu.com/">
              <img src="http://t12.baidu.com/it/u=2803532951,3854146957&fm=173&s=64E29E478EE83B241190119B0300C092&w=450&h=300&img.JPEG"></a>
            <div class="desc"><a href="https://www.baidu.com/">潘多拉星云</a></div>
            </div>

    <div class="img">
            <a href="https://www.baidu.com/">
              <img src="http://t12.baidu.com/it/u=3417015302,4078450304&fm=173&s=E55C10C3CA73061F996135880300E091&w=450&h=300&img.JPEG"></a>
            <div class="desc"><a href="https://www.baidu.com/">地球</a></div>
            </div>

       <div class="img">
            <a href="https://www.baidu.com/">
             <img src="http://t11.baidu.com/it/u=760305112,479378904&fm=173&s=6941A3446BAB93664ED1500F0000E0C0&w=450&h=300&img.JPEG"></a>
            <div class="desc"><a href="https://www.baidu.com/">蝴蝶星云</a></div>
            </div>
    </div>

<div class="clearfloat">
       <img src="http://t10.baidu.com/it/u=1976396238,3943718676&fm=173&s=9CA96E968AB192D653BBE2A70300F04B&w=450&h=300&img.JPEG">
       <img src="http://t12.baidu.com/it/u=2803532951,3854146957&fm=173&s=64E29E478EE83B241190119B0300C092&w=450&h=300&img.JPEG">
       <img src="http://t12.baidu.com/it/u=3417015302,4078450304&fm=173&s=E55C10C3CA73061F996135880300E091&w=450&h=300&img.JPEG">
       <img src="http://t11.baidu.com/it/u=760305112,479378904&fm=173&s=6941A3446BAB93664ED1500F0000E0C0&w=450&h=300&img.JPEG">
</div>



</body>
</html>
img{
        width: 185px;
     }
    div.img{
        border: 1px solid #cccccc;
        width: 180px;
        float:left;
        margin:5px;
    }
    div.img img{
        width: 100%;
        height: auto;
    }
    div.desc{
        text-align: center;
        padding: 5px;
    }
    div.img:hover{
        border: 1px solid #777777;
    }
    .clearfloat{
        clear: both;
    }

 

posted @ 2017-10-20 17:42  062许立帅  阅读(173)  评论(0)    收藏  举报