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

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

如何用CSS进行网页布局

最热最新

398798008

div居中： {margin:0 auto}

查看全部

0 采集收起来源：一列布局
2016-03-02
事尽人随

三列布局的固定可以用绝对定位来实现，position：absolute《定位和绝对定位》

查看全部

0 采集收起来源：三列布局
2016-03-02
SayHiTo

<!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{width:100%;background:gray;height:100px;} .main{background:red;height:500px;} .left{width:200px;background:blue;height:500px;position:absolute;top:100px;left:0;} .right{background:green;height:500px;margin-left:210px;} .foot{width:100%;background:orange;height:50px;} </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
SayHiTo

<!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{width:100%;background:gray;height:100px;} .main{background:red;height:500px;} .left{width:200px;background:blue;height:500px;float:left;} .right{background:green;height:500px;margin-left:210px;} .foot{width:100%;background:orange;height:50px;} </style> </head> <body> <div class="top">top</div> <div class="main"> <div class="left">left</div> <div class="right">right</div> </div> <div class="foot">foot</div> </body> </html>

查看全部

0 采集收起来源：编程挑战
2018-03-22
郎建伟 02:51

不错不错

查看全部

0 采集收起来源：内容简介
2016-03-02
SayHiTo

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

查看全部

0 采集收起来源：评测题目
2016-03-01
如我这般

恶气大旗网e

查看全部

0 采集收起来源：混合布局
2016-03-01
如我这般

怕呵呵呵

查看全部

0 采集收起来源：三列布局
2016-03-01
龙龙__

清除浮动clear:both

查看全部

0 采集收起来源：实践题
2016-03-01
天然呆汤汤

三列布局：可以用固定的宽度和float,也可以用position:absolute、margin来实现

查看全部

0 采集收起来源：三列布局
2016-03-01
果儿妈妈

布局：又称版式布局，是网页UI设计师将有限的视觉元素进行有机的排列组合。网页：宽度自适应、高度无限制

查看全部

0 采集收起来源：内容简介
2016-03-17
慕桂英2101698

<!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{width:1000px;height:100px;background:gray;} .main{width:1000px;height:600px;background:red;} .left{ width:300px;height:600px;background:blue;float:left;} .right{width:680px;height:600px;background:green;float:right;} .foot{width:1000px;height:50px;background:orange;clear:both;} </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
Linux小鸟

一行文本时，height与line-height的值相同时，文本垂直方向居中

查看全部

0 采集收起来源：一列布局
2016-02-29
未央宫者

现在main中做一个相对定位，然后left做一个绝对定位，当然，left的绝对定位是以main为起点的绝对定位。（自己想的，多多指点）

查看全部

1 采集收起来源：编程挑战
2016-02-29
未央宫者

浮动（float）和绝对定位（position：absolute）可以让文档脱离文档流。

查看全部

0 采集收起来源：评测题目
2016-02-29