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

news/2024/5/10 7:18:43/文章来源:https://blog.csdn.net/qq_29018891/article/details/83049385

网站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>