共计 6797 个字符，预计需要花费 17 分钟才能阅读完成。
前言
CSS 已经学了一些基础内容了，我们来讲解一个小案例吧。以 博雅互动 的官网首页举例。
版心
首页的 版心 如下：
这里我们要普及一个概念，叫“版心 ”。 版心是页面中主要内容所在的区域。
比如说，网站左上角的 logo，设计图给出的左边距是 143 像素，此时，我们千万不要以为，logo 的左边距真的是 143 像素。因为设计图只是一个版心；而整个页面是处于浏览器的中间，浏览器的宽度是可以随时调整的。
我们量一下中间四个方形图的 width，是 1000px，所以，网页版心的宽度是 1000px。
网页的结构
从结构上来看，网页分为头部（导航栏）、banner 区、内容区、底部。
导航栏的制作
在此我们只讲基础知识的使用，不涉及浏览器的优化。
class==header这个 div 是顶部的通栏，我们在里面放一个 1000px 宽的 div，作为通栏的版心，我一般把这个版心称为class=inner_c，c 指的是 center。
class=inner_c不需要给高，因为它可以被内容撑高。
现在我们需要在 class=inner_c 里放三个东西：左侧的 logo、中间的导航栏、右侧的“加入我们”。
接下来我们开始做右侧的「加入我们」，「加入我们」的背景是带圆角的矩形，这个圆角，实现的方式有两种：要么切图，要么用 CSS3 实现（IE 7、IE 8 不兼容）。我们暂时使用切图来实现。
我们最好把「加入我们」这个超链接 <a> 放到 div 里，然后设置 div 的 margin 和 padding，而不是直接设置 <a> 的边距。
我们起个名字叫 class=jrwm 是没有问题的，这在工作当中很常见，如果写成 class=join_us 反倒很别扭。
暂时我们的做法是：
- （1）给
class=jrwm_box这个 div 里放一个class=jrwm的 div。class=jrwm用来放绿色的背景图片。 - （2）在
class=jrwm里放一个超链接，并将超链接转为块级元素。
最终，导航栏的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
body{
font-size: 14px;
font-family: "Microsoft YaHei","SimSun";
height: 8888px;
}
.header{
height: 58px;
background-color: #191D3A;
}
/* 版心 */
.inner_c{
width: 1000px;
margin: 0 auto; /* 让导航条、内容区域等部分的版心在父亲里居中 */
}
/* 导航条的 logo*/
.header .logo{
float: left;
margin-right: 40px;
}
.header .nav{float: left;}
.header .nav ul{list-style: none; /* 去掉列表前面的圆点 */}
.header .nav ul li{
float: left;
width: 100px;
line-height: 58px; /* 让行高等于这一行的高度，保证里面的文字垂直居中 */
border-left: 1px solid #252947; /* 每个 li 之间有间隔线 */
}
.header .nav ul li.last{border-right: 1px solid #252947;/* 最后一个 li 的右边加间隔线 */}
.header .nav ul li a{
display: block; /* 将超链接转为块儿，可以保证其霸占父亲的整行 */
height: 58px;
text-decoration: none; /* 去掉超链的下划线 */
color:#818496;
text-align: center; /* 让这个 div 内部的文本居中 */
}
.header .nav ul li a.current{
color:white;
background: #252947;
}
.header .nav ul li a:hover{
color: white;
background: #252947;
}
.header .jrwm_box{
float: left;
height: 58px;
width: 100px;
padding-left: 48px;
padding-top: 12px;
}
/* 放背景图片的 div*/
.header .jrwm_box .jrwm{
height: 34px;
background-image: url(images/jrwm.png);
background-repeat: no-repeat;
text-align: center; /* 让这个 div 内部的超链接居中 */
}
.header .jrwm_box .jrwm a{
display: block; /* 将超链接转为块儿，可以保证其霸占父亲的整行 */
line-height: 34px; /* 让行高为背景图片的高度，可以保证超链接的文字在背景图片里垂直居中 */
text-decoration: none; /* 去掉超链的下划线 */
color: white;
}
</style>
</head>
<body>
<div class="header">
<div class="inner_c">
<div class="logo">
<img src="images/logo.png " alt="">
</div>
<div class="nav">
<ul>
<li><a href="#" class="current"> 首页 </a></li>
<li><a href="#"> 博雅游戏 </a></li>
<li><a href="#"> 博雅新闻 </a></li>
<li><a href="#"> 关于我们 </a></li>
<li><a href="#"> 客服中心 </a></li>
<li class="last"><a href="#"> 投资者关系 </a></li>
</ul>
</div>
<div class="jrwm_box">
<div class="jrwm">
<a href="https://www.google.com/" target="_blank"> 加入我们 </a>
</div>
</div>
</div>
</div>
</body>
</html>
导航栏的效果如下：
banenr 图
因为涉及到 js 的内容，这里先不讲内容区域 轮播图 的效果。
我们首先在导航条和 banner 图之间加一道墙，即 class=cl，然后采用隔墙法对其设置clear: both; 的属性。
然后设置 banner 的背景图片属性，添加 banner 图。
内容区域的制作
导航栏 +banner+ 内容区域的完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
/* 清除浮动的影响 */
.cl{clear: both;}
body{
font-size: 14px;
font-family: "Microsoft YaHei","SimSun";
height: 8888px;
}
.header{
height: 58px;
background-color: #191D3A;
}
/* 版心 */
.inner_c{
width: 1000px;
margin: 0 auto; /* 让导航条、内容区域等部分的版心在父亲里居中 */
}
/* 导航条的 logo*/
.header .logo{
float: left;
margin-right: 40px;
}
.header .nav{float: left;}
.header .nav ul{list-style: none; /* 去掉列表前面的圆点 */}
.header .nav ul li{
float: left;
width: 100px;
line-height: 58px; /* 让行高等于这一行的高度，保证里面的文字垂直居中 */
border-left: 1px solid #252947; /* 每个 li 之间有间隔线 */
}
.header .nav ul li.last{border-right: 1px solid #252947;/* 最后一个 li 的右边加间隔线 */}
.header .nav ul li a{
display: block; /* 将超链接转为块儿，可以保证其霸占父亲的整行 */
height: 58px;
text-decoration: none; /* 去掉超链的下划线 */
color:#818496;
text-align: center; /* 让这个 div 内部的文本居中 */
}
.header .nav ul li a.current{
color:white;
background: #252947;
}
.header .nav ul li a:hover{
color: white;
background: #252947;
}
.header .jrwm_box{
float: left;
height: 58px;
width: 100px;
padding-left: 48px;
padding-top: 12px;
}
/* 放背景图片的 div*/
.header .jrwm_box .jrwm{
height: 34px;
background-image: url(images/jrwm.png);
background-repeat: no-repeat;
text-align: center; /* 让这个 div 内部的超链接居中 */
}
.header .jrwm_box .jrwm a{
display: block; /* 将超链接转为块儿，可以保证其霸占父亲的整行 */
line-height: 34px; /* 让行高为背景图片的高度，可以保证超链接的文字在背景图片里垂直居中 */
text-decoration: none; /* 去掉超链的下划线 */
color: white;
}
.banner{
height: 465px;
background: url(images/banner.jpg) no-repeat center top;
}
.content{padding-top: 50px;}
.content .product{
height: 229px;
border-bottom: 1px solid #DBE1E7;
}
.content .product ul{list-style: none;}
.content .product ul li{
float: left;
width: 218px;
margin-right: 43px;
}
.content .product ul li.last{
margin-right: 0;
width: 217px;
}
.content .product ul li img{
width: 218px;
height: 130px;
}
.content .product ul li.last img{width: 217px;}
.content .product ul li h3{
text-align: center;
line-height: 38px;
font-size: 14px;
font-weight: bold;
}
.content .product ul li p.djbf{
text-align: center;
line-height: 16px;
}
.content .product ul li p.djbf a{
font-size: 12px;
color:#38B774;
text-decoration: none;
background:url(images/sanjiaoxing.png) no-repeat right 5px;
padding-right: 12px;
}
</style>
</head>
<body>
<div class="header">
<div class="inner_c">
<div class="logo">
<img src="images/logo.png " alt="">
</div>
<div class="nav">
<ul>
<li><a href="#" class="current"> 首页 </a></li>
<li><a href="#"> 博雅游戏 </a></li>
<li><a href="#"> 博雅新闻 </a></li>
<li><a href="#"> 关于我们 </a></li>
<li><a href="#"> 客服中心 </a></li>
<li class="last"><a href="#"> 投资者关系 </a></li>
</ul>
</div>
<div class="jrwm_box">
<div class="jrwm">
<a href="https://www.google.com/" target="_blank"> 加入我们 </a>
</div>
</div>
</div>
</div>
<!-- 在导航条和 banner 之间隔一堵墙 -->
<div class="cl"></div>
<div class="banner"></div>
<!-- 内容区域 -->
<div class="content inner_c">
<div class="product">
<ul>
<li>
<p><img src="images/pro1.jpg" alt="" /></p>
<h3>BPT 宣传片 </h3>
<p class="djbf">
<a href="#"> 点击播放 </a>
</p>
</li>
<li>
<p><img src="images/pro2.jpg" alt="" /></p>
<h3>BPT 宣传片 </h3>
<p class="djbf">
<a href="#"> 点击播放 </a>
</p>
</li>
<li>
<p><img src="images/pro3.jpg" alt="" /></p>
<h3>BPT 宣传片 </h3>
<p class="djbf">
<a href="#"> 点击播放 </a>
</p>
</li>
<li class="last">
<p><img src="images/pro4.jpg" alt="" /></p>
<h3>BPT 宣传片 </h3>
<p class="djbf">
<a href="#"> 点击播放 </a>
</p>
</li>
</ul>
</div>
</div>
</body>
</html>
代码解释：
（1）导航栏，左侧的 logo：
错误的写法：
可能会有人直接将 img 标签作为 logo 的布局：
<div class="logo">
<img src="images/logo.png " alt="">
</div>
然后将 img 的样式设置为：
.header .logo{
float: left;
margin-right: 40px;
}
这样写虽然视觉效果上达到了，但是搜索引擎是搜不到图片的，不利于 SEO。
正确的写法：
正确的写法是将超链接作为 logo 的布局，里面放入文字（文字可以被 SEO）：
<h1 class="logo">
<a href="#">
博雅互动 - 世界上最好的游戏公司
</a>
</h1>
然后将logo 设置为背景图：
.header .logo{
float: left;
padding-left: 12px;
margin-right: 39px;
width: 174px;
height: 58px;
}
.header .logo a{
display: block;
width: 174px;
height: 58px;
background:url(images/logo.png) no-repeat;
text-indent: -999em;
}
由于搜索引擎是搜不到图片的，所以一定要把“博雅互动”这几个文字加上去，然后通过 text-indent 缩进的属性把文字赶走到视线以外的地方。这是做搜索引擎优化的一个重要的技巧。
另外，背景要放在里层的 a 标签里，不要放在外层的 h1 标签里。假设背景图放在 h1 里，那么不管 h1 的 padding 有多大，背景图的位置都不会变。
（1）内容区域，“点击播放”右侧的小三角形：
我们在“点击播放”的右侧放了一个三角形。这个很有技巧。
代码截取如下：
.content .product ul li p.djbf a{
font-size: 12px;
color:#38B774;
text-decoration: none;
background:url(images/sanjiaoxing.png) no-repeat right center;
padding-right: 12px;
}
上方代码中，我们在第 6 行给“点击播放”这个超链接加一个右 padding（很关键），然后在第 5 行把小三角这个背景图放在右 padding 的位置，就能达到想要的视觉效果。
（2）导航栏 +banner+ 内容区域的效果如下：
工程文件：2018-03-20-boya.rar
正文完
