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

最新推荐文章于 2024-03-12 13:47:58 发布

原创最新推荐文章于 2024-03-12 13:47:58 发布 · 148 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #css

js学习专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍网站开发过程中的关键细节，包括预处理中的favicon设置、SEO优化技巧、首页图标(iconfont)的应用及logo的SEO优化方法。

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

预处理

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