前端笔记—从入门到坟墓[网站基础与优化][12.1]

网站icon图标

引入方式：

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

ico图片制作方式：
1，准备一张400*400的图片。
2，登陆http://www.bitbug.net/网站进行图片格式转换即可。

css Reset

参考资料：构架CSS基础样式库

什么是css reset
HTML标签在浏览器中都有默认的样式，不同的浏览器的默认样式之间存在差别。例如ul默认带有缩进样式，在IE下，它的缩进是由margin实现的，而在Firefox下却是由padding实现的。开发时浏览器的默认样式可能会给我们带来浏览器兼容性问题，影响开发效率。现在很流行的解决方式是一开始就将浏览器的默认样式全部覆盖掉，这就是css reset……原文
总结：css初始化与为跨浏览器兼容做准备。

下载normalize.css。地址：http://necolas.github.io/normalize.css/

Normalize.css 是一个可定制的 CSS 文件，使浏览器呈现的所有元素，更一致和符合现代标准;是在现代浏览器环境下对于CSS reset的替代。 它正是针对只需要统一的元素样式。该项目依赖于研究浏览器默认元素风格之间的差异，精确定位需要重置的样式。 这是一个现代的，HTML5-ready 的 CSS 重置样式集。著名的bootstrap就使用了它。
详解

根据网站需要，重置与封装normalize.css
简单案例：

在引入normalize.css引入base.css内容如下

blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{
    margin: 0;
    padding: 0;
}

注：margin，padding的初始化，尽量不要使用“*”，范围大，优化差，速度慢。

.clearfix:after{
    /*清除浮动*/
    content:"";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix{
    *zoom:1;
}
img {
    /* display: block; */
    vertical-align: top; /* 解决图片底测有空白缝隙的问题 */
}
.w {  /* 版心的公共类 */
    width: 1190px;
    margin: 0 auto;  
}
.fl { /*  浮动的公共类 */
    float: left;
}
.fr {
    float: right;
}
 a {
    text-decoration: none;
    color: #999;
    font-size: 12px;
}
a:hover {
    color: #f10215;
}
i{
    font-style: normal;
}
input,button {
    border: 0;
    outline: none;  /* 取消轮廓边框 */
}

ul,li{
    list-style: none;
    
}
ul{
    margin: 0px;
    padding: 0px;
}
body {
    background-color: #f6f6f6;
}

.f10{
    color: #f10215!important;
}

网站logo制作

网站logo的渲染与制作必须遵循相应格式，这样能更好的照顾到seo搜索引擎的优化，方便整个网站的后期建设。
以某东网站为例：

 <div class="logo">
	<h1><a href="" title="某东网 ">
		某东
		<!-- 搜索引擎优化，虽然logo是图片，但是这个字不能删，css做隐藏处理 -->
	</a></h1>
</div>

.logo{
    box-shadow: 0 -12px 10px rgba(0,0,0,.2);
    width: 190px;
    height: 170px;
    position: absolute;
    top: -31px;
    left: 0;
    background-color: #fff;
}
.logo h1{
    margin: 0;
}
.logo a{
    text-indent: -999px;
    overflow: hidden;/*隐藏某东两个字*/
    display: block;
    width: 190px;
    height: 170px;
    background:url(../images/logo.png) no-repeat;
}

title与meta元素的搜索引擎优化

<title>长度上限：谷歌搜索引擎最大允许35个中文字节，百度搜索引擎最大允许28个中文字节。所以保证28个字之内，其内容要求紧扣网站主题、功能去做介绍。

一般格式：<title>网站名（产品名）——产品介绍</title>

关键字分布：最先出现的词语权重越高。
关键字词频：主关键词次数可出现多次，辅关键词次数出现一次。

参考资料
某东：

	<meta charset="UTF-8">
    <title>某东(XX.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
    <meta name="description" content="某东XX.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
    <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,某东" />

某宝：

<title>某宝网 - 淘！我喜欢</title>
<meta name="description" content="某宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！">
<meta name="keyword" content="某宝,某宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺">

注：name="description" content="……在搜索引擎搜索后，展示的介绍性文字，关键词的填写用“,”隔开，一般不超过120个汉字。
注：name="keyword" content="……关键词前六、八个词权重较高。

网站轮播图常用结构

<div class="clo2">
    <div class="clo2-hd"><!--左右按钮-->
        <a href="javascript:;" class="arr-l"></a><a href="javascript:;" class="arr-r"></a>
    </div>
    <ol><!--轮播图标识-->
        <li class="current"></li>
        <li></li>
        <li></li>
    </ol>
    <ul><!--轮播图图片集及连接-->
        <li><a href=""><img src="" alt=""></a></li>
        <li><a href=""><img src="" alt=""></a></li>
        <li><a href=""><img src="" alt=""></a></li>
    </ul>
</div>

常用工具

> css 代码分析工具

检测网站css性能，分析网站css代码的利器，可以统计CSS代码里的规则、字体大小、宽度高度、颜色数等等。

W3C统一验证工具（检测本地文件）；
CSS统计数据（检测已上线项目）；

> google PR查询

检测网站的受欢迎程度。
google PR查询，站长之家

> SEO概况查询

SEO概况查询，站长之家

> css代码压缩

注：压缩代码一般以.min.css为后缀名。

css代码压缩