-
修修改改就这样查看全部
-
添加text-align:center;使div在浏览器中水平居中； 添加float:left;使div向左浮动； 添加float:right;使div向右浮动； 添加clear:both;清除浮动；查看全部
-
添加position:absolute;left:0;top:0;显示使left绝对定位向左。 添加margin:0 310px 0 210px;不添加width，使宽度自适应。左右宽度添加10px使与左右间隔10px空位。 添加position:absolute;right:0;top:0;显示使right绝对定位向右.查看全部
-
混合布局查看全部
-
margin 的顺序上右下左查看全部
-
div 居中，可增加属性 margin:0 auto查看全部
-
<!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{width:100%;background:grey;} .main{width:100%;background:red;position:relative;} .left{position:absolute;left:0;top:0;background:blue;width:200px;} .right{margin:0 0 0 200px;background:green;} .foot{width:100%;background:orange;} </style> </head> <body> <div class="top">top</div> <div class="main"> <div class="right">设计首页的第一步是设计版面布局。就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局。 虽然动态网页技术的发展使得我们开始趋向于学习场景编剧，但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的，你可以领会要点，举一反三。</div> <div class="left">left</div> </div> <div class="foot">foot</div> </body> </html>查看全部
-
三列布局中栏自适应。左栏有相对定位靠左边，有栏绝对定位靠右边，中栏自适应宽度，左右margin撑开查看全部
-
要给模块设置高度，因为是右侧先加载，左侧后加载，所以给左侧设置个浮动，另外要对foot设置清除浮动，（紧跟left后面受到影响）查看全部
-
固定宽度的两列布局：添加一个包裹层，使包裹层居中，两列进行浮动，并设置宽度查看全部
-
三列布局：左右各设置绝对定位 中间自适应查看全部
-
单列布局重要的是居中的实现：margin：0 auto查看全部
-
overflow：hidden作用：1 溢出隐藏 2 清除浮动（清除对父元素的影响） clear：both；用在紧邻浮动元素来清除浮动影响 本题还可以通过设置main的高度来消除对footer的影响查看全部
-
上面的代码没有给main设置高度，而main里的内容又设置成了浮动，所以footer会跑到head的下面。 解决方法有两个：1.清除浮动， clear:both; 2.为main设置高度， .main{ width:860px;height:600px;margin:0 auto;background:#9FC; }查看全部
-
两列布局，通过嵌套，设定两列的总体宽度或者高度，再通过百分比来自定义每列的宽度。查看全部
举报
0/150
提交
取消