-
清除浮动 clear:both查看全部
-
1.请补充右侧编辑器的任务1，使left部分绝对定位； 2.请补充右侧编辑器的任务2，使main水平居中在浏览器中央，并且与左右div有10px的间距 3.请补充右侧编辑器的任务3，使right定位在右侧 .left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0} .main{ height:600px; margin:0 310px 0 210px; background:#9CF} .right{ height:600px; width:300px; right:0;top:0; position:absolute; background:#FCC;}查看全部
-
三栏布局 左右两侧固定，中间自适应 时 左右两侧采用绝对定位 left{position:absolute; left:0; top:0;} right{position:absolute; right:0; top:0;} 中间利用margin与两侧分离，如 左侧width:200px 右侧width:300px 则 middle{margin:0 300px 0 200px;}查看全部
-
display属性常用的有：inline;block;inline-block;查看全部
-
inline元素（span\font\a\em\b）是不支持宽、高属性的.查看全部
-
自适应的两列布局用的很少，比较常用是固定宽度的两列布局。查看全部
-
前段工程师就是将艺术和技术完美融合的一个岗位。查看全部
-
分栏又称为分列，常见的布局有：一列布局，两列布局，三列布局，最常用的是混合布局。查看全部
-
布局，又称版式布局。是网页UI设计师将有限的视觉元素进行有机的排列组合.查看全部
-
三列布局 <!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; font-weight:bold} div{ line-height:50px} .left{ width:200px; height:600px; background:#ccc;position:absolute; left:0; top:0} .main{ height:600px; margin:0 310 0 210; background:#9CF} .right{ height:600px; width:300px; position:absolute; top:0; position:absolute;right 0; background:#FCC;} </style> </head> <body> <div class="left">left</div> <div class="main">设计首页的第一步是设计版面布局。就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局。 虽然动态网页技术的发展使得我们开始趋向于学习场景编剧，但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的，你可以领会要点，举一反三。</div> <div class="right">right</div> </body> </html>查看全部
-
<!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:50px; background:#ccc;} .main{margin:0 auto; background:red; height:700px;position:relative;} .left{ width:200px;height:700px;background:#0000FE;position:absolute; left:0px; top:0px;} .right{height:700px; background:#9ACC99;margin:0px 0px 0px 210px;} .foot{height:50px; background:#FF6634;} </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>查看全部
-
网页布局其实就是块与块之间的关系： 紧挨、嵌套、叠加 紧挨：float 嵌套：父子关系 叠加：z-index。查看全部
-
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>混合布局训练</title> <style type="text/css"> body{margin: 0;padding: 0;font-weight: bold;} .top{height:100px;background: #ccc;} .main{background: red;overflow: hidden;} .left{width: 200px;height:500px;background: blue;float: left;} .right{background: #9c9;height:500px;margin-left:210px;} .foot{height:50px;background: #F63} </style> </head> <body> <div class="top">top</div> <div class="main"> <div class="left">left</div> <div class="right">right</div> </div> <div class="foot">foot</div> </body> </html>查看全部
-
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试清除浮动-父元素设置overflow:hidden</title> <style type="text/css"> .divcss5{ width:400px;border:1px solid #F00;background:#FF0;margin: 0 auto; overflow: hidden;}/*父元素增加了overflow: hidden;*/ .divcss5-left,.divcss5-right{width:180px;height:100px; border:1px solid #00F;background:#FFF} .divcss5-left{ float:left} .divcss5-right{ float:right} </style> </head> <!-- 一个盒子里使用了CSS float浮动属性，导致父级对象盒子不能被撑开，这样CSS float浮动就产生了 浮动的负作用：1、父元素背景不能显示 2、父元素边框不能撑开 3、父元素的margin padding设置值不能正确显示 清除浮动的三种方法：1、对父级设置适合CSS高度，这种前提是父对象内容高度要能确定并能计算好。 2、增加一个div，设置clear:both 3、父级div定义 overflow:hidden 这三种方法，推荐后两种 --> <body> <div class="divcss5"> <div class="divcss5-left">left浮动</div> <div class="divcss5-right">right浮动</div> </div> </body> </html>查看全部
-
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试清除浮动-增加子元素设置clear:both</title> <style type="text/css"> .divcss5{ width:400px;border:1px solid #F00;background:#FF0;margin: 0 auto;} .divcss5-left,.divcss5-right{width:180px;height:100px; border:1px solid #00F;background:#FFF} .divcss5-left{ float:left} .divcss5-right{ float:right} .clear{clear: both;}/*增加一个div，设置clear:both;*/ </style> </head> <!-- 一个盒子里使用了CSS float浮动属性，导致父级对象盒子不能被撑开，这样CSS float浮动就产生了 浮动的负作用：1、父元素背景不能显示 2、父元素边框不能撑开 3、父元素的margin padding设置值不能正确显示 清除浮动的三种方法：1、对父级设置适合CSS高度，这种前提是父对象内容高度要能确定并能计算好。 2、增加一个div，设置clear:both 3、父级div定义 overflow:hidden 这三种方法，推荐后两种 --> <body> <div class="divcss5"> <div class="divcss5-left">left浮动</div> <div class="divcss5-right">right浮动</div> <div class="clear"></div> </div> </body> </html>查看全部
举报
0/150
提交
取消