学习目标
- 能够使用精灵图
- 能使用字体图标
- 能写出CSS三角
- 能写出常见CSS用户界面样式
- 知道常见布局技巧
精灵图
- 目的:有效减少服务器接收和发送请求次数,提高页面的加载速度
- 方式:将网页中的一些背景图像整合在一张大图中
- 步骤
- 将小背景图片整合到一张大图中(这个大图称为:sprites 精灵图or雪碧图)
- 移动背景图片位置(使用的背景的background-position 属性进行移动;网页中的坐标和直角坐标系有所不同,一般是往上和往左移动,所以数值是负值)
- 精确测量每个小背景图片的大小和位置
- 缺点:图片文件较大;图片本身放大or缩小都会失真;一旦想要更换就十分麻烦
- 使用PS测量方法
- 使用切片工具,将需要的部分选出来
- 然后点击鼠标右键,选择“编辑切片选项”
- 最后在弹出的窗口中得到相关的长宽、位移参数
- 案例
<!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>
span {
display: inline-block;
background: url(images/abcd.jpg) no-repeat;
}
.z {
width: 112px;
height: 114px;
background-position: -479px -555px;
}
.d {
width: 101px;
height: 106px;
background-position: -362px -9px;
}
.y {
width: 117px;
height: 115px;
background-position: -361px -554px;
}
.s {
width: 114px;
height: 108px;
background-position: -254px -422px;
}
</style>
</head>
<body>
<span class="z"></span>
<span class="z"></span>
<span class="d"></span>
<span class="y"></span>
<span class="y"></span>
<span class="d"></span>
<span class="s"></span>
</body>
</html>
字体图标
- 使用场景:显示网页中通用、常用的一些小图标
- 目的:解决精灵图的缺点
- 注意事项:展示的是图标,本质属于字体
- 优点
- 轻量级:一个图标字体比一张精灵图要小很多,一旦字体加载,图标马上就渲染出来了
- 灵活性:因为本质是文字,所以可以随意改变颜色、产生阴影、透明效果、旋转等
- 兼容性:几乎所有浏览器都能用
- 使用步骤
- 下载
- 引入
- 追加
字体图标的下载
字体图标的引入
- 将下载包中的fonts文件夹放入页面根目录下
- 在CSS样式中全局声明字体,即引入(注意路径)
- 在下载包中的demo.html可以看相关字体图标
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
- 在HTML标签中添加小图标(demo.html中每个图标右侧的那个[]框,直接复制粘贴到代码中即可)
- 给标签定义字体(注:需要和引入的时候font-family的字体一致)
<!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>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?7kkyc2') format('truetype'), url('fonts/icomoon.woff?7kkyc2') format('woff'), url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
span {
font-family: "icomoon";
font-size: 50px;
}
</style>
</head>
<body>
<span>盗墓笔记</span>
<br>
<span></span>
</body>
</html>
CSS三角
- 使用背景:网页中一些常见的三角形,可以使用CSS直接画出来,不需要去做成图片or字体图标
- 案例1
<!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>
div {
width: 0;
height: 0;
/* transparent 透明 */
border: 50px solid transparent;
border-color: red green yellow skyblue;
/* 下面这个两个参数是为了兼顾低版本浏览器 */
line-height: 0;
font-size: 0;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!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>
.box1 {
position: absolute;
top: -20px;
right: 30px;
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom: 10px solid skyblue;
}
.box2 {
position: relative;
margin: 100px auto;
width: 300px;
height: 300px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box2">
<div class="box1"></div>
</div>
</body>
</html>
CSS用户界面样式
- 使用背景:为了有更好的用户体验,去更改一些用户操作样式
更改鼠标样式
修改标签 {
cursor: 属性值;
}
属性值 | 描述 |
---|
default | 默认 |
pointer | 小手 |
move | 移动 |
text | 文本 |
not-allowed | 禁止 |
<!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>
.box {
float: left;
width: 100px;
height: 100px;
background-color: skyblue;
margin-right: 50px;
}
.box1 {
cursor: pointer;
}
.box2 {
cursor: move;
}
.box3 {
cursor: text;
}
.box4 {
cursor: not-allowed;
}
</style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
</body>
</html>
轮廓线
input {
outline: none;
}
<!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>
input {
outline: none;
}
</style>
</head>
<body>
<input type="text">
</body>
</html>
防止拖曳文本域
- 使用背景:文本域的大小是可以拖曳的,这样会影响整个页面的布局,所以需要使其不能拖曳
- 语法
<!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>
textarea {
resize: none;
}
</style>
</head>
<body>
<textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>
vertical-align 属性应用
- 使用背景:用于图片或者表单(行内块元素)和文字垂直对齐
- 语法
修改元素 {
vertical-align: baseline | top | middle | bottom;
}
属性值 | 描述 |
---|
baseline | 默认,元素放置在父元素的基线上 |
top | 将元素的顶端与行中最高元素的顶端对齐 |
middle | 将元素放在父元素的中间 |
bottom | 将元素的顶端与行中最低的元素对齐 |
<!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>vertical-align属性应用</title>
<style>
img {
/* vertical-align: baseline; */
/* vertical-align: top; */
/* vertical-align: middle; */
vertical-align: bottom;
}
</style>
</head>
<body>
<div class="box1"><img src="images/爪子刀.png" alt="">爪子刀,永远的神</div>
</body>
</html>
解决图片底部默认空白缝隙
- 解决方法
- 给图片添加 vertical-align属性
- 将图片转换为块级元素
- 案例
<!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>
body {
background-color: skyblue;
}
img {
/* display: block; */
vertical-align: bottom;
}
</style>
</head>
<body>
<div class="box1"><img src="images/abcd.jpg" alt=""></div>
<div class="box2"><img src="images/abcd.jpg" alt=""></div>
</body>
</html>
溢出的文本省略号显示
- 使用背景:当一行放不下那么多字,后面就用省略号代替
- 单行文本溢出部分省略号代替需要满足的条件
- 强制文本内容在一行内显示
- 超出部分隐藏
- 文本用省略号代替超出的部分
- 案例
<!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>
.box {
width: 200px;
height: 100px;
border: 2px solid red;
/* 强制一行内显示文本 */
white-space: nowrap;
/* 超出部分隐藏 */
overflow: hidden;
/* 文字用省略号代替超出部分 */
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="box">
各位同学:请查阅下周课程设计安排,如有冲突,请告知,谢谢
<br> 各位同学:请查阅下周课程设计安排,如有冲突,请告知,谢谢
<br> 各位同学:请查阅下周课程设计安排,如有冲突,请告知,谢谢
<br> 各位同学:请查阅下周课程设计安排,如有冲突,请告知,谢谢
</div>
</body>
</html>
多行文本溢出部分使用省略号代替
- 有兼容性问题,适合于webKit浏览器或者移动端
- 多行文本溢出部分省略号代替需要满足的条件
- 超出部分隐藏
- 文字用省略号代替超出部分
- 弹性伸缩盒子模型
- 限制在一个块元素显示的文本行数
- 设置or检索伸缩盒对象的子元素排列方式
- 案例
<!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>
.box {
width: 200px;
height: 45px;
border: 2px solid red;
/* 超出部分隐藏 */
overflow: hidden;
/* 文字用省略号代替超出部分 */
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置or检索伸缩盒对象的子元素排列方式 */
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div class="box">各位同学:请查阅下周课程设计安排,如有冲突,请告知,谢谢</div>
</body>
</html>
常见布局技巧
margin负值的运用
- 使用背景:当鼠标指到一连排盒子中的某个上的时候,它的边框出现
- 案例
<!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>margin负值的运用</title>
<style>
ul li {
/* 当盒子存在相对定位的时候: 可以使用z-index提高盒子层级 */
position: relative;
float: left;
list-style: none;
width: 150px;
height: 200px;
border: 1px solid red;
margin-left: -1px;
}
ul li:hover {
/* 当没有定位的时候,加相对定位,因为其保留了位置 */
/* position: relative; */
/* 当存在定位的时候,提高盒子层级 */
z-index: 1;
border: 1px solid green;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
文字围绕浮动元素
<!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>
.box {
width: 650px;
height: 230px;
margin: 100px auto;
background-color: gray;
padding: 5px;
}
.box img {
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="box">
<img src="images/爪子刀.png" alt="">
<p>爪子刀,永远的神;爪子刀是印尼、马来亚等地流行的一种个人随身刀具,适合防身。</p>
</div>
</body>
</html>
行内块巧妙运用
<!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>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.box {
/* margin: 100px auto; */
text-align: center;
}
.box a {
display: inline-block;
color: grey;
border: 1px solid grey;
/* ----------- */
display: inline-block;
width: 36px;
height: 36px;
text-align: center;
line-height: 35px;
text-decoration: none;
background-color: #f7f7f7;
border: 1px solid #ccc;
color: black;
}
.box .two,
.box .six {
border: none;
background-color: #fff;
}
.box .shang,
.box .xia {
width: 85px;
font-size: 14px;
}
.box input {
width: 40px;
height: 30px;
outline: none;
border: 1px solid #ccc;
}
.box button {
width: 50px;
height: 40px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="box">
<a href="#" class="shang"><<上一页</a>
<a href="#">1</a>
<a href="#" class="two">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#" class="six">...</a>
<a href="#" class="xia">下一页>></a> 共10页 到第
<input type="text"> 页
<button>确定</button>
</div>
</body>
</html>
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>
.price {
text-align: center;
width: 180px;
height: 25px;
border: 1px solid red;
margin: 100px auto;
line-height: 25px;
}
.price .miaosha {
float: left;
position: relative;
width: 90px;
background-color: red;
color: #fff;
font-size: 18px;
font-weight: 700;
}
.miaosha .sanjiao {
position: absolute;
right: -15px;
top: 0;
width: 0;
height: 0;
border-color: red transparent transparent transparent;
border-style: solid;
border-width: 25px 15px 0 0;
}
.price .yuanjia {
float: right;
margin-right: 20px;
font-size: 14px;
color: grey;
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="price">
<span class="miaosha">¥1650
<i class="sanjiao"></i>
</span>
<span class="yuanjia">¥5650</span>
</div>
</body>
</html>