add css基础：定位属性。
This commit is contained in:
qianguyihao
parent
b7c05b383e
commit
ec82fc23d1
@ -216,106 +216,8 @@ ul li{
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
## 定位属性(position,float,overflow,z-index)
|
|
||||||
|
|
||||||
> 这一段涉及到**浮动**的知识，我们在[浮动](https://github.com/smyhvae/Web/blob/master/02-CSS/05-%E6%B5%AE%E5%8A%A8.md)这篇文章中会专门讲解。本段只做简单介绍。
|
## overflow属性：超出范围的内容要怎么处理
|
||||||
|
|
||||||
### 1、pisition属性：
|
|
||||||
|
|
||||||
定位属性position的属性值可以是absolute、relative。
|
|
||||||
|
|
||||||
position定位分为绝对定位和相对定位：
|
|
||||||
|
|
||||||
- `position:absolute;` <font color="#0000FF">**绝对定位**</font>：定义横纵坐标，原点在父容器的左上角。<font color="#0000FF">**脱离了本身的顺序流**</font>。横坐标用left表示，纵坐标用top表示。
|
|
||||||
|
|
||||||
绝对定位的举例：
|
|
||||||
|
|
||||||
```html
|
|
||||||
<style type="text/css">
|
|
||||||
div{
|
|
||||||
position: absolute;/*绝对定位*/
|
|
||||||
left: 10px;/*横坐标*/
|
|
||||||
top: 20px;/*纵坐标*/
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
```
|
|
||||||
|
|
||||||
- `position:relative;` <font color="#0000FF">**相对定位**</font>：相对于自己原来的位置。
|
|
||||||
|
|
||||||
相对定位的举例：
|
|
||||||
|
|
||||||
```html
|
|
||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="Generator" content="EditPlus®">
|
|
||||||
<meta name="Author" content="">
|
|
||||||
<meta name="Keywords" content="">
|
|
||||||
<meta name="Description" content="">
|
|
||||||
<title>Document</title>
|
|
||||||
|
|
||||||
<style type="text/css">
|
|
||||||
|
|
||||||
body{
|
|
||||||
margin: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#div1{
|
|
||||||
width: 200px;
|
|
||||||
height: 200px;
|
|
||||||
border: 1px solid red;
|
|
||||||
}
|
|
||||||
|
|
||||||
#div2{
|
|
||||||
position: relative;/*相对定位：相对于自己原来的位置*/
|
|
||||||
left: 50px;/*横坐标：正值表示向右偏移，负值表示向左偏移*/
|
|
||||||
top: 50px;/*纵坐标：正值表示向下偏移，负值表示向上偏移*/
|
|
||||||
|
|
||||||
width: 200px;
|
|
||||||
height: 200px;
|
|
||||||
border: 1px solid red;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div id="div1">有生之年</div>
|
|
||||||
<div id="div2">狭路相逢</div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
```
|
|
||||||
|
|
||||||
效果：
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### 2、float属性：浮动
|
|
||||||
|
|
||||||
`float`属性会让元素脱离原来的顺序流，它的属性值可以是：
|
|
||||||
- `none`：默认值，对象不漂浮
|
|
||||||
- `left`：文本流向对象的右边
|
|
||||||
- `right`：文本流向对象的左边
|
|
||||||
|
|
||||||
举例：
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
我们知道，在默认情况下，两个div标签是上下进行排列的。现在由于float属性让上图中的两个`<div>`标签出现了浮动，于是这里两个标签在另外一个层面上水平排列了。而`<p>`标签还在自己的层面上遵从顺序流进行排列。
|
|
||||||
|
|
||||||
### 3、clear属性：禁止浮动
|
|
||||||
|
|
||||||
`clear`属性的属性值可以是：
|
|
||||||
- `none`：默认值，允许两边都可以有浮动对象
|
|
||||||
- `left`：不允许左边有浮动对象
|
|
||||||
- `right`：不允许右边有浮动对象
|
|
||||||
- `both`：不允许有浮动对象
|
|
||||||
|
|
||||||
### 4、overflow属性：超出范围的内容要怎么处理
|
|
||||||
|
|
||||||
`overflow`属性的属性值可以是：
|
`overflow`属性的属性值可以是：
|
||||||
|
|
||||||
@ -378,17 +280,10 @@ position定位分为绝对定位和相对定位：
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
### 5、z-index属性：属性值大的位于上层，属性值小的位于下层
|
|
||||||
|
|
||||||
这句话可能比较难理解。我们来看例子吧。
|
|
||||||
|
|
||||||
这是默认情况下的例子：（div2在上层，div1在下层）
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
现在加一个`z-index`属性，要求效果如下：
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## 鼠标的属性cursor
|
## 鼠标的属性cursor
|
||||||
|
|
||||||
|
|||||||
511
02-CSS/08-CSS属性：定位属性.md
Normal file
511
02-CSS/08-CSS属性：定位属性.md
Normal file
@ -0,0 +1,511 @@
|
|||||||
|
|
||||||
|
|
||||||
|
> 本文最初发表于[博客园]()，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
|
||||||
|
|
||||||
|
> 以下是正文。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位。
|
||||||
|
|
||||||
|
```
|
||||||
|
position: absolute; <!-- 绝对定位 -->
|
||||||
|
|
||||||
|
position: relative; <!-- 相对定位 -->
|
||||||
|
|
||||||
|
position: fixed; <!-- 固定定位 -->
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
下面逐一介绍。
|
||||||
|
|
||||||
|
## 相对定位
|
||||||
|
|
||||||
|
**相对定位**：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）。
|
||||||
|
|
||||||
|
我们之前学习的背景属性中，是通过如下格式：
|
||||||
|
|
||||||
|
```
|
||||||
|
background-position:向右偏移量 向下偏移量;
|
||||||
|
```
|
||||||
|
|
||||||
|
但这回的定位属性，是通过如下格式：
|
||||||
|
|
||||||
|
```
|
||||||
|
position: relative;
|
||||||
|
left: 50px;
|
||||||
|
top: 50px;
|
||||||
|
```
|
||||||
|
|
||||||
|
相对定位的举例：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="Generator" content="EditPlus®">
|
||||||
|
<meta name="Author" content="">
|
||||||
|
<meta name="Keywords" content="">
|
||||||
|
<meta name="Description" content="">
|
||||||
|
<title>Document</title>
|
||||||
|
|
||||||
|
<style type="text/css">
|
||||||
|
|
||||||
|
body{
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div1{
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
border: 1px solid red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div2{
|
||||||
|
position: relative;/*相对定位：相对于自己原来的位置*/
|
||||||
|
left: 50px;/*横坐标：正值表示向右偏移，负值表示向左偏移*/
|
||||||
|
top: 50px;/*纵坐标：正值表示向下偏移，负值表示向上偏移*/
|
||||||
|
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
border: 1px solid red;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="div1">有生之年</div>
|
||||||
|
<div class="div2">狭路相逢</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
效果：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 相对定位不脱标
|
||||||
|
|
||||||
|
**相对定位**：不脱标，老家留坑，**别人不会把它的位置挤走**。
|
||||||
|
|
||||||
|
也就是说，相对定位的真实位置还在老家，只不过影子出去了，可以到处飘。
|
||||||
|
|
||||||
|
### 相对定位的用途
|
||||||
|
|
||||||
|
相对定位有坑，所以如果需要做一般不用于做“压盖”效果（把一个div放到另一个div之上）。页面中，效果极小。就两个作用：
|
||||||
|
|
||||||
|
- （1）微调元素
|
||||||
|
- （2）做绝对定位的参考，子绝父相
|
||||||
|
|
||||||
|
### 相对定位的定位值
|
||||||
|
|
||||||
|
- left：盒子右移
|
||||||
|
|
||||||
|
- right：盒子左移
|
||||||
|
|
||||||
|
- top：盒子下移
|
||||||
|
|
||||||
|
- bottom：盒子上移
|
||||||
|
|
||||||
|
PS：负数表示相反的方向。
|
||||||
|
|
||||||
|
↘：
|
||||||
|
|
||||||
|
```
|
||||||
|
position: relative;
|
||||||
|
left: 40px;
|
||||||
|
top: 10px;
|
||||||
|
```
|
||||||
|
|
||||||
|
↙：
|
||||||
|
|
||||||
|
```
|
||||||
|
position: relative;
|
||||||
|
right: 100px;
|
||||||
|
top: 100px;
|
||||||
|
```
|
||||||
|
|
||||||
|
↖：
|
||||||
|
|
||||||
|
```
|
||||||
|
position: relative;
|
||||||
|
right: 100px;
|
||||||
|
bottom: 100px;
|
||||||
|
```
|
||||||
|
|
||||||
|
↗：
|
||||||
|
|
||||||
|
```
|
||||||
|
position: relative;
|
||||||
|
left: 200px;
|
||||||
|
bottom: 200px;
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
如果要描述上面这张图的方向，我们可以首先可以这样描述：
|
||||||
|
|
||||||
|
```
|
||||||
|
position: relative;
|
||||||
|
left: 200px;
|
||||||
|
top: 100px;
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
因为`left: 200px`等价于`right: -200px`，所以这张图其实有四种写法。
|
||||||
|
|
||||||
|
## 绝对定位
|
||||||
|
|
||||||
|
**绝对定位**：定义横纵坐标。原点在父容器的左上角或左下角。横坐标用left表示，纵坐标用top或者bottom表示。
|
||||||
|
|
||||||
|
格式举例如下：
|
||||||
|
|
||||||
|
```
|
||||||
|
position: absolute; /*绝对定位*/
|
||||||
|
left: 10px; /*横坐标*/
|
||||||
|
top/bottom: 20px; /*纵坐标*/
|
||||||
|
```
|
||||||
|
|
||||||
|
### 绝对定位脱标
|
||||||
|
|
||||||
|
**绝对定位的盒子脱离了标准文档流。**
|
||||||
|
|
||||||
|
所以，所有的标准文档流的性质，绝对定位之后都不遵守了。
|
||||||
|
|
||||||
|
绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要`display:block`就可以设置宽、高了。
|
||||||
|
|
||||||
|
### 绝对定位的参考点（重要）
|
||||||
|
|
||||||
|
（1）如果用**top描述**，那么参考点就是**页面的左上角**，而不是浏览器的左上角：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
（2）如果用**bottom描述**，那么参考点就是**浏览器首屏窗口尺寸**（好好理解“首屏”二字），对应的页面的左下角：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
为了理解“**首屏**”二字的含义，我们来看一下动态图：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
问题：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
答案：
|
||||||
|
|
||||||
|
用bottom的定位的时候，参考的是浏览器首屏大小对应的页面左下角。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 以盒子为参考点
|
||||||
|
|
||||||
|
一个绝对定位的元素，如果父辈元素中也出现了已定位（无论是绝对定位、相对定位，还是固定定位）的元素，那么将以父辈这个元素，为参考点。
|
||||||
|
|
||||||
|
如下：（子绝父相）
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
以下几点需要注意。
|
||||||
|
|
||||||
|
（1） 要听最近的已经定位的祖先元素的，不一定是父亲，可能是爷爷：
|
||||||
|
|
||||||
|
```
|
||||||
|
<div class="box1"> 相对定位
|
||||||
|
<div class="box2"> 没有定位
|
||||||
|
<p></p> 绝对定位，将以box1为参考，因为box2没有定位，box1就是最近的父辈元素
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
再比如：
|
||||||
|
|
||||||
|
```
|
||||||
|
<div class="box1"> 相对定位
|
||||||
|
<div class="box2"> 相对定位
|
||||||
|
<p></p> 绝对定位，将以box2为参考，因为box2是自己最近的父辈元素
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
（2）不一定是相对定位，任何定位，都可以作为儿子的参考点：
|
||||||
|
|
||||||
|
子绝父绝、**子绝父相**、子绝父固，都是可以给儿子定位的。但是在工程上，如果子绝、父绝，没有一个盒子在标准流里面了，所以页面就不稳固，没有任何实战用途。
|
||||||
|
|
||||||
|
**工程应用：**
|
||||||
|
|
||||||
|
“**子绝父相**”有意义：这样可以保证父亲没有脱标，儿子脱标在父亲的范围里面移动。于是，工程上经常这样做：
|
||||||
|
|
||||||
|
> 父亲浮动，设置相对定位（零偏移），然后让儿子绝对定位一定的距离。
|
||||||
|
|
||||||
|
（3）绝对定位的儿子，无视参考的那个盒子的padding：
|
||||||
|
|
||||||
|
下图中，绿色部分是父亲div的padding，蓝色部分p是div的内容区域。此时，如果div相对定位，p绝对定位，那么，
|
||||||
|
p将无视父亲的padding，在border内侧为参考点，进行定位：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**工程应用：**
|
||||||
|
|
||||||
|
绝对定位非常适合用来做“压盖”效果。我们来举个lagou.com上的例子。
|
||||||
|
|
||||||
|
现在有如下两张图片素材：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
要求作出如下效果：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
代码实现如下：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Document</title>
|
||||||
|
<style type="text/css">
|
||||||
|
.box{
|
||||||
|
margin: 100px;
|
||||||
|
width: 308px;
|
||||||
|
height: 307px;
|
||||||
|
border: 1px solid #FF7E00;
|
||||||
|
position: relative; /*子绝父相*/
|
||||||
|
|
||||||
|
}
|
||||||
|
.box .image img{
|
||||||
|
width: 308px;
|
||||||
|
height: 196px;
|
||||||
|
}
|
||||||
|
.box .dtc{
|
||||||
|
display: block; /*转为块级元素，才能设置span的宽高*/
|
||||||
|
width: 52px;
|
||||||
|
height: 28px;
|
||||||
|
background-image: url(http://img.smyhvae.com/20180116_1115.png);
|
||||||
|
background-position: -108px 0px; /*这里用到了精灵图*/
|
||||||
|
position: absolute; /*采用绝对定位的方式，将精灵图盖在最上层*/
|
||||||
|
top: -9px;
|
||||||
|
left: 13px;
|
||||||
|
}
|
||||||
|
.box h4{
|
||||||
|
background-color: black;
|
||||||
|
color: white;
|
||||||
|
width:308px;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
position: absolute;
|
||||||
|
top: 156px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="box">
|
||||||
|
<span class="dtc"></span>
|
||||||
|
<div class="image">
|
||||||
|
<img src="http://img.smyhvae.com/20180116_1116.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<h4>广东深圳宝安区建安一路海雅缤纷城4楼</h3>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
代码解释如下：
|
||||||
|
|
||||||
|
- 为了显示“多套餐”那个小图，我们需要用到精灵图。
|
||||||
|
|
||||||
|
- “多套餐”下方黑色背景的文字都是通过“子绝父相”的方式的盖在大海报image的上方的。
|
||||||
|
|
||||||
|
代码的效果如下：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 让绝对定位中的盒子居中
|
||||||
|
|
||||||
|
我们知道，如果想让一个**标准流中的盒子居中**（水平方向看），可以将其设置`margin: 0 auto`属性。
|
||||||
|
|
||||||
|
可如果盒子是绝对定位的，此时已经脱标了，如果还想让其居中，可以这样做：
|
||||||
|
|
||||||
|
```
|
||||||
|
<div>
|
||||||
|
width: 600px;
|
||||||
|
height: 60px;
|
||||||
|
position: absolute; 绝对定位的盒子
|
||||||
|
left: 50%; 首先，让左边线居中
|
||||||
|
top: 0;
|
||||||
|
margin-left: -300px; 然后，向左移动宽度（600px）的一半
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
如上方代码所示，我们先让这个宽度为600px的盒子，左边线居中，然后向左移动宽度（600px）的一半，就达到效果了。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
我们可以总结成一个公式：
|
||||||
|
|
||||||
|
> left:50%; margin-left:负的宽度的一半
|
||||||
|
|
||||||
|
## 固定定位
|
||||||
|
|
||||||
|
**固定定位**：就是相对浏览器窗口进行定位。无论页面如何滚动，这个盒子显示的位置不变。
|
||||||
|
|
||||||
|
备注：IE6不兼容。
|
||||||
|
|
||||||
|
**用途1**：网页右下角的“返回到顶部”
|
||||||
|
|
||||||
|
比如我们经常看到的网页右下角显示的“返回到顶部”，就可以固定定位。
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style type="text/css">
|
||||||
|
.backtop{
|
||||||
|
position: fixed;
|
||||||
|
bottom: 100px;
|
||||||
|
right: 30px;
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
background-color: gray;
|
||||||
|
text-align: center;
|
||||||
|
line-height:30px;
|
||||||
|
color:white;
|
||||||
|
text-decoration: none; /*去掉超链接的下划线*/
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
**用途2：**顶部导航条
|
||||||
|
|
||||||
|
我们经常能看到固定在网页顶端的导航条，可以用固定定位来做。
|
||||||
|
|
||||||
|
需要注意的是，假设顶部导航条的高度是60px，那么，为了防止其他的内容被导航条覆盖，我们要给body标签设置60px的padding-top。
|
||||||
|
|
||||||
|
顶部导航条的实现如下：
|
||||||
|
|
||||||
|
```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;
|
||||||
|
}
|
||||||
|
body{
|
||||||
|
/*为什么要写这个？*/
|
||||||
|
/*不希望我们的页面被nav挡住*/
|
||||||
|
padding-top: 60px;
|
||||||
|
/*IE6不兼容固定定位，所以这个padding没有什么用，就去掉就行了*/
|
||||||
|
_padding-top:0;
|
||||||
|
}
|
||||||
|
.nav{
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 60px;
|
||||||
|
background-color: #333;
|
||||||
|
z-index: 99999999;
|
||||||
|
}
|
||||||
|
.inner_c{
|
||||||
|
width: 1000px;
|
||||||
|
height: 60px;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
}
|
||||||
|
.inner_c ul{
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
.inner_c ul li{
|
||||||
|
float: left;
|
||||||
|
width: 100px;
|
||||||
|
height: 60px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 60px;
|
||||||
|
}
|
||||||
|
.inner_c ul li a{
|
||||||
|
display: block;
|
||||||
|
width: 100px;
|
||||||
|
height: 60px;
|
||||||
|
color:white;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.inner_c ul li a:hover{
|
||||||
|
background-color: gold;
|
||||||
|
}
|
||||||
|
p{
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
display: block;
|
||||||
|
width: 120px;
|
||||||
|
height: 30px;
|
||||||
|
background-color: orange;
|
||||||
|
position: relative;
|
||||||
|
top: 2px;
|
||||||
|
left: 1px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="nav">
|
||||||
|
<div class="inner_c">
|
||||||
|
<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>
|
||||||
|
<li><a href="#">网页栏目</a></li>
|
||||||
|
<li><a href="#">网页栏目</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
### 5、z-index属性：
|
||||||
|
|
||||||
|
**z-index**属性：表示谁压着谁。数值大的压盖住数值小的。
|
||||||
|
|
||||||
|
有如下特性：
|
||||||
|
|
||||||
|
（1）属性值大的位于上层，属性值小的位于下层。
|
||||||
|
|
||||||
|
（2）z-index值没有单位，就是一个正整数。默认的z-index值是0。
|
||||||
|
|
||||||
|
（3）如果大家都没有z-index值，或者z-index值一样，那么在HTML代码里写在后面，谁就在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。
|
||||||
|
|
||||||
|
（4）只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。**而浮动的元素不能用**。
|
||||||
|
|
||||||
|
（5）从父现象：父亲怂了，儿子再牛逼也没用。意思是，如果父亲1比父亲2大，那么，即使儿子1比儿子2小，儿子1也能在最上层。
|
||||||
|
|
||||||
|
针对（1）（2）（3）条，举例如下：
|
||||||
|
|
||||||
|
这是默认情况下的例子：（div2在上层，div1在下层）
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
现在加一个`z-index`属性，要求效果如下：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
第五条分析：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
z-index属性的应用还是很广泛的。当好几个已定位的标签出现覆盖的现象时，我们可以用这个z-index属性决定，谁处于最上方。
|
||||||
@ -9,7 +9,7 @@
|
|||||||
|
|
||||||
首页的**版心**如下：
|
首页的**版心**如下：
|
||||||
|
|
||||||
20170813_1535.png
|
|
||||||
|
|
||||||
这里我们要普及一个概念，叫“[版心](https://baike.baidu.com/item/%E7%89%88%E5%BF%83)”。**版心是页面中主要内容所在的区域。**
|
这里我们要普及一个概念，叫“[版心](https://baike.baidu.com/item/%E7%89%88%E5%BF%83)”。**版心是页面中主要内容所在的区域。**
|
||||||
|
|
||||||
@ -165,8 +165,7 @@
|
|||||||
|
|
||||||
导航栏的效果如下：
|
导航栏的效果如下：
|
||||||
|
|
||||||
20180114_1332.gif
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## banenr图
|
## banenr图
|
||||||
@ -393,15 +392,111 @@
|
|||||||
</html>
|
</html>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
代码解释：
|
代码解释：
|
||||||
|
|
||||||
|
|
||||||
|
（1）导航栏，左侧的logo：
|
||||||
|
|
||||||
|
**错误的写法：**
|
||||||
|
|
||||||
|
可能会有人直接将img标签作为logo的布局：
|
||||||
|
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="logo">
|
||||||
|
<img src="images/logo.png " alt="">
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
然后将img的样式设置为：
|
||||||
|
|
||||||
|
```css
|
||||||
|
.header .logo{
|
||||||
|
float: left;
|
||||||
|
margin-right: 40px;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
这样写虽然视觉效果上达到了，但是搜索引擎是搜不到图片的，不利于SEO。
|
||||||
|
|
||||||
|
**正确的写法：**
|
||||||
|
|
||||||
|
正确的写法是将超链接作为logo的布局，里面放入文字（文字可以被SEO）：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<h1 class="logo">
|
||||||
|
<a href="#">
|
||||||
|
博雅互动-世界上最好的游戏公司
|
||||||
|
</a>
|
||||||
|
</h1>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
然后将**logo设置为背景图**：
|
||||||
|
|
||||||
|
```css
|
||||||
|
.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）内容区域，“点击播放”右侧的小三角形：
|
||||||
|
|
||||||
|
|
||||||
|
我们在“点击播放”的右侧放了一个三角形。这个很有技巧。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
代码截取如下：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```css
|
||||||
|
.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+内容区域的效果如下：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
最终实现的效果如下：
|
|
||||||
|
|
||||||
20180114_1405.png
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user