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盒子里面包含张背景图片,两个广告漂浮。结构如下:
<div class="J_headbar">
<div class="w">
<!--a标签为行内元素,若让背景图像显示,必须设定宽高-->
<a class="w" href="#">
<i></i>
</a>
<!--ul 大牌狂欢 1元秒杀哦广告是悬浮在背景上,不占位置,考虑用定位,若用浮动,只能在下一行 -->
<ul class="J_headul">
<!-- ul 绝对定位 单个大牌狂欢,1元秒杀链接用li 做得效果可用浮动float 来填充ul 给个外边距隔开 ul可不用给宽高,因为他是浮动的-->
<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)
先出现的文字,权重最高。
<title></titile>
<meta name=“description” content="....." />
<meta name=“keywords” content="....." />
2.7 搜索框
在button 里面添加字体图标,可用 i 标签嵌套,最后的框很可能变大,因此将 “input button ”都定义为float 即可。
2.8 热词
如何在一个盒子中,子盒子浮动了,其他的子盒子也最好浮动,要不然结构会出错。
2.9 购物车上角标
通过给数字加圆角(border-radius),数字用定位处理。