CSS样式高级内容7
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
目录
精灵图
为了有效地减少服务器接受和发送请求的次数提高页面的加载速度出现了CSS精灵技术
精灵图的使用
1.精灵技术主要针对于背景图片使用就是把多个小背景图片整合到一张大图片中
2.这个大图片被称为sprites精灵图或者雪碧图
3.精灵图主要针对于小的背景图片使用
4.主要借助于背景位置来实现---background-position
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>精灵图的使用</title>
<style>
.box1 {
width: 60px;
height: 60px;
/* background-color: pink; */
margin: 100px auto;
background: url(images/sprites.png) -182px 0 no-repeat;
/* background-position: -182px 0; */
}
.box2 {
width: 27px;
height: 25px;
/*底层背景图片向左移155像素向上106像素*/
background: url(images/sprites.png) -155px -106px no-repeat;
margin: 200px;
}
</style>
</head>字体图标
精灵图的图片文件较大同时图片本身放大和缩小会失真一旦图片制作完成要修改会很麻烦
字体图标可以为前端工程师提供一种方便高效的图标使用方式展示的是图标本质属于字体
字体图标的优点
1.轻量级一个图标字体要比一系列的图像要小。一旦字体加载了图标就会马上渲染出来减少了服务器请求
2.灵活性本质其实是字体可以随意的改变颜色、产生阴影、透明效果、旋转等
3.几乎兼容所有的浏览器
4.如果遇到一些结构和样式比较简单的小图标就使用字体图标
字体图标的下载
1.icomoon字库 http://icomoon.io
2.阿里iconfont字库 http://www.iconfont.cn/
CSS三角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS三角制作</title>
<style>
.box1 {
width: 0;
height: 0;
border: 10px solid pink;
}
.box2 {
width: 0;
height: 0;
border-top: 10px solid pink;
border-bottom: 10px solid red;
border-left: 10px solid blue;
border-right: 10px solid green;
}
.box3 {
width: 0;
height: 0;
border: 50px solid transparent;
border-left-color: pink;
margin: 50px auto;
}
.jd {
position: relative;
width: 120px;
height: 249px;
background-color: pink;
}
.jd span {
position: absolute;
right: 15px;
/* 因为边框的宽度为5px */
top: -8px;
width: 0;
height: 0;
/* 为了照顾兼容性 */
line-height: 0;
font-size: 0;
border: 5px solid transparent;
border-bottom-color: pink;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="jd">
<span></span>
</div>
</body>
</html>CSS用户界面样式
1.更改用户的鼠标样式
<body>
<ul>
<li style="cursor: default;">默认小白鼠标样式</li>
<li style="cursor: pointer;">鼠标小手样式</li>
<li style="cursor: move;">鼠标移动样式</li>
<li style="cursor: text;">鼠标文本样式</li>
<li style="cursor: not-allowed;">鼠标禁止样式</li>
</ul>
</body>2.表单轮廓及防止表单域拖拽
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单轮廓和防止拖拽文本域</title>
<style>
input,
textarea {
/* 取消表单轮廓 */
outline: 0;
}
textarea {
/* 防止拖拽文本域 */
resize: none;
}
</style>
</head>
<body>
<!-- 1.取消表单轮廓 -->
<input type="text">
<!-- 2.防止拖拽文本域 -->
<textarea name="" id="" cols="30" rows="10"></textarea>
</body>3.行内块元素和文字垂直居中对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行内块和文字垂直居中对齐</title>
<style>
img {
/* 底线对齐 */
vertical-align: bottom;
/* 文字和图片垂直居中 */
vertical-align: middle;
/* 顶线对齐 */
vertical-align: top;
}
textarea {
vertical-align: middle;
}
</style>
</head>
<body>
<!-- 图片和文字默认基线对齐 -->
<img src="images/ldh.jpg" alt=""> qq刘德华真tm帅
<br>
<textarea name="" id="" cols="30" rows="10"></textarea>请您留言
</body>
</html>4.解决图片底部默认空白缝隙问题
因为行内块元素和文字的基线对齐所以会出现缝隙问题
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片底侧有空白缝隙</title>
<style>
div {
border: 2px solid red;
}
img {
/* vertical-align: bottom; */
/* 第二种方式:将图片转换为块级元素 */
display: block;
}
</style>
</head>
<body>
<div>
<img src="images/ldh.jpg" alt=""> pink老师
</div>
</body>
5.单行文字溢出省略号显示
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单行文本溢出显示省略号</title>
<style>
div {
width: 150px;
height: 80px;
background-color: pink;
margin: 100px auto;
/* 这个单词的意思是说如果文字显示不开自动换行 */
/* white-space: normal; */
/* 1.这个单词的意思是说如果文字显示不开也必须强制一行内显示 */
white-space: nowrap;
/* 2.超出的部分隐藏 */
overflow: hidden;
/* 3.文字用省略号替代超出的部分 */
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>
世界这么大,我想去看看;钱包这么小,哪都去不了
</div>
</body>6.多行文字溢出省略号显示
适合于WebKit浏览器或移动端移动端大部分是webkit内核
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多行溢出文字显示省略号</title>
<style>
div {
width: 150px;
height: 65px;
background-color: pink;
margin: 100px auto;
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数;也就是在第几行超出显示省略号 */
-webkit-line-clamp: 3;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div>
世界这么大,我想去看看;钱包这么小,哪都去不了;世界这么大,我想去看看;钱包这么小,哪都去不了
</div>
</body>
常见布局技巧
1.margin负值的运用
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>margin负值的巧妙运用</title>
<style>
ul li {
float: left;
list-style: none;
width: 150px;
height: 200px;
border: 1px solid red;
margin-left: -1px;
}
ul li:hover {
/* 鼠标经过某个盒子时,提高当前盒子的层级即可(如果没有定位,则加相对定位,如果有定位,则加z-index) */
position: relative;
border: 1px solid blue;
}
ul li:hover {
z-index: 1;
border: 1px solid blue;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>2.文字围绕浮动元素巧妙运用
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字围绕浮动元素</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 70px;
background-color: pink;
margin: 0 auto;
padding: 5px;
}
.pic {
/* 因为文字不会被浮动的元素压住,所以只给img添加一个浮动就可以了 */
float: left;
width: 120px;
height: 60px;
margin-right: 5px;
line-height: 70px;
}
.pic img {
width: 100%;
}
</style>
</head>
<body>
<div class="box">
<div class="pic">
<img src="images/img.png" alt="">
</div>
<p>世界这么大,我想去看看;钱包这么小,哪都去不了</p>
</div>
</body>3.行内块的运用
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行内块的巧妙运用</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
/* 行内块元素:父级添加text-align:center;则其中的元素都会居中 */
text-align: center;
/* 因为box是由a撑大的,没有宽度和高度则没有外边距,故不能使用margin */
}
.box a {
display: inline-block;
/* 行内块元素会有缝隙,则不需要再添加margin属性了 */
width: 36px;
height: 36px;
background-color: #f7f7f7;
border: 1px solid #ccc;
text-align: center;
line-height: 36px;
text-decoration: none;
color: #333;
}
/* 权重问题 */
.box .prev,
.box .next {
width: 85px;
}
.box .current,
.box .elp {
background-color: white;
border: none;
}
.box input {
width: 45px;
height: 36px;
border: 1px solid #ccc;
outline: none;
}
.box button {
width: 60px;
height: 36px;
background-color: #f7f7f7;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="box">
<a href="#" class="prev"><<上一页</a>
<a href="#" class="current">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#" class="elp">...</a>
<a href="#" class="next">>>下一页</a>
到第
<input type="text">
页
<button>确定</button>
</div>
</body>4.CSS三角运用
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS三角强化</title>
<style>
.box1 {
width: 0;
height: 0;
/* 把上边框的宽度调大 */
/* border-top: 100px solid transparent; */
/* border-right: 50px solid skyblue; */
/* 左边和下边的宽度设置为0 */
/* border-bottom: 0px solid blue; */
/* border-left: 0px solid green; */
/* 做的是一个三角形 */
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 100px 50px 0 0;
}
.price {
width: 160px;
height: 24px;
border: 1px solid red;
margin: 0 auto;
line-height: 24px;
}
.miaosha {
position: relative;
float: left;
width: 90px;
height: 100%;
background-color: red;
text-align: center;
font-weight: 700;
color: white;
}
.miaosha i {
position: absolute;
right: 0;
top: 0;
width: 0;
height: 0;
border-color: transparent white transparent transparent;
border-style: solid;
border-width: 24px 10px 0 0;
}
.origin {
font-size: 12px;
color: gray;
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="price">
<span class="miaosha">
￥1650
<i></i>
</span>
<span class="origin">￥5656</span>
</div>
</body>
CSS初始化
/* 把我们所有标签的内外边距清零 */
* {
margin: 0;
padding: 0
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
font-style: normal
}
/* 去掉li 的小圆点 */
li {
list-style: none
}
img {
/* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
border: 0;
/* 取消图片底侧有空白缝隙的问题 */
vertical-align: middle
}
button {
/* 当我们鼠标经过button 按钮的时候鼠标变成小手 */
cursor: pointer
}
a {
color: #666;
text-decoration: none
}
a:hover {
color: #c81623
}
button,
input {
/* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}
body {
/* CSS3 抗锯齿形 让文字显示的更加清晰 */
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
color: #666
}
.hide,
.none {
display: none
}
/* 清除浮动 */
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}