利用HTML+CSS进行页面布局（div的浮动效果）

什么叫做浮动？？（利用一系列图片来解释什么叫浮动）

我们利用float:left;进行div浮动时，会有一个立体的抽象浮动过程，浮动的div会上向左移，而跟在下面的div会占据第一个div的位置，这个过程就叫做浮动。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>#div1{background: red;width: 100px;height: 100px;}#div2{background: blue;width: 150px;height: 150px;}#div3{background: yellow;width: 200px;height: 200px;}</style></head><body><div id="div1">div1</div><div id="div2">div2</div><div id="div3">div3</div></body>
</html>

/当我们将第一个div布局*向上左浮*时，第二个div布局会向上顶（占领第一个div布局，但是由于第一个div布局向上浮动了，所以会覆盖掉第二个div布局，但其实第二个div布局还是存在的）
/也就是重叠的两层，第一层是第一个div,第二层是第二个div,同时都是靠左靠上！！
#div1{background: red;width: 100px;height: 100px;float:left;}

/第一个div左浮之后，这里设置第二个div左浮；所以第二个div会在第一个div的右边，第三个div会顶在第二个div的位置
#div2{background: red;width: 100px;height: 100px;float:left;}

/第一个div左浮和第二个div左浮之后，设置第三个div左浮；所以第二个div会在第一个div的右边，第三个div会在第二个div的右边；
/最终三个div布局会从上中下变为左中右
#div2{background: red;width: 100px;height: 100px;float:left;}

案例一

利用div制作一个上宽500 高100；下左宽50，下左高400；下右宽450，下右高400的一个页面布局（如下所示）

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>案例1</title><style>#a1{background: red;width: 500px;height: 100px;}#a2{background: blue;width: 50px;height: 400px;float: left;}#a3{background: yellow;width: 450px;height: 400px;float: left;}</style></head><body><div id="a1"> </div><div id="a2"></div><div id="a3"></div></body>
</html>

案例2

利用div制作如下所示的一个页面布局

//这里说一下这个案例实现的方法：
首先我们让1不浮动，将2左浮，然后3左浮，这时如果我们继续让4接着左浮，会出现234在同一行的情况
那么怎么解决呢？？我们可以先用一个div标签（div1）将3和4包裹起来当做一个整体，然后去掉单个的3
和4的浮动。在div1中设置左浮可以让3和4在2的右边，同时3在4的上面，这时我们又会遇到一个问题，这
时的布局会变成1234会出现，而56会消失掉。那么我们有两种方式去解决这个问题方式1：在div1标签的下面，5的上面加一个div标签（div2）<div class="class2">,然后设置.class{clear:both}（清除浮动），5和6就会出现
方式2：利用一个大的div标签div3将234整个包裹起来，设置一个宽高，在这个div3中是不需要设置左浮的，而它内部的浮动234的相对位置的浮动是不会影响div3和156整体的布局。
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>#a1{background: red;width: 800px;height: 80px;}#a2{background: blue;width: 500px;height: 400px;float: left;}#a3{background: yellow;width: 300px;height: 200px;}#a4{background: pink;width: 300px;height: 200px;}#a5{background: green;width: 800px;height: 80px;}#a6{background: orange;width: 800px;height: 80px;}.class1{float: left;}/*.class2{clear: both;}*/.class3{width: 800px;height: 400px;}</style>  </head><body><div id="a1"> </div><div class="class3"><div id="a2"></div><div class="class1"><div id="a3"></div><div id="a4"></div></div></div><!--<div class="class2"></div>--><div id="a5"></div><div id="a6"></div></body>
</html>

案例2总结

把握整体的布局，上述案例就是将整个布局划分成四行，第二行设置浮动使得上下大的两列变成左右两列，然后右大列不进行浮动产生，它内部的上下两行就行成了整体效果

案例3

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>#v1{background: #CC99FF;width: 900px;height: 75px;}.c1{background: red;width: 900px;height: 100px;}#c11{background: #CCFFCC;width: 450px;height: 100px;float: left;}#c12{background: #FFFF99;width: 450px;height: 100px;float: left;}#v2{background: #00FFFF;width: 900px;height: 75px;}.c2{background: yellow;width: 900px;height: 150px;}.c21{background: red;width: 300px;height: 150px;float: left;}#c211{background: #FFCC99;width: 300px;height: 75px;}#c212{background: #FF99CC;width: 300px;height: 75px;}.c22{background: yellow;width: 300px;height: 150px;float: left;}#c221{background: #FF9900;width: 300px;height: 75px;}#c222{background: #CCECFF;width: 300px;height: 75px;}.c23{background: pink;width: 300px;height: 150px;float: left;}#v3{background: #FFFF99;width: 900px;height: 75px;}</style></head><body><div id="v1"></div><div class="c1"><div id="c11"></div><div id="c12"></div></div><div id="v2"></div><div class="c2"><div class="c21"><div id="c211"></div><div id="c212"></div></div><div class="c22"><div id="c221"></div><div id="c222"></div></div><div class="c23"></div></div><div id="v3"></div></body>
</html>

案例4

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>.c1{background: #EEEEEE;width: 980px;height: 136px;}.c2{background: #FF0000;width: 280px;height: 100px;}.c3{background: #0000FF;width: 450px;height: 28px;margin-left: 530px;}.c4{background: #FFC0CB;width: 480px;height: 50px;margin-left: 500px;}.c5{background: #808080;width: 980px;height: 36px;}</style></head><body><div class="c1"><div class="c2"><div class="c3"></div><div class="c4"></div></div><div class="c5"></div></div></body>
</html>

超链接的伪类

1.link 初始化状态
<style>a:link{text-decoration:none;font-size:50px;}
</style>
<a href="#"></a>
2.hover鼠标悬浮状态
3.action访问时的状态
4.visited访问之后的状态（一般不可见）

属性

1. 字体、文本* font-size：字体大小* color：文本颜色* text-align：对其方式* line-height：行高 * font-family：字体* font-style：风格* display：block(显示)  none(隐藏)* visibility：visible(显示) hidden(隐藏)
2. 背景* background：* background-image：url(); /图片背景
3. 边框* border：设置边框，符合属性
4. 尺寸* width：宽度* height：高度

盒子模型

boder-top-style:solid（实线）
boder-top-color:red
boder-top-width:20px
/抽取共性
border-top:solid red 20px;
/继续抽取共性
border:solid red 20px;
/内边距(有自动把盒子撑大的效果（设置盒子内容和边框的距离；相对于外部屏幕的距离不变）)
padding:50px
/外边距（和外部界面的距离以及另外的盒子的距离）
margin:50px
/注意：如果上盒子设置了下外边距，那么当下盒子也设置上边距时不会再出现两盒子直接距离增大的效果
/盒子居中
margin:auto;

利用HTML+CSS进行页面布局（div的浮动效果）相关推荐

div css 登录页面布局,DIV+CSS页面布局
页面布局设计一.三行模式或三列模式特点:把整个页面水平.垂直分成三个区域. 三行模式:将页面分成头部.主体及页脚三部分三列模式:将页面分成左.中.右三个部分在CSS文件里: 1.三行模式代码 ...
使用CSS对页面加载的淡入效果
本文翻译自:Using CSS for fade-in effect on page load Can CSS Transitions be used to allow a text paragrap ...
前端必经之路：CSS页面布局(深入理解浮动布局、定位布局、圣杯布局和双飞翼布局等重要布局方案)
建筑师在对一栋建筑物进行施工之前,首先会根据建筑图纸上的平面图.立体图.剖面图和构造详图等对建筑物进行整体布局后再从局部施工(当然不排除有先装修完厕所再砌卧室围墙的奇葩).在一个网页页面的搭建过程中, ...
css 实现页面加载中等待效果
<!DOCTYPE html> <html> <head> <title>css实现页面加载中,请稍候效果</title><meta ...
01 div实现浮动效果
浮动效果其实在很多的UI组件中都已经实现了,尤其是在很多的卡片组件中都有相应的参数可以进行设置.今天我们主要介绍的是如何自己用原生的css来实现浮动效果. 在div的所有属性中,有一个"bo ...
HTMLCSS--使用CSS完成页面布局及排版（附案例代码）
CSS简介 CSS (Cascading Style Sheets) 层叠样式表,是一个用于修饰文档的语言,可以将文档以更优雅的形式呈现给用户. 在html中引入css 1.将css规则直接填写在st ...
【web前端开发 | CSS】页面布局之盒子模型
思维导图文章目录思维导图 1:边框 2:内边距 3:外边距外边距合并 1. 相邻块元素垂直外边距的合并 2. 嵌套块元素垂直外边距的塌陷所谓盒子模型:就是把 HTML 页面中的布局元素看作是 ...
css后台页面布局效果
CSS浮动+定位参考:实现左边div固定宽度,右边div自适应撑满剩下的宽度的布局方式:https://www.cnblogs.com/yzhihao/p/6513022.html 下面使用的关键就 ...
学习CSS（页面布局篇）
2019独角兽企业重金招聘Python工程师标准>>> ######图文混排 *{clear:both;/*清除浮动*/ } <div><a href=" ...

利用HTML+CSS进行页面布局（div的浮动效果）

什么叫做浮动？？（利用一系列图片来解释什么叫浮动）

案例一

案例2

案例2总结

案例3

案例4

超链接的伪类

属性

盒子模型

利用HTML+CSS进行页面布局（div的浮动效果）相关推荐

最新文章

热门文章