-
布局——版式布局。理性思维的表达； 不同的网站，功能不同，设计侧重不同； 与纸质媒体对比： 网页可以自适应宽度，按百分比计算 网页的长度可以无限延长，高度也可以自适应 头部、主体、底部——主体分栏 分栏：一二三列布局，混合布局 灵活运用浮动和定位查看全部
-
浮动float和绝对定位position：absolute 这2中形式可以让元素脱离标准文档流。查看全部
-
横向2列布局，中间间隔10px查看全部
-
左右固定宽度，中间自适应 .left{ width:200px; height:400px position:absolute;left:0;top:0;} .middle{ height:400px margin:0 200px 0 300px;} .right{ width:300px; height:400px position:absolute;right:0;top:0;}查看全部
-
三列布局 body{ margin:0; padding:0; font-size:30px; font-weight:bold} div{ line-height:50px} .left{ width:200px; height:600px; background:#ccc; 【任务1】float:left; left:0; top:0} .main{ height:600px;margin:0 210px 0 310px; background:#9CF} .right{ height:600px; width:300px; position:absolute; top:0; 【任务3】float:right; background:#FCC;} </style>查看全部
-
//两列布局float左右浮动 <style type="text/css"> body{ margin:0; padding:0; font-size:30px; font-weight:bold} div{ text-align:center; line-height:50px} .main{ width:960px; height:600px; margin:0 auto} .left{ width:300px; height:600px; background:#ccc; 【任务1】float:left;}/*左浮动样式*/ .right{ width:660px; height:600px; background:#FCC; 【任务2】float:right;}/*右浮动样式*/ </style>查看全部
-
水平居中 body{ margin:0; padding:0; font-size:30px} div{ text-align:center; font-weight:bold} .main,.footer{ width:960px; 【任务1】} .head{ width:100%; height:100px; background:#ccc} .main{ height:600px; background:#FCC；margin:0 auto;} .footer{ height:50px; background:#9CF;margin:0 auto;} </style> </head> <body> <div class="head">head</div> <div class="main">main</div> <div class="footer">footer</div> </body>查看全部
-
浮动float和绝对定位position：absolute 这2中形式可以让元素脱离标准文档流。查看全部
-
CSS布局笔记： 1.使用margin:0 auto；使得div居中; 2.使用float为left和right使得两个div处于同一行； 3.使用百分比宽度实现宽度自适应，使用绝对值使得宽度固定； 4.使用position:absolute实现div绝对定位，在三列布局中使得最左和最右绝对定义，中间可自适应； 5.混合布局可使用嵌套的方式，在横向header、main和footer，然后在main中使用两列或三列布局。 6.宽度自适应，左侧固定宽度右侧自适应，父盒子position:relative;左侧子盒子position:absolute;右侧margin-left。查看全部
-
margin:0 auto;(居中对齐)查看全部
-
CSS布局笔记： 1.使用margin:0 auto；使得div居中; 2.使用float为left和right使得两个div处于同一行； 3.使用百分比宽度实现宽度自适应，使用绝对值使得宽度固定； 4.使用position:absolute实现div绝对定位，在三列布局中使得最左和最右绝对定义，中间可自适应； 5.混合布局可使用嵌套的方式，在横向header、main和footer，然后在main中使用两列或三列布局。 6.宽度自适应，左侧固定宽度右侧自适应，父盒子position:relative;左侧子盒子position:absolute;右侧margin-left。查看全部
-
特殊的三列布局：左右固定，中间自适应情况，左右使用绝对定位来实现，中间用margin实现. 三列布局：左侧和右侧固定，中间自适应： 左侧{position：absolute；left:0;top:0} 右侧{position：absolute；top:0；right：0} 中间{margin-left:100px;margin-right:100px;}查看全部
-
CSS布局笔记： 1.使用margin:0 auto；使得div居中; 2.使用float为left和right使得两个div处于同一行； 3.使用百分比宽度实现宽度自适应，使用绝对值使得宽度固定； 4.使用position:absolute实现div绝对定位，在三列布局中使得最左和最右绝对定义，中间可自适应； 5.混合布局可使用嵌套的方式，在横向header、main和footer，然后在main中使用两列或三列布局。 6.宽度自适应，左侧固定宽度右侧自适应，父盒子position:relative;左侧子盒子position:absolute;右侧margin-left。查看全部
-
1)border-collspse:collapse;折叠边框~ 圆角：border-radius：10px；圆角的度数。 border：2px；边框也变成圆角的了。 当元素的位置position：static静态的时候，设置的偏移量对其没有影响~fixed的时候，元素不会随着网页的移动而移动. 2)清除浮动时：I、clear:both; II、float:none float会对其之后的元素产生影响，用clear:both;清除浮动影响. foot使用clear:both可以清除紧挨着它的上面的浮动元素.查看全部
-
用立体的思维理解块状元素的布局 平列 嵌套 叠加查看全部
举报
0/150
提交
取消