WEB前端第十九课——雪碧图&滑动门

怡红公子0526 2021-09-27

展开全文

1.字体图标

　　获取途径：

　　① 免费网站下载字体

　　② 收费网站购买字体使用权

　　③ 自己设计字体（要有设计背景）

2.阿里巴巴 IconFont图标库

　　URL：https://www./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:///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>