HTML-4
1.CSS高级技巧
- 精灵图
为了有效的减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称作CSS Sprites、CSS 雪碧）
- 精灵图（Sprites）的使用
- 精灵图技术主要针对的是背景图片使用，就是把多个小背景图整合到一张大图片中
- 移动背景图片的位置，此时可以使用background-position
- 使用精灵图时需要精确测量，每个背景图片的大小和位置
- 王者荣耀精灵图使用案例
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>title> 6 <style type="text/css"> 7 div { 8 height: 60px; 9 width: 60px; 10 background-image: url(img/sprites.png); 11 background-repeat: no-repeat; 12 background-position: -182px 0; 13 } 14 style> 15 head> 16 <body> 17 <div> 18 div> 19 body> 20 html>
- 拼出名字
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>title> 6 <style type="text/css"> 7 div { 8 width: 110px; 9 height: 120px; 10 background-image: url(img/abcd.jpg); 11 float: left; 12 background-repeat: no-repeat; 13 } 14 15 .b { 16 background-position: -120px 0px; 17 } 18 19 .e { 20 background-position: -480px 0px ; 21 } 22 23 .k { 24 background-position: -495px -135px; 25 } 26 27 .h { 28 background-position: -215px -135px; 29 } 30 31 .y { 32 background-position: -365px -550px; 33 } 34 35 .u { 36 background-position: -475px -415px; 37 } 38 39 .n { 40 background-position: -255px -270px; 41 } 42 style> 43 head> 44 <body> 45 <div class = "b">div> 46 <div class = "a">div> 47 <div class = "e">div> 48 <div class = "k">div> 49 <div class = "h">div> 50 <div class = "y">div> 51 <div class = "u">div> 52 <div class = "n">div> 53 body> 54 html>
- 字体图标iconfont
字体图标是为前端工程师提供的一种方便高校的图标使用方式，展示的是图标，本质上属于字体
-
- 轻量级：一个字体图标要比一系列的图像小，减少了服务器请求
- 灵活性：本质上是文字，可以随意的更改颜色，产生阴影等效果
- 兼容性：几乎支持所有的浏览器
- 字体图标的使用
- 将下载包里面的fonts文件夹放入页面的根目录下
- 通过css将字体文件引入到页面中（style.css）
- 打开demo.html复制后面的方框，粘贴到标签里面
- 给标签声明字体，font-family与之前一直
- 添加新的字体图标，把压缩包里面的selection.json上传，选中想要的新图标后，重新下载压缩包
- CSS三角制作
1 div { 2 width: 0; 3 height: 0;
4 /*下面两句针对的是浏览器的兼容性问题*/ 5 line-height: 0; 6 font-size: 0; 7 border: 50px solid transparent; 9 border-left-color: pink; 10 }
- 京东类似
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS三角制作title>
<style type="text/css">
.box {
display: none;
position: relative;
width: 150px;
height: 200px;
margin-top: 15px;
background-color: pink;
}
.tangle {
position: absolute;
height: 0;
width: 0;
top: -20px;
left: 5px;
border: 10px solid transparent;
border-bottom-color: pink;
}
.data:hover+.box {
display: block;
}
style>
head>
<body>
<div class="data">编辑div>
<div class="box">
<div class="tangle">div>
div>
body>
html>
- 界面样式
界面样式，就是更改一些用户的操作，以便提高用户的体验
-
- 更改用户的鼠标样式
| 属性值 | 描述 |
| default | 小白箭头，默认 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<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>
html>
-
- 表单轮廓线outline/防止拖拽文本域
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<input style="outline: 0;" type="text" />
<textarea style="resize: none;">textarea>
body>
html>
- vertical-align属性应用
CSS的vertical-align属性经常用于设置图片或者表单（行内块元素）和文字垂直对齐（只对行内元素或者行内块元素有效）
| 值 | 描述 |
| baseline | 默认，元素放在父元素的基线上 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| middle | 把此元素放置在父元素的中部 |
| bottom | 把元素顶端与行中最低元素的顶端对齐 |
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
img {
width: 200px;
vertical-align: top;
}
style>
head>
<body>
<img src="img/2.jpg" />可可爱爱(*?▽?*)
body>
html>
-
- 解决图片底部默认空白间隙问题
- 给图片添加vertical-align:middle|top|bottom（提倡使用）
- 将图片转换为块级元素display:block
- 解决图片底部默认空白间隙问题
- 溢出文字使用…表示
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
/* #one {
width: 150px;
height: 100px;
background-color: pink;
white-space: nowrap;
white-space: normal;意思是如果文字显示不开自动换行
overflow: hidden;
text-overflow: ellipsis;
} */
#one {
width: 150px;
height: 100px;
background-color: pink;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
style>
head>
<body>
<div id="one">
我是一行我是一行我是一行我是一行我是一行我是一行
div>
body>
html>
- 常见的布局技巧
- 边框重叠
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
ul li {
float: left;
width: 150px;
height: 200px;
border: 1px solid red;
margin-left: -1px;
list-style: none;
}
/* 鼠标经过事件添加边框，当鼠标经过盒子提高当前盒子的层级即可
如果没有定位，则添加相对定位，如果有定位，则添加z-index*/
ul li:hover {
/* 1.如果盒子没有定位，则鼠标经过添加相对定位即可position: relative; */
border: 1px solid blue;
/* 如果盒子有定位，提高盒子层级（z-index 只有有定位才能起作用） */
z-index: 1;
}
style>
head>
<body>
<ul>
<li>1li>
<li>2li>
<li>3li>
<li>4li>
<li>5li>
ul>
body>
html>
-
- 文字围绕浮动元素
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
.pic {
float: left;
width: 200px;
height: 134px;
}
.pic img {
width: 100%;
}
.box {
width: 400px;
height: 134px;
padding: 10px;
background-color: pink;
}
style>
head>
<body>
<div class="box">
<div class="pic"><img src="img/2.jpg" />div>
【集锦】热身赛-巴西0-1秘鲁 内马尔替补两人血染赛场
div>
body>
html>
-
- 行内块巧妙应用
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
.box {
text-align: center;
}
.box a {
display: inline-block;
width: 36px;
height: 36px;
background-color: #f7f7f7;
border: 1px solid #CCC;
text-decoration: none;
line-height: 36px;
color: #333;
font-size: 14px;
}
.box .prev,
.box .next {
width: 85px;
}
.box .current,
.box .elp {
border: none;
background-color: #fff;
}
.page {
width: 36px;
height: 36px;
background-color: #fff;
border: 1px solid #CCC;
outline: none;
text-align: center;
}
.btn {
width: 44px;
height: 40px;
background-color: #f7f7f7;
border: 1px solid #CCC;
outline: none;
text-align: center;
}
style>
head>
<body>
<div class="box">
<a href="#" class="prev"><<上一页a>
<a href="#" class="current">1a>
<a href="#">2a>
<a href="#">3a>
<a href="#">4a>
<a href="#">5a>
<a href="#" class="elp">...a>
<a href="#" class="next">下一页>>a>
到第<input type="text" class="page"/>页
<input type="button" value="确定" class="btn"/>
div>
body>
html>
-
- 三角强化
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
.box {
height: 0px;
width: 0px;
/* 把上边框宽度调大 */
border-top: 40px solid transparent;
/* 将左边和下边的边框宽度设置为0 */
border-left: 0px solid orange;
border-bottom: 0px solid yellow;
border-right: 20px solid green;
}
style>
head>
<body>
<div class="box">div>
body>
html>
-
-
- 秒杀价案例
-
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
.price {
height: 30px;
width: 160px;
line-height: 30px;
border: 1px solid red;
text-align: center;
}
.lower {
position: relative;
float: left;
display: block;
height: 30px;
width: 90px;
background-color: red;
color: #fff;
font-weight: 800;
}
.tan {
position: absolute;
right: 0;
top: 0;
height: 0;
width: 0;
border-color: transparent #fff transparent transparent;
border-width: 30px 10px 0px 0px;
border-style: solid;
}
.old {
font-size: 14px;
text-align: center;
text-decoration: line-through;
color: #777;
}
style>
head>
<body>
<div class="price">
<span class="lower">￥5600
<i class="tan">i>
span>
<span class="old">￥7800span>
div>
body>
html>
- CSS初始化（CSS reset）
不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，我们需要对CSS初始化
/* 把我们所有标签的内外边距清零 */ * { margin: 0; padding: 0; } /* em和i的斜体文字不倾斜 */ em, i { font-style: normal; } /* 去掉li的小圆点 */ li { list-style: none; } img { /* 照顾低版本浏览器 如果 图片外面包含了连接会有边框的问题 */ border: 0; /* 取消图片底侧有空白缝隙的问题 */ vertical-align: middle; } /* 当我们鼠标经过button按钮时，鼠标变成小手 */ button { cursor: pointer; } a { color: #666; text-decoration: none; } body { /* 抗锯齿性 让文字显示的更加清晰 */ -webkit-font-smoothing: antialiased; } /* 清除浮动 */ .clearfix:after { visibility: hidden; clear: both; display: block; content: ""; height: 0; } .clearfix { *zoom: 1; } /* Unicode编码字体 -把中文字体的名称使用相应的Unicode编码来代替，这样可以有效地避免浏览器解释CSS代码的时候出现乱码 */