用HTML5/CSS3编写一个充满活力的专业网页设计

预览

演示

下载源

本教程是系列教程的第2部分，将引导您完成充满活力和专业的网页布局的设计和编码。第一部分处理了在Photoshop中设计网页布局。

奠定基础

让我们先做一些基础工作。

HTML5

我们将使用HTML5作为标记。如果你还不熟悉HTML5，看看下面的资源:

CSS3

我们将使用一些CSS3属性来简化布局样式。这意味着不必为圆角使用背景图像，而是使用这个特性属性在更少的时间和更少的标记和页面重量(使我们的网页更快)实现相同的事情。

以下是一些关于CSS3的参考资料:

960网格系统框架

我们将使用960网格系统CSS框架在布局网页结构时。看看这个速成班指南960网格系统变得简单．

会再三反省自己要说

为了减少你在阅读这篇HTML5/CSS3教程时的头痛时刻，我建议你阅读我上面建议的资源。

我仍然会在这里和那里进行解释，所以如果你不是这些即将到来的标准的专家也不用担心，但我也假设你至少已经知道HTML5和CSS3的基础知识。此外，960网格系统是本教程的一个组成部分，如果你阅读了我上面提到的指南，你只需要花一些时间来学习它。

步骤1:创建基本容器和引用

如果您已经准备好了，那么让我们先完成HTML5标记，此时不考虑样式，以确保我们的标记是语义的，并且为阅读屏幕的用户进行了逻辑安排。让我们首先为不同的部分创建主容器，并引用样式表:

<！DOCTYPE HTML> < HTML lang=" zh ">   Slick Web Layout
        
 
设计修订
  
 < section id="更多-产品">
我们的手机
< div class="product">
< section id="more-blurb">

代码的解释

我将所有样式表放在一个名为css /．

你需要下载960网格系统，从ZIP文件中提取内容并放置960年gs.css在你的CSS文件夹里。这是非常重要的一部分网页设计的过程。的reset.css我们的文档的重置样式表不是960网格系统自带的。

在撰写本文时，960网格系统还没有针对HTML5进行更新，因此一些HTML5结构标签(例如。<标题>，<页脚>)还没有被它覆盖。的reset.css是由Richard Clark提出的HTML5的医生我觉得这足够做这份工作了。

这是HTML5重设样式表供您下载。我已经包含了支持html5的脚本，HTML5 shiv，你可以在IE的条件注释中看到。HTML5 shiv由Remy Sharp创建，以防止IE浏览器(8及以下)在使用这些新的HTML元素时崩溃。

我们直接从谷歌代码提供服务，以利用他们的基础设施，并增加脚本已经缓存在用户的浏览器中的机会(为那些用户加速我们的网页的感知性能)。剩下的应该是不言自明的:使用<导航>，<标题>，< >节，<页脚>，等等，用于我们布局的不同容器。

步骤2:添加一些内容

现在，我们可以在容器中插入内容，因为我们已经有了HTML文档的基本结构。

 
 
设计修订
  
 
Lorem ipsum dolor sit amet, consecteteur adipiscing elit Aliquam ac duia praesent。
 
查看我们的手机
 
查看其他东西

我们的手机

<图>< img src="img/phone1.jpg" width="300" height="150" alt="phone number one" />

Suspendisse arcu nunc, dapibus viverra, eleifend at, posuere vitae, orci。我与你同在。Morbi viverra leo eu purus。

nec舌部。Duis at erat。Donec sodales。

phone number 2

Maecenas eu felis non英才eges

Suspendisse arcu nunc, dapibus viverra, eleifend at, posuere vitae, orci。

我与你同在。Morbi viverra leo eu purus。nec舌部。

Duis at erat。Donec sodales。

phone number 3

Maecenas eu felis non英才eges

Suspendisse arcu nunc, dapibus viverra, eleifend at, posuere vitae, orci。我与你同在。

Morbi viverra leo eu purus。nec舌部。Duis at erat。

Donec sodales。

< /figure>

Donec velit。

Sed euismod erat eu sem。在我永远的性情中，有我永远的灵魂。

Donec congue, augue in fuugiat congue, magna pede tritique ligula, vitae ultrices erat justo ut purus。毛里赌注。埃涅恩est velit, scelerisque a, auctor ut, accumsan ut, augue。

Proin in velit。Aliquam ac dui。preesent congue leo eu nunc。

不吃的，不吃的，不吃的，不吃的。发病原因metus。Pellentesque忒勒斯。

Proin sed velit。悬吊fringilla ornare elite。佩伦特式的奥格。

在velit的尺蠖前庭。

悬疑arcu nunc, dapibus viverra, eleifend at, posuere vitae, orci。我与你同在。

more info

< / div > < !——#blurb——>< div id="blog">

最新来自博客

<文章>< h1>Sed euismod erat eu sem nam eu

venisque venenatis, ipsum nec incidentits超，sem metus mattis erat, molestie scerisque dolor augue ut orci。Maecenas vehicula dignissim leo。

继续阅读…