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

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

如何用CSS进行网页布局

最热最新

13weibo_Debbie

清除浮动的方式：1.使用空标签清除，即空标签可以是div标签，也可以是p标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动，并为其定义CSS代码：clear:both。此方法的弊端在于增加了无意义的结构元素。如：.clear{clear:both}...<div class="clear"></div>... 2.使用overflow属性。此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性：overflow:auto，即可！也可以用overflow:hidden；”zoom:1″用于兼容IE6，也可以用width:100%。 3.使用after伪对象清除浮动。该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；二、content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值设为”.”，但我发现为空亦是可以的。

查看全部

0 采集收起来源：实践题
2018-03-22
Summer012345

三列布局中间自适应，固定两边(绝对定位、左右停靠)，中间设置左右margin值

查看全部

0 采集收起来源：三列布局
2016-04-11
13weibo_Debbie

css设置中，浮动（float）和绝对定位（position：absolute）可以让元素脱离文档流

查看全部

0 采集收起来源：评测题目
2016-04-11
iWeekend

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

查看全部

0 采集收起来源：实践题
2016-04-10
13weibo_Debbie

div{width:800px;height:500px;margin:0 auto}实现顶宽元素居中的方法。

查看全部

0 采集收起来源：练习题
2016-04-10
13weibo_Debbie

网页的特点：自适应界面的宽度；理论上能无限延长。<br> 分栏布局（分列）：一列，两列，三列和混合布局（一列头部，几列内容，可以有底部）前端工程师需要用CSS的浮动和定位完成UI的设计。

查看全部

1 采集收起来源：内容简介
2018-03-22
慕沐9188976

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

查看全部

0 采集收起来源：实践题
2016-04-10
朋友4

清除浮动clear:both;

查看全部

0 采集收起来源：实践题
2016-04-10
慕九州7623568

<!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; color:#fff;margin:0 auto;} .top{width:800px;height:200px;background:#00f;margin:0 auto;} .main{width:800px;height:700px;background:#ff0;position:relative;margin:0 auto;} .left{ width:190px;height:700px;background:#f0f;float:left;} .right{width:600px;height:700px;background:#0ff;float:right;} .foot{width:800px;height:100px;background:#00f;margin:0 auto;} </style> </head> <body> <div class="top">top</div> <div class="main"> <div class="right">right</div> <div class="left">left</div> </div> <div class="foot">foot</div> </body> </html>

查看全部

0 采集收起来源：编程挑战
2018-03-22
肖磊同学 02:05

margin代表上下。auto代表左右

查看全部

0 采集收起来源：一列布局
2016-04-10
qq_在迷宫_0

网页布局实质是块与块之间的位置，块挨着块，块嵌套块，块叠着块

查看全部

0 采集收起来源：混合布局
2016-04-09
慕前端6236565

文档流：将窗口自上而下分成一行一行，并在每行中按从左至右的依次排放元素，即为文档流。浮动和绝对定位可以让元素脱离文挡流。

查看全部

0 采集收起来源：评测题目
2016-04-09
慕前端6236565

<!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; 【任务1】} .head{ width:100%; height:100px; background:#ccc} .main{ height:600px; background:#FCC;margin:0 auto;} .footer{ height:50px; background:#9CF;margin:0 auto;} </style> </head> <body> <div class="head">head</div> <div class="main">main</div> <div class="footer">footer</div> </body> </html>

查看全部

0 采集收起来源：编程练习
2018-03-22
慕前端6236565

一列布局：如百度首页，不宜放置多行文字，简洁清晰为主

查看全部

0 采集收起来源：一列布局
2016-04-09
慕前端6236565

前端工程师：是一个将艺术与技术融合为一体的门职业

查看全部

0 采集收起来源：一列布局
2016-04-09