|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
你的设计不仅仅用于web浏览器，也可以发布在其他设备上，比如PowerPoint。
原文：http://jorux.com/archives/layout-1-if-you-love-CSS/
从本篇入手下手报告怎样用css完成网页的结构，即怎样用css把持网页内各个元素的显现地位。假如你是一个初学者，极可能以为做一个网页的第一步就是结构。实在否则，css网页的计划历程能够参考分为以下几步：
立体计划—>页面切割—>结构—>细节把持
- 立体计划是一个网页的精华地点，读者间接面临的界面，在本站今后的文章中会触及此方面内容。大概你会以为在头脑里构成一个网站的也许印象就能够了，那末这类设法间接就给你贴上专业的标签。保举工具：Photoshop；
- 页面切割实在能够分别到结构里，由于你的页面切割体例间接影响了结构体例，也表现了你是属于表格结构阵营仍是css结构阵营。它是结构(前)的关头步骤。将在本章重点报告。保举工具：Photoshop；
- 假如把结构说复杂点，就先得把你的网页复杂化。复杂到把你的网站分为header，content，sidebar，footer四个部分。
- 细节把持，将header，content，sidebar，footer的体现细节化。
本章将针对页面切割报告一些Jorux的公家概念与手艺。
起首，我们要有一个被切割的工具，这里以Jorux.com的原始photoshop立体计划图为例。以下（Fig.01）：
假如利用表格结构的话，你大概就想到在photoshop里把页面切割为有数个流动宽高的格子。但用css结构的话，你起首要明白的以下几点是：
- 你是要横着切，仍是要竖着切；
- 第一次切割，只必要把网页中的背景图片切割出来(由于背景图片是在css里声明的)；
- 切的的图片要只管小，然后让css往做更多的事变；
- 计划对照庞大的部分，能够不支解，从而削减css编码的难度；
- 读者应当依据本人的才能，找出哪些效果css能够轻松完成，而哪些效果用图片加倍复杂并且size不年夜，细心在3.4之间衡量利害；
如今我们来看Fig.01,最靠上的部分是个玄色的尺子，遮住了“Jorux记事本”，更遭的是它竟然另有玄色的投影。比及要切割的时分，我才忏悔现在怎样能计划得云云庞大。但不妨，统统城市好起来的。如今随着来重温我的切割思绪：
1.全部网页背景致人人应当很分明，就是深灰色#444，这无需图片，在css里的body选择器里声明就好；
2.这一步是最关头的一步，请读者细心体味。关于css结构的网页，Jorux倡议你起首给你的原始立体计划来两个横刀(白色)，接着就来个竖刀(蓝色)。完成以下效果(Fig.02)：
必定要先横再竖，即先把你的网页分为top，mid，bottom三个部分，然后再把mid分为content和sidebar两个部分。关于单栏款式，只必要两横刀，而关于三栏款式，大概就必要两横两竖刀。
如许你就失掉header，content，sidebar，footer四个部分。如今来剖析这四个部分的背景图片必要怎样切割。
3.header部分的图片十分庞大，但要把那把尺子独自分别出来几近是不成能的，并且是没有需要的。由于我们还需用这把尺籽实现回想页的超等链接，因而它只能是在html文件中<img/>的图片，而非背景，为了削减css编码难度，我们能够把有投影的圆角也和尺子一同切上去以备用，如图(Fig.03):
那末剩下的稍淡的灰色，就是所必要header的背景，我们只需来两竖刀(宽度在4-6px摆布为好)，失掉下图(Fig.04):
信任人人晓得怎样在css里用repeat-x来完成header的背景效果；
4.接着就是content的背景，很简单看出就是谁人带投影的红色背景。即刻来上两横刀，高度一样在4-6px为好，以下图(Fig.05)，在css里用repeat-y就可以完成content背景；
5.还好，在本计划中sidebar无背景，间接承继body的灰色背景就好；
6.footer背景对照复杂，就是两个圆角罢了，我为了图便利，把谁人logo也切了上去，以下(Fig.06)：
如许我们就完成了第一次切割，而且把统统触及结构的背景图片切了上去。接着就是怎样用css结构了，我们的方针是完成以下最终效果(Fig.07)：
那末如今就入手下手编写html代码。既然我们有了一明晰的结构最终效果，编写html代码应当是很复杂的一件事变。可是越是复杂的事，人们疏忽的器材就越多。以下Jorux的概念请必定细心考量：
***关于DIV的利用，请必定从年夜到小，把那些能在一同的元素分别到一个DIV，然后再在此DIV中持续分别小DIV。以是为完成(Fig.07)的最终效果，必要做以下几步：
- 我们起首把header，content，sidebar，footer回为一个DIV，ID=“AllWrap”；用实在现向左浮动；
- 接着把header作为一个DIV，ID=“Header”；
- 把content和sidebar分别在一个DIV，ID=“MidWrap”；然后在其内持续分别为两个DIV，ID分离为Content和Sidebar；
- 最初把footer作为一个DIV，ID=“Footer”；
终极失掉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代码。有以下请求：
- 向左浮动；
- AllWrap宽为760px；Content宽为560px，高400px；Sidebar宽为200px，高400px；Footer高为80px，宽760px；
- 在800
|
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-16 00:10:46
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
楼主