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

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

如何用CSS进行网页布局

最热最新

耸耸

<!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} div{ text-align:center; font-weight:bold} .main,.footer{ width:960px;margin:0 auto } .head{ width:100%; height:100px; background:#ccc} .main{ height:600px; background:#FCC; margin:0 auto} .footer{ height:50px; background:#9CF} </style> </head> <body> <div class="head">head</div> <div class="main">main</div> <div class="footer">footer</div> </body> </html>

查看全部

0 采集收起来源：编程练习
2018-03-22
墨遥4328677

margin后面如果只有两个参数的话，第一个表示top和bottom，第二个表示left和right 因为0 auto，表示上下边界为0，左右则根据宽度自适应相同值（即居中）

查看全部

1 采集收起来源：一列布局
2016-11-05
墨遥4328677

一列布局：通常作为网站首页，比如百度。适合单行文字。不适合多行文字。

查看全部

0 采集收起来源：一列布局
2016-11-05
墨遥4328677

如何用css 进行网页布局？百度首页很简单；新浪是门户网站，主要图片文字。布局又称为板式布局，将网页UI设计师将优先的视觉元素进行有机排列组合。比如淘宝，主要为展示商品。网页布局主要延续纸媒的技巧。但有区别。1、网页宽度可以自适应宽度。2、理论上长度可以无限延长。高度可以根据内容自适应。常见网页布局，头部，主体，底部。主题再根据需要分栏，有一二三栏，也即是一列二列三列布局。更多是混合布局。前端就是用技术手段，通过css的浮动，定位实现布局。艺术和技术融合的完美岗位。

查看全部

1 采集收起来源：内容简介
2016-11-05
_吾念_0

垂直居中 margin:0 auto

查看全部

1 采集收起来源：一列布局
2016-11-05
_吾念_0

清除默认样式： body{margin:0;padding:0}

查看全部

1 采集收起来源：一列布局
2016-11-05
dragon8896

兼容IE6不能用浮动，而且当子元素要设定为absolute的时候，父元素要设定relative才可以。要右侧自适应，则左侧应该定宽并且position：absolute。加载顺序先右后左div的顺序为先右后左

查看全部

0 采集收起来源：编程挑战
2016-11-04
qq_白衣君_03139377

因为main包含的块全都设置了浮动，而浮动和绝对定位会使块脱离标准文档流，但是head仍在文档流中所以foot会忽略main的所有块而贴着head块方法1： .main{ width:860px;height:600px;margin:0 auto;background:#9FC;} 方法2：.footer{ height:50px; background:#9F9; margin:600px 0 0 0;} 方法3：.footer{width:100%; height:50px; background:#9F9; position:absolute;top:700px;}

查看全部

0 采集收起来源：实践题
2016-11-04
慕粉4287973

顶部跟底部宽度自适应就是不用定宽度。浏览器自动适应。

查看全部

0 采集收起来源：编程挑战
2016-11-04
封子清风 04:18

常见布局

查看全部

0 采集收起来源：内容简介
2016-11-04
小太阳ni呵护

文档流：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 浮动（float）和绝对定位（position：absolute）-->脱离文档流脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用position：absolute脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。有三种情况使得元素离开文档流而存在，分别是浮动绝对布局固定定位

查看全部

1 采集收起来源：评测题目
2018-03-22
慕田峪8118283

margin:0 auto 居中 float:left 向左浮动向右浮动同理

查看全部

1 采集收起来源：混合布局
2016-11-03
慕田峪8118283

left{widrh:30%;height:600px; background:#ccc;} 左浮动样式文本占页面30%并且靠左。

查看全部

0 采集收起来源：编程练习
2016-11-02
慕田峪8118283

{**************** ；margin:0 auto} 使内容水平居中

查看全部

0 采集收起来源：编程练习
2016-11-02
超杰2 01:26

布局

查看全部

0 采集收起来源：混合布局
2016-11-01