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

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

如何用CSS进行网页布局

最热最新

而今才道當時错

1、顶部和底部宽度自适应一般将其设置宽度为百分比,例如width:100% 2、多列中，其中一列需要宽度自适应，不需要加宽度（width）。只需要设置margin值 3、块的加载顺序由HTML代码编写顺序决定

查看全部

0 采集收起来源：编程挑战
2016-05-09
qq_PureBLACK_13313525

float 和 position absolute可以让元素脱离文档流

查看全部

0 采集收起来源：评测题目
2016-05-09
而今才道當時错

三列布局

查看全部

0 采集收起来源：编程练习
2016-05-09
而今才道當時错 04:11

常见布局

查看全部

0 采集收起来源：内容简介
2016-05-09
陌上花开15

自己操作

查看全部

0 采集收起来源：一列布局
2016-05-09
巴黎的猫

float 和 position absolute可以让元素脱离文档流

查看全部

0 采集收起来源：评测题目
2016-05-09
巴黎的猫

1.一列布局不适于存放文本，太长容易看走眼一列布局： 1.通常作为网页头部。固定宽度。 2.真正开发，高度设置自动的。两列布局自适应，使用百分比。

查看全部

0 采集收起来源：一列布局
2016-05-08
紙張A

三列布局

查看全部

0 采集收起来源：编程练习
2016-05-08
不想自己是谁

margin：0上下方向的auto左右方向的

查看全部

0 采集收起来源：一列布局
2016-05-08
指甲盖

clear:both;清除浮动

查看全部

0 采集收起来源：实践题
2016-05-08
Jay康

<!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} .top{background:#ccc;height:60px;} .main{background:red;height:500px;position:relative;} .left{width:200px;position:absolute;top:0;left:0;background:blue;height:100%;} .right{margin-left:210px;background:rgb(154,204,153);height:100%;} .foot{height:60px;background:rgb(255,102,52);} </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
Jay康

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br> <html xmlns="http://www.w3.org/1999/xhtml"><br> <head><br> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br> <title>混合布局编程挑战</title><br> <style type="text/css"><br> body{ margin:0; padding:0; font-size:30px; color:#fff}<br> .top{height:100px;background:#ccc;}<br> .main{height:800px;background:red;}<br> .left{width:200px;height:800px;background:blue;position:absolute;top:100px;left:0;}<br> .right{height:800px;background:#0c6;margin-left:210px;}<br> .foot{height:50px;background:#f90;}<br> </style><br> <br> </head><br> <br> <body><br> <div class="top">top</div><br> <div class="main"><br> <div class="right">right</div><br> <div class="left">left</div><br> </div><br> <div class="foot">foot</div><br> <br> </body><br> </html>

查看全部

0 采集收起来源：编程挑战
2018-03-22
Jay康

浮动（float）和绝对定位（position:abdsolute）：让元素脱离文档流。

查看全部

0 采集收起来源：评测题目
2016-05-08
Jay康

元素在文本流中会占用空间，脱离文本流以后，会在z轴的另外一层显示，原先的空间被其他元素占据。

查看全部

0 采集收起来源：评测题目
2016-05-08
Kait

<!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} .top{height:100px;margin:0 auto;background:#ccc;} .main{height:800px; width:600px;background:#ff0000;margin:0 auto;} .right{float:right;height:800px;width:66%;background:#00ff00;} .left{float:left; height:800px; width:33%;background:#0000ff;} .foot{height:50px;background:#ff8000;} </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