【CSS系列】布局篇

一、让设计居中

1、使用自动空白边让设计居中

 1 <style type="text/css">
 2 body{
 3     text-align:center;
 4     min-width:760px;}
 5 #wrapper{
 6     width:720px;
 7     margin:0 auto;
 8     text-align:left;}
 9 </style>
10 
11 <div id="wrapper"></div>

2、使用定位和负值空白边让设计居中

 1 <style type="text/css">
 2 
 3 #wrapper{
 4     width:720px;
 5     position:relative;
 6     left:50%;
 7     margin-left:-360px;/**不加这个的话会让容器的左边缘居中，所以对容器的左边应用一个负值的空白边，宽度等于容器宽度的一半儿。这会让容器移动他的宽度的一半，从而让他在屏幕上居中。*/}
 8 </style>
 9 
10 <div id="wrapper">
11 大家好大家大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好好
12 </div>

二、基于浮动的布局

用CSS进行布局有几种不同的方式，包括绝对定位和使用负值空白边。使用浮动定位是相对容易的，因为，在基于浮动的布局中，只需要设置希望定位的元素的宽度，然后将他们向左或向右浮动。

因为浮动的元素不再占据文档流中的任何空间，他们就不再对包围他们的块框产生任何影响，为了解决这个问题，需要对布局中各个点上的浮动元素进行清理。常用的做法是，不对元素进行连续地浮动和清理，而是浮动几乎所有的东西，然后在整个文档的“战略点”比如页脚上进行一次胡两次清理。

1、两列的浮动布局

<style type="text/css">
<!--

/* Pretty Stuff
================================== */

/* Zero down margin and paddin on all elements */
* {
  margin: 0;
  padding: 0;
}

body {
  font: 62.5%/1.6 "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
  background-color:#D4D4D4;
}

h1 {
  font-size: 2.4em;
  font-weight: normal;
}

h2 {
  font-size: 2.0em;
  font-weight: normal;
}

p, li {
  font-size: 1.4em;
}

h1, h2, p {
  margin: 1em 0;
}

#branding h1 {
  margin: 0;
}

#wrapper {
  background-color: #fff;
}

#branding {
  height: 50px;
  background-color:#b0b0b0;
  padding: 20px;
}

#mainNav {
  list-style: none;
  background-color:#eee;
}

#footer {
  background-color:#b0b0b0;
  padding: 1px 20px;
}

/* The Core Technique
================================= */

body {
  text-align: center; 
  min-width: 760px;
}

#wrapper {
  width: 720px; 
  margin: 0 auto; 
  text-align: left; 
}


#content { 
  width: 520px;
  float: right; 
}

#mainNav { 
  width: 180px; 
  float: left; 
} 

#footer { 
  clear: both; 
} 

/* Add some padding 
================================== */

#mainNav {
  padding-top: 20px;
  padding-bottom: 20px;
}

#mainNav * {
  padding-left: 20px;
  padding-right: 20px;
}

#mainNav * * {
  padding-left: 0;
  padding-right: 0;
}

#content * {
  padding-right: 20px;
}

#content * * {
  padding-right: 0;
}

-->
</style>

<body>

<div id="wrapper">
<div id="branding">
<h1>Branding</h1>
</div> 

<div id="content"> 
<h1>Lorem ipsum dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
</div> 

<ul id="mainNav"> 
<li class="first"><a href="#">首页</a></li> 
<li><a href="#">关于</a></li> 
<li><a href="#">新闻</a></li> 
<li><a href="#">产品</a></li> 
<li><a href="#">服务</a></li> 
<li><a href="#">客户</a></li> 
<li><a href="#">案例学习</a></li> 
</ul> 

<div id="footer">
<p>Footer</p>
</div>


</div>

</body>

3、三列的浮动布局

与两列类似，不过要在内容区域中添加两个新的div，一个用于主内容，一个用于次要内容。

 

  1 <style type="text/css">
  2 
  3 
  4 /* Pretty Stuff
  5 ================================== */
  6 
  7 /* Zero down margin and paddin on all elements */
  8 * {
  9   margin: 0;
 10   padding: 0;
 11 }
 12 
 13 body {
 14   font: 62.5%/1.6 "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
 15   background-color:#D4D4D4;
 16 }
 17 
 18 h1 {
 19   font-size: 2.4em;
 20   font-weight: normal;
 21 }
 22 
 23 h2 {
 24   font-size: 2.0em;
 25   font-weight: normal;
 26 }
 27 
 28 p, li {
 29   font-size: 1.4em;
 30 }
 31 
 32 h1, h2, p {
 33   margin: 1em 0;
 34 }
 35 
 36 
 37 
 38 #wrapper {
 39   background-color: #fff;
 40 }
 41 
 42 #branding {
 43   height: 50px;
 44   background-color:#b0b0b0;
 45   padding: 20px;
 46 }
 47 
 48 #branding h1 {
 49   margin: 0;
 50 }
 51 
 52 #mainNav {
 53   list-style: none;
 54   background-color:#eee;
 55 }
 56 
 57 #secondaryContent {
 58   background-color:#eee;
 59 }
 60 
 61 #secondaryContent h2 {
 62   font-size: 1.6em;
 63   margin: 0;
 64 }
 65 
 66 #secondaryContent p {
 67   font-size: 1.2em;
 68 }
 69 
 70 #footer {
 71   background-color:#b0b0b0;
 72   padding: 1px 20px;
 73 }
 74 
 75 /* The Core Technique
 76 ================================= */
 77 
 78 body {
 79   text-align: center; 
 80   min-width: 760px;
 81 }
 82 
 83 #wrapper {
 84   width: 720px; 
 85   margin: 0 auto; 
 86   text-align: left; 
 87 }
 88 
 89 #mainNav { 
 90   width: 180px; 
 91   float: left; 
 92 }
 93 
 94 #content { 
 95   width: 520px; 
 96   float: right; 
 97 }
 98 
 99 #mainContent { 
100   width: 320px; 
101   margin: 0; 
102   float: left; 
103 }
104 
105 #secondaryContent { 
106   width: 180px;
107   display: inline; /* :KLUDGE: Fixes IE double margin float bug */
108   float: right; 
109 } 
110 
111 #footer { 
112   clear: both; 
113 } 
114 
115 /* Add some padding
116 ================================== */
117 
118 #mainNav, #secondaryContent {
119   padding-top: 20px;
120   padding-bottom: 20px;
121 }
122 
123 #mainNav *, #secondaryContent * {
124   padding-left: 20px;
125   padding-right: 20px;
126 }
127 
128 #mainNav * *, #secondaryContent * * {
129   padding-left: 0;
130   padding-right: 0;
131 }
132 
133 
134 
135 </style>
136 
137 <body>
138 
139 <div id="wrapper">
140 <div id="branding">
141 <h1>Branding</h1>
142 </div> 
143 
144 <div id="content"> 
145 <div id="mainContent">
146 <h1>学习</h1>
147 <p>前世之事，后事之师.</p>
148 </div> 
149 
150 <div id="secondaryContent">
151 <h2>书山有路勤为径学海无涯苦作舟。</h2>
152 <p>若不是天高地远，又何必青山水长。</p>
153 </div>
154 
155 </div>
156 <ul id="mainNav"> 
157 <li class="first"><a href="#">首页</a></li> 
158 <li><a href="#">关于</a></li> 
159 <li><a href="#">新闻</a></li> 
160 <li><a href="#">产品</a></li> 
161 <li><a href="#">服务</a></li> 
162 <li><a href="#">客户</a></li> 
163 <li><a href="#">案例学习</a></li> 
164 </ul> 
165 
166 <div id="footer">
167 <p>Footer</p>
168 </div>
169 
170 
171 </div>
172 
173 </body>

三、固定宽度、流体和弹性布局

1、流体布局

在使用流体布局时，尺寸是用百分比数而不是像素设置的，这使得流体布局能够相对于浏览器窗口进行伸缩。随着浏览器窗口的变动而变动，列边宽。相反，随着窗口变小，列的宽度减小。流体布局可以非常高效的使用空间，最好的流体布局甚至不会引起用户的注意。

但是，在窗口非常小的时候，行变得非常窄，很难阅读，所以有必要添加像素或em为单位的min-width从而防止布局变得太窄。

2、弹性布局

虽然流体布局可以充分利用可用空间，但是在大分辨率的显示器上行仍然会过长。让用户不舒服。相反，也是一样。

弹性布局相对于字号来设置元素的宽度，通过以em为单位设置宽度，可以确保在字号增加时对整个布局随之扩大。还可以将行长保持在可阅读的范围。但是在字号增大的时候回导致水平的横幅出现，为了防止这种情况的发生我们在主体标签上加上max-width:100%来控制。1em=10px;

3、弹性-流体混合布局

这种方式用em设置宽度，然后用百分数设置最大宽度。

 

posted @ 2017-04-17 16:29  霓裳梦竹  阅读(262)  评论(0)  编辑  收藏  举报