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

#前言

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="data: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="data: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="data:images/pro1.jpg" alt="" /></p>

                    <h3>BPT宣传片</h3>

                    <p class="djbf">

                        <a href="#">点击播放</a>

                    </p>

                </li>

                <li>

                    <p><img src="data:images/pro2.jpg" alt="" /></p>

                    <h3>BPT宣传片</h3>

                    <p class="djbf">

                        <a href="#">点击播放</a>

                    </p>

                </li>

                <li>

                    <p><img src="data:images/pro3.jpg" alt="" /></p>

                    <h3>BPT宣传片</h3>

                    <p class="djbf">

                        <a href="#">点击播放</a>

                    </p>

                </li>

                <li class="last">

                    <p><img src="data: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="data: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+内容区域的效果如下：

css 09-CSS案例讲解：博雅互动的更多相关文章

关于动态门户WEB博雅互动的源代码（HTML+CSS+javascript）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
HTML+CSS小实战案例
HTML+CSS小实战案例登录界面的美化,综合最近所学进行练习网页设计先布局,搭建好大框架,然后进行填充,完成页面布局 <html> <head> <meta htt ...
Amazing！巧用 CSS 视差实现酷炫交互动效
本文将介绍利用 CSS 实现滚动视差效果的一个小技巧,并且,利用这个技巧来制作一些有意思的交互特效. 关于使用 CSS 实现滚动视差效果,在之前有一篇文章详细描述过具体方案 - CSS 实现视差效果, ...
vue animate.css训练动画案例列表循环
制作目标动画:向上入场添加数据,点击数据右滑动离场简单页面效果: 实现代码如下: <!DOCTYPE html> <html> <head> <meta c ...
深圳--博雅互动 Android面试打酱油归来
公司在TCL工业园E4,坐地到西丽站,那边在修路,不好走.B796公交站台在A出口的反方向,还要顺着施工的屏障打个弯,在西丽法院1上车.公司那边比较偏了,附近只有两趟公交.办公地点在10楼,出电梯就可 ...
（转）使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享
原文地址:http://www.cnblogs.com/huyong/archive/2013/09/24/3334848.html 使用Jquery+EasyUI 进行框架项目开发案例讲解之一员工 ...
学无止境的CSS(xHTML+CSS技巧教程资源大全)
本文里面收集一些有关CSS的技巧.教程.工具和观点等,其中一些你也许早就运用的炉火纯青,也可能有的你听都没听说过.不管是新手还是高手,大家都继续学习吧. 一,Web 标准要玩游戏,就得先了解规则.要 ...
使用Jquery+EasyUI 进行框架项目开发案例讲解之五模块（菜单）管理源码分享
http://www.cnblogs.com/huyong/p/3454012.html 使用Jquery+EasyUI 进行框架项目开发案例讲解之五模块(菜单)管理源码分享在上四篇文章 ...
使用Jquery+EasyUI 进行框架项目开发案例讲解之四组织机构管理源码分享
http://www.cnblogs.com/huyong/p/3404647.html 在上三篇文章 <使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享> ...

随机推荐

"三剑客"之awk心中无剑
一.awk介绍 awk 是一种程序语言. 它具有一般程序语言常见的功能. 因awk语言具有某些特点, 如 : 使用直译器(Interpreter)不需先行编译; 变量无类型之分(Typeless), ...
Guitar Pro教程之组织小节
上一章节我们讲述了关于Guitar Pro 7的主界面的相关功能的介绍,对于初学作曲,又是吉他的初学者,刚刚接触{cms_selflink page='index' text='Guitar Pro' ...
找回消失的IDM嗅探下载浮动条的方法
我们之前讲了IDM资源嗅探的下载浮动条的设置方法,然而在有些时候,这个下载浮动条无法正常显示出来,影响了下载体验,这个问题该如何解决呢? 1.安装IDM扩展程序一般来说,在IDM安装完成后,会在浏览 ...
如何使用MindManager更改思维导图布局
思维导图可以帮您直观地捕捉想法和信息,并将其组织起来,进一步创建行动计划,思维导图软件MindManager不仅可以帮您分析问题.使用头脑风暴得出解决方案,还可以规划复杂的项目.下面是MindMana ...
leetcode 493
//利用归并排序来完成,归并排序可参考前面代码,归并排序可用来完成这类逆序对之类的问题,采用分治的思想,对于归并排序的代码不需要多改动,只需要在归并之前进行一次寻找操作,找出count的数量 clas ...
zabbix 监控文件夹
安装inotify wget http://github.com/downloads/rvoicilas/inotify-tools/inotify-tools-3.14.tar.gz tar -zx ...
jmeter简单的压力测试
Jmeter是一个非常好用的压力测试工具. Jmeter用来做轻量级的压力测试,非常合适,只需要十几分钟,就能把压力测试需要的脚本写好.相比LR来说操作简单方便,关键是免费,基于JAVA开发,所以需 ...
【模板】【P1182】数列分段II——二分答案
题意:给定一列数,分成m段,使每段和的最大值最小. 考虑二分最小段和size,答案显然满足单调性.可以在每次check中累加数列元素判断当前组的总和是否在size以内.由于序列元素均为非负整数,前缀和 ...
LaTeX中的浮动体
浮动体代码及注释: 显示效果:
JZOJ【NOIP2012模拟8.9】2020.10.5 T1
逐个击破题目 Description 三大战役的平津战场上,傅作义集团在以北平.天津为中心,东起唐山西至张家口的铁路线上摆起子一字长蛇阵,并企图在溃败时从海上南逃或向西逃窜.为了就地歼敌不让其逃走, ...

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