CSS实例：图片导航块

最新推荐文章于 2022-07-21 11:15:02 发布

小Y黑豆

最新推荐文章于 2022-07-21 11:15:02 发布

阅读量108

点赞数

本文链接：https://blog.csdn.net/qq_35219823/article/details/88402585

版权

CSS实例：图片导航块

1.认识CSS的盒子模型。

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

3.实例:

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

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

c.CSS文件中定义样式

a)div.img：border,margin,width,float

b)div.img img：width，height

c)div.desc：text-align,padding

d)div.img:hover：border

e)div.clearfloat：clear

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>维尼熊</title>
    <link rel="stylesheet" type="text/css" href="../static/10/20.css">
</head>
<body>

    <div>
        <div class="img">
            <a href="https://baike.so.com/doc/6087123-6300228.html">
                <img src="http://img3.imgtn.bdimg.com/it/u=2952099289,2636148822&fm=27&gp=0.jpg" ></a>
          <div><a href="https://baike.so.com/doc/6087123-6300228.html">维尼简介</a></div>
        </div>
    <div>
        <div class="img">
            <a href="https://baike.so.com/doc/4326998-4531580.html">
              <img src="http://img5.imgtn.bdimg.com/it/u=3265926973,368480266&fm=27&gp=0.jpg"></a>
            <div><a href="https://baike.so.com/doc/4326998-4531580.html">维尼与蜂蜜</a></div></div>
    <div>
        <div class="img">
            <a href="http://wenda.so.com/q/1364865961066962?src=150">
              <img src="http://img0.imgtn.bdimg.com/it/u=3802820512,3386344086&fm=27&gp=0.jpg";></a>
            <div><a href="http://wenda.so.com/q/1364865961066962?src=150">维尼的朋友</a></div></div>
    <div>
        <div class="img">
            <a href="http://mp.weixin.qq.com/s?__biz=MzIzMDE5NzAyNg%3D%3D&idx=1&mid=2655984055&sn=2fc1652e208cd62fe87dc070a137cfea">
              <img src="http://img0.imgtn.bdimg.com/it/u=2964627407,3833983721&fm=27&gp=0.jpg"></a>
            <div><a href="http://mp.weixin.qq.com/s?__biz=MzIzMDE5NzAyNg%3D%3D&idx=1&mid=2655984055&sn=2fc1652e208cd62fe87dc070a137cfea">维尼日常</a></div></div>


    <div class="clearfloat">
     <img src="http://img3.imgtn.bdimg.com/it/u=2952099289,2636148822&fm=27&gp=0.jpg">
     <img src="http://img5.imgtn.bdimg.com/it/u=3265926973,368480266&fm=27&gp=0.jpg">
     <img src="http://img0.imgtn.bdimg.com/it/u=3802820512,3386344086&fm=27&gp=0.jpg">
      <img src="http://img0.imgtn.bdimg.com/it/u=2964627407,3833983721&fm=27&gp=0.jpg">
    </div>
</body>
</html>

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

posted @ 2017-10-20 13:53 林丹宜阅读( ...) 评论( ...) 编辑收藏

小Y黑豆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS实例：图片导航块

CSS实例：图片导航块 1.认识CSS的盒子模型。2.CSS选择器的灵活使用。3.实例: a.图片文字用div等元素布局形成HTML文件。 b.新建相应CSS文件，并link到html文件中。 c.CSS文件中定义样式 a)div.img：border,margin,width,float b)div.img ...
复制链接

扫一扫