css高级技巧&h5新特性&c3新特性
css高级技巧
1.精灵图
为什么使用精灵图?
因为在网页中我们经常要用到大大小小的一些图像,每获取一张图像就要浏览器向服务器发送一次请求,而当我们需要的图像较多时,就会频繁的向服务器发送请求,这时候服务器的压力就会过大。而我们利用精灵图就可以有效的解决这一问题。
精灵图的核心原理:将一些小的图像都整合到一张大图上,这时候服务器就只需响应一次。
精灵图的使用:
- 首先我们需要去ps量出我们所需图像的大小(宽高)以及在页面上的坐标
- 定义一个盒子将宽高填进去
- 用background属性导入精灵图,再将他的坐标位置填进去,这样我们所需的图像就显示出来了
这里需要讲一下页面中的坐标与数学中坐标的区别:
数学中的坐标:
网页中的坐标:
因为我们常常导入的精灵图的左上角对应坐标原点,所以移动过后我们的坐标值一般都为负值。
下面展示一个案例:
<!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>Document</title>
<style>
.box1 {
width: 60px;
height: 57px;
/* background-color: pink; */
margin: 100px auto;
background: url(images/sprites.png) -182px 0;
}
.box2 {
width: 29px;
height: 27px;
margin: 200px;
background: url(images/sprites.png) -154px -106px;
}
</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
</body>
</html>
实现效果:
精灵图sprite.png:
2.字体图标
使用场景:主要显示用于网页中一些小的,精致的一些小图标
这时候可能有小朋友要问了,为什么不用精灵图来实现呢?
解释一下:
- 精灵图的图片文件比较大
- 图片的放大缩小会失真
- 一旦制作完毕想要修改十分麻烦
字体图标的优点: - 轻量级,一个字体图标要比图片小很多
- 容易修改,字体图标的本质是文字,可以改变颜色,调整大小…
- 几乎适用于所有浏览器
字体图标的下载:
字体图标的引入: - 将从网站中下载好的font文件引入到与html文件的同一目录下
- 将如下代码复制到style样式里面
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?atlaoq');
src: url('fonts/icomoon.eot?atlaoq#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?atlaoq') format('truetype'),
url('fonts/icomoon.woff?atlaoq') format('woff'),
url('fonts/icomoon.svg?atlaoq#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
- 打开下载的文件夹,将demo.html里面的图标放到指定位置
- 调用样式输入font-family: ‘icomoon’;即可完成调用
下面是一个例子:
<!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>Document</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: 80px;
color: pink;
}
</style>
</head>
<body>
<span></span>
<span></span>
</body>
</html>
图标的追加这里就不多做解释了
3.css三角
定义一个盒子,当我们宽高都设为0,并为每个边框设置特定颜色,会出现以下效果
而我们想要得到一个三角,只需要把其他三个三角设置为透明,只留一个三角即可实现
.box2 {
width: 0;
height: 0;
border: 100px solid transparent;
border-bottom: 100px solid pink;
}
4.css用户界面
4.1curor鼠标样式
语法:
预先定义好一个盒子,然后在style中修改他的样式就可以达到我们想要的效果
4.2text表单轮廓线
之前我们写表单,当鼠标光标定在上面时,会有蓝色的轮廓线,如下:
当我们想要消除时,只需要在style样式里面添加如下属性
效果:
4.3防止表单域拖拽
之前我们生成一个表单域后,由于属性没修改,发现表单域竟然可以拖拽
这样一来对用户的交互体验不好,我们在style中做如下修改:
这样一来文本域就不可以随意拖拽了
5.vertical-algin属性的应用
使用场景:
经常用于图片(行内或者行内块元素)与文字居中对齐,因为行内或者行内块元素默认是与文字基线对齐的
注:这种设置只针对行内或者行内块元素
语法:
解释一下什么是基线,中线
5.1元素居中对齐
对相应的元素在style中添加: vertical-align: top;就可以了
5.2解决图片底部默认空白问题
当我们往结构中插入图片时,底部默认会有个空隙(因为行内块元素默认是和文字基线对齐的)
解决这个问题我们有两种方法:
问题解决后的效果图:
6.溢出文字的省略号显示
有时我们不想过多的文字暴漏在网页外面,这时候我们可以给文字加省略号显示
6.1单行文本溢出省略号显示
6.2多行文本溢出省略号显示
7.常见的布局技巧
7.1margin负值的运用
多个盒子重叠线的解决:
当我们结构中有多个盒子且都设置了外边框,这时候外边框会重叠,形成1+1=2的效果
如果我们只想要一个边框的效果只需要添加 margin-left: -1px;(这里-1不是绝对的,因为我的外边框设置的是-1px)
鼠标经过某个盒子显示变化的外边框:
不想过多解释了,看代码吧
<!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>Document</title>
<style>
li {
list-style: none;
}
ul li {
/* li有定位则用z-index提高层 */
position: relative;
float: left;
width: 200px;
height: 200px;
border: 1px solid red;
margin-left: -1px;
}
ul li:hover {
/* 注意:这里鼠标一经过盒子就变成相对定位盖住其他盒子,所以定位不应该写在li里面 */
/* position: relative; */
/* li没有定位,则鼠标经过给相对定位盖住其他盒子 */
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>
</html>
实现的效果图:
但是如果我们只在ul li:hover中加如border: 1px solid blue;,可能有的边框不会变色,达不到我们想要的效果
7.2文字围绕浮动元素显示
因为浮动本来就是制作文字环绕效果的,所以当我们给一个图片添加浮动后,对应的文字自动会右侧显示(好像添加了右浮动一样),以此达到我们想要的效果
7.3行内块元素的妙用
由于行内块元素中间默认会有缝隙,所以可以用来制作这样的效果
7.4css三角的强化
想要实现如下效果:
首先我们先要做出一个直角的三角形然后背景色调成白色,再用定位定位到¥2099.00的右边,就可以实现这个效果了
直角三角形的制作代码:
具体怎么实现的就不解释了,不懂的话去浏览器F12调试没有宽高正方形,就懂了。
要想实现上图的效果,首先我们得有一个大盒子div,用来装¥1650和¥5650这两个小盒子,然后我们还要在¥1650这个小盒子里添加一个<i></i>用来制作直角三角形。然后在style样式里做一系列的修改即可实现。
代码:
<!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>Document</title>
<style>
.price {
width: 160px;
height: 24px;
border: 1px solid red;
margin: 100px auto;
line-height: 24px;
}
.miaosha {
position: relative;
width: 90px;
height: 100%;
float: left;
text-align: center;
background-color: red;
color: #fff;
font-weight: 700;
}
.miaosha i {
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-color: transparent #fff transparent transparent;
border-style: solid;
border-width: 24px 10px 0 0;
}
.price .origin {
padding: 8px;
font-size: 12px;
color: gray;
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="price">
<span class="miaosha">¥1650
<i></i>
</span>
<span class="origin">¥5650</span>
</div>
</body>
</html>
效果图:
h5新特性
1.新增的语义化标签
以前我们盒子都是用div表示,如果我们想表示一个页面的头部,也只能<div class=“header”>,但在h5我们可以用<header></header>等这样的标签来表示页面头部,导航栏,页面底部等…
2.多媒体标签
h5中新增了多媒体标签,这样我们就不用falsh或其他插件来导入音频了
2.1视频标签video
当前我们浏览器支持三种视频格式(mp4,webm,ogg),因为兼容性原因我们经常使用mp4,兼容性表格如下:
语法:
更具兼容性的语法:
为了完成更好的页面效果,视频标签还有其对应的属性:
2.2音频标签audio
当前<audio>有mp3,wav,ogg三种格式,由于兼容性问题,使用mp3较多,兼容性如下:
语法:
兼容性更强的写法:
属性基本上和视频的一致:
对了这里还有muted属性,这里没有添加
3.h5新增的input类型
新增的input类型,看图:
解释一下,这里email的文本框里面就只能输入email格式的邮箱,否则系统将会提示。url也是指定格式。date,time,month,week的显示如下
而number和tel的输入就必须是数字,其他格式无法输入。search可以输入任意。color的选择如下:
4.h5新增的表单属性
h5中新增了一些表单属性,使我们的页面更能达到我们想要的效果:
这里实现的效果就不一一列举了,感兴趣的小伙伴赶紧去敲代码!
c3新特性
1.css3的现状
1.新增的c3由于兼容性问题,ie9+才支持。
2.移动端优于pc端
2.属性选择器
属性选择器用属性+[]来表示,使用他更能节省我们的代码量
选择符1的应用:
我们之前的做法还要给具有value的input表单添加类或者id选择器,然后再选择,但有了属性选择器这个操作会更方便
下面还有好多属性,这里不一一列举了,费劲。
3.结构伪类选择器
结构伪类选择器常用于从父类中选出子元素
前三个选择符的使用:
注意这里nth-child(n)中的n可以是数字,关键字和公式。
- n是数字的话,就是对应选择第n个元素
- 也可以是表达式,even(偶数)和odd(奇数)
- 也可以是公式,当公式为n时(他会从0开始找,选择所有父元素拥有的子元素,不包括0),当然还有其他的公式
当父元素中的子元素标签相同时,如上图所示,后三个选择符的使用和前三个一样,但当一个父元素中包含不同的子元素标签时,差异就出来了
nth-child的选择原理:
会把所有的盒子都排序,执行的时候看一下要选出来的元素与表示格式一样不,一样的话就会执行下面代码,否则找不到
nth-of-type的选择原理:
会把被选中的盒子排序,按照顺序执行下述代码。
这样讲可能有点抽象,看实验结果
我们创建p,div,div三个元素,如下;
分别用,nth-child,nth-of-type演示区别
用nth-child的结果:都没选中,没变色
用nth-of-type演示的效果;选中了第一个div,熊大变为red
4.伪元素选择器
为什么使用伪元素选择器?
使用伪元素选择器我们能用css创建结构,而不用html创建,这样一来就简化了html结构
注意:伪元素选择器一般都有一个父元素,用来做嵌套使用,在父元素中浮动显示。
伪元素选择器的使用场景1:
下拉框的制作:
以前我们都是在html中嵌套特殊符号来达到这种效果,学了伪元素选择器后就可以用css来创建结构了
思路分析:
首先创建一个大盒子div,设置好属性。从icomoon中找出这个特殊符号,然后div:after中嵌套这个特殊符号(注意引入特殊符号的语句在开头要声明)。显然符号在浏览器左上角显示,这时候我们就要用到父绝子相将特殊符号的位置定到右边就可以了。
<!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>Document</title>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?atlaoq');
src: url('fonts/icomoon.eot?atlaoq#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?atlaoq') format('truetype'),
url('fonts/icomoon.woff?atlaoq') format('woff'),
url('fonts/icomoon.svg?atlaoq#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
div {
position: relative;
width: 200px;
height: 35px;
border: 1px solid red;
}
div::after {
position: absolute;
top: 10px;
right: 10px;
font-family: 'icomoon';
content: '\e903';
}
</style>
</head>
<body>
<div></div>
</body>
</html>
伪元素选择器的使用场景2:
土豆网案例的优化。
之前我们做过一个土豆网案例,但因为我们的遮罩层在结构中添加了mask,导致结构复杂。而我们现在学了伪元素选择器就可以很好的解决这个问题了
<!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>Document</title>
<style>
.tomato {
position: relative;
width: 448px;
height: 320px;
margin: 100px auto;
}
/* 这里图片继承大盒子的宽高,不给图片设置宽高是因为盒子参数变了他也要变比较麻烦 */
img {
width: 100%;
height: 100%;
}
.tomato::after {
content: '';
display: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
/* 注:阴影效果是用背景色添加的 */
background: url(images/arr.png) no-repeat center rgba(0, 0, 0, .3);
}
/* 意思是鼠标经过tomato,tomato中的mask就进行显示(注意这种写法) */
/* 注意注意注意hover是动态伪类可以用于所有元素 !!!*/
.tomato:hover::after {
display: block;
}
</style>
</head>
<body>
<!-- 大盒子:中间放图片和阴影 -->
<div class="tomato">
<img src="images/tudou.jpg" alt="">
</div>
</body>
</html>
这样一来,效果还是和以前一样的
伪元素选择器的使用场景3:
当然,用我们的伪元素选择器还可以很好的清除浮动
5.css3的盒子模型
之前在我们给盒子添加外边框或者内边距的时候,总担心盒子会被撑大,到头来我们还要减去padding或者border。但现在我们完全不用担心了。
6.css3其他特性
- 图像模糊
注意:这里blur里面数值的单位是px
给以下图片添加模糊效果:
代码:
<!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>Document</title>
<style>
img {
width: 500px;
height: 200px;
filter: blur(5px);
}
img:hover {
filter: blur(0px);
}
</style>
</head>
<body>
<img src="images/mi9.jpg" alt="">
</body>
</html>
效果:
- calc函数的妙用
利用calc函数进行计算,可以完成我们以前达不到的效果(如让子元素永远小于父元素30px,无论父元素怎么变)
用法:
<!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>Document</title>
<style>
.father {
width: 300px;
height: 300px;
background-color: red;
}
.son {
/* 注意:这里括号内两数值间一定要加空格 */
width: calc(100% - 50px);
height: 30px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
上面案例我们可以看到,无论父盒子变多宽,子盒子永远比他小30px
注:calc函数里面不仅可以用加法,还可以用-*/
7.css过渡(重点)
c3中专门提供了一个样式做画面的过度效果(从一个样式变成另外一个样式),这样我们就不需要flash动画或者其他插件的帮助了。
语法:
注:
- 低版本ie9以下浏览器不支持
- 这种过度效果经常与:hover一起搭配使用
- 后两个属性可有可无
记住过度口诀:谁做过度给谁添加
利用过度制作进度条:
首先定义一个圆边框的大盒子,然后内嵌一个小盒子添加过度属性即可
<!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>Document</title>
<style>
.bar {
width: 150px;
height: 15px;
border: 1px solid red;
border-radius: 7px;
padding: 0.5px;
}
.bar-in {
width: 50%;
height: 100%;
background-color: red;
transition: all .7s;
}
.bar:hover .bar-in {
width: 100%;
}
</style>
</head>
<body>
<div class="bar">
<div class="bar-in"></div>
</div>
</body>
</html>
效果:
要想添加多个属性,只需利用逗号分隔即可
transition: width 2s, height 2s;
要想所有的属性都发生变化,使用all即可
transition: all .5s;
这些就是昨天和前天学的内容,由于种种原因,拖到今天才发出来,真的栓Q!
以后尽量把每天学习的内容都做成笔记,养成好习惯,接下来就是项目品优购了,让我感觉比这些枯燥的知识点有意思多了,冲!