css 09-CSS案例讲解：博雅互动
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进行框架项目开发案例讲解之一---员工管理源码分享> ...
随机推荐
- 应聘阿里，字节跳动美团90%会问到的JVM面试题！ 史上最全系列！
Java 内存分配 • 寄存器:程序计数器,是线程私有的,就是一个指针,指向方法区中的方法字节码.• 静态域:static 定义的静态成员.• 常量池:编译时被确定并保存在 .class 文件中的(f ...
- XML、XSL、XSLT、DTD、XSD的区别
前言: 在众神的努力之下,js已经可以跨出浏览器走向不同的领域了 也因为这个,对前端工程师的要求也不仅仅是会写写h5页面做交互.前端涉及的领域越来越广,对开发人员对素质能力要求越高. 以前因设备不同导 ...
- centos8 yum 升级nginx
原文地址:https://blog.csdn.net/lpwmm/article/details/105627476 CentOS8的Yum仓库中内置的nginx版本是1.14.1,最近漏扫提示需要升 ...
- 无效的HTTP_主机头Invalid HTTP_HOST header: '192.168.56.100:8888'. You may need to add '192.168.56.100' to ALLOWED_HOSTS.
Invalid HTTP_HOST header: '192.168.56.100:8888'. You may need to add '192.168.56.100' to ALLOWED_HOS ...
- Spring Boot第一天
1.首先在idea中创建一个maven项目,创建成功后在pom.xml中添加SpringBoot相关的依赖 <!--引入SpringBoot相关的依赖--> <parent> ...
- 安装Linux软件时遇到这个问题，如何解决？
提示 Could not get lock /var/lib/dpkg/lock 报错? 有些小伙伴在使用 apt 包管理器更新或安装软件时,可能会遇到过诸如以下的错误提示: E: Could not ...
- JVM类加载机制详解，建议看这一篇就够了，深入浅出总结的十分详细！
类加载机制 虚拟机把描述类的数据从Class文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的Java类型,这就是虚拟机的类加载机制. 类加载的时机 遇到new(比如n ...
- linux查看内存及磁盘使用情况
1.查看当前目录 命令: df -h (统一每个目录下磁盘的整体情况) 2.查看指定目录 在命令后直接放目录名,比如查看"usr"目录使用情况: 命令: df ...
- python MD5加密和flask-generate_password_hash
实际开发过程中,有些数据是需要加密保存或者处理的,为了就是为了保证源数据的安全性.那么MD5加密作为一种简单有效的非对称加密方式在日常开发过程中也经常的被使用到.下面就来介绍下MD5算法: 1. * ...
- 如何利用小熊派获取MPU6050六轴原始数据
摘要:使用小熊派开发板,通过硬件IIC与MPU6050六轴传感器模块通信,完成相应寄存器配置,成功获取陀螺仪.加速度计数据. 本问主要讲述使用小熊派开发板+MPU6050六轴传感器,获取加速度计以及陀 ...