2021年2月21日浮动案例

2024-03-06 23:49:32

名词解释

ad 有广告的意思

item项目

本次案例的div制作是12306的广告栏所以div属性class属性值用的是ad_item

margin 外边距

例子 1

margin:10px 5px 15px 20px;

上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px

例子 2

margin:10px 5px 15px;

上外边距是 10px
右外边距和左外边距是 5px
下外边距是 15px

例子 3

margin:10px 5px;

上外边距和下外边距是 10px
右外边距和左外边距是 5px

例子 4

margin:10px;

所有 4 个外边距都是 10px

案例

今天做这个案例在网页中间显示4个图片。

图片大小

在网站上图片大小的尺寸如何更好的和浮动一起运用。

如果img导入图片太大就要让它变小。

img本身拥有宽 width 和高 higth属性，但是图片批量控制的话可以运用style控制器把所有相同尺寸名字的class取成同样的。

超链接

这个案例还给图片加上了超链接，点击图片就可以进入超链接的网站。

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*.ad_item 制作所有div的区域大小*/
            .ad_item{
                width: 590px;
                height: 160px;
                float: left;
                /*border: 1px solid black;*/    
            }
            /*.ad_item img 控制所有图片大小 div和图片大小全部一样后就可以控制div来完成控制图片*/
            .ad_item img{
                width: 590px;
                height: 160px;
            }
            /*.ad控制4个图片的整体位置和大小*/
            .ad{
                /*border: 1px solid black;*/
                width: 1190px;
                height: 340px;
                /*0px代表上下
                 auto是自动左右*/
                margin: 0px auto;
            }
            /*#ad1,#ad3 控制所属id图片的外边距*/
            #ad1,#ad3{
                margin-right:10px;
            }
            /*#ad3,#ad4 控制所属id图片的外边距*/
            #ad3,#ad4{
                margin-top: 20px;
            }
        </style>
    </head>
    <body>
        <!--div class="ad"最外的div控制整体，里面包含4个小div来控制分别每一个图片的位置和大小。-->
        <div class="ad">
            <div id="ad1" class="ad_item" >
                <a href="http://www.baidu.com" target="_blank">
                    <img src="img/abanner01.jpg" />
                </a>
            </div>
            <div id="ad2" class="ad_item">
                <a href="http://www.baidu.com" target="_blank">
                    <img src="img/abanner02.jpg" />
                </a>
            </div>
            <div id="ad3" class="ad_item">
                <a href="http://www.baidu.com" target="_blank">
                    <img src="img/abanner03.jpg" />
                </a>
            </div>
            <div id="ad4" class="ad_item">
                <a href="http://www.baidu.com" target="_blank">
                    <img src="img/abanner04.jpg" />
                </a>
            </div>
        </div>
    </body>
</html>

码农公寓