如何用CSS进行网页布局_学习笔记

首页免费课如何用CSS进行网页布局笔记

如何用CSS进行网页布局

最热最新

郑瑞发

清楚浮动有两种方法： clear:both; //清除两边元素的浮动对他的影响 overflow: hidden; // 用在浮动元素本身清除对父元素的影响

查看全部

0 采集收起来源：实践题
2016-01-20
馨湘逸

文档流：将窗口自上而下分成一行一行，并在每行中按从左至右的依次排放元素，即为文档流。有三种情况使得元素离开文档流而存在，分别是浮动绝对布局固定定位

查看全部

0 采集收起来源：评测题目
2016-01-19
馨湘逸

2列自适应，用百分比来确定高和宽~~

查看全部

0 采集收起来源：二列布局
2016-01-19
qq_犯其至难图其致远_0 02:06

网页设计特点

查看全部

0 采集收起来源：内容简介
2016-01-19
吾令其而相愚 01:48

浮动float left right width 20% 80%

查看全部

0 采集收起来源：二列布局
2016-01-19
Sunshine22

清除浮动有两种方法：1.clear:both 2.overflow:hidden

查看全部

0 采集收起来源：实践题
2016-01-19
FanTasy_HB

清除浮动有两种方法：1.clear:both 2.overflow:hidden

查看全部

0 采集收起来源：实践题
2016-01-17
莪会好好笑

清除浮动有两种方法：1.clear:both 2.overflow:hidden(常见为隐藏溢出的功能)

查看全部

0 采集收起来源：混合布局
2016-01-17
莪会好好笑

<title>混合布局</title> <style><br> body{ margin:0; padding:0; font-size:30px; font-weight:bold}<br> div{ text-align:center; line-height:50px}<br> .top{ height:100px;background:#9CF}<br> .head,.main{ width:960px; margin:0 auto;}<br> .head{ height:100px; background:#F90}<br> .left{ width:220px; height:600px; background:#ccc; float:left;}<br> .right{ width:740px; height:600px;background:#FCC; float:right}<br> .r_sub_left{ width:540px; height:600px; background:#9C3; float:left}<br> .r_sub_right{ width:200px; height:600px; background:#9FC; float:right;}<br> .footer{ height:50px; background:#9F9; clear:both }<br> </style> </head> <body><br> <div class="top"><br> <div class="head">head</div><br> </div><br> <div class="main"><br> <div class="left">left</div><br> <div class="right"><br> <div class="r_sub_left">sub_left<br> </div><br> <div class=" r_sub_right">sub_right<br> </div><br> </div><br> </div><br> <div class="footer">footer</div><br> </body>

查看全部

0 采集收起来源：实践题
2018-03-22
Koeng 04:03

常见布局

查看全部

0 采集收起来源：内容简介
2016-01-17
莪会好好笑

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>一列布局</title> <style type="text/css"> body{ margin:0; padding:0; font-size:30px} div{ text-align:center; font-weight:bold} .main,.footer{ width:960px; margin:0 auto;} .head{ width:100%; height:100px; background:#ccc} .main{ height:600px; background:#FCC} .footer{ height:50px; background:#9CF} </style> </head> <body> <div class="head">head</div> <div class="main">main</div> <div class="footer">footer</div> </body> </html>

查看全部

0 采集收起来源：编程练习
2018-03-22
莪会好好笑

margin:0 auto;定宽块状元素水平居中对齐，margin左右为auto

查看全部

0 采集收起来源：练习题
2016-01-17
胖子文 02:36

三列布局：中间可以不给宽度样式，来个左右边距，宽度便会根据父级的宽度变化而变化。（w = 父亲w - 左右外边距）;

查看全部

0 采集收起来源：三列布局
2016-01-17
i920hua

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>三列布局</title> <style type="text/css"> body{ margin:0; padding:0; font-size:30px; font-weight:bold} div{ line-height:50px} .left{ width:200px; height:600px; background:#ccc; position:absolute;left:0; top:0} .main{ height:600px; margin:0 310px 0 210px; background:#9CF} .right{ height:600px; width:300px; position:absolute; top:0; right:0; background:#FCC;} </style> </head>

查看全部

0 采集收起来源：编程练习
2018-03-22
烜烜

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。作者：张秋怡链接：https://www.zhihu.com/question/24529373/answer/29135021 来源：知乎脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。

查看全部

0 采集收起来源：编程练习
2016-01-15