第8天：公共图标库

1.公共字体图标的使用

1. 1www.icomoon.io

在官网上下载所需的素材，将文件夹放在html文件夹同一个目录中，在style 里面引入声明字体， @font-face 属性，在下载文件夹中找到 demo.html ,再在里面找到对应位置的小方块，复制粘贴到所需的位置(注意html 文件夹中显示的为空格)，所需的位置用一个标签如span标签等括起来，标签中引入@font-face属性中定义的字体font-family, 还可定义color,font-size;

由美工设计好的图标格式为svg,我们需要转换为页面能使用的字体文件。在icomoon.co 中import icon, 选择 created.svg 重新下载

若想追加其他图标，import icon ，选择之前下载的文件夹中的 .json 文件。

1.2.阿里 www.icofont.cn

2.京东网页

2.1 初始化一些样式，考虑到兼容性及H5 normalize.css

2.2 京东图标：在www.jd.com/favicon.ico 可得到ico 的图标文件。放在根目录下(为了兼容性)，可根据域名直接得到。

jd jd/image jd/css jd/font(放置下载的图标) jd/index.html jd/favicon.ico

在html 中引入 <link ref="shortcut icon" href="favicon.ico" type="image/x-icon"/>

2.3 京东头部漂浮广告。“一元秒杀”，“大牌狂欢”。

布局：一个div盒子里面包含张背景图片，两个广告漂浮。结构如下：

<li>
                       <a class="joy_right" href="#" ><img src="image/headURL.png" alt="" /></a>
                   </li>
                   <li>
                       <a class="joy_left" href="#" ><img src="image/headURL2.png" alt=""></a>
                   </li>
               </ul>
           </div>
       </div>

2.4 若父盒子中的子盒子高度大于父盒子，超出范围，子盒子中设置 overflow:hidden;

2.5 logo部分

一般为了网站优化，加快搜索，结构如下：

第一种：
       <div class="header">
           <div class="w inner">
               <div class="logo">
                   <h1>
                       <a href="#" title="京东网">京东</a>
                   </h1>
               </div>

           </div>
       </div>

注意：h1 有个外边距，会与class="logo" 产生一定距离。因此，清样式。

.logo h1 {

margin:0;

}

.logo {
   width: 190px;
   height: 170px;
   position: absolute;
   background-color: blue;
   top: -31px;
   left: 0;
}

.logo a{
   width: 190px;
   height: 170px;
   background: url(../image/logo.gif) no-repeat;
   background: url(../image/headBG.jpg) no-repeat;

/* 把行内元素转化为行内块元素，才可以显示背景图片*/
display: block;

overflow:hidden; /*文字出去后就不会出现再父盒子了*/
}

第二种，把图片放入链接a 当中；

<div class="header">
           <div class="w inner">
               <div class="logo">
                   <h1>
                       <a href="#"><img src="image/logo.gif"></a>
                   </h1>
               </div>

           </div>
       </div>
.logo {
   width: 190px;
   height: 170px;
   position: absolute;
   background-color: blue;
   top: -31px;
   left: 0;
}

logo 里面的权重比其他的都要高。因此a 链接网站优化加快搜索会加入“京东” 里面的字不能删，第一种方式更好，否则a加入文字后，显示图片会换行。

设置text-indent:-9999px; 向右首行缩进；

a 里面加title 属性，网站优化。当鼠标移入，显示标题名。 image 属性里面也有title.

2.6 网站优化三大标签优化（SEO）

先出现的文字，权重最高。

2.7 搜索框

在button 里面添加字体图标，可用 i 标签嵌套，最后的框很可能变大，因此将 “input button ”都定义为float 即可。

2.8 热词

如何在一个盒子中，子盒子浮动了，其他的子盒子也最好浮动，要不然结构会出错。

2.9 购物车上角标

通过给数字加圆角（border-radius）,数字用定位处理。

第8天：公共图标库

猜你喜欢