-
margin:0 auto;是块状元素的居中对齐方式， text-align:center;是内联元素（如，a,img标签)的对齐方式， padding:0;margin:0;是做为初始化页面， 原因是页面在被各个浏览器读取时的理解不同产生不同的展示效果，所以需要清除.查看全部
-
一列布局不适于存放文本，太长容易看走眼 一列布局： 1.通常作为网页头部。固定宽度。 2.真正开发，高度设置自动的。 一列布局通常用于首页； 让div居中：margin:0 auto; 2. 典型单列布局：头部top 主体main 尾部foot 三个<div> 3. 清除默认样式：;body{margin:0;padding:0} 4. margin的顺序是上右下左，那么这里的0表示上方的为0，上方的对应部位也就是下方也为0.同理auto指的是右方，那么对应的左方也为auto。查看全部
-
网页布局：又称版式布局，是网页UI设计师将有限的视觉元素进行有机的排列组合，将理性的思维个性化的表现出来，是一种具有个人艺术特色的视觉传达方式。传达信息的同时有美感。 网页设计特点（相对纸媒来说） 1、网页可以自适应宽度(百分比自适应宽度） 2、网页的长度理论上可以无限延长（高度自适应） 一般是头部，主体，底部。主体一般再根据需要分栏，一般两栏或者三栏，还有可能分为更多的栏目。常见分栏方式：一、二、三、列布局，混合布局。查看全部
-
上面的代码没有给main设置高度，而main里的内容又设置成了浮动，所以footer会跑到head的下面。 解决方法有两个：1.清除浮动， clear:both; 2.为main设置高度， .main{ width:860px;height:600px;margin:0 auto;background:#9FC; }查看全部
-
三列布局中， 想让中间的模块自适应， 我们需要做的第一步是， 将两边布局设置为绝对定位在他们左边和右边 第二步要做的是 ： 将中间的模块步需要设置宽度，还要设置他的左右margin查看全部
-
三列布局 <!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; 【任务1】; position:absolute; left:0; top:0} .main{ height:600px; 【任务2】 background:#9CF; margin:0 310px 0 210px;} .right{ height:600px; width:300px; position:absolute; right:0; top:0; 【任务3】; 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; 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; float:left;}【任务1】}}/*左浮动样式*/ .right{ width:660px; height:600px; background:#ddd; float:right;} 【任务2】}/*右浮动样式*/ </style> </head> <body> <div class="main"> <div class="left">left</div> <div class="right">right</div> </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} 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> </html>查看全部
-
由于main块没有设置高度,里面的元素（left块,right块）又被设置成了浮动显示,所以main块没有被撑开,就像一条线一样紧贴在head块的下面,所以footer块会越位跑到head块下面,故需要“清除浮动” 清除浮动的三种方法： 1、改main的高度或者改footer的外边距 2、加上clear:both; 3、父级div定义 overflow: auto（注意：是父级div也就是这里的 div.top）查看全部
-
float:left right 相对 position: absolute 绝对查看全部
-
<!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{margin:0 auto;height:200px; background:gray;} .main{margin:0 auto;height:600px; background:red;} .left{width:200px;height:600px;position:absolute;left:0;top:200px;background:blue;} .right{width:;height:600px;margin-left:210px;background:green;} .foot{width:100%;background:orange;position:absolute;bottom:0;clear:both;} </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>查看全部
-
top{width:100%;height:100px;background:#ccc;} .main{background:#f00;height:500px;} .left{ width:200px;height:500px;position:absolute;left:0;top:100px;background:blue;} .right{background:#9C9;height:500px;margin-left:210px;} .foot{width:100%;height:50px;background:#F63;clear:both;} </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>查看全部
-
两列布局 1.浮动：布局一般使用层div，这是块级元素，会占用整行。要两列在同一行显示，就需要设置浮动float。 2.宽度：可以设置固定宽度，也可以设置百分比[自适应宽度]，会根据浏览器的宽度变化而变化。 3.浏览器居中：如需居中，可以在两列外面包含一层容器，并设置宽度，使用margin:0 auto水平居查看全部
-
清除浮动：clear:both 居中显示:margin:0 auto 向左浮动：float:left 向右浮动：float:right查看全部
-
添加position:absolute;left:0;top:0;显示使left绝对定位向左。 添加margin:0 310px 0 210px;不添加width，使宽度自适应。左右宽度添加10px使与左右间隔10px空位。 添加position:absolute;right:0;top:0;显示使right绝对定位向右.查看全部
举报
0/150
提交
取消