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

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

如何用CSS进行网页布局

最热最新

裤头瑞

float:left;text-align:left浮动：左；文本对齐：左 float:right;text-align:right浮动：右；文本对齐：右

查看全部

0 采集收起来源：编程练习
2016-08-14
裤头瑞

相对定位（position：relative），不可以脱离文本流

查看全部

0 采集收起来源：评测题目
2016-08-14
MaxTan

三列布局，左边和右边固定，中间自适应： .left{width:200px;height:500pxbackground:#ccc;position:absolute;left:0;top:0;} .middle{height:500pxbackground:#999;margin:0 300px 0 200px} .left{width:200px;height:500pxbackground:#ddd;position:absolute;right:0;top:0;}

查看全部

0 采集收起来源：三列布局
2016-08-13
MaxTan

margin:0 auto实现居中0是代表上下，auto是代表左右

查看全部

0 采集收起来源：一列布局
2016-08-13
柯妮的浮云

方法二：三列布局方法clone。 <!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;background:#ccc;} .main{height:500px;background:red;} .left{width:200px;height:500px;background:blue;position:absolute;left:0;top:100px} .right{height:500px;background:green;margin:0 0 0 210px} .foot{height:50px;background:#f63} </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
柯妮的浮云

<!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;background:#ccc;} .main{height:500px;background:red;} .left{width:200px;height:500px;background:blue;float:left} .right{width:80%;height:500px;background:green;float:right} .foot{height:50px;background:#f63;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
qq_慕斯9291570 02:25

混合布局

查看全部

0 采集收起来源：混合布局
2016-08-11
qq_慕斯9291570 02:33

左右定宽的三列布局

查看全部

0 采集收起来源：三列布局
2016-08-11
qq_慕斯9291570 00:37

三列布局

查看全部

0 采集收起来源：三列布局
2016-08-11
qq_慕斯9291570 02:29

固定宽度的二列布局

查看全部

0 采集收起来源：二列布局
2016-08-11
qq_慕斯9291570 01:46

自适应二列布局

查看全部

0 采集收起来源：二列布局
2016-08-11
qq_慕斯9291570 03:25

一列布局

查看全部

0 采集收起来源：一列布局
2016-08-11
嘟嘟的啦

也可以使用CSS表格布局实现~

查看全部

0 采集收起来源：编程练习
2016-08-11
慕粉3794940

kjh

查看全部

0 采集收起来源：内容简介
2016-08-11
程序猿6225

实践题之混合布局。

查看全部

0 采集收起来源：实践题
2016-08-11

首页上一页 102 103 104 105 106 107 108 下一页尾页

0/150

提交

取消

该课程已下架

课程须知: 1.你需要掌握html+css样式基础知识 2.有一定的前端实际开发经验

老师告诉你能学到什么？: 1.掌握网页布局的相关知识 2.能对不同的网页进行布局结构划分 3.掌握固定宽度和自适应宽度的实现方法

微信扫码，参与3人拼团

热搜

最近搜索清空

如何用CSS进行网页布局