WEB前端第十九课——雪碧图&滑动门
1.字体图标
获取途径：
① 免费网站下载字体
② 收费网站购买字体使用权
③ 自己设计字体（要有设计背景）
2.阿里巴巴 IconFont图标库
URL：https://www.iconfont.cn/home/index，需要注册账号后才能下载使用
图标下载成功后，可以通过编辑器直接调用
引用方式（以下内容摘自iconfont使用说明）：
① Unicode 引用，Unicode 是字体在网页端最原始的应用方式，特点：
兼容性最好，支持 IE6+，及所有现代浏览器。
支持按字体的方式去动态调整图标大小，颜色等等。
但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式
②
font-class 引用，是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题，特点：
兼容性良好，支持 IE8+，及所有现代浏览器。
相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
不过因为本质上还是使用的字体，所以多色图标还是不支持的。
③ Symbol 引用，这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：
支持多色图标了，不再受单色限制。
通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
兼容性较差，支持 IE9+，及现代浏览器。
浏览器渲染 SVG 的性能一般，还不如 png。
3.Unicode引用 测试代码
/* CSS代码 （来自iconfont） */
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1596700948491'); /* IE9 */
src: url('iconfont.eot?t=1596700948491#iefix') format('embedded-opentype'), /* IE6-IE8 */
url("data:application/x-font-woff2;charset=utf-8;") format('woff2'),
url('iconfont.woff?t=1596700948491') format('woff'),
url('iconfont.ttf?t=1596700948491') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1596700948491#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* HTML代码 */
<html>
<head lang="en">
<meta charset="utf-8">
<link rel="stylesheet" href="images/icon/iconfont.css"/>
<title>CSS_iconfont</title>
</head>
<body>
<ul type="none">
<li><i class="iconfont">&# xe7ec;</i>新浪微博</li>
<li><i class="iconfont">&# xe63b;</i>QQ空间</li>
<li><i class="iconfont">&# xe615;</i>腾讯微博</li>
<li><i class="iconfont">&# xe630;</i>购物车</li>
</ul>
</body>
</html>
4.font class引用 测试代码
<html>
<head lang="en">
<meta charset="utf-8">
<link rel="stylesheet" href="images/icon/iconfont.css"/>
<title>CSS_iconfont</title>
</head>
<body>
<ul type="none">
<li class="iconfont icon-xinlangweibo1">新浪微博</li>
<li class="iconfont icon-QQkongjian1">QQ空间</li>
<li class="iconfont icon-tubiaozhizuomoban">腾讯微博</li>
<li class="iconfont icon-shopshoppingco">购物车</li>
</ul>
</body>
</html>
5.symbol引用 测试代码
/* 引用iconfont使用说明 */
<html>
<head lang="en">
<meta charset="utf-8">
<!-- <link rel="stylesheet" href="images/icon/iconfont.css"/>-->
<title>CSS_iconfont</title>
<script src="Images/icon/iconfont.js"></script>
<style>
.icon {
width: 12em;
height: 2em;
vertical-align: -2.15em;
/*fill: currentColor;*/
/*overflow: hidden;*/
}
</style>
</head>
<body>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xinlangweibo"></use>
<text x="110" y="30" fill="red">新浪微博</text>
</svg>
</body>
</html>
6.CSS sprites雪碧图，将多张图片、图标等合并为一张整图，然后通过 background-position 进行背景图片定位
Sprites图片整合可以有效减少服务器请求次数，从而提高页面加载效率
整合图片的小工具网上有很多，PC端和在线的都有，可以自动生成CSS代码，操作便捷
sprites测试代码如下（通过Satyr Sprite工具整合图片，感谢工具作者http://shen.li/blog/post/C_sharp/CSS_Satyr.html）
<html>
<head lang="en">
<meta charset="utf-8">
<title>CSS_sprites</title>
<style>
div{
width: 200px;
height: 200px;
border: 1px solid #55a532;
background-image: url("images/number/compose.png");
float: left;
margin-left: 10px;
}
.pic_1 {background-position: -0px -0px; width: 200px; height: 200px; }
.pic_2 {background-position: -202px -0px; width: 200px; height: 200px; }
.pic_3 {background-position: -405px -0px; width: 200px; height: 200px; }
.pic_4 {background-position: -610px -0px; width: 200px; height: 200px; }
.pic_5 {background-position: -815px -0px; width: 200px; height: 200px; }
</style>
</head>
<body>
<div class="pic_1">壹</div>
<div class="pic_2">贰</div>
<div class="pic_3">叁</div>
<div class="pic_4">肆</div>
<div class="pic_5">伍</div>
</body>
</html>
7.滑动门，利用CSS背景图像的可层叠性，通过元素宽度的可伸缩性创建特定的动态效果
通过滑动门技术，设计的导航菜单兼具传统布局的呈现效果，但菜单的扩展性更强，可以根据内容多少自动调节
<html>
<head lang="en">
<meta charset="utf-8">
<title>CSS_滑动门</title>
<style>
.left{
height: 36px;
/*不能设置元素宽度*/
margin: 100px 200px 0px;
text-decoration: none;
color: white;
display: inline-block;
background: url("images/tools/nav_cont.png") no-repeat;
}
.right{
height: 36px;
padding: 0px 10px;
line-height: 36px;
background: url("images/tools/nav_cont.png") right;
}
</style>
</head>
<body>
<a href="#" class="left">
<span class="right">联系我们</span>
</a>
</body>
</html>
8.微信PC端官网导航栏制作
<html>
<head lang="en">
<meta charset="utf-8">
<title>WeChat_nav</title>
<style>
body{
margin: 0px;
}
.base{
width: 100%;
height: 1022px;
margin: 0;
background: url("Images/tools/wx_bkg.jpg") repeat-x;
}
.container{
width: 988px;
height: 1022px;
margin: 0px 297.5px;
padding: 0px 10px;
/*background-color: hotpink;*/
}
/* logo图片尺寸，需要针对 img标签进行设置，不能针对 a标签设置 */
.logo{
width: 129.63px;
height: 44px;
margin-top: 14px;
float: left;
}
.menu{
width: 748px;
height: 54px;
margin: 0px;
padding: 21px 0 0;
float: right;
}
.button{
height: 33px;
margin: 0;
list-style-type: none;
float: left;
}
.button_left{
/*a标签与span标签为行内元素，通过display属性转换为行内块级元素，再设置行高*/
display: inline-block;
height: 32.5px;
line-height: 32.5px;
padding-left: 13px;
color: white;
font-size: 14px;
text-decoration: none;
float: right;
}
.button_right{
display: inline-block;
height: 32.5px;
line-height: 32.5px;
padding-right: 10px;
float: right;
}
.button:hover .button_left{
background: url("Images/tools/wx_concave.png") no-repeat;
}
.button:hover .button_right{
background: url("Images/tools/wx_concave.png") right;
}
.menu li:first-child>.button_left{
background: url("Images/tools/wx_convex.png") no-repeat;
}
.menu li:first-child>a .button_right{
background: url("Images/tools/wx_convex.png") right;
}
</style>
</head>
<body>
<div class="base">
<div class="container">
<a href="#">
<img class="logo" src="Images/tools/wx_logo.png" alt="">
</a>
<ul class="menu">
<li class="button">
<a href="#" class="button_left">
<span class="button_right">首页</span>
</a>
</li>
<li class="button">
<a href="#" class="button_left">
<span class="button_right">帮助与反馈</span>
</a>
</li>
<li class="button">
<a href="#" class="button_left">
<span class="button_right">公众平台</span>
</a>
</li>
<li class="button">
<a href="#" class="button_left">
<span class="button_right">开放平台</span>
</a>
</li>
<li class="button">
<a href="#" class="button_left">
<span class="button_right">微信支付</span>
</a>
</li>
<li class="button">
<a href="#" class="button_left">
<span class="button_right">微信广告</span>
</a>
</li>
<li class="button">
<a href="#" class="button_left">
<span class="button_right">企业微信</span>
</a>
</li>
<li class="button">
<a href="#" class="button_left">
<span class="button_right">表情开放平台</span>
</a>
</li>
<li class="button">
<a href="#" class="button_left">
<span class="button_right">微信网页版</span>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号