仓酷云

标题: CSS教程之css进门教程之进修网页结构(1) [打印本页]
作者: 海妖    时间: 2015-1-16 00:10
标题: CSS教程之css进门教程之进修网页结构(1)
你的设计不仅仅用于web浏览器，也可以发布在其他设备上，比如PowerPoint。
原文：http://jorux.com/archives/layout-1-if-you-love-css/
从本篇入手下手报告怎样用css完成网页的结构，即怎样用css把持网页内各个元素的显现地位。假如你是一个初学者，极可能以为做一个网页的第一步就是结构。实在否则，css网页的计划历程能够参考分为以下几步：
立体计划—>页面切割—>结构—>细节把持
本章将针对页面切割报告一些Jorux的公家概念与手艺。
起首，我们要有一个被切割的工具，这里以Jorux.com的原始photoshop立体计划图为例。以下（Fig.01）：

CSS教程之css进门教程之进修网页结构(1)
登录/注册后可看大图

点击检察年夜图

假如利用表格结构的话，你大概就想到在photoshop里把页面切割为有数个流动宽高的格子。但用css结构的话，你起首要明白的以下几点是：
如今我们来看Fig.01,最靠上的部分是个玄色的尺子，遮住了“Jorux记事本”，更遭的是它竟然另有玄色的投影。比及要切割的时分，我才忏悔现在怎样能计划得云云庞大。但不妨，统统城市好起来的。如今随着来重温我的切割思绪：
1.全部网页背景致人人应当很分明，就是深灰色#444，这无需图片，在css里的body选择器里声明就好；
2.这一步是最关头的一步，请读者细心体味。关于css结构的网页，Jorux倡议你起首给你的原始立体计划来两个横刀(白色)，接着就来个竖刀(蓝色)。完成以下效果(Fig.02)：

CSS教程之css进门教程之进修网页结构(1)
登录/注册后可看大图

点击检察年夜图

必定要先横再竖，即先把你的网页分为top，mid，bottom三个部分，然后再把mid分为content和sidebar两个部分。关于单栏款式，只必要两横刀，而关于三栏款式，大概就必要两横两竖刀。
如许你就失掉header，content，sidebar，footer四个部分。如今来剖析这四个部分的背景图片必要怎样切割。


3.header部分的图片十分庞大，但要把那把尺子独自分别出来几近是不成能的，并且是没有需要的。由于我们还需用这把尺籽实现回想页的超等链接，因而它只能是在html文件中<img/>的图片，而非背景，为了削减css编码难度，我们能够把有投影的圆角也和尺子一同切上去以备用，如图(Fig.03):

CSS教程之css进门教程之进修网页结构(1)
登录/注册后可看大图

点击检察年夜图

那末剩下的稍淡的灰色，就是所必要header的背景，我们只需来两竖刀(宽度在4-6px摆布为好)，失掉下图(Fig.04):

信任人人晓得怎样在css里用repeat-x来完成header的背景效果；
4.接着就是content的背景，很简单看出就是谁人带投影的红色背景。即刻来上两横刀，高度一样在4-6px为好，以下图(Fig.05)，在css里用repeat-y就可以完成content背景；

CSS教程之css进门教程之进修网页结构(1)
登录/注册后可看大图

点击检察年夜图

5.还好，在本计划中sidebar无背景，间接承继body的灰色背景就好；
6.footer背景对照复杂，就是两个圆角罢了，我为了图便利，把谁人logo也切了上去，以下(Fig.06)：

CSS教程之css进门教程之进修网页结构(1)
登录/注册后可看大图

点击检察年夜图

如许我们就完成了第一次切割，而且把统统触及结构的背景图片切了上去。接着就是怎样用css结构了，我们的方针是完成以下最终效果(Fig.07)：

CSS教程之css进门教程之进修网页结构(1)
登录/注册后可看大图

点击检察年夜图

那末如今就入手下手编写html代码。既然我们有了一明晰的结构最终效果，编写html代码应当是很复杂的一件事变。可是越是复杂的事，人们疏忽的器材就越多。以下Jorux的概念请必定细心考量：
***关于DIV的利用，请必定从年夜到小，把那些能在一同的元素分别到一个DIV，然后再在此DIV中持续分别小DIV。以是为完成(Fig.07)的最终效果，必要做以下几步：
终极失掉Html代码为：
<!DOCTYPEHTMLPUBLIC“-//W3C//DTDHTML4.0Transitional//EN”>
<HTML>
<HEAD>
<TITLE>Mylayout</TITLE>
</HEAD>
<BODY>
<divid=”AllWrap”>
<divid=”Header”>Header</div>
<divid=”MidWrap”>
<divid=”Content”>Content</div>
<divid=”Sidebar”>Sidebar</div>
</div>
<divid=”Footer”>Footer</div>
</div>
</BODY>
</HTML>
给读者留一个成绩，请有才能的伴侣在留言中给出完成最终效果款式的css代码。有以下请求：