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

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

如何用CSS进行网页布局

最热最新

杜若清欢

三列布局之左右固定中间自适应左右绝对定位position：absolute；width值，left/right=0 中间自适应使用margin：顺时针顺序

查看全部

0 采集收起来源：编程练习
2018-02-09
W小武

第1章内容简介网页布局：又称版式布局，是网页UI设计师将有限的视觉元素进行有机的排列组合，将理性的思维个性化的表现出来，是一种具有个人艺术特色的视觉传达方式。传达信息的同时有美感。网页设计特点（相对纸媒来说） 1、网页可以自适应宽度(百分比自适应宽度） 2、网页的长度理论上可以无限延长（高度自适应）一般是头部，主体，底部。主体一般再根据需要分栏，一般两栏或者三栏，还有可能分为更多的栏目。常见分栏方式：一、二、三、列布局，混合布局。布局通过浮动和定位来完成(实现ui界面效果）

查看全部

0 采集收起来源：内容简介
2018-02-07
Moon沐

固定宽度的元素排成一行时用float，存在自适应宽度元素的若干元素排成一行时用position。

查看全部

0 采集收起来源：编程挑战
2018-02-05
JUANLI

margin:0 auto margin外边界，上面含义：上下边界为0，左右居中auto

查看全部

0 采集收起来源：编程练习
2018-02-05
osirisyll

float浮动对文本元素排版影响 https://www.jianshu.com/p/cc6c3d3c8544

查看全部

0 采集收起来源：实践题
2018-02-02
osirisyll

在foot里面清除浮动 clear:both

查看全部

0 采集收起来源：实践题
2018-02-02
慕仔4062798

混合布局 1、宽度自适应：不设置宽度； 2、样式加载：样式按从上往下排序，写在前面的先加载； 3、兼容ie6：不能用浮动float，只能先设置父元素main为相对定位relative作为参照定位，后设置其子元素(right、left)为绝对定位absolute，并设置其具体位置

查看全部

0 采集收起来源：编程挑战
2018-01-30
无尾猴

position:fixed、position:absolute：提升了一层高度（1层），脱离了文档流 float：提升了半层高度（0.5层），没有脱离文档流 position：relative：没有提升高度（0层高度），没有脱离文档流

查看全部

0 采集收起来源：评测题目
2018-01-30
奋斗的bu

<!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:#ccc;} .main{width:100%;height:500px;background:red;margin:0 auto;} .left{ width:29%;height:500px;background:blue;float:left;} .right{width:70%;height:500px;background:#9C9;float:right;} .foot{width:100%;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
奋斗的bu

<!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:#ccc;} .main{background:red;} .left{ width:200px;height:500px;background:blue;position:absolute;top:35px} .right{margin-left:210px;height:500px;background:#9C9;} .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
Dear果冻儿

0129

查看全部

0 采集收起来源：编程练习
2018-01-29
幕布斯0246692

body{ margin:0; padding:0; font-size:30px; color:#fff} .top{width:100%;height:100px;background:#ccc;} .main{width:100%;height:600px;background:red;position: relative;} .left{width:200px;height:600px;background:blue;position: absolute;left: 0;top: 0;} .right{height:600px;background:#a3db82;position: absolute;margin-left:210px;width: 100%;} .foot{width:100%;height:50px;background:#dd7d50;}

查看全部

0 采集收起来源：编程挑战
2018-01-26
Mrkamil

1、右侧元素可以脱离文档流的有浮动和绝对定位

查看全部

0 采集收起来源：评测题目
2018-01-25
Captain109 02:36

三列布局中，有一列是自适应宽度时，无法使用浮动时三列都在一行现实，这时需要对固定宽度的列使用绝对定位，再给自适应宽度列增加左右margin值。

查看全部

0 采集收起来源：三列布局
2018-01-24
Captain109 02:31

一列布局水平居中使用margin: 0 auto;

查看全部

0 采集收起来源：一列布局
2018-01-24