天天躁狠狠躁狠狠躁夜夜躁,欧美成人免费午夜影视

原文鏈接：https://www.mk2048.com/blog/blog.php?id=000iac1hj&title=iconfont字體圖標(biāo)和各種CSS小圖標(biāo)

前言：這是筆者學(xué)習(xí)之后自己的理解與整理。如果有錯(cuò)誤或者疑問的地方，請大家指正，我會(huì)持續(xù)更新！

iconfont字體圖標(biāo)

　　我們的需求中，很多時(shí)候會(huì)看到一些小的圖形，或者叫圖標(biāo)，比如天貓網(wǎng)站中：

? ? ??

　　這些小圖形我們可以用圖片代替，通常我們是把這些圖形切圖之后做成精靈圖（又叫雪碧圖）；

　　精靈圖的原理：把很多小圖片集合成一張大圖片，然后用設(shè)置背景圖的位置來顯示圖片；

　　精靈圖的優(yōu)點(diǎn)：減少服務(wù)器的請求次數(shù)，降低服務(wù)器壓力；

　　sprites是一款很好的精靈圖制作工具；

　　當(dāng)然還有其他的方法可以制作這些小的圖形，比如上圖中，天貓使用的字體圖標(biāo)iconfont；

　　字體圖標(biāo)，顧名思義，就是一種字體，和字體一樣，是矢量的，我們也叫矢量圖標(biāo)，任意放大縮小，都不會(huì)失真；

　　網(wǎng)絡(luò)中有很多字體圖標(biāo)庫，這里我介紹一下iconfont的使用：

　　官網(wǎng)：http://www.iconfont.cn/?

　　我就不說怎么制作了，我們直接使用吧（呵呵，其實(shí)我畫的圖太丑）；

　　原本準(zhǔn)備寫一下使用方法的，但是iconfont好像又升級(jí)了，加入了symbol寫法，支持多色圖標(biāo)了（這涉及到SVG的知識(shí)），官網(wǎng)的幫助文檔的GIF圖也很好的解釋了怎么應(yīng)用，我就寫一下我第一次用的時(shí)候遇到過的坑吧：

"下載代碼"按鈕，希望你能直接找到。嗯，我找了好一會(huì)，默認(rèn)讓我去設(shè)置顏色和大小去了，這個(gè)是去弄素材的，前端只要代碼就可以了,點(diǎn)擊撤銷，然后...；

　　 ? 不知道是我電腦問題（1366*768）還是怎么回事？這個(gè)"下載代碼"按鈕被我的windows底部工具欄擋住了一半，嗯，這個(gè)...

? ? ? ? ?

當(dāng)我們把字體圖標(biāo)下載下來之后，它就是一個(gè)文件了，我們是在css里定義字體類型的時(shí)候，別忘了把路徑設(shè)置正確；
如果我們使用的是iconfont的在線項(xiàng)目（沒有下載文件），當(dāng)項(xiàng)目成員更新了圖標(biāo)，如果我們也想用新的圖標(biāo)，就也得更新"在線鏈接"；
字體不支持多色，如果我們使用下載文件的方式，那就只能用字體顏色設(shè)置單色了。想使用多色圖標(biāo)，就得用symbol引用在線鏈接的方式；symbol引用的是js文件，font-class引用的css文件，兩種方式的寫法也是不一樣的；

CSS小圖標(biāo)

　　大師們用css制作出了各種純css圖形，我這里就只列舉幾種我用的比較多的；

三角形

　　請看這篇，?border三角形陰影和多重邊框的整理轉(zhuǎn)述?；

菜單（三道杠）

　　用border上邊框雙線和下邊框?qū)嵕€，也可以反著來：

　　代碼如下：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            *{                padding: 0;                margin: 0;            }            .menu{                margin: 100px;                width: 55px;                height: 10px;                border-top: 30px double #f00;                border-bottom: 10px solid #f00;                /*用border上邊框雙線和下邊框?qū)嵕€，也可以反著來*/            }        </style>    </head>    <body>        <div class="menu"></div>    </body></html>

View Code

?

內(nèi)凹角

　　大師的方法，點(diǎn)擊這里，用css3屬性徑向漸變r(jià)adial-gradient做:

　　背景圖徑向漸變可以設(shè)置：圓心位置，漸變的大小，漸變的形狀，圓心處的顏色寬度， ... ，結(jié)尾處的顏色寬度;

　　代碼如下：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            *{padding: 0;margin: 0;}            a{text-decoration: none;cursor: pointer;}            li{list-style: none;}            /*清除浮動(dòng)*/            .clearfix:before, /*:before處理margin上下重疊*/            .clearfix:after {                content: "";                 display: table;            }            .clearfix:after {                clear: both;            }            .clearfix {                zoom: 1;            }                        .test{                margin: 100px 0 0 100px ;            }            .list{                margin-left: -20px;            }            .content{                width: 320px;                background: #7fd6f1;                min-height: 200px;            }            .item .active{                background: #7fd6f1;                color: #333;            }            .item{                float: left;                margin-left: 30px;            }            .item a{                display: block;                background: #ce4be2;                width: 80px;                height: 35px;                text-align: center;                line-height: 35px;                color: #fff;                border-radius: 10px 10px 0 0;                position: relative;            }            .item a:after{                content: "";                display: block;                position: absolute;                right: -9px;                 /*不知大家是否發(fā)現(xiàn)，在邊緣處其實(shí)是有1px的變化的，弧度到最后不是很自然，這里我們其實(shí)可以把位置往里1px*/                bottom: 0;                width: 10px;                height: 10px;                 background: -webkit-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);                 background: -o-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);                 background: -moz-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);                 background: radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);                 /*背景圖徑向漸變可以設(shè)置：圓心位置，漸變的大小，漸變的形狀，圓心處的顏色 寬度， ... ，結(jié)尾處的顏色寬度*/                 /*圓心位置默認(rèn)為center，我們這里設(shè)置圓心為元素左頂點(diǎn)和右頂點(diǎn)*/                 /*漸變的大小默認(rèn)為farthest-corder ,我們這里設(shè)置的farthest-side*/                 /*漸變的形狀默認(rèn)為ellipse（橢圓），我們這里得設(shè)置成circle（圓形），但是寬高一樣的橢圓不就是圓形么，so...*/                 /*顏色和寬度的設(shè)置，我們在離元素寬度還有1px的時(shí)候變化，所以這里是10-1=9px；*/            }            .item a:before{                content: "";                display: block;                position: absolute;                left: -9px;                bottom: 0;                width: 10px;                height: 10px;                 background: -webkit-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);                 background: -o-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);                 background: -moz-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);                 background: radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);            }            .item .active:after{                background: -webkit-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);                 background: -o-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);                 background: -moz-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);                 background: radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);            }            .item .active:before{                background: -webkit-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);                 background: -o-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);                 background: -moz-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);                 background: radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);            }        </style>    </head>    <body>        <div class="test">            <ul class="list clearfix">                <li class="item">                    <a href="javascript:;" >新聞</a>                </li>                <li class="item">                    <a href="javascript:;" class="active">娛樂</a>                </li>                <li class="item">                    <a href="javascript:;">體育</a>                </li>            </ul>            <div class="content"></div>        </div>    </body></html>

View Code

桃心

　　代碼如下：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            /**{padding: 0;margin: 0;}*/            .wrapper{                margin: 100px;                width: 300px;                height: 300px;                border: 1px solid #0ff;            }            .test{                display:inline-block;                margin:50px;                height: 100px;                width: 100px;                background-color: red;                transform: rotate(-45deg);            }            .test::before , .test::after{                display:block;                content:"";                width: 100px;                height: 100px;                background-color: red;                border-radius: 50%;                margin-top:-50%;            }            .test:after{                margin-left:50%;            }        </style>    </head>    <body>        <div class="wrapper">            <div class="test"></div>        </div>    </body></html>

View Code

回到頂部

    <style>        *{padding: 0;margin: 0;}        .goTop{            position:fixed;            right:10px;            bottom: 10px;            height:50px;            width: 50px;                text-align:center;            background-color: lightblue;            border-radius: 20%;            overflow: hidden;        }        .goTop:hover:before{            top:50%;        }        .goTop:hover .directTop{            visibility: hidden;        }        .goTop:before{            position: absolute;            top: -50%;            left: 50%;            transform: translate(-50%,-50%);            content:'回到頂部';            width: 40px;            color:peru;            font-weight:bold;        }            .directTop{            visibility: visible;            display:inline-block;            margin-top: 20px;            height:20px;            width: 20px;            border: 3px solid;            border-color: white transparent transparent white;            transform:rotate(45deg);        }    </style>    <body style="height:2000px;">        <div class="goTop">            <div class="directTop"></div>        </div>        </body>

View Code

　　還有很多css制作的經(jīng)典圖形，以后再整理吧；

　　其實(shí)，css制作的圖標(biāo)和圖片代替的圖片都很棒，根據(jù)需求吧。我更喜歡字體圖標(biāo)和圖片的方式，效率更高，簡單。

來源：https://www.icode9.com/content-4-449851.html

本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點(diǎn)擊舉報(bào)。

九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

iconfont字體圖標(biāo)

CSS小圖標(biāo)

三角形

菜單（三道杠）

?

內(nèi)凹角

桃心

回到頂部