一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁的接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度。因此,为了有效的减少服务器接收和发送请求的次数,出现了CSS精灵技术(也成CSS Sprites 、CSS 雪碧)。
核心原理:将网页中的一些小背景图像整合到一张大的图片中,这样服务器只需要一次请求就可以了。
使用核心:
我们来看一下王者荣耀官网的精灵图是什么样子的。
F12打开源代码,选中右边的“下载游戏”然后在Style中看到图片的url,右键在新的页面中打开。
我们就看到王者荣耀官网的雪碧图是什么样子的了。
使用的时候主要通过移动背景图片的位置,此时可以使用background-position
。
移动的距离就是这个目标图片的x和y坐标。
一般情况下,往上往左移动都是负值。
使用精灵图的时候需要精确测量,每个小背景图片的大小和位置。
background-position
当我们要显示一个小的背景图片时,只需要测量出它的坐标就可以使用了。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>精灵图使用title>
<style>
.box {
width: 60px;
height: 60px;
margin: 50px auto;
background: url(images/index.png);
background-position: -182px 0;
}
style>
head>
<body>
<div class="box">
div>
body>
html>
字体图标iconfont
字体图标可以为前端工程师提供一种方便高效的图标使用方式,展示的是图标,本质属于字体。
总结:
字体图标是一些网页常见的小图标,我们直接网上下载即可。因此使用分为:
推荐网站:
icomoon字库
阿里iconfont字库
使用阿里妈妈下载需要拥有github账号或者新浪微博账号,然后就可以免费使用了。
选择好对应的字体图标添加到收藏,然后一起下载下来。
将下载好的文件夹导入根目录下,用link标签引入CSS文件,然后输入指定的类名就可以使用了。
<link rel="stylesheet" href="./iconfont.css">
<span class="iconfont icon-xxx">span>
网页中我们经常看到盒子旁边有一个小三角,像小米官网首页这个这样:
我们来看看这是如何制作的呢?
.box1 {
width: 0;
height: 0;
border-top: 10px solid pink;
border-right: 10px solid purple;
border-bottom: 10px solid blue;
border-left: 10px solid burlywood;
}
当我们给一个盒子设置宽度高度都是0,然后设置四个边框。
我们再将三个边框设置成透明的试试。
.box2 {
width: 0;
height: 0;
border: 10px solid transparent;
border-top-color: skyblue;
margin: 100px auto;
}
看到了中间一个蓝色的小三角,方向也可以将border-top更改成其他的来控制。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css三角title>
<style>
.jd {
position: relative;
width: 120px;
height: 249px;
background-color: pink;
}
.jd span {
position: absolute;
right: 15px;
top: -10px;
width: 0;
height: 0;
/* 为了照顾兼容性 */
line-height: 0;
font-size: 0;
border: 5px solid transparent;
border-bottom-color: red;
}
style>
head>
<body>
<div class="jd">
<span>span>
div>
body>
html>
我们只需要再用定位来确定一下小三角的位置就可以了。
属性值 | 描述 |
---|---|
default | 小白 默认 |
pointer | 小手 |
move | 移动 |
text | 文本 |
not-allowed | 进制 |
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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:0
或者outline:none
样式之后,就可以去掉默认的表单边框。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>样式title>
<style>
input {
outline: none;
}
style>
head>
<body>
<ul>
<input type="text">
ul>
body>
html>
我们的正常使用文本框textarea
右下角会有一个拖拽按钮,可以进行拖拽。
而一般网页中都要防止这个拖拽。
我们只需要添加resize:none
就可以防止拖拽了。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>样式title>
<style>
textarea {
resize: none;
}
style>
head>
<body>
<ul>
<textarea name="" id="" cols="30" rows="10">textarea>
ul>
body>
html>
使用场景:经常用于设置图片或者表单(行内元素)和文字垂直对齐。
官方解释:用于设置一个元素的垂直对齐方式,但是它只针对行内元素或者行内块元素有效。
语法:vertical-align: baseline|top|middle|bottom
值 | 描述 |
---|---|
baseline | 默认。元素放在父元素的基线上。 |
top | 把元素的顶端与行中最高元素的顶端对齐。 |
middle | 把此元素放置在父元素的中部。 |
bottom | 把元素的顶端与行中最低的元素的顶端对齐。 |
给图片设置了vertical-align: bottom
之后:
设置了vertical-align: middle
之后:
bug:图片地测会有一个空白的缝隙,原因是行内块元素默认会和文字的基线对齐。
主要的解决方法有两种:
vertical-align: middle | top |bottom
(提倡使用)display :block
。一这是常见一种高级技巧,文字填充不下用省略号代替。
white-space: nowrap
(默认normal自动换行)overflow: hidden
text-overflow: ellipsis
<html lang="en">
<head>
<meta charset="UTF-8">
<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: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
style>
head>
<body>
<div>
啥也不说了,此处省略一万字!
div>
body>
html>
多行文本溢出显示省略号,有较大的兼容问题,适合用于webKit浏览器或移动端(移动端大部分是webkit内核)
overflow: hidden;
text-overflow: ellipsis;
/*弹性伸缩盒子模型显示*/
display: -webkit-box;
/*限制在一个块元素显示的行数*/
-webkit-line-clamp: 2;
/*设置或检索伸缩盒子对象的子元素的排列方式*/
-webkit-box-orient: vertical;
当我们写边框的时候有重叠问题
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>...title>
<style>
ul li {
float: left;
list-style: none;
width: 150px;
height: 200px;
border: 1px solid red;
}
style>
head>
<body>
<ul>
<li>1li>
<li>2li>
<li>3li>
<li>4li>
<li>5li>
ul>
body>
html>
我们只需要添加一行:margin-left: -1px
就可以隐藏掉,只显示1px边框了。
如果需要添加鼠标移入边框变色的效果,可以通过设置相对定位或者添加z-index属性来完成。
ul li:hover {
position: relative;
border: 1px solid blue;
}
ul li:hover {
z-index: 1;
border: 1px solid blue;
}
给父元素添加text-align: center其中所有的行内块元素都会水平居中对齐。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>...title>
<style>
.box {
text-align: center;
}
.box a {
display: inline-block;
width: 36px;
height: 36px;
background-color: #f7f7f7;
border: 1px solid #cccccc;
text-align: center;
line-height: 36px;
text-decoration: none;
color: #333333;
font-size: 14px;
}
.box .prev,
.box .next {
width: 85px;
}
.box .current,
.box .elp {
background-color: #ffffff;
border: none;
}
.box input {
height: 36px;
width: 36px;
border: 1px solid #cccccc;
outline: none;
}
.box button {
width: 60px;
height: 36px;
background-color: #f7f7f7;
border: 1px solid #cccccc;
}
style>
head>
<body>
<div class="box">
<a href="#" class="prev"><<上一页a>
<a href="#" class="current">2a>
<a href="#">3a>
<a href="#">4a>
<a href="#">5a>
<a href="#">6a>
<a href="#" class="elp">...a>
<a href="#" class="next">>>下一页a>
到第
<input type="text">
页
<button>确定button>
div>
body>
html>
类似京东中的这类的制作用到了CSS三角强化。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>...title>
<style>
.box {
width: 0;
height: 0;
border-top: 100px solid transparent;
border-right: 50px solid red;
border-bottom: 0;
border-left: 0;
}
style>
head>
<body>
<div class="box">
div>
body>
html>
我们只需要将左边和下面的边框宽度设置为0,将上边框的宽度调大。
简写:
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 100px 50px 0 0;
再设置位置即可。
实例:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>...title>
<style>
.price {
width: 200px;
height: 24px;
line-height: 24px;
border: 1px solid red;
margin: 0 auto;
}
.miaosha {
position: relative;
float: left;
width: 110px;
height: 100%;
background-color: red;
text-align: center;
color: #ffffff;
font-weight: 700;
margin-right: 15px;
}
.miaosha i {
position: absolute;
right: 0;
top: 0;
width: 0;
height: 0;
border-color: transparent #ffffff 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="price">
<span class="miaosha">
¥2297.00
<i>i>
span>
<span class="origin">
¥3999.00
span>
div>
body>
html>
不同浏览器对有些标签的默认值是不同的,为了消除不同浏览器对HTML文本呈现的差异,照顾浏览器的兼容,我们需要对CSS进行初始化。
简单理解:CSS初始化是指重设浏览器样式(CSS reset)。
我们打开京东网页的源代码,看看人家的初始化设置:
复制粘贴过来,再加点注释:
/* 把所有标签的内外边距清零 */
{
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
}
a:hover {
color: #c81623
}
button,
input {
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}
body {
/* 抗锯齿性,让文字显示的更加清晰 */
-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
}