网页设计CSS教程：第1部分
现在我们已经开始了几个课程，我们将通过这个三部分的第一课来创建一个纯粹的CSS网页，从而迈向完全的书呆子荣耀的下一步。
不仅仅是CSS样式，还有CSS定位，这意味着不需要任何表格！
一旦完成，您将以复杂的方式创建页面，使您的网站能够在所有类型的设备上看到，包括普通电脑，手机，iPhone，PSP ...真的是任何设备！
...这也意味着你将能够把更少的工作放在你的网页加载速度更快，并且易于更新和打印的网站上！
CSS模板布局 - 3的第1部分
在这个容易理解（我希望！）关于用CSS创建网页的教程中，我将专注于CSS的关键组件，在那里（在教程的最后），您将能够创建漂亮的基于CSS的网页。
完成本教程后，您应该有足够的信息来探索CSS和网页设计，甚至进一步...到我不在这里覆盖的领域。
让我们开始吧：
您可以下载我们在本教程中构建的CSS和HTML文件：CSS文件
你可以看看这个页面应该是这样的：CSS示例页面
在这个基于CSS的布局中使用的标签：
由于CSS的强大功能，我们可以大大减少我们在一个页面中使用的HTML标签的数量，同时仍然可以使用仅仅6种类型的布局（缺乏更好的单词）的HTML标签。
我们将用来布置内容的标签：
1. <h。>从'<h1> </ h1>'到'<h6> </ h6>'的标题标记将用于在我们的页面中标记/标记标题。所以最重要的标题将被包裹在<h1>标签中，而在<h6>标签中则是最不重要的。本文标题的一个例子：
CSS模板布局
这也告诉浏览器和搜索引擎，这个页面主要是关于：'CSS Template Layout'
所有的浏览器都有一个默认大小（对于每个<h。>标签），它们如何呈现放置在这些标签之间的文本。许多这些默认设置可能无法使用（特别是<h1>），因为它们太大了。但是不要害怕，CSS就在这里，我们将使用CSS来使文本的大小更符合我们的喜好。
2. <p>段落标记用于将部分页面标记为“段落”，很简单。段落标签是所谓的“块元素”。这意味着它就像一个块，在每个<p>标签对之前和之后自动插入一个空格。你会看到它的例子来工作。
3. <ul>和<ol>列表标签将被用来创建我们的菜单。标签<ul>是“无序列表标签”，用于创建带有项目符号或其他未指定或表示顺序的图像/图标的列表; 因此术语“无序”。所提到的另一个列表标签（<ol>）是“有序列表标签”，它创建一个列表，而不是使用项目符号，用数字或字母标记列表项目。代码示例要遵循。
4. <div>和</ div>：Div标签允许您对页面的一部分进行标记，以便您可以对其进行操作。另一种说法是“装入容器”。一旦你的网页的一部分在这个<div>容器中，你可以做所有类型的东西，比如样式，动画，使其可见或不可见，等等。Div代表了下一代格式化HTML页面，在许多方面，它们都优于表格。
我们将使用div为我们页面的一部分创建容器。一个div将被用来“保留”我们的导航菜单，另一个div用于“保留”主页面。
5. <a href> HTML中最重要的标签：“链接标签”或“超链接标签”。这使得文本“超”，所以当我们点击它，我们可以加载另一个页面或激活/调用一些JavaScript（也称为ECMA脚本）。
6. <img>这是'图像标签'，它允许您链接到图像，以便它们显示在我们的页面中。在HTML中，图像并不嵌入到实际的页面中，而是图像标签（<img>）仅指向图像的位置，浏览器在加载HTML页面时将尝试加载该图像。
这涵盖了我们将在我们的布局中使用的HTML标签！不需要表格标签，<br>标签和讨厌（和DEPRICIATED）<font>标签。
创建基本页面模板
通过这些例子，我们将需要一个练习HTML页面。
要创建练习HTML页面，请执行以下操作：
1.转到桌面并创建一个简单的文本文档。在Windows上，您只需右键单击并选择：新建 - >文本文档。
这将在您的桌面上创建一个简单的空白文本文档。命名文件：practiceHTML.htm。Windows会向您显示一个警告，询问您是否要更改文件扩展名。答应我'。现在右键单击文件并选择：'打开'并选择'记事本'。一旦进入记事本，粘贴在下面的灰色框中找到的模板代码：
（在Windows中剪切/粘贴文本的简单方法是按住Ctrl键，'c'用于复制，'v'用于粘贴。）
My Practice HTML Page < meta http-equiv = “Content-Type” content = “text / html; charset = iso-8859-1” / >
这段代码构成了所有HTML页面的基本结构。现在可以在这些标签之间剪切和粘贴代码示例：
<！ - 在这里插入代码！ - >
最后一个注释：在<body> </ body>之间找到所谓的注释。评论是放置在浏览器中看不到的笔记的一种方式。以下字符之间的任何内容都将成为HTML注释：
<！ - 和 - >
评论内的任何内容都将在浏览器中隐藏。所以在上面的例子中，'and'这个词在浏览器中是不可见的。留下关于你在页面中做什么的信息是一个好方法。当其他人在网页上工作或者甚至在你工作的时候，它可以派上用场，因为你可能会忘记你为什么以某种方式做事。
构建CSS
一旦创建了模板页面，创建一个文件夹并将其命名为“myCSSwebsite”，然后将HTML页面放入其中。在同一个文件夹中，创建一个新的文本文件并将其命名为：'myCSS.css'。一旦创建打开该文件并粘贴到此模板的CSS代码，然后保存：
/ * Generic Selectors * /
body {
font-family ： Georgia ， “Times New Roman” ， Times ， serif ;
font-size ： 14px ;
颜色： ＃333333 ;
背景颜色： ＃F9F9F9 ;
}
p （
宽度： 80％;
}
li {
list-style-type ： none ;
行高： 150％;
list-style-image ： url （../images/arrowSmall.gif ）;
}
h1 {
font-family ：格鲁吉亚， “Times New Roman” ， Times ， serif ;
font-size ： 18px ;
font-weight ： bold ;
颜色： ＃000000 ;
}
h2 {
font-family ：格鲁吉亚， “Times New Roman” ， Times ， serif ;
font-size ： 16px ;
font-weight ： bold ;
颜色： ＃000000 ;
border-bottom ： 1px solid ＃C6EC8C ;
}
/ ****************伪类**************** /
a ：link {
color ： ＃00CC00 ;
文字装饰： 下划线;
font-weight ： bold ;
}
li a ：link {
color ： ＃00CC00 ;
文字修饰： 无;
font-weight ： bold ;
}
a ：visited {
color ： ＃00CC00 ;
文字装饰： 下划线;
font-weight ： bold ;
}
li a ：visited {
color ： ＃00CC00 ;
文字修饰： 无;
font-weight ： bold ;
}
一个：悬停{
颜色： RGB （0 ， 96 ， 255 ）;
padding-bottom ： 5px ;
font-weight ： bold ;
文字装饰： 下划线;
}
li a ：hover {
display ： block ;
颜色： RGB （0 ， 96 ， 255 ）;
padding-bottom ： 5px ;
font-weight ： bold ;
border-bottom-width ： 1px ;
border-bottom-style ： solid ;
border-bottom-color ： ＃C6EC8C ;
}
一个：活性{
颜色： RGB （255 ， 0 ， 102 ）;
font-weight ： bold ;
}
/ ************************* ID的*********************** ** /
#navigation {
position ： absolute ;
z-index ： 10 ;
width ： 210px ;
height ： 600px ;
保证金： 0 ;
border-right ： 1px solid ＃C6EC8C ;
font-weight ： 正常;
}
#centerDoc {
position ： absolute ;
z-index ： 15 ;
padding ： 0 0 20px 20px ; / *右上方左下角* /
margin-top ： 50px ;
margin-left ： 235px ;
}
不要让CSS吓到你了，我会解释一下重要的细节，你很快就会看到它是多么容易。在完成本教程的这一部分之前，您最后要做的事情是，我们需要在HTML页面中添加一些代码。
在<body> </ body>标签之间，您需要插入以下代码：
< DIV ID = “导航” >
< H2 >主导航< / H2 >
< / DIV >
< DIV ID = “centerDoc” >
< H1 >主标题< / H1 >
< p >
去网页设计师的杀手手册主页，并采取行动
我们将用作本教程的起始模板的HTML页面。
你可以在标题下找到它：'创建HTML页面的做法
以下：'。按照说明那里创建您的基本的HTML页面 -
现在就做！
< / p >
< / div >
而在<head> </ head>标签之间，您需要插入以下内容：
< 标题 >首先CSS教程< / 标题 >
< 元 HTTP的当量= “内容类型” 内容= “text / html的;字符集= ISO-8859-1” / >
< 链路 HREF = “myCSS.css” 相对= “ stylesheet“ type = ”text / css“ / >
有了这个，我们将能够开始设计我们的页面。如果你现在看一下HTML页面，你可能会惊讶地发现我们已经开始了！