09-CSS案例讲解：博雅互动

前言

CSS已经学了一些基础内容了，我们来讲解一个小案例吧。以博雅互动的官网首页举例。

版心

首页的版心如下：

09-CSS案例讲解：博雅互动 - 图1

这里我们要普及一个概念，叫“版心”。版心是页面中主要内容所在的区域。

比如说，网站左上角的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里放一个超链接，并将超链接转为块级元素。

最终，导航栏的代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.         *{
  8.             margin: 0px;
  9.             padding: 0px;
  10.         }
  11.         body{
  12.             font-size: 14px;
  13.             font-family: "Microsoft YaHei","SimSun";
  14.             height: 8888px;
  15.         }
  16.         .header{
  17.             height: 58px;
  18.             background-color: #191D3A;
  19.         }
  20.         /*版心*/
  21.         .inner_c{
  22.             width: 1000px;
  23.             margin: 0 auto; /*让导航条、内容区域等部分的版心在父亲里居中*/
  24.         }
  25.         /*导航条的logo*/
  26.         .header .logo{
  27.             float: left;
  28.             margin-right: 40px;
  29.         }
  30.         .header .nav{
  31.             float: left;
  32.         }
  33.         .header .nav ul{
  34.             list-style: none; /*去掉列表前面的圆点*/
  35.         }
  36.         .header .nav ul li{
  37.             float: left;
  38.             width: 100px;
  39.             line-height: 58px; /*让行高等于这一行的高度，保证里面的文字垂直居中*/
  40.             border-left: 1px solid #252947; /*每个li之间有间隔线*/
  41.         }
  42.         .header .nav ul li.last{
  43.             border-right: 1px solid #252947;/*最后一个li的右边加间隔线*/
  44.         }
  45.         .header .nav ul li a{
  46.             display: block; /*将超链接转为块儿，可以保证其霸占父亲的整行*/
  47.             height: 58px;
  48.             text-decoration: none; /*去掉超链的下划线*/
  49.             color:#818496;
  50.             text-align: center;  /*让这个div内部的文本居中*/
  51.         }
  52.         .header .nav ul li a.current{
  53.             color:white;
  54.             background: #252947;
  55.         }
  56.         .header .nav ul li a:hover{
  57.             color: white;
  58.             background: #252947;
  59.         }
  61.         .header .jrwm_box{
  62.             float: left;
  63.             height: 58px;
  64.             width: 100px;
  65.             padding-left: 48px;
  66.             padding-top: 12px;
  68.         }
  69.         /*放背景图片的div*/
  70.         .header .jrwm_box .jrwm{
  71.             height: 34px;
  72.             background-image: url(images/jrwm.png);
  73.             background-repeat: no-repeat;
  74.             text-align: center; /*让这个div内部的超链接居中*/
  75.         }
  76.         .header .jrwm_box .jrwm a{
  77.             display: block; /*将超链接转为块儿，可以保证其霸占父亲的整行*/
  78.             line-height: 34px; /*让行高为背景图片的高度，可以保证超链接的文字在背景图片里垂直居中*/
  79.             text-decoration: none; /*去掉超链的下划线*/
  80.             color: white;
  81.         }
  83.     </style>
  84. </head>
  85. <body>
  86.     <div class="header">
  87.         <div class="inner_c">
  88.             <div class="logo">
  89.                 <img src="images/logo.png " alt="">
  90.             </div>
  91.             <div class="nav">
  92.                 <ul>
  93.                     <li><a href="#" class="current">首页</a></li>
  94.                     <li><a href="#">博雅游戏</a></li>
  95.                     <li><a href="#">博雅新闻</a></li>
  96.                     <li><a href="#">关于我们</a></li>
  97.                     <li><a href="#">客服中心</a></li>
  98.                     <li class="last"><a href="#">投资者关系</a></li>
  99.                 </ul>
  100.             </div>
  101.             <div class="jrwm_box">
  102.                 <div class="jrwm">
  103.                     <a href="https://www.google.com/" target="_blank">加入我们</a>
  104.                 </div>
  105.             </div>
  106.         </div>
  107.     </div>
  108. </body>
  109. </html>

导航栏的效果如下：

09-CSS案例讲解：博雅互动 - 图2

banenr图

因为涉及到 js 的内容，这里先不讲内容区域轮播图的效果。

我们首先在导航条和banner图之间加一道墙，即class=cl，然后采用隔墙法对其设置clear: both;的属性。

然后设置banner的背景图片属性，添加banner图。

内容区域的制作

导航栏+banner+内容区域的完整代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.         *{
  8.             margin: 0px;
  9.             padding: 0px;
  10.         }
  12.         /*清除浮动的影响*/
  13.         .cl{
  14.             clear: both;
  15.         }
  16.         body{
  17.             font-size: 14px;
  18.             font-family: "Microsoft YaHei","SimSun";
  19.             height: 8888px;
  20.         }
  21.         .header{
  22.             height: 58px;
  23.             background-color: #191D3A;
  24.         }
  25.         /*版心*/
  26.         .inner_c{
  27.             width: 1000px;
  28.             margin: 0 auto; /*让导航条、内容区域等部分的版心在父亲里居中*/
  29.         }
  30.         /*导航条的logo*/
  31.         .header .logo{
  32.             float: left;
  33.             margin-right: 40px;
  34.         }
  35.         .header .nav{
  36.             float: left;
  37.         }
  38.         .header .nav ul{
  39.             list-style: none; /*去掉列表前面的圆点*/
  40.         }
  41.         .header .nav ul li{
  42.             float: left;
  43.             width: 100px;
  44.             line-height: 58px; /*让行高等于这一行的高度，保证里面的文字垂直居中*/
  45.             border-left: 1px solid #252947; /*每个li之间有间隔线*/
  46.         }
  47.         .header .nav ul li.last{
  48.             border-right: 1px solid #252947;/*最后一个li的右边加间隔线*/
  49.         }
  50.         .header .nav ul li a{
  51.             display: block; /*将超链接转为块儿，可以保证其霸占父亲的整行*/
  52.             height: 58px;
  53.             text-decoration: none; /*去掉超链的下划线*/
  54.             color:#818496;
  55.             text-align: center;  /*让这个div内部的文本居中*/
  56.         }
  57.         .header .nav ul li a.current{
  58.             color:white;
  59.             background: #252947;
  60.         }
  61.         .header .nav ul li a:hover{
  62.             color: white;
  63.             background: #252947;
  64.         }
  66.         .header .jrwm_box{
  67.             float: left;
  68.             height: 58px;
  69.             width: 100px;
  70.             padding-left: 48px;
  71.             padding-top: 12px;
  73.         }
  74.         /*放背景图片的div*/
  75.         .header .jrwm_box .jrwm{
  76.             height: 34px;
  77.             background-image: url(images/jrwm.png);
  78.             background-repeat: no-repeat;
  79.             text-align: center; /*让这个div内部的超链接居中*/
  80.         }
  81.         .header .jrwm_box .jrwm a{
  82.             display: block; /*将超链接转为块儿，可以保证其霸占父亲的整行*/
  83.             line-height: 34px; /*让行高为背景图片的高度，可以保证超链接的文字在背景图片里垂直居中*/
  84.             text-decoration: none; /*去掉超链的下划线*/
  85.             color: white;
  86.         }
  90.         .banner{
  91.             height: 465px;
  92.             background: url(images/banner.jpg) no-repeat center top;
  93.         }
  94.         .content{
  95.             padding-top: 50px;
  96.         }
  97.         .content .product{
  98.             height: 229px;
  99.             border-bottom: 1px solid #DBE1E7;
  100.         }
  101.         .content .product ul{
  102.             list-style: none;
  103.         }
  104.         .content .product ul li{
  105.             float: left;
  106.             width: 218px;
  107.             margin-right: 43px;
  108.         }
  109.         .content .product ul li.last{
  110.             margin-right: 0;
  111.             width: 217px;
  112.         }
  113.         .content .product ul li img{
  114.             width: 218px;
  115.             height: 130px;
  116.         }
  117.         .content .product ul li.last img{
  118.             width: 217px;
  119.         }
  121.         .content .product ul li h3{
  122.             text-align: center;
  123.             line-height: 38px;
  124.             font-size: 14px;
  125.             font-weight: bold;
  126.         }
  127.         .content .product ul li p.djbf{
  128.             text-align: center;
  129.             line-height: 16px;
  130.         }
  131.         .content .product ul li p.djbf a{
  132.             font-size: 12px;
  133.             color:#38B774;
  134.             text-decoration: none;
  135.             background:url(images/sanjiaoxing.png) no-repeat right 5px;
  136.             padding-right: 12px;
  137.         }
  139.     </style>
  140. </head>
  141. <body>
  142.     <div class="header">
  143.         <div class="inner_c">
  144.             <div class="logo">
  145.                 <img src="images/logo.png " alt="">
  146.             </div>
  147.             <div class="nav">
  148.                 <ul>
  149.                     <li><a href="#" class="current">首页</a></li>
  150.                     <li><a href="#">博雅游戏</a></li>
  151.                     <li><a href="#">博雅新闻</a></li>
  152.                     <li><a href="#">关于我们</a></li>
  153.                     <li><a href="#">客服中心</a></li>
  154.                     <li class="last"><a href="#">投资者关系</a></li>
  155.                 </ul>
  156.             </div>
  157.             <div class="jrwm_box">
  158.                 <div class="jrwm">
  159.                     <a href="https://www.google.com/" target="_blank">加入我们</a>
  160.                 </div>
  161.             </div>
  162.         </div>
  163.     </div>
  165.     <!-- 在导航条和banner之间隔一堵墙 -->
  166.     <div class="cl"></div>
  168.     <div class="banner"></div>
  170.     <!-- 内容区域 -->
  171.     <div class="content inner_c">
  172.         <div class="product">
  173.             <ul>
  174.                 <li>
  175.                     <p><img src="images/pro1.jpg" alt="" /></p>
  176.                     <h3>BPT宣传片</h3>
  177.                     <p class="djbf">
  178.                         <a href="#">点击播放</a>
  179.                     </p>
  180.                 </li>
  181.                 <li>
  182.                     <p><img src="images/pro2.jpg" alt="" /></p>
  183.                     <h3>BPT宣传片</h3>
  184.                     <p class="djbf">
  185.                         <a href="#">点击播放</a>
  186.                     </p>
  187.                 </li>
  188.                 <li>
  189.                     <p><img src="images/pro3.jpg" alt="" /></p>
  190.                     <h3>BPT宣传片</h3>
  191.                     <p class="djbf">
  192.                         <a href="#">点击播放</a>
  193.                     </p>
  194.                 </li>
  195.                 <li class="last">
  196.                     <p><img src="images/pro4.jpg" alt="" /></p>
  197.                     <h3>BPT宣传片</h3>
  198.                     <p class="djbf">
  199.                         <a href="#">点击播放</a>
  200.                     </p>
  201.                 </li>
  202.             </ul>
  203.         </div>
  204.     </div>
  205. </body>
  206. </html>

代码解释：

（1）导航栏，左侧的logo：

错误的写法：

可能会有人直接将img标签作为logo的布局：

  1.     <div class="logo">
  2.         <img src="images/logo.png " alt="">
  3.     </div>

然后将img的样式设置为：

  1.     .header .logo{
  2.         float: left;
  3.         margin-right: 40px;
  4.     }

这样写虽然视觉效果上达到了，但是搜索引擎是搜不到图片的，不利于SEO。

正确的写法：

正确的写法是将超链接作为logo的布局，里面放入文字（文字可以被SEO）：

  1.             <h1 class="logo">
  2.                 <a href="#">
  3.                     博雅互动-世界上最好的游戏公司
  4.                 </a>
  5.             </h1>

然后将logo设置为背景图：

  1.         .header .logo{
  2.             float: left;
  3.             padding-left: 12px;
  4.             margin-right: 39px;
  5.             width: 174px;
  6.             height: 58px;
  7.         }
  8.         .header .logo a{
  9.             display: block;
  10.             width: 174px;
  11.             height: 58px;
  12.             background:url(images/logo.png) no-repeat;
  13.             text-indent: -999em;
  14.         }

由于搜索引擎是搜不到图片的，所以一定要把“博雅互动”这几个文字加上去，然后通过text-indent缩进的属性把文字赶走到视线以外的地方。这是做搜索引擎优化的一个重要的技巧。

另外，背景要放在里层的a标签里，不要放在外层的h1标签里。假设背景图放在h1里，那么不管h1的padding有多大，背景图的位置都不会变。

（1）内容区域，“点击播放”右侧的小三角形：

我们在“点击播放”的右侧放了一个三角形。这个很有技巧。

09-CSS案例讲解：博雅互动 - 图3

代码截取如下：

  1.     .content .product ul li p.djbf a{
  2.         font-size: 12px;
  3.         color:#38B774;
  4.         text-decoration: none;
  5.         background:url(images/sanjiaoxing.png) no-repeat right center;
  6.         padding-right: 12px;
  7.     }

上方代码中，我们在第6行给“点击播放”这个超链接加一个右padding（很关键），然后在第5行把小三角这个背景图放在右padding的位置，就能达到想要的视觉效果。

（2）导航栏+banner+内容区域的效果如下：

09-CSS案例讲解：博雅互动 - 图4

工程文件如下：

我的公众号

想学习更多技能？不妨关注我的微信公众号：千古壹号（id：qianguyihao）。

扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：

09-CSS案例讲解：博雅互动 - 图5