首页 爱情文章 亲情文章 友情文章 生活随笔 校园文章 经典文章 人生哲理 励志文章 搞笑文章 心情日记
  • 爱情文章
  • 亲情文章
  • 友情文章
  • 生活随笔
  • 校园文章
  • 经典文章
  • 人生哲理
  • 励志文章
  • 搞笑文章
  • 心情日记
  • 英语文章
  • 范文大全
  • 作文大全
  • 新闻阅读
    •
    当前位置: 山茶花美文网 > 爱情文章 > 正文

    八种创建等高列布局 cad布局怎么创建视口

    时间：2018-08-11来源：山茶花美文网 本文已影响 人 山茶花美文网手机站

    高度相等列在Web页面设计中永远是一个网页设计师的需求。如果所有列都有相同的背景色，高度相等还是不相等都无关紧要，因为你只要在这些列的父元素中设置一个背景色就可以了。但是，如果一个或多个列需要单独设置自己的背景色，那么它的视觉完整性的设计就显得非常重要了。大家都知道当初Table实现等高列布局是多么的简单，但是我们使用CSS来创建等高列布局并非是那么容易的事情。

    如果一个设计是固定宽度（非流体的宽度设计），那么实现多列等高效果是相当的容易。最好的技术就是使用Dan Cederholm的Faux Columns技术。只要制作一张合适的背景图片，在你多列的父元素中进行垂直铺放，从而达到一种假像（假的多列等高布局效果）。但是在流体布局中要用CSS实现多列等高的设计那就不是那么容易的事情，因为我们没有办法在使用背景图片来实现多列等高的假像了，那么是不是就没有办法实现了呢？那当然不是那么回事了，不管是实现固定布局还是流体布局的等多列等高视觉效果，方法还是蛮多的，这些方法体现了CSS的不同技术，也各有千秋，下面我们就一起来探讨Web页面中的多列等高的实现技术。

    下面要介绍的方法都是让我们的布局如何实现多列的等高视觉效果，正如下图所示：

    八种创建等高列布局1

    一、假等高列

    这种方法是我们实现等高列最早使用的一种方法，就是使用背景图片，在列的父元素上使用这个背景图进行Y轴的铺放，从而实现一种等高列的假像：

    Html Markup

    				<div class=”container clearfix”>
					<div class=”left”></div>
					<div  class=”content”></div>
					<div class=”right”></div>
				</div>

    在制作样式之前需要一张类似下面的背景图：

    八种创建等高列布局2

    CSS Code:

    				.container {
					background: url("column.png") repeat-y;
					width: 960px;
					margin: 0 auto;
					}
					.left {
					float: left;
					width: 220px;
					}
					.content {
					float: left;
					width: 480px;
					}
					.right {
					float:left;
					width: 220px;
					}

    优点：

    实现方法简单，兼容性强，不需要太多的css样式就可以轻松实现。

    缺点：

    使用这种方法不适合流体布局等高列的布局，另外如果你需要更换背景色或实现其他列数的等高列时，都需要重新制作过背景图。

    二、给容器div使用单独的背景色（固定布局）

    这种方法实现有点复杂，如果你理解其实现过程也是相当的简单。这种方法我们主要给每一列的背景设在单独的<div>元素上。这种方法的实现的原则是：任何<div>元素的最大高度来撑大其他的<div>容器高度。如下图所示：

    八种创建等高列布局3

    上图中，不管我们哪一列的高度最高，那么其三个容器“rightBack,contentBack,leftBack”的高度相应会随最高列的高列变化，下面我们一起来看其实现过程：

    Html Markup

    							<div class="container">
								<div class="rightWrap">
									<div class="contentWrap">
										<div class="leftWrap">
											<div class="aside column leftSidebar" id="left"></div>
											<div id="content" class="column section"></div>

											<div class="aside rightSidebat column" id="right"></div>
										</div>
									</div>
								</div>
							</div>

    CSS Code:

    							<style type="text/css">
								.container {
									width: 960px;
									margin: 0 auto;
								}
								.rightWrap {
									width: 100%;
									float: left;
									background: green;
									overflow: hidden;
									position: relative;
								}
								
								.contentWrap {
									float: left;
									background: orange;
									width: 100%;
									position: relative;
									right: 320px;/*此值等于rightSidebar的宽度*/
								}
								
								.leftWrap{
									width: 100%;
									background: lime;
									float:left;
									position: relative;
									right: 420px;/*此值等于Content的宽度*/
								}
								#left {
									float: left;
									width: 220px;
									overflow: hidden;
									position: relative;
									left: 740px;
								}
								#content {
									float: left;
									width: 420px;
									overflow: hidden;
									position:relative;
									left: 740px;
								}
								#right {
									float: left;
									overflow: hidden;
									width: 320px;
									position: #333;
									position: relative;
									left: 740px;
								}
							</style>

    看起来蛮复杂吧？其实你只要了解了它是如何的工作原理就会变得非常简单，你只要理解并掌握以下几点：

    1. “div.rightWrap”、“div.contentWrap”、“div.leftWrap”都是一个封闭的容器；而“div#left”、“div#content”、“div#right”就是我们所说的列，里面放了内容；
    2. 每一个容器对应一列的背景色（用来放置背景色或背景图片）；此例对应的是：“div.rgithWrap”用来实现“div#right”列的背景色；“div.contentWrap”用来实现“div#content”列的背景色；“div.leftWrap”用来实现“div#left”列的背景色；
    3. 除了最外面的容器（也就是对应的最左列容器）外，我都都对他们进行相对定位，并且设置其“right”值，此值并和相对应的列宽相等。此例中“div.contentWrap”对应的刚好是“div#right”的宽度；而“div.leftWrap”对应用的刚好是“div#content”的宽度；
    4. 给每列进行左浮动，并设置其列宽
    5. 给每一列设置相对定位，并进行“left”设置，而且“left”的值等于除第一列的所有列宽的和。此例中“left”的值等于“div#right”和“div#content”两列的宽度之和，也就是320px+420=740px
    • 八种创建等高列布局 cad布局怎么创建视口 相关文章:
    • 爱情文章
    • 亲情文章
    • 友情文章
    • 随笔
    • 哲理
    • 励志
    • 范文大全

    最新文章

    热点文章

    推荐访问

    军训远足心得体会 军训爬山心得体会 大学军训徒步拉练感想 军训徒步作文 军训徒步10公里感想 军训徒步心得体会 5分钟演讲中秋节节日 中秋一分钟演讲 中秋节演讲稿4分钟 中秋节演讲稿一分钟 中秋节演讲稿五分钟 3-5分钟 中秋节短篇演讲稿 中秋节演讲稿两分钟 中秋节的演讲稿3分钟 关于中秋节的演讲稿三分钟 孩子体验军训的心得 参加孩子军训活动的感受与收获 家长对孩子军训后的收获和感悟 小孩军训的收获与感悟 学生军训的收获与感悟 孩子军训成长过程家长感悟 孩子军训感悟 孩子军训心得体会 孩子军训的收获与感悟 兵役前训练心得体会 部队当兵的心得 新兵役前教育训练心得体会 预备役军训心得体会 新兵军训感悟

    本文八种创建等高列布局 cad布局怎么创建视口由山茶花美文网整理提供，版权归原作者、原出处所有。

    Copyright © 山茶花美文网 All Rights Reserved.