实例详解CSS网页筹划原理[网站美工]

用CSS来筹划很简单.假如你已经习惯用表格筹划的话,起先会感受对比艰难.其实不难,只不过动机差别,并且在实践中更有意义.
　　你可以把这一页面的各个部份当作独立的版块来对待,无论你挑选哪一块.你可以绝对或相对地用彼块代替此块.
 

定位
　　定位属性position用于定义一个元素能否absolute(绝对),relative(相对),static(静态),大概fixed(固定).
　　static值是元素的默许值,它会按照普通次序生成,就如它们在HTML的呈现普通.
　　relative很像static,但可用top、right、bottom和left属性来偏移原始位置.
　　absolute使元素从HTML普通流中别离出来,并把它送到一个完好属于自己的定位世界.在这个略微猖獗的世界,这个绝对的元素可以安排到任何地方,只要设置了top、right、bottom和left的值.
　　fixed的行为也很像absolute,但参考于浏览器窗口相关于页面而安排绝对的元素,所以,理论上,当页面转动的时刻,固定元素完好保持在浏览器视区中.但这个只在Mozilla和Opera中支持,IE中不支持.
 

用绝对定位筹划
<div id="navigation">
<ul>
<li><a href="this.html">This</a></li>
<li><a href="that.html">That</a></li>
<li><a href="theOther.html">The Other</a></li>
</ul>
</div>
<div id="content">
<h1>www.devdao.com</h1>
<p>Welcome to >
<p>(>
</div>
 

可以用绝对定位来成立一个传统两列筹划,只要在HTML中利用以下面的近似法则:
　　并且利用以下的CSS:
　　#navigation { position: absolute; top: 0; left: 0; width: 10em; } #content { margin-left: 10em; }
　　你将看到,长度为10em的导航条被设置在左边.因为导航是绝对定位的,对页面的其他部份的流动不会有任何影响,所以所需求做的只是把内容区域的左边界宽度设置为与导航条宽度一样便可以了.
　　实在是太简单了!但是你并不受这个两列办法的限制.用夺目的定位,你可以安置你所如你所需的更多的块.比方,你需求增添第三列,可认为HTML增添“navigation2”块并且利用以下CSS:
　　#navigation { position: absolute; top: 0; left: 0; width: 10em; } #navigation2 { position: absolute; top: 0; right: 0; width: 10em; } #content { margin: 0 10em; /* setting top and bottom margin to 0 and right and left margin to 10em */ }
　　绝对定位元素的唯一副作用是,因为它们生活自己的世界里,没有办法切确决意它们在哪儿完毕.假如你利用上面的例子在一个少导航和多内容区域,没有什么问题,但是,分外是利用长度和宽度的相对值时,常常得放弃在下面安排任何事物如脚注的但愿.假如真的要做,与其绝对定位它们,不如浮动它们.
 

浮动
　　浮动将移动一个元素到同一线上的左边大概右边,而四周也会有内容浮动.
　　浮动常常用在定位一个页面内的小型的元素(在本站的原始默许CSS中HTML初级指南和CSS初级指南的“下一页”衔接就是浮动到右边的.一样参阅伪元素中的:first-letter例子),但一样可以用在更大的块中,比方导航列.
　　拿下面的HTML例子,可以利用随后的CSS:
　　#navigation { float: left; width: 10em; }
　　#navigation2 { float: right; width: 10em; }
　　#content { margin: 0 10em; }
　　假如不但愿下一个元素环抱浮动对象,可以利用clear(排除)属性.clear: left将排除左边元素,clear: right将排除右边元素,而clear: both会排除左边和右边.所以,举个例子,你需求一个页面脚注,你可以用id“footer”为HTML增添一个块,然后利用以下的CSS:
　　#footer { clear: both; }
　　搞定了.一个脚注会呈目前全部列的下边,不管任何一个列有多长.
 

注意
　　上面已经大体上介绍了地位和浮动,侧重夸大了页面的“大”块,但请记着,这些办法也可以用在这些块内的任何元素.综合定位、浮动、边界、补白和边框,可以再现任何的版式计划,在筹划方面,没有CSS完成不了表格所能完成的的事情.
　　利用表格筹划的唯一来由是你试图适应陈腐的浏览器.这也是CSS实际上显示其先进的地方──在文件大小上,高易用性的页面只相当基于表格的页面的一小部份.