首页 > 其他分享> 文章详细

2021年2月21日浮动案例

2021-02-21 17:32:04 阅读：149 来源： 互联网

标签：浮动 21 item 2021 5px 10px 外边 margin ad

名词解释

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>

标签：浮动,21,item,2021,5px,10px,外边,margin,ad
来源： https://www.cnblogs.com/tallish/p/14426545.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9