<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>IconFont</title>
<link rel="stylesheet" href="demo.css">
<style type="text/css">
@font-face {font-family: "iconfont";
src: url('iconfont.eot'); /* IE9*/
src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff') format('woff'), /* chrome, firefox */
url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
</style>
</head>
<body>
<div class="main markdown">
<h1>IconFont 图标</h1>
<ul class="icon_lists clear">
<li>
<i class="icon iconfont">㑘</i>
<div class="name">团</div>
<div class="code">&#x3458;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">放大镜</div>
<div class="code">&#xe605;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">手机</div>
<div class="code">&#xe621;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">15天无理由退货</div>
<div class="code">&#xe606;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">快修服务</div>
<div class="code">&#xe607;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">购物车</div>
<div class="code">&#xe68c;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">电话卡</div>
<div class="code">&#xe66d;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">礼物</div>
<div class="code">&#xe61a;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">定位</div>
<div class="code">&#xe608;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">7天</div>
<div class="code">&#xe6f2;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">礼物</div>
<div class="code">&#xe603;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">大于号</div>
<div class="code">&#xe501;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">右箭头-圆形</div>
<div class="code">&#xe523;</div>
</li>
</ul>
<h2 id="unicode-">unicode引用</h2>
<hr>
<p>unicode是字体在网页端最原始的应用方式，特点是：</p>
<ul>
<li>兼容性最好，支持ie6+，及所有现代浏览器。</li>
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
<li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
</ul>
<blockquote>
<p>注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式</p>
</blockquote>
<p>unicode使用步骤如下：</p>
<h3 id="-font-face">第一步：拷贝项目下面生成的font-face</h3>
<pre><code class="lang-js hljs javascript">@font-face {
font-family: <span class="hljs-string">'iconfont'</span>;
src: url(<span class="hljs-string">'iconfont.eot'</span>);
src: url(<span class="hljs-string">'iconfont.eot?#iefix'</span>) format(<span class="hljs-string">'embedded-opentype'</span>),
url(<span class="hljs-string">'iconfont.woff'</span>) format(<span class="hljs-string">'woff'</span>),
url(<span class="hljs-string">'iconfont.ttf'</span>) format(<span class="hljs-string">'truetype'</span>),
url(<span class="hljs-string">'iconfont.svg#iconfont'</span>) format(<span class="hljs-string">'svg'</span>);
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用iconfont的样式</h3>
<pre><code class="lang-js hljs javascript">.iconfont{
font-family:<span class="hljs-string">"iconfont"</span> !important;
font-size:<span class="hljs-number">16</span>px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: <span class="hljs-number">0.2</span>px;
-moz-osx-font-smoothing: grayscale;
}
</code></pre>
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre><code class="lang-js hljs javascript"><i <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"iconfont"</span>>&#x33;<span class="xml"><span class="hljs-tag"></<span class="hljs-name">i</span>></span></span></code></pre>
<blockquote>
<p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
</blockquote>
</div>
</body>
</html>
html+css制作小米官网
需积分: 29 63 浏览量
2020-07-18
12:44:11
上传
评论 5
收藏 6.96MB RAR 举报
html+css制作小米官网 （241个子文件） 
2b69b930-a2fd-4d09-a46a-8690cb79f764 77KB 31ae6df6-b672-491e-ab95-7b83a965c694 55KB 376f5f19-d1f5-4f87-8ef9-38e86891bc87 183KB cf6660a3-d424-4248-889f-0eed1e99a342 32KB demo.css 6KB mi.css 5KB iconfont.css 1KB reset.css 339B mi2.css 0B df7c6d47-c09f-49d1-9a9f-df0d2294bec8 56KB iconfont.eot 6KB
loading.gif 2KB
demo_unicode.html 6KB index.html 6KB favicon.ico 1KB
xmad_15293127351522_gPtTj.jpg 345KB poster-3.jpg 287KB xmad_15293312810273_ITBMQ.jpg 268KB xmad_15290474375598_QtKJk.jpg 255KB xmad_15290281320377_uGhEF.jpg 248KB poster-2.jpg 229KB xmad_15290709211205_dXYfk.jpg 226KB poster-4.jpg 216KB poster-1.jpg 197KB xmad_15283420365224_wLvZm.jpg 141KB weixin.jpg 131KB xmad_15283599920813_VWpSg.jpg 130KB ed30a098e2f3a3e02ed5ff163eb309c6.jpg 112KB xmad_1527868798442_ZNyvb.jpg 108KB xmad_15287211809144_LDIsa.jpg 97KB xmad_15278486309403_qBZrl.jpg 96KB 4544f541-f2e1-f423-5cbf-88fe33c5e110.jpg 91KB b315ba2c-3dc0-1352-3fbf-b23ffad1bb0f.jpg 89KB xmad_1528273092217_fQnsy.jpg 87KB 29087f25-a8b1-b285-00fa-9e144076e2c4.jpg 86KB xmad_15287052446757_cVHRj.jpg 80KB xmad_15284227291307_SkfiU.jpg 73KB xmad_14950995035103_fhWtH.jpg 68KB poster-5.jpg 67KB xmad_15204799796935_WjnpM.jpg 58KB 1.jpg 57KB 675558ba-3d0e-0105-e0a0-e067917150b4.jpg 45KB pms_1522204891.32862445.jpg 44KB xmad_15232552838083_SWVqL.jpg 44KB 1e69422ff72ab22f5c0374d7f1dac8c1.jpg 39KB xmad_15290668700648_LpwQf.jpg 36KB pms_1509723483.31416776!220x220.jpg 35KB pms_1500287084.72131750!220x220.jpg 35KB xmad_15204798088946_YvzWs.jpg 34KB xmad_15204795762271_ZwaxE.jpg 34KB pms_1510111588.69169839!220x220.jpg 33KB xmad_15277816294188_wikHT.jpg 32KB xmad_15277814391495_RBqUe.jpg 31KB pms_1499048837.78256911!220x220.jpg 31KB a.jpg 31KB pms_1478761096.92412274!220x220.jpg 31KB pms_1524883847.49276938!220x220.jpg 30KB T1xxVTBghv1RXrhCrK!220x220.jpg 30KB f.jpg 30KB pms_1525853341.8312102!220x220.jpg 29KB pms_1495692033.10494295!220x220.jpg 28KB pms_1522140924.30981214!220x220.jpg 28KB pms_1496997930.13622399!220x220(2).jpg 28KB pms_1496997930.13622399!220x220.jpg 28KB d.jpg 27KB pms_1520564952.59464287!220x220.jpg 27KB pms_1522318330.86967810!220x220.jpg 26KB pms_1512898082.47038866!220x220.jpg 26KB pms_1526349330.12883818!220x220.jpg 25KB pms_1505897517.20426731!220x220.jpg 25KB e.jpg 24KB b.jpg 24KB pms_1493284697.69911065!220x220.jpg 24KB pms_1509356199.1647812!220x220.jpg 24KB T13y_vBgJT1RXrhCrK!220x220.jpg 24KB pms_1515662525.51823819!220x220.jpg 23KB pms_1514387870.88251945!220x220.jpg 23KB pms_1496238415.93753872!220x220.jpg 23KB c.jpg 23KB pms_1469410847.29693876!220x220.jpg 23KB pms_1524466931.58435208!220x220.jpg 23KB pms_1469583247.6157588!220x220.jpg 23KB pms_1502093110.00979492!220x220.jpg 23KB pms_1509355060.24432575!220x220.jpg 22KB pms_1492509229.84515978!220x220.jpg 22KB pms_1464615180.86261317!220x220.jpg 22KB pms_1490604807.82792204!220x220.jpg 22KB pms_1498526059.78899603!220x220.jpg 21KB pms_1488522312.21011606!220x220.jpg 21KB pms_1496730880.16174470!220x220.jpg 20KB pms_1476425102.6997704!220x220.jpg 20KB pms_1506733860.3164711!220x220.jpg 20KB pms_1482221011.26064844!220x220.jpg 19KB T1IdZgB5hv1RXrhCrK!220x220.jpg 19KB pms_1480474019.52478532!220x220.jpg 19KB T1zBYgBCWv1RXrhCrK!220x220.jpg 18KB pms_1501555227.53753564!220x220.jpg 18KB pms_1488272686.62666302!220x220.jpg 18KB T1SkV_BCd_1RXrhCrK!220x220.jpg 18KB pms_1515636932.4212763!220x220.jpg 17KB共 241 条
- 1
- 2
- 3
评论0