|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
你可以轻松地控制页面的布局。
网页制造poluoluo文章简介：在这篇教程里我们只制造首页，不外你能够以此为基本用不异的结构制造内页。
第一步
上面是我们将要下手制造的计划图。在这篇教程里我们只制造首页，不外你能够以此为基本用不异的结构制造内页。
第二步
起首要做的是断定页面布局。跟着你对CSS结构的慢慢进修，这个历程会变得愈来愈复杂。经由过程使用大批相对定位和年夜幅背景图片，我们能够十分复杂地完成这个计划。
甚么是相对定位？
一个HTML元素（好比<div>、<p>等等）被放进页面时具有一个生成的地位，这个地位是由之前放进的元素断定的。比方，你放进一个添补了笔墨的<p></p>标签，接着放进另外一个<p></p>，它会天然呈现在第一个<p>下方。每一个元素相对上一个元素活动。
相对定位则分歧，它给一个工具指定准确的地位使它离开惯例的元素流。假如你像之前一样放进第一个<p></p>，然后相对定位第二个<p></p>为left:500px;top:500px，那它就会忽视第一个<p>正确无误地呈现在指定的地位。
你能够像如许设置相对定位：
.className{
position:absolute;
top:0px;
left:0px;
}
相对定位的弱点
利用相对定位的次要成绩是你的元素们不会真正地互相联系关系。比方，你在接近页面顶真个中央安排了一个文本块，然后稍靠下安排另外一个，当每个块的文本都较短时这看上往很好。但假如顶部的块内是一篇长文，它就会超出第二个块，而不是把第二个块推向下方。
以是相对定位只对那些尺寸流动而且不必要与其他元素互动的元素真正无效。
为何本例中我们要用相对定位？
由于相对定位的优点就在于，它真的、真的十分复杂！你告知扫瞄器器材往哪儿放它就往哪儿放！更棒的是，当你利用相对定位时，扫瞄器兼容性成绩会年夜年夜削减。究竟不论你用的是Firefox、InternetExplorer仍是Safari，100px总回是100px。
嗯...该入手下手我们的结构了
我们将要制造网站的办法是：
- 利用年夜尺寸的背景图片
- 相对定位Logo、菜单和头部面板，让它们准确地呈现该呈现的中央
- 将content（内容）放进习用的<div>标签，但设置很高的padding-top（顶部内边距）好让content向下推到该呈现的中央
- 让footer（页脚）坐镇底部
假如上陈述明还不克不及让你有一个全体的感到，先别发急，当你看到网站成型的时分就会懂得了！
第三步
如今，我们必要两张背景图片。一张年夜的，存成JPG后约莫56kb。这个尺寸在已往稍嫌太年夜，不外如今这不敷为道。
另外一张窄条图片，作为主体地区的背景，将不休反复向右，拖动扫瞄器窗口时它也会随之向外平展。
（注重：下图中的Logo不该该显现在背景图片里，抱愧这是张不太好的截图）
你能够分离在这里和这里看到我创立的两张图片。
第四步
好了，我们如今入手下手写HTML。起首我们列出一些基础代码：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en"lang="en">
<head>
<title>PSDvsNET</title>
<linkrel="stylesheet"href="step1_style.css"_fcksavedurl=""step1_style.css""_fcksavedurl=""step1_style.css""_fcksavedurl=""step1_style.css""type="text/css"media="screen"/>
</head>
<body>
<divid="outside_container">
<divid="container">
<!--TheMainArea-->
</div>
</div>
<divid="footer">
<li><ahref="#">Retouching</a></li>
<li><ahref="#">DigitalEffects</a></li>
<li><ahref="#">WebWork</a></li>
</ul>
<ulid="right_menu">
<li><ahref="#">About</a></li>
<li><ahref="#">Contact</a></li>
</ul>
<li><ahref="#">Retouching</a></li>
<li><ahref="#">DigitalEffects</a></li>
<li><ahref="#">WebWork</a></li>
</ul>
<ulid="right_menu">
<li><ahref="#">About</a></li>
<li><ahref="#">Contact</a></li>
</ul>
<imgsrc="images/panel_home.jpg"id="panel"/>
<divid="content">
<divclass="column1">
<h2>asleekdesign</h2>
<p>DummyText:ThisdesignwasproducedforaPhotoshopandwebdevelopmenttutorial.YoucanseethefirstpartupatPSDTUTS.comwhereyoulearnhowtocreateabeautiful,butsimpledesignusinganabstractbackgroundandtype.</p>
<p>ThesecondpartofthetutorialisavailableviaNETTUTS.comwherewedoaquickbuildofthePSDintoaviable,workingHTML/CSSsite.</p>
<p>Thisdesignwasproducedforaphotoshopandwebdevelopmenttutorial.YoucanseethefirstpartupatPSDTUTS.comwhereyoulearnhowtocreateabeautiful,butsimpledesignusinganabstractbackgroundandtype.</p>
<p>ThesecondpartofthetutorialisavailableviaNETTUTS.comwherewedoaquickbuildofthePSDintoaviable,workingHTML/CSSsite.</p>
</div>
<divclass="column2">
<h2>tutorials</h2>
<p>DummyText:Thisdesignwasproducedforaphotoshopandwebdevelopmenttutorial.YoucanseethefirstpartupatPSDTUTS.comwhereyoulearnhowtocreateabeautiful,butsimpledesignusinganabstractbackgroundandtype.</p>
<p>ThesecondpartofthetutorialisavailableviaNETTUTS.comwherewedoaquickbuildofthePSDintoaviable,workingHTML/CSSsite.</p>
<p>Thisdesignwasproducedforaphotoshopandwebdevelopmenttutorial.YoucanseethefirstpartupatPSDTUTS.comwhereyoulearnhowtocreateabeautiful,butsimpledesignusinganabstractbackgroundandtype.</p>
<p>ThesecondpartofthetutorialisavailableviaNETTUTS.comwherewedoaquickbuildofthePSDintoaviable,workingHTML/CSSsite.</p>
</div>
<divclass="column3">
<h2>recentwork</h2>
<p>DummyText:Thisdesignwasproducedforaphotoshopandwebdevelopmenttutorial.YoucanseethefirstpartupatPSDTUTS.comwhereyoulearnhowtocreateabeautiful,butsimpledesignusinganabstractbackgroundandtype.</p>
<p>ThesecondpartofthetutorialisavailableviaNETTUTS.comwherewedoaquickbuildofthePSDintoaviable,workingHTML/CSSsite.</p>
<p>Thisdesignwasproducedforaphotoshopandwebdevelopmenttutorial.YoucanseethefirstpartupatPSDTUTS.comwhereyoulearnhowtocreateabeautiful,butsimpledesignusinganabstractbackgroundandtype.</p>
<p>ThesecondpartofthetutorialisavailableviaNETTUTS.comwherewedoaquickbuildofthePSDintoaviable,workingHTML/CSSsite.</p>
</div>
</div>
</div>
</div>
在这段代码中，你能够看到我在内容地区加了3个新的<div>，每个<div>包括一个<h2>题目元素和一些文本。他们的class称号是column1、column2、column3（列1、列2、列3）。加上文本是为了展现如何构成列。
为了让他们看上往像列的模样我们先来增加一段CSS：
/*
Content
*/
#content{
padding-top:435px;
padding-left:85px;
width:815px;
color:#674f5d;
font-size:13px;
line-height:20px;
}
.column1{float:left;width:230px;margin-right:30px;}
.column2{float:left;width:230px;margin-right:30px;}
.column3{float:left;width:270px;}
我用一句正文为新的CSS段落开端，然后为#content设置款式。注重padding-top值....435px!设这么年夜是为了给之前相对定位的元素空出中央。与相对定位的元素分歧，content是附属于页面一般流的。
这是由于你还要在content中到场更多内容，把footer推到上面往。相对定位会让它掩盖在footer上方。
然后我给三个column分离设置宽度并加上float:left，这可让它们漂向页面右边，与其他向左浮动的元素对齐。为了不让他们紧挨在一同，我给前两个column付与了右外边距。
浮动一个元素会让它漂到左边或右边，并使别的元素围绕在其周围。到场另外一个浮动元素，两者会并排成列。基础上你看到的列结构都使用了float（浮动）。
不幸的是，浮动元素会呈现一个怪成绩——它们跟本人的容器不合错误付，而且会漂到下一个元素上方而不是把它往下推。办理这个成绩的办法就是给浮动元素前面的某个元素加上属性clear:both。
Clear（清算）属性能够制止元素围绕浮动的<div>，这有点儿欠好注释，我们间接看看清算和不清算分离会呈现甚么情况吧。
网页制造poluoluo文章简介：在这篇教程里我们只制造首页，不外你能够以此为基本用不异的结构制造内页。
不清算
结构看上往会像如许：
几个列漂在footer上方，footer围绕着列。这可不合错误！
清算
办法相称复杂，我们只必要在三个列前面加上一个<div>，以下：
<divid="content">
<divclass="column1">
<h2>asleekdesign</h2>
<p>Thisdesignwasproducedforaphotoshopandwebdevelopmenttutorial.YoucanseethefirstpartupatPSDTUTS.comwhereyoulearnhowtocreateabeautiful,butsimpledesignusinganabstractbackgroundandtype.</p>
<p>ThesecondpartofthetutorialisavailableviaNETTUTS.comwherewedoaquickbuildofthePSDintoaviable,workingHTML/CSSsite.</p>
<p>Thisdesignwasproducedforaphotoshopandwebdevelopmenttutorial.YoucanseethefirstpartupatPSDTUTS.comwhereyoulearnhowtocreateabeautiful,butsimpledesignusinganabstractbackgroundandtype.</p>
<p>ThesecondpartofthetutorialisavailableviaNETTUTS.comwherewedoaquickbuildofthePSDintoaviable,workingHTML/CSSsite.</p>
</div>
<divclass="column2">
<h2>tutorials</h2>
<p>Thisdesignwasproducedforaphotoshopandwebdevelopmenttutorial.YoucanseethefirstpartupatPSDTUTS.comwhereyoulearnhowtocreateabeautiful,butsimpledesignusinganabstractbackgroundandtype.</p>
<p>ThesecondpartofthetutorialisavailableviaNETTUTS.comwherewedoaquickbuildofthePSDintoaviable,workingHTML/CSSsite.</p>
<p>Thisdesignwasproducedforaphotoshopandwebdevelopmenttutorial.YoucanseethefirstpartupatPSDTUTS.comwhereyoulearnhowtocreateabeautiful,butsimpledesignusinganabstractbackgroundandtype.</p>
<p>ThesecondpartofthetutorialisavailableviaNETTUTS.comwherewedoaquickbuildofthePSDintoaviable,workingHTML/CSSsite.</p>
</div>
<divclass="column3">
<h2>recentwork</h2>
<p>Thisdesignwasproducedforaphotoshopandwebdevelopmenttutorial.YoucanseethefirstpartupatPSDTUTS.comwhereyoulearnhowtocreateabeautiful,butsimpledesignusinganabstractbackgroundandtype.</p>
<p>ThesecondpartofthetutorialisavailableviaNETTUTS.comwherewedoaquickbuildofthePSDintoaviable,workingHTML/CSSsite.</p>
<p>Thisdesignwasproducedforaphotoshopandwebdevelopmenttutorial.YoucanseethefirstpartupatPSDTUTS.comwhereyoulearnhowtocreateabeautiful,butsimpledesignusinganabstractbackgroundandtype.</p>
<p>ThesecondpartofthetutorialisavailableviaNETTUTS.comwherewedoaquickbuildofthePSDintoaviable,workingHTML/CSSsite.</p>
</div>
<divstyle="clear:both"></div>
</div>
看究竟部的<divstyle="clear:both"></div>了吗？只用一个声明清算那三个列的空<div>，就办理了我们的成绩。
</p>
业界越来越关注DIV+CSS的标准化设计，大到各大门户网站，小到不计其数的个人网站，在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-15 23:35:02
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜