CSS高级技巧

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>

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值