1. 元素的显示与隐藏
1.1 display显示(重点)
1.2 visibility可见性(了解)
1.3 overflow溢出(重点)
1.4 显示与隐藏总结
2. CSS用户界面样式
2.1 鼠标样式cursor
2.2 轮廓线outline
2.3 防止拖拽文本域resize
2.4 用户界面样式总结
3. 垂直对齐 vertical-align
注意:
3.1 图片、表单和文字对齐
3.2 去除图片底侧空白缝隙
4. 溢出的文字省略号显示
4.1 white-space
4.2 text-overflow 文字溢出
4.3 总结三步曲
/* 1.先强制一行内显示文本 */
white-space: nowrap;
/* 2.超出的部分隐藏 */
overflow: hidden;
/* 3.文字用省略号替代超出的部分 */
text-overflow: ellipsis;
5. CSS精灵技术(sprite)重点
5.1 为什么需要精灵技术
5.2 精灵技术讲解
5.3 精灵技术使用的核心总结
5.4 制作精灵图(了解)
6. 滑动门
6.1 核心技术
核心技术就是利用CSS精灵(主要是背景位置)和盒子padding撑开宽度, 以便能适应不同字数的导航 栏。 一般的经典布局都是这样的:
<li>
<a href="#">
<span>导航栏内容</span>
</a>
</li>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滑动门实现原理</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
/* background-color: #515151; */
}
a {
display: inline-block;
height: 33px; /* 宽度不能给 写死宽度是不对的 我们要推拉门*/
background: url(images/ao.png) no-repeat;
padding-left: 15px;
margin: 100px;
color: #fff;
text-decoration: none;
line-height: 33px;
}
a span {
display: inline-block;
height: 33px;
background: url(images/ao.png) no-repeat right;
/* span 不能给宽度 利用padding 挤开 要span 右边的圆角 背景位置 右对齐 */
padding-right: 15px;
}
</style>
</head>
<body>
<div>
<a href="#">
<span>首页</span>
</a>
<a href="#">
<span>二维码</span>
</a>
</div>
</body>
</html>
总结:
1.a 设置 背景左侧,padding撑开合适宽度。
2.span 设置背景右侧, padding撑开合适宽度 剩下由文字继续撑开宽度。
3.之所以a包含span就是因为 整个导航都是可以点击的。
二. 拓展@
1. margin负值
1). 负边距+定位:水平垂直居中
前面讲过,一个绝对定位的盒子,利用父级盒子的50%,然后往左(上)走自己宽度的一半,可以实现盒子 水平垂直居中。
2). 压住盒子相邻边框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
width: 1200px;
margin: 10px auto;
}
li {
position: relative;
/* 浮动的盒子是紧贴在一起的 */
float: left;
width: 200px;
height: 300px;
border: 1px solid #ccc;
margin-left: -1px;
margin-top: -1px;
list-style: none;
}
p {
position: absolute;
bottom: 0;
width: 200px;
height: 80px;
background-color: #f40;
display: none;
}
li:hover {
/* 鼠标经过li的时候 让li在最上层 定位的盒子是在最上层的*/
border: 1px solid #f40;
/* 堆叠顺序 */
z-index: 1;
/* position: relative; */
}
li:hover p {
display: block;
}
</style>
</head>
<body>
<ul>
<li>
<p></p>
</li>
<li>
<p></p>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
2. CSS三角形
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 0;
height: 0;
border-top: 10px solid red;
border-right: 10px solid green;
border-bottom: 10px solid blue;
border-left: 10px solid pink;
}
P {
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: transparent transparent transparent red;
font-size: 0;
line-height: 0;
}
</style>
</head>
<body>
<div></div>
<P></P>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
div {
position: relative;
width: 200px;
height: 100px;
background-color: pink;
margin: 100px auto;
}
p {
position: absolute;
top: -40px;
left: 50%;
margin-left: -20px;
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent pink transparent;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>