本文详细介绍了如何从头开始构建一个网站，包括组织文件夹、分析设计、切片图像、编码HTML/CSS等步骤。通过这个教程，读者将学习到如何将设计稿转化为响应式、跨浏览器的网页，以及处理IE兼容性问题的技巧。教程涵盖了从准备PSD到编写HTML/CSS模板的全部过程，适合初学者和有一定经验的开发者参考。
从头编写操作系统
作为流行教程“从头开始设计漂亮的网站”的续篇，我们将把漂亮的设计转换为有效HTML / CSS网站。 即使我们使用了960.gs模板，我们也不会使用其CSS框架来构建站点。 相反，我们将从头开始对此设计进行编码！
首先创建强大清晰的标记始终很重要，这为什么呢？ 原因之一是因为，如果我们需要更改设计或重新排列网站中的某些内容，则只需要对CSS文件进行修改，而无需触摸标记。
介绍
今天，我们将学习如何准备此设计以进行编码，并将其编码到有效的（X）HTML / CSS跨浏览器网站上。 我们将仅覆盖网站的主页，如果您有兴趣进行更多练习，可以在Themeforest.net上获得该设计。 这是一个非常详细的教程。 因此，您最好准备一大杯茶和一些饼干。 我们从3,2,1开始......
第1步-组织文件夹
在开始新项目之前，我们将需要创建一个新文件夹，以保存所有数据。 通常，我会为每个以我设计的网站命名的项目创建一个文件夹。 在内部，我创建了一组用于各种目的的文件夹，例如“文件”，“ PSD”，“ HTML”，“ pdf”等。我们现在仅需要一个文件夹，您可以将其称为“ HTML”。 在该文件夹中，再创建3个文件夹，并将其分别命名为“ css”，“ js”和“ images”。 然后打开“ css”文件夹并创建另一个文件夹，并将其简称为“ i”（代表images ）。 我们为什么要这样做？ 嗯...之所以这样做，是因为我想将内容图像与创建网站布局的图像分开。 如果我需要在服务器上移动我的文件夹，那么这将派上用场，那么我的图像的路径将不会受到影响，并且我不需要再次修改CSS文件来更正它。
第2步-分析设计
这样，我们就完成了整理文件夹的工作。 现在，我们可以仔细看看我们的设计。 像我一样，拍摄“美丽的网站设计”屏幕截图，然后尝试思考“幕后”。 我们未来网站的每个元素都需要编码并包装在HTML标记内。 我们还应该记住，这将是一个模板，以后有人会使用它并对其进行修改以适应他们的需求，因此我们需要使其对我们的用户尽可能地灵活。 我们需要确保，如果用户希望放一个更大的徽标而不是这个徽标，则徽标所在的占位符（div）是可扩展的。 网站的其他部分也需要扩展内容。 这就是为什么我们可能需要几个额外的占位符（div）来完成此操作的原因。 如果要为客户端编码站点，则可能无法以这种方式对其进行切片，因为它可能会保持原样。 让我们一步一步去看看哪些元素在哪个标签中。
首先是背景。 我们需要将顶部分成两个较小的部分：顶部_top（用于徽标和搜索字段）和顶部_bottom（用于放置导航）。 此外，还有一个很大的页眉支架，主要内容和页脚。 注意，页脚导航有一个额外的框。 这是因为我们也希望页脚也可扩展，因为有人可能希望最近发表10条帖子或评论，而不是像我设计的那样只有3条。 这样，页脚内容将使页脚导航进一步向下，并且始终会有更多空间容纳更多内容。
现在的界面。 徽标通常包裹在H1标签内，因此我们将在此处执行相同的操作。 搜索表单将被包装在“ form”标签内，该标签将获得背景图片，如屏幕截图所示。 在继续之前，我建议我们看看可以在哪里使用所有6个标题（H1至H6）。 H1完成了，我们说这将是我们的徽标，因为它是最重要的，并且始终是第一位。 H2是第二重要的标题，我们将使用它来包装标记行图像。 不过请放心，我们将为屏幕阅读器提供替代文本。 我决定将第三个标题用于显示我们的服务描述或标记行。 所以做吧。 因为客户对我们的评价非常重要。 我决定，即使它看起来像一个段落文本，它也应该放在H4标签内，而不仅仅是一个段落。 H5用于页脚标题，H6用于最新博客条目。 好了，我们的H消失了，我们可以继续前进。 如您所见，每个具有一个或多个句子的元素都放在一个段落中，链接当然是
“如。 像主要内容中的项目符号列表一样，项目符号列表是一个简单的无序列表“ ul”，其中“ li”上的项目符号被替换为自定义图像。 同样，我们所有的导航，顶部，中间和底部都放置在无序列表中-只是样式不同。
如果您注意的话，您会注意到我仅使用了5个HTML元素/标签来创建布局。 例如，我将“注册”按钮直接放在“ a”标签内，因为毕竟它是一个链接，无论它后面是否有按钮图形。 没有必要先创建带有按钮图形的div，然后再在其中放置链接“ a”。 完成分析后，我们可以打开Photoshop并准备要切片的PSD。
步骤3-准备PSD
在本教程中，我们将使用“ 切片工具”剪切出布局图像。 是的，您没听错，切片工具。 我仅在创建供他人使用或在Themeforest上出售的模板时才使用它，因为并非每个人都有技巧来更改其徽标图像或其他图形并在不破坏布局的情况下进行替换。 基本上，每个人都还需要在CSS文件中进行一些修改（更改尺寸等）。
请记住，我们在谈论的是如何使某人稍后更轻松地对其进行修改，这就是实现它的方法之一。
如果您觉得不需要这样做，请跳过此步骤。
由于我们的设计中有很多图形，因此我们需要将它们分开以使其易于分割。 我通常隐藏所有内容和按钮等，只保留背景并将该文件另存为backgrounds.psd。 没有背景的按钮等也一样。 因此，现在我们有两个psd文件。 一有背景，一有按钮，项目符号，标题等。
psd
content.psd
步骤4-切片图像
现在，我们可以开始对布局进行切片。 我们有“ background.psd”和“ content.psd”。 我们将首先从“ background.psd”开始。 如前所述，您可以像我有时一样从一个psd文件中剪切出图形，但是这次将其分开很重要，这样我们的客户以后更容易进行修改。
打开“ background.psd”文件。 在左侧的“工具”面板中，选择“ 切片工具” 。
第5步
选中“ 切片工具”后 ，从文档顶部到下一个条纹（导航部分）绘制一个切片。 使切片约20像素宽。 注意：有时最好使重复的背景图像更宽。 其原因是因为我们的浏览器将重复图像以创建背景，并且浏览器渲染引擎需要计算背景宽度并添加图像以创建完整背景。 如果我们的图像为1px，请想象需要完成多少计算，并且您的CPU使用率当然会增加更多。 话虽这么说，明智的做法是使用更大的文件大小（仅几千字节）制作更宽的背景图像，以节省CPU使用率。
将切片拉到深灰色线附近，因为这是我们的导航背景开始的地方。 请注意，我们如何始终在每个切片的底部保留纯色。 这是因为通过这种方式我们使该区域可扩展。 稍后，我们将为占位符和此重复的图像添加背景色，如果我们的内容更大，我们的网站就不会损坏！
第6步
我们不需要每次都绘制切片，只需复制现有的切片并调整其大小即可。 按住Shift键并从上方向下拖动切片。 仅调整高度！ 使它的切片的底部为浅灰色纯色。
步骤7
标题背景是唯一保持高度固定的部分。 这就是我们要分割此背景图像的方式。 再次从上方复制切片，然后调整高度以适合整个蓝色标题部分，包括小阴影。
步骤8
主要内容背景不需要全高分割。 我们需要查找出现在渐变中的最后一个纯色，即#ffffff（白色）。 使用颜色选择器工具查找渐变的该部分，并将切片的高度调整到该点。
步骤9
页脚。 从上方复制切片，将其向下移动并调整高度以适合深灰色页脚背景。
第10步
现在，我们只剩下底部的小导航背景了。 再次从上方复制切片并调整高度，直到到达文档末尾。
步骤11
我们还没有背景知识。 我们还有相框和灯光效果。 要对图片框架进行切片，我们需要禁用所有背景图层，因此最终只有该框架。 然后画一个切片并放大。调整切片，使整个图像放置在该切片内。
步骤12
这是所有背景层都关闭时的灯光效果。 创建切片时，请确保您留在960网格内。 顶部灯（1）和底部灯（3）将作为透明PNG输出，中间部分（2）作为JPEG输出。 我们可以用Background将整个光效果切成薄片并保存为JPEG，但我更喜欢这样做。
步骤13
现在打开您的“ content.psd”文件，因为我们现在将删除按钮，图像，导航等。
就像之前一样创建切片。 确保放大很多以为每个对象精确创建一个切片。 这就是它的外观。
切片时，始终可以使背景获得更好的对比度。
步骤14
将页眉中的两个按钮放大100％，以查看阴影的结束位置并在其周围绘制一个切片。 在这里非常精确是很重要的，因为我们不希望阴影被割断。 在浏览器中看起来很尴尬。
步骤15
是时候将我们的切片导出为透明的PNG。 转到“ 文件”>“保存为Web” 。 从下拉列表中选择PNG 24 。
步骤16
现在按住Shift键并选择我们创建的所有切片，因为我们不会仅导出这些切片。 也许您需要再次从下拉菜单中选择PNG 24。 点击保存 。 对话框窗口打开时，从窗口底部的下拉菜单中选择仅保存选定的切片 。 确保指定要将图像导出到的文件夹。
步骤17
我们将滑动门技术用于导航按钮。 如果您想了解更多信息，请确保您在A List Apart中访问了本文 。 我们需要确保按钮的左侧部分足够长，以适合菜单中最长的单词（PORTFOLIO）。 这就是为什么我们必须在设计中扩展：hover /：active状态以适合该单词。 最好使它宽几个像素，而不是如果不适合再重新切片。
步骤18
对于选项卡式导航，我们将使用CSS Sprites。 有关CSS Sprites的更多信息，请阅读确切地如何使用CSS Sprites 。 我们需要为非活动和活动状态创建一个按钮。 这样做是为了使我们可以将非活动标签移动到活动标签上方，并用两种状态对每个标签进行切片。
这就是一个选项卡切片的外观。 确保标签之间留出1px的间距。
步骤19-命名图像
现在该给导出的图像起有意义的名称了。 我已经对所有图像及其名称进行了屏幕截图，因此您可以按照我的示例进行操作。 这些图像都放置在“ CSS / i”文件夹中，因为它们是我们网站布局的一部分。 其他图像（如页脚“广告”或“特色作品”图像）位于根目录下的“ / images”文件夹中。
第20步-准备HTML和CSS模板
我们准备关闭Photoshop，并开始编写此精美设计的代码。 在这样做之前，让我们做一个很小的准备工作。 这只是可选步骤，您可以根据需要跳过。 我通常为每个项目准备HTML和CSS文件。 一旦完成该操作，您只需要将它们复制到您的工作文件夹中。 我喜欢这样的空白HTML文件：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="#" />
<meta http-equiv="cahe-control" content="cache" />
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Copyright" content="Copyright #" />
<meta name="keywords" content="PLEASE ENTER YOUR KEYWORDS HERE" />
<meta name="robots" content="index" />
<meta content="all/follow" name="robots" />
<meta content="general" name="rating" />
<meta content="7days" name="revisit" />
<!--CSS -->
<link href="css/main.css" rel="stylesheet" type="text/css" media="screen" />
<!--JAVASCRIPT -->
<!--PAGE TITLE -->
<title>BVD - Beautiful Website Design</title>
</head>
<!--BEGIN BODY -->
<body>
</body>
</html>在CSS文件中，我想写一些有关我正在编码的网站的信息，因此它看起来像这样：
/* CSS Document for BVD */
/*
Title: main.css
Browser(s): All
Author: Marko Prljic (http://www.markoprljic.iz.hr)
Created: 11.05.2009
*/第21步-标记
首先是第一件事。 我们将从标记开始。 正如引言中所述，创建强大而简洁的标记非常重要。 这就是为什么我们在开始编码之前首先分析我们的设计，做一些注释并考虑我们的标记结构的原因。 我建议您每次开始编码任何项目之前都要这样做。 如果该站点稍后将在某种CMS上采用，那么最好坐在开发人员旁边并再次进行标记，并最终根据需要进行一些更改。 由于我们不会在任何CMS中采用此方法，因此我们可以坚持使用第2步中的注释。
步骤22
让我们从背景开始。 为此，我们需要为内容创建占位符。 将此代码放在体内。
<div id="top_content">
<div class="center" id="top_light1">
</div>
</div>
<div id="nav_content">
<div class="center" id="top_light2">
</div>
</div>
<div id="header">
<div class="center" id="top_light3">
</div>
</div>
<div id="main_content">
<div class="center1" id="top_light4">
</div><!--end center 1 -->
</div><!-- end main content-->
<div id="footer">
<div class="center" id="top_light5">
</div>
</div>
<div id="footer_nav">
<div class="center">
</div>
</div>还记得我们是如何从PSD文件中切片图像的吗？ 首先，我们先切割顶部背景，然后再切割导航背景，再切割主要内容背景等。现在，当我们创建标记时，将按照与切割图像相同的顺序进行。 所以我先创建了“ top_content” div，然后创建了“ nav_content”，然后创建了“ main_content”，“ footer_content”和“ footer_nav”。 您会注意到，我立即创建了一些额外的div，称为“ center”。 我这样做的原因是因为这些“中心” div是我们真正的内容所有者，可以这么说。 “ top_content” div用于显示我们重复的背景图像，并将通过CSS文件设置为100％宽。 我们需要创建一个将居中的额外div，以便我们的内容也可以在浏览器中居中显示。
步骤23
现在，我们已将所有主要占位符都用于内容。 下一步是一步一步地开始为其他元素添加一些代码。 在“ top_content” div中，我们有一个徽标和一个搜索输入字段。 让我们将它们装箱。
<div id="top_content">
<div class="center" id="top_light1">
<h2><a href="#">BVD-Beautiful Website Design</a></h2>
<form id="search" action="" method="post">
<fieldset>
<label for="search">Search</label>
<input name="search" type="text" id="search" tabindex="1" />
</fieldset>
</form>
</div>
</div>
<div id="nav_content">
<div class="center" id="top_light2">
<ul id="nav">
<li><a href="#"><span>home</span></a></li>
<li><a href="#"><span>about</span><</a></li>
<li><a href="#"><span>service</span></a></li>
<li><a href="#"><span>portfolio</span></a></li>
<li><a href="#"><span>blog</span></a></li>
<li><a href="#"><span>contact</span></a></li>
<li><a href="#"><span>pricing</span></a></li>
</ul>
<p ><a href="#">Log in</a> <span >or</span></p><a href="#">Sign up</a>
</div>
</div>
<div id="header">
<div class="center" id="top_light3">
<h2>We make beautiful websites at affordable prices </h2>
<p>Because web design is our passion and that’s what we do </p>
<p><strong>Gratuitous octopus </strong> niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. </p>
<a href="#">Get a qoute </a> <a href="#">View portfolio </a>
<img src="images/header_images.png" alt="featured work" width="471" height="370" />
</div>
</div>
<div id="main_content">
<div class="center1" id="top_light4">
<!-- Leave room for the slider here, we will do this later-->
<div id="testimonials">
<div id="testimonials_inner">
<p >BVD is the best agency I’ve ever worked with...</p>
<h4>"These guys are simply awesome. I sent them my brief, they answered within few hours and one week later they delivered me the best design ever!"</h4>
<p ><span>said</span> <strong>John Doe</strong> <span>of</span></p><a href="#">Awesomeness</a>
<a href="#">SEE WHAT OTHERS ARE SAYING</a>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="center" id="top_light5">
<div class="column">
</div>
<div class="column">
</div>
<div class="column">
</div>
<div class="column">
</div>
</div>
</div>
<div id="footer_nav">
<div class="center">
<a class="footer_logo" href="#">BVD</a><p>Copyright 2009. All rights reserved. Valid (X)HTML / CSS.</p>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">service</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">pricing</a></li>
</ul>
</div>
</div>首先，我们必须创建“ H1”并将徽标包装在其中（稍后将使用CSS进行处理）。 然后，我们有我们的搜索输入字段。 我们需要创建一个表单，因为我们将向其中添加背景图像。 接下来是导航。 这是一个简单的无序列表，稍后我们将使用CSS对其进行样式设置。 请注意，我在“ li”的内部添加了一个额外的“ span”。 这是因为我们将使用滑动门技术，并且它需要一个span元素才能达到效果。 导航后，我们有登录或注册按钮。 由于这两个将成为链接，因此我将它们放在“ a”内。
标题由标题，几段，两个按钮和一个大图像组成。
“ main_content”将包含一个jQuery滑块，但现在我将其留空，仅创建了推荐部分。 我对jQuery不太满意，无法编写自己的脚本和标记，因此我可能会使用一种免费的可用脚本，并进行少量修改以适应我们的需求。
客户推荐来自两个div。 我们有4个边界可以创建，这两个div都可以实现。 外部div将应用1px边框，背景颜色和填充，内部div也将具有1px边框和背景颜色。 这样，我们可以创建那种效果。
现在只剩下页脚了。 我们将仅创建空列，并在以后随时填充它们。 我建议我们应该看看我们的网站在浏览器中的外观。
步骤24
这是我们网站当前的外观。 仍然没有应用CSS样式，因此浏览器默认情况下将其呈现。 这样，由于屏幕阅读器未启用CSS或JS，因此我们还可以查看其他屏幕阅读器将如何解释我们的网站。 我们的网站必须易于访问，这是对其进行测试的一种方法。
现在，看看它在手机上的外观。
真好！
步骤25-有趣的部分（CSS）
是时候让我们的网站更具风格了！ 我们已经奠定了基础，我们拥有清晰的标记，我们网站的几乎所有元素都在这里。 我们将再次触摸标记，因为我们将需要向某些元素添加一些额外的类和id，以便我们可以对它们进行样式设置。 我将再次从头到尾，不时地进行测试，并为您提供屏幕截图。 让我们开始吧！
步骤26
打开main.css文件。 添加一些基本CSS重置样式和主体定义，如下所示：
* {
margin: 0 auto 0 auto; /* GLOBAL RESET */
padding: 0;
}
body{
margin:0;
font-size: 62.5%;
font-family: Arial, Sans-Serif; /*change font*/
line-height: 150%;
color:#4b4d4a; /*change font color*/
background: #fff; /*background color*/
}
div, p, ul, img{
padding:0px; margin:0px; border:none;
}
ul{
list-style-type:none;
}步骤27
接下来，我们将设置标题样式并添加一些浏览器修复程序。
a { outline:none; /* Remove Firefox's dotted borders */ text-decoration:none; color:#d05606; padding:0; margin:0;}
a img { border:none;} /* Remove IE's blue borders */
h1 {font-size: 2.4em;}
h2 {font-size: 2.2em;}
h3 {font-size: 3.2em;}
h4 {font-size: 1.6em;}
h5 {font-size: 1.8em;}
h6 {font-size: 1.2em;}步骤28
我通常会声明一些额外的类，以防万一我需要它们。 它们主要用于文本格式设置，浮动元素，边距和填充。
.hr{ border-bottom:1px solid #CCCCCC; border-left:none; border-right:none; border-top:none; margin:10px 0 20px 0; }
.left{ float:left;}
.left_margin_right{ float:left; margin:0 10px 0 0; font-size:1.2em;}
.left_margin_right_top{ float:left; margin:4px 10px 0 0;}
.right{ float:right;}
.right_margin_top{ float:right; margin:40px 0 0 0;}
.right_margin_right{ float:right; margin:0 20px 0 0;}
p {font-size: 1.2em; padding:0; line-height:1.4em;}
.gray {color: #666; font-size:1em; font-style:normal;}
.fat{font-weight:bold;}
.small {font-size: 1.1em; padding:0; line-height:1.4em;}
.big {font-size: 1.8em; padding:0; line-height:1.2em; color:#f1f1f1; margin:0 0 22px 0;}
.white {font-size: 1.2em; padding:0 10px 0 0; line-height:1.4em; color:#fff;}
.title{ font-size:1.1em; font-style:italic; color:#227ab0;}
.stroke { border:1px solid #fff;}步骤29-背景
现在，我们将为布局添加颜色。 让我们选择所有外部div，然后将重复的背景图像附加到它们上。
#top_content{ background:#dddddd url(i/bg_top.jpg) top center repeat-x; height:81px;}
#nav_content{ background:#e4e4e3; height:52px;}
#header{ background:#268abe url(i/bg_header.jpg) top center repeat-x; height:418px;}
#main_content{ background:#fff url(i/bg_cont.jpg) top center repeat-x; padding:0 0 50px 0;}
#footer{ background:#4b4d4a url(i/bg_footer.jpg) top center repeat-x; height:368px;}
#footer_nav{ background:#dcdcda url(i/bg_footer_nav.jpg) top center repeat-x; height:32px; padding:15px 0 0 0;}
.center{ width:960px; height:100%; margin:0 auto; padding:0;}现在，让我们看一下浏览器中的外观。
步骤30
我们已经设置了背景，现在只需要在每个div中放置灯光效果叠加即可。 为此，我们将创建一组以透明png为背景的id。
#top_light1{ background:transparent url(i/bg_top_overlay.png) top center no-repeat; }
#top_light2{ background:transparent url(i/bg_nav_overlay.png) top center no-repeat; }
#top_light3{ background:transparent url(i/bg_header_overlay.jpg) top center no-repeat; }
#top_light4{ background:transparent url(i/bg_cont_overlay.png) top center no-repeat; }
#top_light5{ background:transparent url(i/bg_footer_overlay.png) top center no-repeat; }为了避免在我们的标记中添加额外的div，我们将向已定义的div添加一个id。 为此，我们需要稍微更改标记。
<div class="center" id="top_light1"></div>修改所有.center div后，让我们预览更改。
步骤31
现在我们已经设置了基础，可以逐步设计所有元素的样式。 首先是徽标和搜索表单。 为此，只需添加以下CSS代码：
h1 a { float:left; margin:20px 0 15px 0; display:block; width:350px; height:46px; background: transparent url(../images/logo.png) no-repeat; text-indent:-9999px; overflow:hidden;}
#searchform {float: right; margin:30px 0 15px 0; background: transparent url(i/bg_search.png) no-repeat;}
fieldset.search {
border: none;
width: 146px;
}
.search input, .search button {
border: none;
float: left;
}
.search input.box {
color: #a4a3a3;
font-size: 1.2em;
width: 109px;
height: 17px;
padding: 5px;
vertical-align:middle;
margin: 0;
background:none;
outline: none;
}
.search input.box:focus {
background: none;
outline: none;
}
.search button.btn {
width: 27px;
height: 27px;
cursor: pointer;
text-indent: -9999px;
background: url(i/bg_search.png) no-repeat top right;
}
.search button.btn:hover {
background: url(i/bg_search.png) no-repeat bottom right;
}首先，我们声明标题“ h”，后跟“ a”标签。 我们指定宽度和高度以及背景图片（这是我们的徽标图片）。 因为“ a”是一个内联元素，所以我们需要将其转换为块级元素，然后通过添加“ display：block;”来实现。 属性。 “文字缩进：-9999px；” 用于将文本移出屏幕，以便仅可见图像。 “溢出：隐藏；” 删除链接周围的大虚线边框，并使其宽度和高度与先前声明的宽度和高度相同。 使用搜索表单，我们做了一些技巧。 我们为“表单”提供了背景图片（带有按钮的整个字段）。 然后，我们说我们的输入字段将为109px宽和17px高。 实际上，图像的高度为27px，但是由于我们添加了5px的填充，因此我们需要从输入字段的宽度中减去10px，从高度中减去10px（每边各5px）。 这是我们稍后将要做的事情，因此请记住这一点。 接下来，我们添加了一个按钮，为其提供了相同的背景图片，但使其宽度仅为27px，高度为27px，就像“ GO”按钮本身一样。 另外，我们声明了按钮的：hover状态。
步骤32-导航
使用滑动门技术进行导航。 我不会在这里详细解释该技术，因此您应该先阅读本文 。 这是我们导航的代码。
/*NAVIGATION*/
.nav ul {margin:10px 0 0 0; padding: 0; list-style: none; float:left; }
.nav ul li{float: left; display: block; margin: 0 10px 0 0; padding: 0;}
.nav ul li a.button {
/* Sliding right image */
display: block;
float: left;
height: 27px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
margin-right: 6px;
padding-right: 14px; /* CHENGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */
/* FONT PROPERTIES */
text-decoration: none;
color: #848484;
font-size:1.2em;
font-family: Arial, Helvetica, sans-serif;
font-weight:normal;
text-transform:uppercase;
}
.nav ul li a.button span {
/* Background left image */
display: block;
line-height: 27px; /* CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */
padding:0 0 0 15px;
}
.nav ul li a.button:hover {
/* Sliding right image */
background: transparent url(i/button_nav_right.png) no-repeat scroll top right;
display: block;
float: left;
height: 27px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
margin-right: 6px;
padding-right: 14px; /* CHENGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */
/* FONT PROPERTIES */
text-decoration: none;
color: #7b3500;
font-size:1.2em;
font-family: Arial, Helvetica, sans-serif;
font-weight:normal;
text-transform:uppercase;
}
.nav ul li a.button:hover span {
/* Background left image */
background: transparent url(i/button_nav_left.png) no-repeat;
display: block;
line-height: 27px; /* CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */
padding:0 0 0 15px;
}
.nav ul li.selected a {
/* Sliding right image */
background: transparent url(i/button_nav_right.png) no-repeat scroll top right;
display: block;
float: left;
height: 27px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
margin-right: 6px;
padding-right: 14px; /* CHENGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */
/* FONT PROPERTIES */
text-decoration: none;
color: #7b3500;
font-size:1.2em;
font-family: Arial, Helvetica, sans-serif;
font-weight:normal;
text-transform:uppercase;
}
.nav ul li.selected a span {
/* Background left image */
background: transparent url(i/button_nav_left.png) no-repeat;
display: block;
line-height: 27px; /* CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */
padding:0 0 0 15px;
}在浏览器中进行测试之前，请确保对标记进行一些小的更改。
<div id="nav_content">
<div class="center" id="top_light2">
<div class="nav">
<ul id="nav">
<li><a href="#"><span>home</span></a></li>
<li><a href="#"><span>about</span><</a></li>
<li><a href="#"><span>service</span></a></li>
<li><a href="#"><span>portfolio</span></a></li>
<li><a href="#"><span>blog</span></a></li>
<li><a href="#"><span>contact</span></a></li>
<li><a href="#"><span>pricing</span></a></li>
</ul>
</div>
<a class="signup" href="#">Sign up</a><p class="login" ><a class="fat" href="#">Log in</a> <span class="gray" >or</span></p>
</div>
</div>步骤33
在导航的右侧，我们需要设置样式的“注册”按钮。 将此代码粘贴到CSS文件中。
.signup { float:right; width:87px; height:30px; display:block; margin:10px 0 0 0; background:transparent url(i/button_signup.png) no-repeat; text-indent:-9999px; overflow:hidden;}
.login {float:right; margin:15px 10px 0 0;}我们将这两个元素向右浮动，并给它们上边缘和右边缘，使它们居中并彼此分开。
步骤34-标头
在这里，我们必须再次更改标记，但是归结为将类添加到现有元素，或者可能添加了一些新内容。 我将标题分为两部分，左侧和右侧。 为此，我在CSS文件中创建了两个新类：
.left_column { width:469px; float:left; padding:55px 0 40px 0;}
.right_column { width:470px; float:left; padding:50px 0 0 0;}左列将用于包含标记行，段落和按钮，而此处将不使用右列，因为我们在右侧有一个很大的图像，足以将标题组合在一起。 此列将在main_content中使用。 这是我们的新标题标记：
<div id="header">
<div class="center" id="top_light3">
<div class="left_column">
<h2>We make beautiful websites at affordable prices </h2>
<p>Because web design is our passion and that’s what we do </p>
<p><strong>Gratuitous octopus </strong> niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. </p>
<a href="#">Get a qoute </a> <a href="#">View portfolio </a>
</div>
<img src="images/header_images.png" alt="featured work" width="471" height="370" />
</div>
</div>和CSS：
.tagline{ width:436px; height:97px; background:transparent url(../images/tagline.png) no-repeat; text-indent:-9999px; overflow:hidden;}
.getquote {float:left; margin:42px 0 0 -4px; display:block; width:168px; height:45px; background: transparent url(i/button_quote.png) no-repeat; text-indent:-9999px; overflow:hidden;}
.portfolio {float:left; margin:42px 0 0 10px; display:block; width:168px; height:45px; background: transparent url(i/button_portfolio.png) no-repeat; text-indent:-9999px; overflow:hidden;}这就是我们网站现在的外观。
步骤35-主要内容
还记得我们在编写标记时忽略了主要内容吗？ 嗯，之所以这样做，是因为我们将使用Chris Coyier的文章“ 构建更好的Blogroll：SimplePie和jQuery带来的动态乐趣”中的滑块 。 现在，如果您对创建此滑块的整个过程感兴趣，请阅读此文章。 我对使用PHP动态生成内容并不十分感兴趣，因此我下载了源代码并将其复制到此处。 我对HTML，CSS和JS文件进行了一些修改，以达到相同的效果，但使用自己的设计。 为此，请首先将此代码插入文档的开头：
<script src='js/jquery-1.2.6.min.js' type='text/javascript'> </script>
<script src="js/jquery-easing.1.2.js" type='text/javascript'> </script>
<script src="js/jquery-easing-compatibility.1.2.js" type='text/javascript'> </script>
<script src="js/coda-slider.1.1.1.js" type='text/javascript'> </script>接下来，将此代码添加到位于main_content内部的div中：
<div id="blogSliderWrap">
<div id="blogSlider">
<div class="innerWrap">
<div class="panelContainer">
<div class="panel" title="Web design">
<div class="wrapper">
<div class="left_column">
<div class="featured">
<img src="images/featured_0.jpg" alt="featured work" /> </div>
<p class="small"><span class="title">Freelance designer</span> - January 2009</p>
</div>
<div class="right_column">
<h2>We make the best websites!</h2>
<p class="big">Because web design is our passion and <br />that’s what we do.</p>
<ul class="listing"><!-- left list-->
<li>Adobe Photoshop</li>
<li>Adobe Illustrator</li>
<li>Adobe Flash</li>
<li>Adobe Fireworks</li>
</ul>
<ul class="listing"><!-- right list-->
<li>Adobe Dreamweaver</li>
<li>Adobe Swift 3D</li>
<li>Adobe Photography</li>
</ul>
<p class="description">Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. </p>
</div>
</div>
</div>
<div class="panel" title="Marketing">
<div class="wrapper">
<div class="left_column">
<div class="featured">
<img src="images/featured_0.jpg" alt="featured work" /> </div>
<p class="small"><span class="title">Freelance designer</span> - January 2009</p>
</div>
<div class="right_column">
<h2>We make the best websites!</h2>
<p class="big">Because web design is our passion and <br />that’s what we do.</p>
<ul class="listing"><!-- left list-->
<li>Adobe Photoshop</li>
<li>Adobe Illustrator</li>
<li>Adobe Flash</li>
<li>Adobe Fireworks</li>
</ul>
<ul class="listing"><!-- right list-->
<li>Adobe Dreamweaver</li>
<li>Adobe Swift 3D</li>
<li>Adobe Photography</li>
</ul>
<p class="description">Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. </p>
</div>
</div>
</div>
<div class="panel" title="Consulting">
<div class="wrapper">
<div class="left_column">
<div class="featured">
<img src="images/featured_2.jpg" alt="featured work" /> </div>
<p class="small"><span class="title">Freelance designer</span> - January 2009</p>
</div>
<div class="right_column">
<h2>We make the best websites!</h2>
<p class="big">Because web design is our passion and <br />that’s what we do.</p>
<ul class="listing"><!-- left list-->
<li>Adobe Photoshop</li>
<li>Adobe Illustrator</li>
<li>Adobe Flash</li>
<li>Adobe Fireworks</li>
</ul>
<ul class="listing"><!-- right list-->
<li>Adobe Dreamweaver</li>
<li>Adobe Swift 3D</li>
<li>Adobe Photography</li>
</ul>
<p class="description">Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. </p>
</div>
</div>
</div>
<div class="panel" title="Support">
<div class="wrapper">
<div class="left_column">
<div class="featured">
<img src="images/featured_3.jpg" alt="featured work" /> </div>
<p class="small"><span class="title">Freelance designer</span> - January 2009</p>
</div>
<div class="right_column">
<h2>We make the best websites!</h2>
<p class="big">Because web design is our passion and <br />that’s what we do.</p>
<ul class="listing"><!-- left list-->
<li>Adobe Photoshop</li>
<li>Adobe Illustrator</li>
<li>Adobe Flash</li>
<li>Adobe Fireworks</li>
</ul>
<ul class="listing"><!-- right list-->
<li>Adobe Dreamweaver</li>
<li>Adobe Swift 3D</li>
<li>Adobe Photography</li>
</ul>
<p class="description">Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. </p>
</div>
</div>
</div>
</div><!--end panel container -->
</div><!-- end inner wrap-->
</div><!--end blog slider -->
</div>
<!--end blog slider wrap -->我发现我最需要从原始ChrisCSS文件中为滑块更改图像的尺寸和路径。 新的滑块CSS：
/*
WIDGET STRUCTURE
*/
#blogSliderWrap { width: 1167px; margin: 0 auto; padding:50px 0 30px 0;
background: url(i/bg_tabs.png) 35px 57px no-repeat;
position: relative; }
#blogSlider { margin: 0 auto; width: 960px; }
.stripViewer { position: relative; overflow: hidden; clear: both; }
.stripViewer .panelContainer { position: relative; left: 0px; top: 0px; }
.stripViewer .panelContainer .panel { float: left; position: relative; width: 960px; }
.stripNav { position: relative; top: 0; left:114px; z-index: 99; }
.wrapper { padding: 10px; }
.innerWrap { width: 960px; overflow: hidden; }
/*
MAIN TABBED NAVIGATION
*/
.stripNav ul li { float: left; }
.stripNav li a { /* Generic "CSS image replacement" */
display: block; height: 69px; text-indent: -9999px; }
/* The below class names are auto-generated by the JavaScript */
.stripNav li.tab1 a { background: url(i/tab_1.png) top center no-repeat; width: 231px; }
.stripNav li.tab2 a { background: url(i/tab_2.png) top center no-repeat; width: 240px; }
.stripNav li.tab3 a { background: url(i/tab_3.png) top center no-repeat; width: 240px; }
.stripNav li.tab4 a { background: url(i/tab_4.png) top center no-repeat; width: 230px; }
.stripNav li a:hover,
.stripNav li a:active,
.stripNav li a:focus { /* Restore focus styling that we removed when we removed outlines */
background-position: top center; }
/* It is neccessary to repeat the image paths here */
.stripNav li.tab1 a.current { background: url(i/tab_1.png) bottom center no-repeat; }
.stripNav li.tab2 a.current { background: url(i/tab_2.png) bottom center no-repeat; }
.stripNav li.tab3 a.current { background: url(i/tab_3.png) bottom center no-repeat; }
.stripNav li.tab4 a.current { background: url(i/tab_4.png) bottom center no-repeat; }此外，我们用一些新类更新了“ right_column”，因此我们需要在CSS中对其进行样式设置：
.right_column .description{ float:left; width:100%;}
.featured { width:407px; height:237px; padding:17px 0 0 13px; background:transparent url(i/bg_image.png) no-repeat;}
ul.listing{ float:left; padding:12px 80px 28px 10px; margin:0;}
ul.listing li{ list-style-image: none; background-image:url(i/ico_li.png); background-repeat: no-repeat; background-position: left center; padding:0 0 2px 25px; margin:0 0 5px 0; font-size:1.2em;}“ .featured”是我们的特色图片所在的左侧的div。 我们将背景设置为该图像框架，并使用“ padding”属性将内容居中。 “ ul.listing”是我们在右侧的无序列表（项目列表）。 它向左浮动，并有一些填充将其与周围的内容分开。 此外，我们使用“ list-style-image：none; background-image：url（i / ico_li.png）;”将自定义项目符号图像（蓝色）替换为“ ul.listing li”上的默认项目符号。 带有“背景位置：左中心；” 我们将项目符号向左对齐，并以文本为中心。 最后添加一些填充，以使所有内容都有更多空间。 “ .right_column .description”是出现在两个项目符号列表下方的段落的类。 它只是告诉该段落为100％宽，因此不会环绕列表，因为它们向左浮动。
最后是JS文件。 我只是删除了我们不在这里使用的不必要的代码。 新的coda-slider.1.1.1.js文件如下所示：
jQuery(function(){
jQuery("div.csw").prepend("<p class='loading'>Loading...<br /><img src='http://tutsplus.s3.amazonaws.com/tutspremium/web-development/013_BeautifulWebsiteFromScratchCoding/images/ajax-loader.gif' alt='loading...'/ ></p>");
});
var j = 0;
jQuery.fn.codaSlider = function(settings) {
settings = jQuery.extend({
easeFunc: "expoinout",
easeTime: 750,
toolTip: false
}, settings);
return this.each(function(){
var container = jQuery(this);
// Remove the preloader gif...
container.find("p.loading").remove();
// Self-explanatory...
container.removeClass("csw").addClass("stripViewer");
// Get the width of a panel, set from CSS...
var panelWidth = container.find("div.panel").width();
// panelCount gives us a count of the panels in the container...
var panelCount = container.find("div.panel").size();
// Calculate the width of all the panels when lined up end-to-end...
var stripViewerWidth = panelWidth*panelCount;
// Use the above width to specify the CSS width for the panelContainer element...
container.find("div.panelContainer").css("width" , stripViewerWidth);
// Set the navWidth as a multiple of panelCount to account for margin-right on each li
var navWidth = 240;
// Specify the current panel.
// If the loaded URL has a hash (cross-linking), we're going to use that hash to give the slider a specific starting position...
if (location.hash && parseInt(location.hash.slice(1)) <= panelCount) {
var cPanel = parseInt(location.hash.slice(1));
var cnt = - (panelWidth*(cPanel - 1));
jQuery(this).find("div.panelContainer").css({ left: cnt });
// Otherwise, we'll just set the current panel to 1...
} else {
var cPanel = 1;
};
// Create appropriate nav
container.each(function(i) {
// Create the Tabs
jQuery(this).before("<div class='stripNav' id='stripNav" + j + "'><ul><\/ul><\/div>");
jQuery(this).find("div.panel").each(function(n) {
jQuery("div#stripNav" + j + " ul").append("<li class='tab" + (n+1) + "'><a href='#" + (n+1) + "'>" + jQuery(this).attr("title") + "<\/a><\/li>");
});
// Tab nav
jQuery("div#stripNav" + j + " a").each(function(z) {
// Figure out the navWidth by adding up the width of each li
navWidth += jQuery(this).parent().width();
// What happens when a nav link is clicked
jQuery(this).bind("click", function() {
jQuery(this).addClass("current").parent().parent().find("a").not(jQuery(this)).removeClass("current"); // wow!
var cnt = - (panelWidth*z);
cPanel = z + 1;
jQuery(this).parent().parent().parent().next().find("div.panelContainer").animate({ left: cnt}, settings.easeTime, settings.easeFunc);
});
});
// Same-page cross-linking
jQuery("a.cross-link").click(function(){
jQuery(this).parents().find(".stripNav ul li a:eq(" + (parseInt(jQuery(this).attr("href").slice(1)) - 1) + ")").trigger('click');
});
// Set the width of the nav using the navWidth figure we calculated earlier. This is so the nav can be centred above the slider
jQuery("div#stripNav" + j).css("width" , navWidth);
// Specify which tab is initially set to "current". Depends on if the loaded URL had a hash or not (cross-linking).
if (location.hash && parseInt(location.hash.slice(1)) <= panelCount) {
jQuery("div#stripNav" + j + " a:eq(" + (location.hash.slice(1) - 1) + ")").addClass("current");
} else {
jQuery("div#stripNav" + j + " a:eq(0)").addClass("current");
}
});
j++;
});
};步骤36
完成所有这些更改后，我们只需要在文档的“头部”插入一小段代码即可触发滑块。 之后，我们可以测试我们的页面。
<script type='text/javascript'>
$(function () {
$("#blogSlider").codaSlider();
});
</script>这就是主要内容区域现在的外观。 我们仍然需要对证明部分进行样式设置。
步骤37
推荐框由2个单独的div组成。 外部div具有背景色和1px的实线边框。 内盒也具有背景色，1px边框和10px的边距。 此边距确保内部框的所有边比外部div小10px，从而创建外部div的粗边框效果。 让我们看一下CSS。
#testimonials { margin:0 auto; width:960px; background:#f2f2f2; border:1px solid #e0e0df;}
#testimonials_inner { margin:10px; padding:20px; width:900px; background:#f8f7f7; border:1px solid #ececec;}“保证金：0自动；” 用于在main_content中将证明框居中。 “填充：20px；” 内部div用于将内容与边框保持一定距离。 注意内盒的宽度如何变小？ 这是由添加边距和填充引起的。 每次我们向元素添加填充时，我们都需要根据给定的填充来降低该元素的宽度或高度。
步骤38
现在，我们必须对证明框的内容进行样式设置。 我为内容的每个部分制作了一些额外的类，看起来像这样：
#testimonials_inner p.intro{ color:#d05606; font-weight:bold; font-size:1.4em;}
#testimonials_inner h4{ padding:20px 0; font-family:"Times New Roman", Times, serif; font-size:2.6em; color:#666; font-weight:normal; font-style:italic; line-height:1.4em;}
#testimonials_inner a.all { display:block; width:192px; background:#f2f2f2; border:1px solid #e0e0e0; color:#6c6c6c; font-size:1.2em; padding:5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
#testimonials_inner a.all:hover { display:block; width:192px; background:#fff; border:1px solid #e0e0e0; color:#6c6c6c; font-size:1.2em; padding:5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
#testimonials_inner p.sig{ float:right; padding:0 20px 0 0;}
#testimonials_inner p.sig span{ font-size:1.1em; font-style:italic; color:#666;}
#testimonials_inner a.logo {float:right; width:162px; height:16px; display:block; background: transparent url(../images/logo_testimonials.png) no-repeat; text-indent:-9999px; overflow:hidden;}首先，我声明了该段落的字体颜色，大小和粗细。 然后，证明书被包裹在“ h4”标签内，因为我认为它是内容的重要组成部分，因此应以这种方式加以强调。 我们也可以将其包装在“ p”标签内。 “ .all”类用于“查看更多推荐”按钮。 您会注意到，我使用了一些CSS3属性，例如圆角。 当然，大多数浏览器都支持它，但IE除外。 IE会将其呈现为方形框。 我们可以忍受:)。 样式的最后一件事是客户的签名和徽标，这将是其首页的链接。 我必须重新排列一下标记才能以正确的顺序显示“更多按钮”和“签名”，因此新标记如下所示：
<div id="testimonials">
<div id="testimonials_inner">
<p >BVD is the best agency I’ve ever worked with...</p>
<h4>"These guys are simply awesome. I sent them my brief, they answered within few hours and one week later they delivered me the best design ever!"</h4>
<a class="logo" href="#">Awesomeness</a><p class="sig"><span>said</span> <strong>John Doe</strong> <span>of</span></p>
<a class="all" href="#">SEE WHAT OTHERS ARE SAYING</a>
</div>
</div>步骤39
我们几乎完成了此布局。 剩下的就是页脚区域。 让我们看看我们的页脚标记看起来如何。
<div id="footer">
<div class="center" id="top_light5">
<div class="column">
</div>
<div class="column">
</div>
<div class="column">
</div>
<div class="column">
</div>
</div>
</div>
<div id="footer_nav">
<div class="center">
<a class="footer_logo" href="#">BVD</a><p>Copyright 2009. All rights reserved. Valid (X)HTML / CSS.</p>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">service</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">pricing</a></li>
</ul>
</div>
</div>现在，我们需要在每一列中填充一些内容。 我们开工吧。
<div id="footer">
<div class="center" id="top_light5">
<div class="column">
<h5>latest blog entries</h5>
<div class="hr"></div>
<p class="date">12.06</p><h6><a href="#">Some heading goes here</a></h6>
<p class="lead">Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium.</p>
<p class="date">12.06</p><h6><a href="#">Some heading goes here</a></h6>
<p class="lead">Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium.</p>
<p class="date">12.06</p><h6><a href="#">Some heading goes here</a></h6>
<p class="lead">Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium.</p>
</div>
<div class="column">
<h5>recent comments</h5>
<div class="hr"></div>
<div class="recent_comment">
<p><span class="fat">Ben</span> said:</p>
<a class="comment" href="#">Gratuitous octopus niacin, sodium glutimate. </a>
</div>
<div class="recent_comment">
<p><span class="fat">Joe Santos</span> said:</p>
<a class="comment" href="#">Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. </a>
</div>
<div class="recent_comment">
<p><span class="fat">Marko</span> said:</p>
<a class="comment" href="#">Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate. </a>
</div>
</div>
<div class="column">
<h5>adverstising</h5>
<div class="hr"></div>
<a class="ad_odd" href="#">
<img width="86" height="86" class="stroke" src="images/ad1.jpg" alt="advertising" />
</a>
<a class="ad" href="#">
<img width="86" height="86" class="stroke" src="images/ad2.jpg" alt="advertising" />
</a>
<a class="ad_odd" href="#">
<img width="86" height="86" class="stroke" src="images/ad3.jpg" alt="advertising" />
</a>
<a class="ad" href="#">
<img width="86" height="86" class="stroke" src="images/ad4.jpg" alt="advertising" />
</a>
</div>
<div class="column_odd">
<h5>twitter stuff</h5>
<div class="hr"></div>
<div id="tweeter">
<a class="from" href="#">wisefalco</a>:
<p>@<a href="#">simnor</a>Haha, this is really funny ( <a href="#">http://tinyurl.com/cnfd2</a> )</p>
<p class="posted">5 minutes ago from web</p>
<a class="follow" href="#">Follow us on Twitter</a>
</div>
</div>
</div>
</div>首先，我们在每列中添加所有标题，然后添加水平规则。 “最新博客”条目由日期，标题和线索文本组成。 日期与背景图像（图标）一起显示，并且标题是指向整篇文章的链接。 我在段落和链接中添加了一些额外的类，以便以后可以使用CSS设置样式。 最近的评论几乎以相同的方式进行。 不同之处在于每个注释都包装在“ recent_comment” div中。 广告图像的边框很粗，因此我制作它们的方法与在“推荐”框中的方法相同。 您应注意，一个广告div的类为“ ad_odd”，另一个广告类为“ ad”。 这是因为我为每个添加项赋予了不同的边距，以使它们保持对齐并保持相等的间距。 最后要注意的是最后一个列类“ column_odd”。 这样做的原因与之前的广告相同。 我们很快会在CSS中看到这一点。 Twitter框具有一个简单的背景图片，并使用了填充。
步骤40
让我们看看页脚CSS的外观。
.column { width:225px; padding:0 15px 0 0; margin:30px 0; float:left; color:#f0f0f0;}
.column h5{ font-size:1.4em; font-weight:bold; letter-spacing:-1px; text-transform:uppercase;}
.column h6 { margin:0 0 10px 0;}
.column h6 a { margin:0 0 10px 0; color:#fafafa;}
.column h6 a:hover { margin:0 0 10px 0; color:#d05606;}
.column .date{ float:left; width:34px; height:17px; padding:0 0 0 5px; margin:0 10px 0 0; background:transparent url(i/ico_date.png) no-repeat; font-size:1.1em; font-weight:bold;}
.column p {font-size:1.1em;}
.column p.lead {font-size:1.1em; margin:0 0 20px 0;}
.column_odd { width:235px; padding:0; margin:30px 0; float:left; color:#f0f0f0;}
.column_odd p {font-size:1.1em;}
.column_odd h5{ font-size:1.4em; font-weight:bold; letter-spacing:-1px; text-transform:uppercase;}
.column_odd #tweeter { width:181px; height:185px; padding:18px 20px 18px 20px; background: transparent url(i/bg_twitter.png) no-repeat; position:relative; font-size:1.4em; color:#333; font-family:"Times New Roman", Times, serif; font-style:italic;}
.column_odd #tweeter a.from { font-weight:bold;}
.column_odd #tweeter a.follow { position:absolute; bottom:60px; left:0; color:#fff; font-family:Arial, Helvetica, sans-serif; text-decoration:underline; font-size:0.8em; font-style:italic;}
.column_odd #tweeter a.follow:hover { position:absolute; bottom:60px; left:0; color:#d05606; font-family:Arial, Helvetica, sans-serif; text-decoration:underline; font-size:0.8em; font-style:italic;}
.column_odd #tweeter p.posted { font-size:0.8em; margin:5px 0 0 0; color: #999;}
.column .ad{ float:left; display:block; width:88px; height:88px; border:1px solid #fff; padding:5px; margin:0; background:#eaeaea;}
.column .ad_odd { float:left; display:block; width:88px; height:88px; border:1px solid #fff; padding:5px; margin:0 15px 15px 0; background:#eaeaea;}
.column .recent_comment { background:transparent url(i/ico_comment.png) top left no-repeat; padding:0 0 0 40px; margin:0 0 20px 0; font-size:1.2em;}
.column a.comment { display:block; font-size:0.9em; margin:5px 0 0 0; color:#f0f0f0;}
.column a.comment:hover {display:block; font-size:0.9em; margin:5px 0 0 0; color:#d05606;}“ .column”的宽度是根据我们添加到其中的网格和填充计算的。 “保证金：30px 0;” 在顶部和底部分别为30px和0px。 如前所述，“。date”已应用背景图像（橙色图标）。 “ h5”是列标题，“ h6”是最新博客条目标题。 我们还为“ h6”定义了：hover状态。 “ column_odd”是带有Twitter框的那个。 请注意，“。column”的右侧填充设置为15px，而“ column_odd”的右侧填充设置为0px。 这样，我们就可以使它们在网格中完全对齐。 Twitter div的位置相对相对，因为这样，我们可以轻松地将“在Twitter上关注我们”链接绝对定位在Twitter气球外显示。 我们本来可以做到这一点，但是我认为这将是最好的解决方案。
步骤41
底部导航现在很容易。 我们需要做的就是添加徽标和一些版权声明，以及包裹在无序列表中的小型重复导航。 我们已经准备好标记，现在需要CSS。 这是CSS代码：
#footer_nav .center a.footer_logo{ float: left; display:block; width:25px; height:16px; background: transparent url(../images/logo_footer.png) no-repeat; text-indent:-9999px; overflow:hidden;}
#footer_nav .center p { float:left; font-size:1.1em; color:#848484; padding:0 0 0 20px; }
#footer_nav .center ul { float:right;}
#footer_nav .center ul li{ float:left; margin:0 20px 0 0; }
#footer_nav .center ul li a { font-size:1.1em; text-transform:uppercase; color:#848484;}
#footer_nav .center ul li a:hover { color:#505457;}
#footer_nav .center ul li a:active { color:#505457;}步骤42-IE呢？
是的，我们需要修复IE7和IE6中的某些问题。 为此，我们首先需要查看两个浏览器中哪些元素未正确显示。 我不会过多解释如何修复IE中的错误，但我只能说主要归结于调整边距和填充。 也没有关于常见IE错误以及如何修复它们的资源：
首先将这段代码放入我们文档的头部。
<!--[if IE 6]><link rel="stylesheet" href="css/ie6.css" type="text/css" ><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="css/ie7.css" type="text/css" ><![endif]-->步骤43
创建ie6.css和ie7.css并将其保存在也保存了main.css的“ css”文件夹中。 对于ie7.css，请粘贴以下代码：
div { overflow:hidden;}
.signup { float:right; width:87px; height:30px; display:block; margin:-25px 0 0 0; background:transparent url(i/button_signup.png) no-repeat; text-indent:-9999px; overflow:hidden;}
.login {float:right; margin:-15px 10px 0 0;}
.description{ float:left; width:100%;}
ul.listing{ float:left; margin:12px 60px 28px 10px; padding:0;}
ul.listing li{ list-style-image: none; background-image:url(i/ico_li.png); background-repeat: no-repeat; background-position: left center; padding:0 0 2px 25px; margin:0 0 5px 0; font-size:1.2em;}
.column .ad{ float:left; display:block; width:88px; height:88px; border:1px solid #fff; padding:5px; margin:0 0 15px 0; background:#eaeaea;}
.column .ad_odd { float:left; display:block; width:88px; height:88px; border:1px solid #fff; padding:5px; margin:0 15px 0 0; background:#eaeaea; clear:left;}
#searchform {float: right; margin:30px 0 0 460px; padding:0; background: url(i/bg_search.png) no-repeat;}
#blogSliderWrap {
background: none;
width: 1167px;
position: relative;
overflow: hidden;
background:transparent url(i/bg_tabs.png) no-repeat 30px 58px;
}
#blogSlider {
background: none;
width: 960px;
position:relative;
padding: 0;
margin: 0;
margin-left:115px;
}
.stripNav {
margin: 0;
top: 0px;
}
.signup {
margin-top:10px;
}
.login {
margin-top:14px;
}
.column_odd #tweeter a.follow {
margin-top:400px;
float:left;
}这是ie7.css：
div { overflow:hidden;}
.signup { float:right; width:87px; height:30px; display:block; margin:-25px 0 0 0; background:transparent url(i/button_signup.png) no-repeat; text-indent:-9999px; overflow:hidden;}
.login {float:right; margin:-15px 10px 0 0;}
.description{ float:left; width:100%;}
ul.listing{ float:left; margin:12px 60px 28px 10px; padding:0;}
ul.listing li{ list-style-image: none; background-image:url(i/ico_li.png); background-repeat: no-repeat; background-position: left center; padding:0 0 2px 25px; margin:0 0 5px 0; font-size:1.2em;}
.column .ad{ float:left; display:block; width:88px; height:88px; border:1px solid #fff; padding:5px; margin:0 0 15px 0; background:#eaeaea;}
.column .ad_odd { float:left; display:block; width:88px; height:88px; border:1px solid #fff; padding:5px; margin:0 15px 0 0; background:#eaeaea; clear:left;}
#searchform {float: right; margin:30px 0 0 460px; padding:0; background: url(i/bg_search.png) no-repeat;}步骤44-IE6的透明度如何？
我们也有一种药；）。 互联网上有几种IE6 PNG修复脚本，但是我喜欢使用“ DD迟来的” PNG修复程序。 它很少使IE6混乱，并且易于实现。 首先访问此网站并下载脚本。 为了使其正常工作，我们需要在文档的开头添加另一个条件注释。
<!--[if IE 6]>
<script src="js/DD_belatedPNG_0.0.7a.js" type="text/javascript"></script>
<script src="js/png_fix_elements.js" type="text/javascript"></script>
<![endif]-->接下来打开“ png_fix_elements.js”并在其中进行编辑。 您需要指定应用了透明PNG的所有ID和元素类。
DD_belatedPNG.fix
('#top_light1,h1 a,#top_light2,.tagline,.right_margin_top,.getquote,.portfolio,#blogSliderWrap,#top_light5,.column .date,.column .recent_comment,#footer_nav .center a.footer_logo,.stripNav li.tab1 a.current,.stripNav li.tab2 a.current,.stripNav li.tab3 a.current,.stripNav li.tab4 a.current,#top_light4,.stripNav li.tab1 a,.stripNav li.tab2 a,.stripNav li.tab3 a,.stripNav li.tab4 a,.featured, #footer .center .column_odd #tweeter');而已！
哇，这是一个漫长而详尽的教程，您在其中学习了如何从头开始编写网站代码。 在此过程中，我们几乎涉及到每个主题。 从组织文件夹，分析设计，定义标记结构，准备PSD，切片图像和编码。 希望您像我一样喜欢它。
如果您有兴趣对整个网站进行编码，可以在Themeforest.net上获得该设计。
- 在Twitter上关注我们，或订阅NETTUTS RSS Feed，以获取更多日常Web开发案例和文章。
翻译自: https://code.tutsplus.com/tutorials/coding-a-beautiful-website-from-scratch--net-4940
从头编写操作系统
扫一扫
4571
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
