CSS3图片模糊处理
filter:函数();例如div { filter: blur(5px); }blur模糊处理 数值越大越模糊
cala()函数
calc主要应用在 自动调整子元素的大小以适应其容器的大小
可以实现水平或者垂直居中width: calc(100%-200px); margin-left: 100px;
过渡
过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用Flash动画或JavaScript的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画:(要有起始状态和中间状态)是从一个状态 渐渐的过渡到另外一个状态可以让我们页面更好看,更动感十足,虽然低版本浏览器不支持(ie9以下版本)但是不会影响页面布局。
我们现在经常和 :hover 一起 搭配使用
谁做过渡给谁加 (不给hover加)
![](https://i-blog.csdnimg.cn/blog_migrate/f063f0b8c544d83aa82de03bf1a39aa1.png)
网页制作流程
![](https://i-blog.csdnimg.cn/blog_migrate/b1bb5dec729e7d3dc22118268b4fa91b.png)
品优购项目
1.6网站favicon 图标(地球标换成logo标)
一、制作favicon图标
1.把品优购图标切成 pna 图片
2.把 pna 图片转换为 ico 图标,这需要借助于第三方转换网站,例如比特虫: http://www.bitbug.net)
![](https://i-blog.csdnimg.cn/blog_migrate/0af91983889267ec368bd9dd5246188d.png)
![](https://i-blog.csdnimg.cn/blog_migrate/fdb6ac17d1228dafc4ce0d892df62b87.png)
![](https://i-blog.csdnimg.cn/blog_migrate/5efc550cff1f5fed86aa0cde741ba617.png)
![](https://i-blog.csdnimg.cn/blog_migrate/eee9e4dac51db2d4c30756d5f440141c.png)
Z图标的使用
第一种方法Unicode
<!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: 'iconfont';
src: url('../课堂练习/品优购/font_3911673_iahuvredcxi/iconfont.woff2') format('woff2'),
url('../课堂练习/品优购/font_3911673_iahuvredcxi/iconfont.woff') format('woff'),
url('../课堂练习/品优购/font_3911673_iahuvredcxi/iconfont.ttf') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
</head>
<body>
<span class="iconfont"></span>
</body>
</html>
第二种方法Font class
<!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>
<link rel="stylesheet" href="../课堂练习/品优购/font_3911673_iahuvredcxi/iconfont.css">
</head>
<body>
<span class="iconfont icon-gouwuchekong"></span>
</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>Document</title>
</head>
<style>
li {
list-style: none;
float: left;
padding-left: 8px;
}
</style>
<body>
<section class="w">
<ul>
<li>我的订单</li>
<!--竖线 : 直接敲| -->
<li>|</li>
<li>我的品优购</li>
<li>|</li>
<li>品优购会员</li>
<li>|</li>
<li>企业采购</li>
<li>|</li>
<li>关注品优购</li>
<li>|</li>
<li>客户服务</li>
<li>|</li>
<li>网站导航</li>
</ul>
</body>
字体引入(Z图标做竖线)
<!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>
<link rel="stylesheet" href="../课堂练习/品优购/font_3911673_iahuvredcxi/iconfont.css">
</head>
<body>
<span class="iconfont icon-shuxian"></span>
</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>边框做竖线</title>
</head>
<style>
li {
list-style: none;
float: left;
}
/* 竖线:用边框做 要隔一个留一个空li(偶数个)*/
/*section里面的偶数个li */
section:nth-child(1) li:nth-last-child(2n) {
border-right:1px solid #666;
height: 15px;
padding: 0;
margin: 4px 5px 0 5px ;
}
</style>
<body>
<section>
<ul>
<li>我的订单</li>
<!--竖线 : 边框-->
<li></li>
<!-- Z图标做下箭头 -->
<li>我的品优购
</li>
<li></li>
<li>品优购会员</li>
<li></li>
<li>企业采购</li>
<li></li>
<li>关注品优购</li>
<li></li>
<li>客户服务</li>
<li></li>
<li>网站导航</li>
</ul>
</section>
</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>伪元素做竖线</title>
<link rel="stylesheet" href="../课堂练习/品优购/font_3911673_iahuvredcxi/iconfont.css">
<style>
li {
list-style: none ;
float: left;
}
/* 伪元素做下箭头*/
/* section里面的第 3,9,11,13个li */
header nav section:nth-child(2) li:nth-child(3)::after,
header nav section:nth-child(2) li:nth-child(9)::after,
header nav section:nth-child(2) li:nth-child(11)::after,
header nav section:nth-child(2) li:nth-child(13)::after{
content: "\e606";
/* 字体 谷歌font-css中引用 */
font-family: "iconfont" ;
margin-left: 3px;
}
</style>
</head>
<body>
<section>
<ul>
<li>我的订单</li>
<!--竖线 : 伪元素-->
<li><span class="iconfont icon-shuxian"></span></li>
<!-- Z图标做下箭头 -->
<li>我的品优购</li>
<li><span class="iconfont icon-shuxian"></span></li>
<li>品优购会员</li>
<li><span class="iconfont icon-shuxian"></span></li>
<li>企业采购</li>
<li><span class="iconfont icon-shuxian"></span></li>
<!-- Z图标做下箭头 -->
<li>关注品优购</li>
<li><span class="iconfont icon-shuxian"></span></li>
<!-- Z图标做下箭头 -->
<li>客户服务</li>
<li><span class="iconfont icon-shuxian"></span></li>
<!-- Z图标做下箭头 -->
<li>网站导航</li>
</ul>
</section>
</body>
</html>
logo制作
![](https://i-blog.csdnimg.cn/blog_migrate/627f353d95bf6921e8752abddfdad3cc.png)
![](https://i-blog.csdnimg.cn/blog_migrate/a4e2795731b20728d563557243bb06a9.png)
<!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>
header > section section:first-child a {
/* 转换为①行内块或者②左浮动 */
width: 175px;
height: 56px;
/* 行内块有间隙 有文字图会掉下去(让字消失但会让图掉下去) */
/* ①display: inline-block; */
/*②1. font-size可以解决这些问题*/
font-size: 0;
float: left;
/* ②2.1往左缩进品优购三个字 */
/* text-indent: -3em; */
/*② 2.2裁剪让品优购三个字消失 */
/* overflow: hidden; */
/* 不需要平铺 */
background: url(../public/images/logo.png) no-repeat;
}
</style>
<body>
<!-- logo -->
<section>
<h1>
<!-- 链接到首页 a里面写网站名称LOGO SEO 优化 -->
<a href="#">品优购</a>
</h1>
</section>
</body>