记录一些在网站开发中需要注意的细节。
预处理
favicon
网站导航栏中的小图标。
png转换为ico网站:比特虫bitbug
ico图标放在根目录,在head内添加
<link rel="shortcut icon" href=" favicon.ico" />
SEO搜索优化
title:网站名-网站的介绍(不超过30字)
description:网站描述
<meta name="description" content="品优购-综合化网上购物商城,物美价廉,新鲜送达">
keyword:6~8个关键词
<meta name="keywords" content="网上购物,网上商城,手机,电脑,笔记本">
首页制作
iconfont字体图标
- 将字体图标文件中的fonts文件夹放到根目录
- 在css中添加字体图标声明(注意路径修改!)
/* 声明字体图标 */
@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?tomleg');
src: url('../fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?tomleg') format('truetype'),
url('../fonts/icomoon.woff?tomleg') format('woff'),
url('../fonts/icomoon.svg?tomleg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
- 使用字体图标
.arrow-icon::after {
content: '\e91e'; //在下载的html文件中找
font-family: 'icomoon';
}
logo的SEO优化
在logo盒子中,先放h1,再在h1中放入a,a的背景设置为logo图片,a中要添加网站名称,并设置font-size:0;
,最后加title属性
<div class="logo">
<h1><a href="index.html" title="品优购商城">品优购商城</a></h1>
</div>
.logo {
position: absolute;
top: 20px;
width: 171px;
height: 61px;
}
.logo a {
display: block;
width: 171px;
height: 61px;
background: url(../images/logo.png) no-repeat;
font-size: 0;
}