模块与浮动

本篇主要介绍HTML的网页模块以及模块的浮动：
首先介绍HTML的模块内容：什么是模块，模块是一个标签div定义的块级元素，它会自动占据一行；怎么建立一个模块呢？运用建立div标签，会在网页建立一个模块；
可以给这个模块定义宽高使模块在一个固定的范围内，在模块中能够插入很多标签，所以可以插入h标签，p标签，div标签，图片等等使div模块内的内容更加丰富，
html中主要是建立网页的内容，使网页能够把内容展示给读者，具体的内容由编者编写，此处举例的代码如下，可以自行运行参考：
<div class="footer">
<h1>迪士尼资讯</h1>
<div>
<div class="footer-left">
<div>
<img src="img/160113121641905797.jpg" alt="图片1"/>
</div>
<div class="footer-left_word">
<h2>上海迪士尼乐园开园在即</h2>
<p>自2016年6月16日，您可以探索一个前所未有的神奇世界，每个人都能在这里点亮心中奇梦。 <i></i></p>
</div>
</div>
<div class="footer-right">
<div class="footer-right_left">
<div>
<img src="img/160321105131828720.jpg" alt="图片2"/>
</div>
<div class="footer-right_word">
<h2>《疯狂动物城》票房突破10亿人民币</h2>
<p>《疯狂动物城》上映第16日登顶中国动画卖座第一，并成为史上首部破10亿动画片。 <i></i></p>
</div>
<div>
<img src="img/160229155948703765.jpg" alt="图片2"/>
</div>
</div>
<div class="footer-right_right">
<div>
<img src="img/160225171114064621.jpg" alt="图片3"/>
</div>
<div class="footer-right_word">
<h2>全球首座迪士尼音乐报时钟楼正式落成</h2>
<p>迪士尼钟楼将与旗舰店一起为上海带来一份奇妙而梦幻的娱乐购物体验。 <i></i></p>
</div>
<div class="footer-right_word">
<h2>《头脑特工队》获得第88届奥斯卡最佳动画长片 </h2>
<p>皮克斯《头脑特工队》获得第88届奥斯卡最佳动画长片！实至名归！<i></i></p>
</div>
</div>
</div>
</div>
</div>

 

css文件的内容是的文件的内容进行渲染，也就是使HTML文件中的进行排列以及设定，使HTML文件内容显示有条理，如网上的网页显示，结构统一多样；
这里主要介绍浮动，什么是浮动？float是css样式中的定位属性，用于设置标签对象（如：div标签盒子、span标签、a标签、em标签等html标签）的浮动布局
，浮动也就是我们所说标签对象浮动居左靠左和浮动居右靠右。就好比两个div标签，直接写入标签它们是上下排列的，要使它们在同一水平排列，就需要使用
浮动，浮动分靠左靠右，所以浮动需要分左右方向，用left就能使两个div模块靠在一个水平线然后排列，所以多个模块的排列需要用float来定义位置，剩下的
各种属性的定义也有不同的作用，这里就不多介绍了，具体的float作用代码如下：
.footer{
text-align: center;
overflow: hidden;
}
.footer h1{
padding: 60px 0 45px 0;
}
.footer-left{
float: left;
}
.footer-right{
float: left;
}
.footer-right_left{
float: left;
}
.footer-right_right{
float: right;
}
.footer-left img{
width: 600px;
height: 475px;
}
.footer-left_word{
width: 600px;
height: 300px;
}
.footer-right img{
width: 300px;
height: 300px;
}
.footer-right_word{
width: 300px;
height: 175px;
}
.footer-left_word h2{
padding: 40px 0 30px 0;
}
.footer-right_word h2{
padding: 30px 0 15px 0;
}
.footer-left_word p{
text-align: left;
font-size: 17px;
}
.footer-right_word p{
width: 270px;
height: 80px;
}
.footer i{
display:inline-block;
width: 22px;
height: 22px;
background: url("img/icon.png");
}
.footer i{
background-position: -40px -171px;
}