为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。 最常见于各种导航栏的滑动门。
核心技术就是利用CSS精灵（主要是背景位置）和盒子padding撑开宽度, 以便能适应不同字数的导航栏。
to.png
通过滑动门技术，不同字数的导航栏选项可以使用同一个背景图，就是靠精灵技术滑动背景图来适应。
原理：
-
先给一个a标签，用来装背景图的左边圆角，a不给宽度，由文字撑开宽度
-
再在a里面加一个span盒子，span盒子还是用之前的背景图的，但是是装背景图 的右边圆角
-
字写在span里面的，span又是属于a的，里面装上字就会把它的宽度撑开
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
a {
margin: 50px;
display: inline-block;/*a是行内元素，要转换一下,转成行内块或者块元素都行*/
height: 33px;
/*只给高度，就是背景图的高度，但是不能给宽度，推拉门需要由文字撑开宽度*/
background: url(images/ao.png) no-repeat;
padding-left: 15px;/*因为这里不能给宽度，但是又需要显示背景图左边的圆角，所以就给padding值，撑开盒子a的左边15px的宽度，这样左边圆角的部分就出来了*/
color: white;
text-decoration: none;/*取消a链接的下划线*/
line-height: 33px;
}
a span {
display: inline-block;/*span是行内元素，要转换一下,转成行内块或者块元素都行*/
height: 33px;
background: url(images/ao.png) no-repeat right;
padding-right: 15px;/*这里也是不能给宽度，所以还是用padding撑开span盒子的右边15px的宽度，让背景图的右边圆角部分显示出来，但是图片默认的是左对齐，所以到现在，显示的应该是左边的圆角，也就是a盒子和span盒子显示的都是左边的圆角，所以背景位置要右对齐，所以要在no-repeat后面加一个right*/
}
</style>
</head>
<body>
<a href="#">
<span>首页</span>
</a>
<a href="#">
<span>下载</span>
</a>
<a href="#">
<span>联系我们</span>
</a>
</body>
</html>
image.png
总结：
- a设置背景左侧，用padding撑开宽度
2.span设置右侧，要加right使背景图右对齐
3.之所以是a包含span是因为导航是可点击的
案例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none; /*取消列表的样式： 小圆点*/
}
body {
background: url(images/wx.jpg) repeat-x;/*只沿着x轴平铺*/
}
.nav {
height: 75px;
}
.nav li {
float: left;
margin: 0 10px;
padding-top: 21px;
}
.nav li a {
display: block;
background: url(images/to.png) no-repeat;
color: #fff;
font-size: 14px;
line-height: 33px;
padding-left: 15px;
text-decoration: none;
}
.nav li a:hover {
background-image: url(images/ao.png);
}
.nav li a:hover span{ /* .nav li a 里面的 span，当鼠标放到a上面时，他下面的span做动作*/
background-image: url(images/ao.png);
}
.nav li a span { /*里没有给宽度就是通栏的，a也是通栏的，所以要给li加浮动*/
display: block;
line-height: 33px;/*有行高就不用给高了*/
background: url(images/to.png) no-repeat right;
padding-right: 15px;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li>
<a href="#">
<span>首页</span>
</a>
</li>
<li>
<a href="#">
<span>帮助与反馈</span>
</a>
</li>
<li>
<a href="#">
<span>公众平台</span>
</a>
</li>
<li>
<a href="#">
<span>下载</span>
</a>
</li>
</ul>
</div>
</body>
</html>
1.滑动门，2. 鼠标经过后凹下去 .nav li a:hover span {}这种写法表示当鼠标经过a的时候，他里面的span做动作
image.png
伪元素选择器
之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查
注意
伪元素:before和:after添加的内容默认是inline元素**；这个两个伪元素的content属性，表示伪元素的内容,设置:before和:after时必须设置其content属性，否则伪元素就不起作用。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* .one 类选择器 ：hover 伪类选择器（用于做动作） ：：after 伪元素选择器 */
div::before {
content: "刘德华";/*在下面div的内容 “是”的前面添加 刘德华*/
background-color: #ccc; /*伪类选择器用于动作，伪元素选择器可用于改背景色，加边框，但是不能改变宽高,加宽度高度是没有效果的，除非再加转换模式*/
border: 1px solid red;
display: block;
width: 100px;
height: 100px;
/*类选择器 伪类选择器都是用来选取对象*/
/*而伪元素选择器他本质上是插入一个元素（标签、盒子） 只不过它默认添加的是行内元素*/
}
div::after {
content: "是宇文玥的";
display: block;
width: 50px;
height: 50px;
border: 1px solid cadetblue;
}
</style>
</head>
<body>
<div>是
</div>
</body>
</html>
image.png
案例：
给图片追加一个边框，并且在鼠标经过后显示：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 296px;
height: 180px;
margin: 100px auto;
position: relative;
}
div:hover::before { /*鼠标经过之后插入一个伪元素*/
content: "";
width: 100%;
height: 100%;
border: 10px solid rgba(151, 173, 172, .4);
display: block;/*伪元素属于行内元素，在这里div是块元素，所以要转换模式*/
position: absolute; /*要伪元素不占位，就用绝对定位，这里给图片追加一个边框，但是追加的边框会出现在图片上面，要让边框刚好套住图片的话，就要给他重新定位*/
top: 0;
left: 0;
box-sizing: border-box;/*上面追加的边框因为是100%的尺寸，后面又加了10px的边框，所以边框就比图片大了，这里更改盒模型，他们就一样的大了*/
}
</style>
</head>
<body>
<div>
<img src="images/mi.jpg" alt="">
</div>
</body>
</html>
image.png
网友评论