【项目】购物网站项目开发笔记

记录一些在网站开发中需要注意的细节。

预处理

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字体图标

1. 将字体图标文件中的fonts文件夹放到根目录
2. 在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;
  }

3. 使用字体图标

.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;  
}