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

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

如何用CSS进行网页布局

最热最新

夏虫不可语冰冰凉凉

清除浮动clear:both;

查看全部

0 采集收起来源：实践题
2017-06-11
慕仔6397040

http://www.jb51.net/css/173023.html

查看全部

0 采集收起来源：实践题
2017-06-10
大佳 02:33

margin的属性值是上、右、下、左

查看全部

0 采集收起来源：三列布局
2017-06-08
黄修

版式设计是将理性的思维个性化地展示出来。静态的版式设计将永生。

查看全部

0 采集收起来源：内容简介
2017-06-07
慕仔9937816

margin:0 auto

查看全部

0 采集收起来源：编程练习
2017-06-07
Brambling

<style type="text/css"> body{ margin:0; padding:0; font-size:30px; color:#fff;} .top{width:100%;height:100px;background-color:#CCCCCC;} .main{width:100%;height:600px;background-color:red;} .left{ width:200px;height:600px;background-color:blue;float:left;} .right{height:600px;background-color:#9acc99;position:absolute;top:100px;left:210px;right:0;bottom:50px;} .foot{width:100%;height:50px;background-color:#FF6634;} </style>

查看全部

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{width:100%;background:grey;} .main{width:100%;background:red;} .left{position:absolute;background:blue;width:200px;} .right{width:100%;margin:0 0 0 200px;background:green;float:left;} .foot{width:100%;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
慕田峪5295544 04:06

分栏又称为分列，常见的分局分为：一列布局，二列布局，三列布局，混合布局

查看全部

0 采集收起来源：内容简介
2017-06-01
慕哥4891799 02:16

浮动不能满足要求，使用绝对定位，设置坐标

查看全部

0 采集收起来源：三列布局
2017-05-30
慕哥4891799 04:05

分栏，常见的布局分类

查看全部

0 采集收起来源：内容简介
2017-05-30
qqd

混合布局：【清除浮动8种方法：http://www.jb51.net/css/173023.html】 body{ margin:0; padding:0; font-size:30px; font-weight:bold} div{ text-align:center; line-height:50px} .top{ height:100px;background:#9CF} .head,.main{ width:960px; margin:0 auto;} .head{ height:100px; background:#F90} .left{ width:220px; height:600px; background:#ccc; float:left;} .right{ width:740px; height:600px;background:#FCC; float:right} .r_sub_left{ width:540px; height:600px; background:#9C3; float:left} .r_sub_right{ width:200px; height:600px; background:#9FC; float:right;} .footer{ height:50px; background:#9F9; float:none;} </style> </head> <body> <div class="top"> <div class="head">head</div> </div> <div class="main"> <div class="left">left</div> <div class="right"> <div class="r_sub_left">sub_left </div> <div class=" r_sub_right">sub_right </div> </div> </div> <div class="footer">footer</div> </body>

查看全部

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

3列布局的特殊例子：左右固定像素值，中间自适应宽度。【不能再使用浮动，得设置位置：固定】如： .left{wight:200px;height:500px;backgroud:gray;position:absolute;left:0;top:0} .middle{height:500px;backgroud:#999;margin:0 300px 0 200px} .right{wight:300px;height:500px;backgroud:blue;position:absolute;right:0;top:0}

查看全部

0 采集收起来源：三列布局
2017-05-23
qqd

position:absolute和float浮动都会以某种方式将元素从文档的正常流中删除。但不同是：absolute元素会遮挡其他元素，而float不会。参考：http://www.cnblogs.com/chuaWeb/p/html_css_position_float.html

查看全部

0 采集收起来源：评测题目
2017-05-23
qqd

两列布局：【根据百分比设置使宽度自适应】 .left{width:20%;height:500px;float:left;backgroung:gray;} .right{width:80%;height:500px;float:right;backgroung:blue;}

查看全部

0 采集收起来源：二列布局
2017-05-23
qqd

一列布局： .main{width:800px;height:100px;background:gray;maigin:0 auto;}【根据margin的设置居中显示页面内容】

查看全部

0 采集收起来源：一列布局
2017-05-23