-
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试清除浮动</title> <style type="text/css"> .divcss5{ width:400px;border:1px solid #F00;background:#FF0;margin: 0 auto;height:102px} .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>查看全部
-
由于main块没有设置高度,里面的元素（left块,right块）又被设置成了浮动显示,这样就脱离了文档流，所以main块没有被撑开,就像一条线一样紧贴在head块的下面,所以footer块就会跑上去到head块下面。 清除浮动有两种做法：1 没撑开的元素设置：overflow:hidden; 2 跑上去的元素设置clear:both;查看全部
-
网页布局其实就是块与块之间的关系： 紧挨、嵌套、叠加 紧挨：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-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; position:absolute;margin:0 310px 0 210px; background:#9CF} .right{ height:600px; width:300px; right:0px; top:0; position:absolute; background:#Fcc;} </style> </head> <body> <div class="left">left</div> <div class="main">设计首页的第一步是设计版面布局。就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局。 虽然动态网页技术的发展使得我们开始趋向于学习场景编剧，但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的，你可以领会要点，举一反三。</div> <div class="right">right</div> </body> </html>查看全部
-
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三列布局布局2-左右固定宽度，中间自适应</title> <style type="text/css"> body{ margin: 0; padding: 0; } div{ height: 600px; } .left{ width: 200px; background: #ccc; position: absolute; left: 0px; } .middle{ background: pink; position: absolute; margin: 0 310px 0 210px; } .right{ width: 300px; background: #004; position: absolute; right: 0px; } </style> </head> <!--三列左右固定宽度，中间需要自适应宽度，三列全部使用absolute; 左边left0，右边right0；中间margin上下0 margin-left=左边的宽度 margin-right=右边的宽度--> <body> <div class="left"></div> <div class="middle">在 JavaScript 文件中生成标签让内容变得更难查找，更难编辑，性能更差。应该尽量避免这种情况的出现。 使用两个空格的 soft tabs — 这是保证代码在各种环境下显示一致的唯一方式。 使用组合选择器时，保持每个独立的选择器占用一行。 为了代码的易读性，在每个声明的左括号前增加一个空格。 声明块的右括号应该另起一行。 每条声明 : 后应该插入一个空格。 每条声明应该只占用一行来保证错误报告更加准确。 所有声明应该以分号结尾。虽然最后一条声明后的分号是可选的，但是如果没有</div> <div class="right"></div> </body> </html>查看全部
-
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三列自适应宽度布局1-默认写法</title> <style type="text/css"> div{ width: 33.33%; height: 600px; float: left; } .left{ background: #ccc; } .middle{ background: pink; } .right{ background: #004; } </style> </head> <!--默认写法可用于多列布局，所有列的宽度使用百分比，加起来是100%即可--> <body> <div class="left"></div> <div class="middle"></div> <div class="right"></div> </body> </html>查看全部
-
<!-- 两列布局一般是左右个区域div，外层有一个div，外层div居中，里面左右div分别占一定的宽度。 --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试两列布局：左右，类似于splite</title> <style type="text/css"> body{ margin: 0; padding: 0; } .main{ width: 800px; margin: 0 auto; } .left{ float: left; background: #ccc; width: 20%; height: 600px; } .right{ background: pink; width: 80%; height: 600px; } </style> </head> <body> <div class="main"> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>查看全部
-
<!doctype html> <html lang="en"> <head> <meta 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} .footer{ height:50px; background:#9CF} </style> </head> <!--一列布局一般作为网页首页，分为上中下三部分 注意：注释不要写在最上面标准前面，会打破标准，影响居中效果最好放在body前面--> <body> <div class="head">head</div> <div class="main">main</div> <div class="footer">footer</div> </body> </html>查看全部
-
<!--一列布局一般作为网页首页，分为上中下三部分--> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>一列布局</title> <style type="text/css"> body{ margin: 0; padding: 0; } .top{ height: 100px; background: blue; text-align: center; } .main{ width: 800px; background: #ccc; margin: 0 auto; text-align: center; } .foot{ width: 800px; height: 100px; background: red; margin: 0 auto; } </style> </head> <body> <div class="top">这里一般是登陆用户名密码等区域</div> <div class="main">内容区域不定高度，有滚动条，但是横向一般固定宽度<br />内容区域不定高度，有滚动条，但是横向一般固定宽度<br /> 内容区域不定高度，有滚动条，但是横向一般固定宽度<br /> 内容区域不定高度，有滚动条，但是横向一般固定宽度<br /> 内容区域不定高度，有滚动条，但是横向一般固定宽度<br /> 内容区域不定高度，有滚动条，但是横向一般固定宽度<br /> 内容区域不定高度，有滚动条，但是横向一般固定宽度<br /> 内容区域不定高度，有滚动条，但是横向一般固定宽度<br /> 内容区域不定高度，有滚动条，但是横向一般固定宽度<br /> 内容区域不定高度，有滚动条，但是横向一般固定宽度<br /> 内容区域不定高度，有滚动条，但是横向一般固定宽度<br /> 内容区域不定高度，有滚动条，但是横向一般固定宽度<br /></div> <div class="foot">这里一般是网站许可等内容的区域</div> </body> </html>查看全部
-
不知道为何不能设置main的宽度不能自动居中，设置之后就会使right不能自适应，而像这样设置main的外边距时right就能自适应查看全部
-
margin(0,auto)前面代表垂直（上下），后面代表水平（左右）。auto代表居中的意思 .main{width:800px;height:300px;background:#ccc;margin:0 auto;}查看全部
-
布局：网页UI设计师将有限的视觉元素进行有机排列的组合。 网页设计的特点：（纸媒和新媒体的异同出发）1：网页宽度可变，打破纸媒页面限制。2：头+内容主体（根据需要分栏）+页脚（不重要的内容） 常见布局：一列布局，两列布局，三列布局，混合布局 前端工程师：用技术将艺术设计呈现出来查看全部
-
div{margin:0 auto;}居中查看全部
-
开始时body{ margin:0px; padding:0px; }查看全部
举报
0/150
提交
取消