CSS实例：图片导航块

时间：2017-10-20 14:36:21 阅读：208 评论：0 收藏：0 [点我收藏+]

标签：fan com clear sheet add 文件中 size ffd char

认识CSS的盒子模型。
CSS选择器的灵活使用。

实例:

图片文字用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：border

div.clearfloat：clear

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cartoon</title>
    <link rel="stylesheet" type="text/css" href="../static/css/202.css">
</head>
<body>
     <div>
         <div class="img">
             <a href="http://www.baidu.com/">
                 <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508477292746&di=b4d222e641b5c06b07c55cd205bba706&imgtype=0&src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20161220%2Fca4c1e06ab854a40bb2590408a7b2f19_th.jpg"></a>
         <div class="desc"><a href="http://www.baidu.com/">小猪佩奇</a></div>
         </div>
     </div>
     <div>
         <div class="img">
             <a href="http://www.baidu.com/">
                 <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508477829747&di=fd07b5cc8dd393392af74d2b90404779&imgtype=0&src=http%3A%2F%2Ffdfs.xmcdn.com%2Fgroup23%2FM06%2F8A%2F7E%2FwKgJL1h52lGCOLCQAAEaqmTeglU035.jpg"></a>
             <div class="desc"><a href="http://www.baidu.com/">托马斯</a></div>
         </div>
     </div>
     <div>
         <div class="img">
             <a href="http://www.baidu.com/">
                 <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508477964743&di=46e94537aabf5867005957b87cd85799&imgtype=0&src=http%3A%2F%2Fcdn.aixifan.com%2Fdotnet%2Fartemis%2Fu%2Fcms%2Fwww%2F201603%2F2615504731cpun6r.jpg"></a>
             <div class="desc"><a href="http://www.baidu.com/">米奇米妮</a></div>
         </div>
     </div>
     <div>
         <div class="img">
             <a href="http://www.baidu.com/">
                 <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508478000480&di=5fe3f1bdcea73b098ec174ea6a7b5f8b&imgtype=0&src=http%3A%2F%2Fd2xosoyzehxi5w.cloudfront.net%2Fwp-content%2Fuploads%2F2014%2F12%2Fteletubbies-sun-baby-jess-smith-3.jpg"></a>
             <div class="desc"><a href="http://www.baidu.com/">天线得得b</a></div>
         </div>
     </div>


     <div class="clearfloat">
         <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508477292746&di=b4d222e641b5c06b07c55cd205bba706&imgtype=0&src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20161220%2Fca4c1e06ab854a40bb2590408a7b2f19_th.jpg">
         <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508477829747&di=fd07b5cc8dd393392af74d2b90404779&imgtype=0&src=http%3A%2F%2Ffdfs.xmcdn.com%2Fgroup23%2FM06%2F8A%2F7E%2FwKgJL1h52lGCOLCQAAEaqmTeglU035.jpg">
         <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508477964743&di=46e94537aabf5867005957b87cd85799&imgtype=0&src=http%3A%2F%2Fcdn.aixifan.com%2Fdotnet%2Fartemis%2Fu%2Fcms%2Fwww%2F201603%2F2615504731cpun6r.jpg">
         <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508478000480&di=5fe3f1bdcea73b098ec174ea6a7b5f8b&imgtype=0&src=http%3A%2F%2Fd2xosoyzehxi5w.cloudfront.net%2Fwp-content%2Fuploads%2F2014%2F12%2Fteletubbies-sun-baby-jess-smith-3.jpg">
     </div>

</body>
</html>

img{
    width: 300px;
    height: 200px;
}
div.img{
    border: 1px solid hotpink;
    width: 200px;
    height: 180px;
    float: left;
    margin: 5px;
}
div.img img{
    width: 100%;
    height: 80%;
}
div.desc{
    text-align: center;
    padding: 5px;
}
div.img:hover{
    border: 2px solid cornflowerblue;
}
.clearfloat{
    clear:both;
}

技术分享

CSS实例：图片导航块

标签：fan com clear sheet add 文件中 size ffd char

原文地址：http://www.cnblogs.com/zsy-97/p/7698748.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行