CSS实例：图片导航块

2017-10-20 17:55 055李小锐阅读(194) 评论(0) 收藏举报

1.认识CSS的盒子模型。

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

3.实例:

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

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

CSS文件中定义样式
div.img：border,margin,width,float
div.img img：width，height
div.desc：text-align,padding
div.img:hover：borderdiv
.clearfloat：clear

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>img</title>
    <link rel="stylesheet" type="text/css" href="../static/css/T6.css">

</head>
<body>
    <div class="desc" >
        <div class="img" >
            <a href="http://www.gzcc.cn/">
                <img src="http://img1.imgtn.bdimg.com/it/u=236753405,4180705614&fm=27&gp=0.jpg">
            </a>
            <div><a href="http://www.gzcc.cn/">校园风光</a></div>
        </div>

        <div class="img">
            <a href="http://www.gzcc.cn/">
                <img src="http://img0.imgtn.bdimg.com/it/u=1878159448,3960376758&fm=27&gp=0.jpg"></a>
                <div><a href="http://www.gzcc.cn/">精彩时刻</a></div>
        </div>

        <div class="img" class="clearfloat" class="img-hover">
            <a href="http://www.gzcc.cn/">
                <img src="http://img1.imgtn.bdimg.com/it/u=2023026197,2608893258&fm=27&gp=0.jpg"></a>
                <div><a href="http://www.gzcc.cn/">双十一</a></div>
        </div>

        <div class="img">
            <a href="http://www.gzcc.cn/">
                <img src="http://img1.imgtn.bdimg.com/it/u=236753405,4180705614&fm=27&gp=0.jpg"></a>
                <div><a href="http://www.gzcc.cn/">回眸一笑</a></div>
        </div>

        <div class="img">
            <a href="http://www.gzcc.cn/">
                <img src="http://pic.jj20.com/up/allimg/911/0G516013J7/160G5013J7-8.jpg"></a>
                <div><a href="http://www.gzcc.cn/">回眸一笑</a></div>
        </div>
                <div class="img">
            <a href="http://www.gzcc.cn/">
                <img src="http://img2.niutuku.com/1312/0824/0824-niutuku.com-12604.jpg"></a>
                <div><a href="http://www.gzcc.cn/">回眸一笑</a></div>
        </div>
    </div>
　



    <div class="clearfloat">
        <img src="http://img1.imgtn.bdimg.com/it/u=236753405,4180705614&fm=27&gp=0.jpg">
        <img src="http://pic.jj20.com/up/allimg/911/0G516013J7/160G5013J7-8.jpg">
        <img src="http://img1.imgtn.bdimg.com/it/u=2023026197,2608893258&fm=27&gp=0.jpg">
        <img src="http://img1.imgtn.bdimg.com/it/u=236753405,4180705614&fm=27&gp=0.jpg">
        <img src="http://img2.niutuku.com/1312/0824/0824-niutuku.com-12604.jpg">
        <img src="http://img0.imgtn.bdimg.com/it/u=1878159448,3960376758&fm=27&gp=0.jpg">

    </div>
</body>
</html>

        img{
            width: 300px;
        }
       div .img{
            width: 200px;
            border: 1px solid #eeeeee;
            float: left;
            margin: 15px;
        }
        div.img img{
            width: 100%;
            height: auto;
        }
        div.desc{
            text-align: center;
            padding: 15px;
        }
        div.img:hover{
            border: 1px solid #222222;
        }
        .clearfloat{
            clear: both;
        }

刷新页面返回顶部

Mu木

CSS实例：图片导航块

About