-
.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; position:absolute; top:0; right:0; background:#FCC;} </style> </head> <body> <div class="left">left</div> <div class="main">设计首页的第一步是设计版面布局。就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局。 虽然动态网页技术的发展使得我们开始趋向于学习场景编剧，但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的，你可以领会要点，举一反三。</div> <div class="right">right</div> </body>查看全部
-
任务1. 整体宽度自适应, 无需设置宽度, 或者设置成100% 任务2. left块的宽度为200px, 中间又有10px的间距, 所以right设置margin-left为210px 任务3. 样式从上往下加载, 写在前面的先加载, 所以html代码里面,right块写在left块前面即可 任务4. 兼容ie6, 不能用float, 只能先设置父元素main为相对定位, 然后再设置子元素left和main为绝对定位,并设置他们的具体位置查看全部
-
清楚浮动: clear:both查看全部
-
CSS: 浮动+定位, 完成UI布局查看全部
-
flost查看全部
-
不太会查看全部
-
固定宽度的元素排成一行时用float，存在自适应宽度元素的若干元素排成一行时用position。查看全部
-
三列布局： 首先设置左右浮动为绝对定位，同时设置其width值，再设置其中间部分的margin值。查看全部
-
二列布局： 先为左右浮动块定义一个父元素，将该父元素通过margin:0 auto;设为居中对齐，在设置左右浮动块的宽度。查看全部
-
绝对定位，靠在左侧，上 position:absolute;left:0;top:0查看全部
-
相对定位（position：relative），不可以脱离文本流查看全部
-
float:left;浮动到左侧查看全部
-
margin 0 auto 水平居中查看全部
-
分栏又称分列，常见的布局分为：一列布局、两列布局、三列布局查看全部
-
margin：0 auto使div水平居中，0表示垂直方向上的，auto表示左右方向的。查看全部
举报
0/150
提交
取消