modify css04
This commit is contained in:
qianguyihao
parent
47b7cd2679
commit
b7c05b383e
@ -852,6 +852,182 @@ p,h1,#mytitle,.one{
|
||||
|
||||
|
||||
|
||||
## 一些 CSS3 选择器
|
||||
|
||||
> 所有的css3选择器，我们放在HTML5和CSS3课上介绍。暂时先接触一部分。
|
||||
|
||||
PS：我们可以用`IETester`这个软件测一下CSS在各个版本IE浏览器上的显示效果。
|
||||
|
||||
|
||||
|
||||
### 浏览器的兼容性问题
|
||||
|
||||
IE： 微软的浏览器，随着操作系统安装的。所以每个windows都有IE浏览器。各版本如下：
|
||||
|
||||
- windows xp 操作系统安装的IE6
|
||||
- windows vista 操作系统安装的IE7
|
||||
- windows 7 操作系统安装的IE8
|
||||
- windows 8 操作系统安装的IE9
|
||||
- windows10 操作系统安装的edge
|
||||
|
||||
浏览器兼容问题，要出，就基本上就是出在IE6、7身上，这两个浏览器是非常低级的浏览器。
|
||||
|
||||
为了测试浏览器CSS 3的兼容性，我们可以在网上搜"css3 机器猫"关键字，然后在不同的浏览器中打开如下链接：
|
||||
|
||||
- <http://www1.pconline.com.cn/pcedu/specialtopic/css3-doraemon/>
|
||||
|
||||
测试结果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
我们可以在[百度统计](http://tongji.baidu.com/data/)里查看浏览器的市场占有率：
|
||||
|
||||
- IE9 5.94%
|
||||
- IE8 21.19%
|
||||
- IE7 4.79%
|
||||
- IE6 4.11%
|
||||
|
||||
我们可以在<http://html5test.com/results/desktop.html>中查看
|
||||
|
||||
|
||||
|
||||
我们要知道典型的IE6兼容问题（面试要问），但是做项目我们兼容到IE8即可。不解决IE8以下的兼容问题，目的在于：培养更高的兴趣和眼光，别天天的跟IE6较劲。
|
||||
|
||||
我们可以用「IETester」软件看看css在各个浏览器中的显示效果。
|
||||
|
||||
|
||||
### 1.儿子选择器，用符号`>`表示
|
||||
|
||||
> IE7开始兼容，IE6不兼容。
|
||||
|
||||
```css
|
||||
div>p{
|
||||
color:red;
|
||||
}
|
||||
```
|
||||
|
||||
div的儿子p。和div的后代p的截然不同。
|
||||
|
||||
能够选择：
|
||||
|
||||
```html
|
||||
<div>
|
||||
<p>我是div的儿子</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
不能选择：
|
||||
|
||||
```html
|
||||
<div>
|
||||
<ul>
|
||||
<li>
|
||||
<p>我是div的重孙子</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
### 2.序选择器
|
||||
|
||||
> IE8开始兼容；IE6、7都不兼容
|
||||
|
||||
设置无序列表`<ul>`中的第一个`<li>`为红色：
|
||||
|
||||
```html
|
||||
<style type="text/css">
|
||||
ul li:first-child{
|
||||
color:red;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
设置无序列表`<ul>`中的最后一个`<li>`为红色：
|
||||
|
||||
```css
|
||||
ul li:last-child{
|
||||
color:blue;
|
||||
}
|
||||
```
|
||||
|
||||
序选择器还有更复杂的用法，以后再讲。
|
||||
|
||||
由于浏览器的更新需要过程，所以现在如果公司还要求兼容IE6、7，那么就要自己写类名：
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li class="first">项目</li>
|
||||
<li>项目</li>
|
||||
<li>项目</li>
|
||||
<li>项目</li>
|
||||
<li>项目</li>
|
||||
<li>项目</li>
|
||||
<li>项目</li>
|
||||
<li>项目</li>
|
||||
<li>项目</li>
|
||||
<li class="last">项目</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
用类选择器来选择第一个或者最后一个：
|
||||
|
||||
```html
|
||||
ul li.first{
|
||||
color:red;
|
||||
}
|
||||
|
||||
ul li.last{
|
||||
color:blue;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### 3.下一个兄弟选择器
|
||||
|
||||
> IE7开始兼容，IE6不兼容。
|
||||
|
||||
`+`表示选择下一个兄弟
|
||||
|
||||
```html
|
||||
<style type="text/css">
|
||||
h3+p{
|
||||
color:red;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
上方的选择器意思是：选择的是h3元素后面紧挨着的第一个兄弟。
|
||||
|
||||
```html
|
||||
<h3>我是一个标题</h3>
|
||||
<p>我是一个段落</p>
|
||||
<p>我是一个段落</p>
|
||||
<p>我是一个段落</p>
|
||||
<h3>我是一个标题</h3>
|
||||
<p>我是一个段落</p>
|
||||
<p>我是一个段落</p>
|
||||
<p>我是一个段落</p>
|
||||
<h3>我是一个标题</h3>
|
||||
<p>我是一个段落</p>
|
||||
<p>我是一个段落</p>
|
||||
<p>我是一个段落</p>
|
||||
<h3>我是一个标题</h3>
|
||||
```
|
||||
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
这种选择器作用不大。
|
||||
|
||||
|
||||
|
||||
##我的公众号
|
||||
|
||||
|
||||
@ -1,63 +1,107 @@
|
||||
|
||||
> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/8280814.html)，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
|
||||
|
||||
> 以下是正文。
|
||||
|
||||
|
||||
## 伪类（伪类选择器）
|
||||
|
||||
|
||||
**伪类**：同一个标签，根据其**不同的种状态，有不同的样式**。这就叫做“伪类”。伪类用冒号来表示。
|
||||
|
||||
|
||||
比如div是属于box类，这一点很明确，就是属于box类。但是a属于什么类？不明确。因为需要看用户点击前是什么状态，点击后是什么状态。所以，就叫做“伪类”。
|
||||
|
||||
|
||||
|
||||
### 静态伪类和动态伪类
|
||||
|
||||
### 4、伪类选择器（待定）
|
||||
|
||||
对于`<a>`标签，其对应几种不同的状态：
|
||||
- `link`：超链接点击之前
|
||||
- `visited`：超链接点击之后
|
||||
- `focus`：是某个标签获得焦点的时候（比如某个输入框获得焦点）
|
||||
- `hover`：鼠标放到某个标签上的时候
|
||||
- `active`：点击某个标签没有松鼠标时
|
||||
伪类选择器分为两种。
|
||||
|
||||
CSS允许对于元素的不同状态，定义不同的样式信息。伪类选择器又分为两种：
|
||||
- 静态伪类：**只能用于超链接**
|
||||
- 动态伪类：针对所有标签都适用
|
||||
（1）**静态伪类**：只能用于**超链接**的样式。如下：
|
||||
|
||||
下面来分别讲一下这两种伪类选择器。
|
||||
- `:link` 超链接点击之前
|
||||
- `:visited` 链接被访问过之后
|
||||
|
||||
**（1）静态伪类：**
|
||||
PS：以上两种样式，只能用于超链接。
|
||||
|
||||
用于以下两个状态：
|
||||
- `link`：超链接点击之前
|
||||
- `visited`：超链接点击之后
|
||||
（2）**动态伪类**：针对**所有标签**都适用的样式。如下：
|
||||
|
||||
> **注意：上面这两个状态只能使用于超链接**。
|
||||
- `:hover` “悬停”：鼠标放到标签上的时候
|
||||
- `:active` “激活”： 鼠标点击标签，但是不松手时。
|
||||
- `:focus` 是某个标签获得焦点时的样式（比如某个输入框获得焦点）
|
||||
|
||||
举例：
|
||||
PS：以上三种样式，只能用于超链接。
|
||||
|
||||
```html
|
||||
<style type="text/css">
|
||||
/*
|
||||
伪类选择器：静态伪类
|
||||
*/
|
||||
## 超链接a标签
|
||||
|
||||
/*
|
||||
让超链接点击之前是红色
|
||||
*/
|
||||
### 超链接的四种状态
|
||||
|
||||
|
||||
a标签有4种伪类（即对应四种状态），要求背诵。如下：
|
||||
|
||||
- `:link` “链接”：超链接点击之前
|
||||
- `:visited` “访问过的”：链接被访问过之后
|
||||
- `:hover` “悬停”：鼠标放到标签上的时候
|
||||
- `:active` “激活”： 鼠标点击标签，但是不松手时。
|
||||
|
||||
|
||||
对应的代码如下：（不带注释）
|
||||
|
||||
```css
|
||||
a:link{
|
||||
color:red;
|
||||
}
|
||||
a:visited{
|
||||
color:orange;
|
||||
}
|
||||
a:hover{
|
||||
color:green;
|
||||
}
|
||||
a:active{
|
||||
color:black;
|
||||
}
|
||||
```
|
||||
|
||||
对应的代码如下：（带注释）
|
||||
|
||||
```
|
||||
/*让超链接点击之前是红色*/
|
||||
a:link{
|
||||
color:red;
|
||||
}
|
||||
|
||||
/*
|
||||
让超链接点击之后是绿色
|
||||
*/
|
||||
/*让超链接点击之后是绿色*/
|
||||
a:visited{
|
||||
color:orange;
|
||||
}
|
||||
/*鼠标悬停，放到标签上的时候*/
|
||||
a:hover{
|
||||
color:green;
|
||||
}
|
||||
|
||||
</style>
|
||||
/*鼠标点击链接，但是不松手的时候*/
|
||||
a:active{
|
||||
color:black;
|
||||
```
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
记住，在css中，这四种状态**必须按照固定的顺序写**：
|
||||
|
||||
上图中，超链接点击之前是红色，点击之后是绿色。
|
||||
> a:**l**ink 、a:visited 、a:hover 、a:active
|
||||
|
||||
如果不按照顺序，那么将失效。“爱恨准则”：love hate。必须先爱，后恨。
|
||||
|
||||
看一下这四种状态的动图效果：
|
||||
|
||||
|
||||
|
||||
|
||||
问：既然`a{}`定义了超链的属性，和`a:link{}`都定义了超链点击之前的属性，那这两个有啥区别呢？
|
||||
### 超链接的美化
|
||||
|
||||
|
||||
问：既然`a{}`定义了超链的属性，和`a:link{}`定义了超链点击之前的属性，那这两个有啥区别呢？
|
||||
|
||||
答：
|
||||
|
||||
**`a{}`和`a:link{}`的区别：**
|
||||
@ -65,16 +109,135 @@ CSS允许对于元素的不同状态，定义不同的样式信息。伪类选
|
||||
- `a{}`定义的样式针对所有的超链接(包括锚点)
|
||||
- `a:link{}`定义的样式针对所有写了href属性的超链接(不包括锚点)
|
||||
|
||||
**（2）动态伪类: **
|
||||
|
||||
用于以下几种状态：
|
||||
- `focus`：是某个标签获得焦点的时候（比如某个输入框获得焦点）
|
||||
- `hover`：鼠标放到某个标签上的时候
|
||||
- `active`：点击某个标签没有松鼠标时
|
||||
|
||||
> 注意：上面这三种状态针适用于所有的标签。
|
||||
超链接a标签在使用的时候，比较难。因为不仅仅要控制a这个盒子，也要控制它的伪类。
|
||||
|
||||
举例：
|
||||
我们一定要将a标签写在前面，将`:link、:visited、:hover、:active`这些伪类写在后面。
|
||||
|
||||
举个例子。如果效果：
|
||||
|
||||
|
||||
|
||||
|
||||
为了实现上面这个效果，完整版代码如下：
|
||||
|
||||
```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" xml:lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
|
||||
<title>Document</title>
|
||||
<style type="text/css">
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.nav{
|
||||
width: 960px;
|
||||
height: 50px;
|
||||
border: 1px solid red;
|
||||
margin: 100px auto;
|
||||
}
|
||||
.nav ul{
|
||||
/*去掉小圆点*/
|
||||
list-style: none;
|
||||
}
|
||||
.nav ul li{
|
||||
float: left;
|
||||
width: 120px;
|
||||
height: 50px;
|
||||
/*让内容水平居中*/
|
||||
text-align: center;
|
||||
/*让行高等于nav的高度，就可以保证内容垂直居中*/
|
||||
line-height: 50px;
|
||||
}
|
||||
.nav ul li a{
|
||||
display: block;
|
||||
width: 120px;
|
||||
height: 50px;
|
||||
}
|
||||
/*两个伪类的属性，可以用逗号隔开*/
|
||||
.nav ul li a:link , .nav ul li a:visited{
|
||||
text-decoration: none;
|
||||
background-color: purple;
|
||||
color:white;
|
||||
}
|
||||
.nav ul li a:hover{
|
||||
background-color: orange;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="nav">
|
||||
<ul>
|
||||
<li><a href="#">网站栏目</a></li>
|
||||
<li><a href="#">网站栏目</a></li>
|
||||
<li><a href="#">网站栏目</a></li>
|
||||
<li><a href="#">网站栏目</a></li>
|
||||
<li><a href="#">网站栏目</a></li>
|
||||
<li><a href="#">网站栏目</a></li>
|
||||
<li><a href="#">网站栏目</a></li>
|
||||
<li><a href="#">网站栏目</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
上方代码中，我们发现，当我们在定义`a:link`和 `a:visited`这两个伪类的时候，如果它们的属性相同，我们其实可以写在一起，用逗号隔开就好，摘抄如下：
|
||||
|
||||
```css
|
||||
.nav ul li a{
|
||||
display: block;
|
||||
width: 120px;
|
||||
height: 50px;
|
||||
}
|
||||
/*两个伪类的属性，可以用逗号隔开*/
|
||||
.nav ul li a:link , .nav ul li a:visited{
|
||||
text-decoration: none;
|
||||
background-color: purple;
|
||||
color:white;
|
||||
}
|
||||
.nav ul li a:hover{
|
||||
background-color: orange;
|
||||
}
|
||||
```
|
||||
|
||||
如上方代码所示，最标准的写法，就是把link、visited、hover这三个伪类都要写。但是前端开发工程师在大量的实践中，发现不写link、visited也挺兼容。写法是：
|
||||
|
||||
> a:link、a:visited都是可以省略的，简写在a标签里面。也就是说，a标签涵盖了link、visited的状态（前提是都具有了相同的属性）。写法如下：
|
||||
|
||||
|
||||
```css
|
||||
.nav ul li a{
|
||||
display: block;
|
||||
width: 120px;
|
||||
height: 50px;
|
||||
text-decoration: none;
|
||||
background-color: purple;
|
||||
color:white;
|
||||
}
|
||||
.nav ul li a:hover{
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
当然了，在写`a:link`、`a:visited`这两个伪类的时候，要么同时写，要么同时不写。如果只写`a`属性和`a:link`属性，不规范。
|
||||
|
||||
|
||||
## 动态伪类举例
|
||||
|
||||
我们在第一段中描述过，下面这三种动态伪类，针对所有标签都适用。
|
||||
|
||||
- `:hover` “悬停”：鼠标放到标签上的时候
|
||||
- `:active` “激活”： 鼠标点击标签，但是不松手时。
|
||||
- `:focus` 是某个标签获得焦点时的样式（比如某个输入框获得焦点）
|
||||
|
||||
我们不妨来举下例子。
|
||||
|
||||
举例1：
|
||||
|
||||
```html
|
||||
<style type="text/css">
|
||||
@ -115,7 +278,6 @@ CSS允许对于元素的不同状态，定义不同的样式信息。伪类选
|
||||
|
||||
|
||||
|
||||
|
||||
利用这个`hover`属性，我们同样对表格做一个样式的设置：
|
||||
表格举例：
|
||||
|
||||
@ -184,188 +346,10 @@ CSS允许对于元素的不同状态，定义不同的样式信息。伪类选
|
||||
|
||||
|
||||
|
||||
##我的公众号
|
||||
|
||||
想学习<font color=#0000ff>**代码之外的软技能**</font>？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 一些 CSS3 选择器
|
||||
|
||||
> 所有的css3选择器，我们放在HTML5和CSS3课上介绍。暂时先接触一部分。
|
||||
|
||||
PS：我们可以用`IETester`这个软件测一下CSS在各个版本IE浏览器上的显示效果。
|
||||
|
||||
|
||||
|
||||
### 浏览器的兼容性问题
|
||||
|
||||
IE： 微软的浏览器，随着操作系统安装的。所以每个windows都有IE浏览器。各版本如下：
|
||||
|
||||
- windows xp 操作系统安装的IE6
|
||||
- windows vista 操作系统安装的IE7
|
||||
- windows 7 操作系统安装的IE8
|
||||
- windows 8 操作系统安装的IE9
|
||||
- windows10 操作系统安装的edge
|
||||
|
||||
浏览器兼容问题，要出，就基本上就是出在IE6、7身上，这两个浏览器是非常低级的浏览器。
|
||||
|
||||
为了测试浏览器CSS 3的兼容性，我们可以在网上搜"css3 机器猫"关键字，然后在不同的浏览器中打开如下链接：
|
||||
|
||||
- <http://www1.pconline.com.cn/pcedu/specialtopic/css3-doraemon/>
|
||||
|
||||
测试结果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
我们可以在[百度统计](http://tongji.baidu.com/data/)里查看浏览器的市场占有率：
|
||||
|
||||
- IE9 5.94%
|
||||
- IE8 21.19%
|
||||
- IE7 4.79%
|
||||
- IE6 4.11%
|
||||
|
||||
我们可以在<http://html5test.com/results/desktop.html>中查看
|
||||
|
||||
|
||||
|
||||
我们要知道典型的IE6兼容问题（面试要问），但是做项目我们兼容到IE8即可。不解决IE8以下的兼容问题，目的在于：培养更高的兴趣和眼光，别天天的跟IE6较劲。
|
||||
|
||||
我们可以用「IETester」软件看看css在各个浏览器中的显示效果。
|
||||
|
||||
|
||||
### 1.儿子选择器，用符号`>`表示
|
||||
|
||||
> IE7开始兼容，IE6不兼容。
|
||||
|
||||
```css
|
||||
div>p{
|
||||
color:red;
|
||||
}
|
||||
```
|
||||
|
||||
div的儿子p。和div的后代p的截然不同。
|
||||
|
||||
能够选择：
|
||||
|
||||
```html
|
||||
<div>
|
||||
<p>我是div的儿子</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
不能选择：
|
||||
|
||||
```html
|
||||
<div>
|
||||
<ul>
|
||||
<li>
|
||||
<p>我是div的重孙子</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
### 2.序选择器
|
||||
|
||||
> IE8开始兼容；IE6、7都不兼容
|
||||
|
||||
设置无序列表`<ul>`中的第一个`<li>`为红色：
|
||||
|
||||
```html
|
||||
<style type="text/css">
|
||||
ul li:first-child{
|
||||
color:red;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
设置无序列表`<ul>`中的最后一个`<li>`为红色：
|
||||
|
||||
```css
|
||||
ul li:last-child{
|
||||
color:blue;
|
||||
}
|
||||
```
|
||||
|
||||
序选择器还有更复杂的用法，以后再讲。
|
||||
|
||||
由于浏览器的更新需要过程，所以现在如果公司还要求兼容IE6、7，那么就要自己写类名：
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li class="first">项目</li>
|
||||
<li>项目</li>
|
||||
<li>项目</li>
|
||||
<li>项目</li>
|
||||
<li>项目</li>
|
||||
<li>项目</li>
|
||||
<li>项目</li>
|
||||
<li>项目</li>
|
||||
<li>项目</li>
|
||||
<li class="last">项目</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
用类选择器来选择第一个或者最后一个：
|
||||
|
||||
```html
|
||||
ul li.first{
|
||||
color:red;
|
||||
}
|
||||
|
||||
ul li.last{
|
||||
color:blue;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### 3.下一个兄弟选择器
|
||||
|
||||
> IE7开始兼容，IE6不兼容。
|
||||
|
||||
`+`表示选择下一个兄弟
|
||||
|
||||
```html
|
||||
<style type="text/css">
|
||||
h3+p{
|
||||
color:red;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
上方的选择器意思是：选择的是h3元素后面紧挨着的第一个兄弟。
|
||||
|
||||
```html
|
||||
<h3>我是一个标题</h3>
|
||||
<p>我是一个段落</p>
|
||||
<p>我是一个段落</p>
|
||||
<p>我是一个段落</p>
|
||||
<h3>我是一个标题</h3>
|
||||
<p>我是一个段落</p>
|
||||
<p>我是一个段落</p>
|
||||
<p>我是一个段落</p>
|
||||
<h3>我是一个标题</h3>
|
||||
<p>我是一个段落</p>
|
||||
<p>我是一个段落</p>
|
||||
<p>我是一个段落</p>
|
||||
<h3>我是一个标题</h3>
|
||||
```
|
||||
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
这种选择器作用不大。
|
||||
|
||||
|
||||
### css精灵
|
||||
|
||||
|
||||
|
||||
@ -94,7 +94,7 @@
|
||||
border-left: 1px solid #252947; /*每个li之间有间隔线*/
|
||||
}
|
||||
.header .nav ul li.last{
|
||||
border-right: 1px solid #252947;
|
||||
border-right: 1px solid #252947;/*最后一个li的右边加间隔线*/
|
||||
}
|
||||
.header .nav ul li a{
|
||||
display: block; /*将超链接转为块儿，可以保证其霸占父亲的整行*/
|
||||
@ -120,6 +120,7 @@
|
||||
padding-top: 12px;
|
||||
|
||||
}
|
||||
/*放背景图片的div*/
|
||||
.header .jrwm_box .jrwm{
|
||||
height: 34px;
|
||||
background-image: url(images/jrwm.png);
|
||||
@ -153,7 +154,7 @@
|
||||
</div>
|
||||
<div class="jrwm_box">
|
||||
<div class="jrwm">
|
||||
<a href="">加入我们</a>
|
||||
<a href="https://www.google.com/" target="_blank">加入我们</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -162,6 +163,9 @@
|
||||
</html>
|
||||
```
|
||||
|
||||
导航栏的效果如下：
|
||||
|
||||
20180114_1332.gif
|
||||
|
||||
|
||||
|
||||
@ -177,8 +181,227 @@
|
||||
|
||||
## 内容区域的制作
|
||||
|
||||
|
||||
|
||||
导航栏+banner+内容区域的完整代码如下：
|
||||
|
||||
|
||||
```html
|
||||
<!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>
|
||||
```
|
||||
|
||||
|
||||
代码解释：
|
||||
|
||||
|
||||
|
||||
|
||||
最终实现的效果如下：
|
||||
|
||||
20180114_1405.png
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user