在网页中实现icon小图标的几种方法
生活随笔
收集整理的這篇文章主要介紹了
在网页中实现icon小图标的几种方法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
? ? ? ? 總所周知，網頁的美觀程度往往比這個網頁的使用程度更重要，因為它能直接吸引用戶的眼球。在網頁中，小圖標在美工方面的作用更是不言而喻，小圖標種類多樣，給人以直觀的反映。在現有的網站中，99.9%的網站都采用了小圖標，說明了小圖標的重要性。這里介紹學習到的三種實現小圖標的重要方法。
網頁中 Icon 畫小圖標的方法： A、CSS Sprite B、font + HTML C、font + CSS一、CSS+Sprite
通過這種方法主要是利用自己已經做好的icon圖片的寬度和長度大小來調節位置，這種方法實現簡單，但是后期修改很困難，因為網站的間隙要跟圖片匹配在一起。? ? ? ??這是我所擁有的圖片，我已經標記好的間隔，接下來實現如下圖的功能：
整個工程項目結構：
index.html
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title>css sprite圖標顯示</title><link rel="stylesheet" href="css/basic.css"><link rel="stylesheet " href="css/sprite.css"><link rel="stylesheet" href="http://i.icomoon.io/public/temp/943f37486f/UntitledProject/style.css "><script src="js/jquery.min.js"></script><script src="js/sprite.js"></script></head> <body><ul class="sprite"><li><s class="s-icon"></s><a href="">商品類別1</a></li><li><s class="s-icon"></s><a href="">商品類別2</a></li><li><s class="s-icon"></s><a href="">商品類別3</a></li><li><s class="s-icon"></s><a href="">商品類別4</a></li><li><s class="s-icon"></s><a href="">商品類別5</a></li><li><s class="s-icon"></s><a href="">商品類別6</a></li><li><s class="s-icon"></s><a href="">商品類別7</a></li><li><s class="s-icon"></s><a href="">商品類別8</a></li><li><s class="s-icon"></s><a href="">商品類別9</a></li><li><s class="s-icon"></s><a href="">商品類別10</a></li><li><s class="s-icon"></s><a href="">商品類別11</a></li> </ul> </body> </html>sprite.js /*** Created by HY-PC on 2015/1/6.*/ /*$(function(){var iconH=$(".sprite").find("s").height(); // console.log(iconH);var getLi=$(".sprite").children("li");getLi.forEach(function(){var $this=$(this),$inedx=$this.index();$this.children("s").css("background-postion","0 -"+iconH*$inedx+"px")}) })*/ $(function(){var iconH = $(".sprite").find("s").height(),triggerLi = $(".sprite").children("li");console.log(iconH);triggerLi.each(function(){var $this = $(this),$index = $this.index();//console.log($index)//console.log(iconH*$index);$this.children("s").css("background-position","0 -"+ iconH*$index +"px")$this.hover(function(){// 鼠標移入$this.children("s").css("background-position","-26px -"+ iconH*$index +"px")},function(){// 鼠標移出$this.children("s").css("background-position","0 -"+ iconH*$index +"px")})}) })sprite.css .sprite{margin: 10px auto;width: 206px;border: 1px solid #b51600; } .sprite li{cursor: pointer;height: 42px;width: 206px;background-color: #b51600;border-bottom: 1px solid #911001;border-top: 1px solid #c11e08; } .sprite li a {color: #fff;line-height: 42px;font-size: 14px; }.sprite li s{height: 40px;width: 24px;display: block;margin-left: 10px;margin-right: 8px;float: left;background-image: url("../images/s-icon.png"); }.sprite li:hover{background-color: #fff;border-color: #fff } .sprite li:hover a{color: #b51600; } .sprite li:hover s{} .icon-twitter{color: #f00;} .icon-twitter:hover{color: #fff;} .image{text-align:center;font-size:200px;}
二、font+HTML
顧名思義，font就是將圖片字體化，常用的格式是我們熟知的svg，用font表示小圖標比上面的方法有很多優勢：修改圖標顏色只需修改字體顏色，修改圖片大小只需修改字體大小，這樣對我們隊小圖標的靈活使用提供了方便。 關于字體圖片，我們可以自己制作，也可以網上下載（https://icomoon.io/app/#/select），有很多渠道獲取，這里就不再詳細描述了。 接下來實現這樣的功能： index.html <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="css/basic.css"><link rel="stylesheet" href="css/fontHtml.css"> </head> <body><ul class="layout"><li><a href=""><i style="color: #efe0ce;" class="imooc-icon">?</i></a></li><li><a href=""><i style="color: #ef7073;" class="imooc-icon">?</i></a></li><li><a href=""><i style="color: #78ade3;" class="imooc-icon"></i></a></li><li><a href=""><i style="color: #eae77f;" class="imooc-icon"></i></a></li><li><a href=""><i style="color: #3c3c3c;" class="imooc-icon"></i></a></li><li><a href=""><i style="font-size:30px;" class="imooc-icon"></i></a></li><li><a href=""><i style="font-size:60px;" class="imooc-icon"></i></a></li><li><a href=""><i style="font-size:90px;" class="imooc-icon"></i></a></li><li><a href=""><i style="font-size:120px;" class="imooc-icon"></i></a></li><li><a href=""><i style="font-size:148px;" class="imooc-icon"></i></a></li></ul> </body> </html>basic.css
@charset "UTF-8"; /* CSS reset */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{ margin: 0; padding: 0; } fieldset,img{ border: 0; } :focus{ outline: 0; } address,caption,cite,code,dfn,em,strong,th,var,optgroup{ font-style: normal; font-weight: normal; } h1,h2,h3,h4,h5,h6{ font-size: 100%; font-weight: normal; font-family: "Microsoft YaHei"; } abbr,acronym{ border: 0; font-variant: normal; } code,kbd,samp,tt{ font-size: 100%; } input,button,textarea,select{ *font-size: 100%; border:none;} body{ background: #e9e9e9; color:#5e5e5e; font: 14px/2em Microsoft YaHei,SimSun,Arial;} ol,ul{ list-style: none; } table{ border-collapse: collapse; border-spacing: 0; } caption,th{ text-align: left; } sup,sub{ font-size: 100%; vertical-align: baseline; } :link, :visited, ins{ text-decoration: none; } blockquote,q{ quotes: none; } blockquote:before, blockquote:after, q:before, q:after{ content: ''; content: none; } a:link, a:visited{ color: #5e5e5e;} a:hover { color:#c9394a;} a:active { color: #666;} .clearfix:after{content:'\0020';display:block;height:0;clear:both;visibility:hidden;} .clearfix{*zoom:1;} .l{float:left;} .r{float:right;} .clear{ height:0; overflow:hidden; clear:both}fontHTML.css .layout{width: 750px;height: 300px;margin: 50px auto;border: 1px solid #ccc;border-top: 0;overflow: hidden;}.layout li{width: 20%;height: 150px;line-height: 150px;float: left;text-align: center;}.layout li a{background-color: #f4f4f4;color: #888;height: 150px;border-top: 1px solid #ccc;border-left: 1px solid #ccc;/* margin-left: -1px; */display: block;}.layout li a:hover{background-color: #fff;color: red;}@font-face{font-family: "imooc-icon";src: url("../fonts/icomoon.eot"); /* IE9 兼容模式 */src: url("../fonts/icomoon.eot?#iefix") format("embedded-opentype"),url("../fonts/icomoon.woff") format("woff"),url("../fonts/icomoon.ttf") format("truetype"),url("../fonts/icomoon.svg") format("svg");font-weight: normal;font-style: normal;}.imooc-icon{font-family: "imooc-icon";font-style: normal;font-weight: normal;font-size: 64px;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
三、font+CSS
? ? ? ? ? ? ? ?index.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="css/basic.css"><link rel="stylesheet" href="css/fontCSS.css"> </head> <body><ul class="layout"><li><i class="icon icon-like shadow"></i></li><li><i class="icon icon-spinner spinner"></i></li><li><i class="icon icon-heart love"></i></li></ul><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script>$(".love").on("click",function(){var $this = $(this);$this.addClass("btn-activated")setTimeout(function(){$this.removeClass("btn-activated")},500)})</script> </body> </html>fontCSS.css
.layout{width: 750px;height: 251px;margin: 50px auto;border: 1px solid #ccc;border-top: 0;}.layout li{width: 250px;height: 250px; line-height: 250px; float: left;text-align: center;background-color: #f4f4f4;color: #b13947;border-top: 1px solid #ccc; border-left: 1px solid #ccc;margin-left: -1px;font-size: 148px;}@font-face{font-family: "imooc";src: url("../fonts/imooc.eot");/* IE9兼容 */src: url("../fonts/imooc.eot?#iefix") format("embedded-opentype"),url("../fonts/imooc.woff") format("woff"),url("../fonts/imooc.ttf") format("truetype"),url("../fonts/imooc.svg") format("svg");font-weight: normal;font-style: normal; } .icon{font-family: "imooc";font-weight: normal;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; }.icon-spinner:before {content: "\e600"; } .icon-heart:after {content: "\e602"; } .icon-heart:before {content: "\e601"; } .icon-like:before {content: "\e603"; }.shadow{color: #fff;text-shadow: 5px 5px 0px #b13947, 10px 10px 0px rgba(0, 0, 0, 0.15); } .spinner{-webkit-animation: spinner 2s infinite linear;animation: spinner 2s infinite linear; } @-webkit-keyframes spinner {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(359deg);transform: rotate(359deg);} } @keyframes spinner {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(359deg);transform: rotate(359deg);} }.love{position: relative;width: 100%;height: 100%;display: block;vertical-align: middle;text-align: center;cursor: pointer; } .love:before,.love:after{position: absolute;top: 0;left: 0;width: 100%;height: 100%; } .love:after{z-index: 0;color: #cecece;-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;backface-visibility: hidden; } .love:before{z-index: 1;color: #ea515e;-webkit-transform: scale(0);-moz-transform: scale(0);-ms-transform: scale(0);transform: scale(0);opacity: 0;-webkit-transition: none;-moz-transition: none;transition: none; } .love.btn-activated:before {-webkit-animation: scaleFade 0.5s forwards;-moz-animation: scaleFade 0.5s forwards;animation: scaleFade 0.5s forwards; } @-webkit-keyframes scaleFade {50% { opacity: 1;-webkit-transform: scale(1);}100% {opacity: 0;-webkit-transform: scale(2.5);} }@-moz-keyframes scaleFade {50% { opacity: 1;-moz-transform: scale(1);}100% {opacity: 0;-moz-transform: scale(2.5);} }@keyframes scaleFade {50% { opacity: 1;transform: scale(1);}100% {opacity: 0;transform: scale(2.5);} }四、總結
通過對網頁小圖標的研究學習，我也逐漸發現了小圖標icon的奧妙，在網頁中看似不起眼卻起著錦上添花的作用，這三種方法都有各自的優勢，當然，我更喜歡用font來控制在，它的靈活度很高，而且網頁放大也不會存在鋸齒現象，可以適用于任何平臺，這也有很好的體驗感。而且我也發現我的基礎知識不牢固，后面也需要不斷用更牢固的知識來武裝自己。總結
以上是生活随笔為你收集整理的在网页中实现icon小图标的几种方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： VirtualBox安装Mac系统
- 下一篇： 中华术数系列之奇门遁甲-精简版