项目二《品优购电商网站》

news/2024/5/9 8:24:52/文章来源:https://blog.csdn.net/weixin_52501494/article/details/121605577

项目二 <品优购电商项目开发>

文章目录

项目二 <品优购电商项目开发>
前言
一、网站 favicon 图标
- 制作favicon图标
二、TDK三大标签SEO优化
- SEO
- TDK
三、字体图标
- 1、下载
- 2、引入
四、鼠标经过边框效果
五、模块化开发及命名规范
- 命名规范
- - 目录命名
  - 常用模块类名命名推荐
  - ClassName命名
  - ...
总结

前言

项目学习是最快检验学习成果的方法，电商类网站比较综合，写完品优购项目，能对实际开发中制作 PC 端页面流程有一个整体的感知，为后期学习移动端项目做铺垫，本文是笔者觉得品优购电商项目中值得总结的几个要点

提示：以下是本篇文章正文内容，下面案例可供参考

一、网站 favicon 图标

favicon.ico 一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上。目前主要的浏览器都支持 favicon.ico 图标。
网站图标

制作favicon图标

把品优购图标切成 png 图片
把 png 图片转换为 ico 图标，这需要借助于第三方转换网站，例如比特虫：http://www.bitbug.net/
将.转换后的 .ico 文件放到网站根目录下
在html 页面里面的元素之间引入代码

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

二、TDK三大标签SEO优化

SEO

（Search Engine Optimization）汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。

SEO 的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度。

页面必须有三个标签用来符合 SEO 优化

TDK

T – Title（网站标题）
title 具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点
D – description（网站描述）
简要说明我们网站主要是做什么的。
K – keywords （关键字）
keywords 是页面关键词，是搜索引擎的关注点之一。

对于我们前端人员来说，我们只需要准备好这三个标签，具体里面的内容，有专门的 SEO 人员准备

示例代码如下：

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

三、字体图标

1、下载

推荐下载网站：

icomoon 字库 http://icomoon.io
阿里 iconfont 字库 http://www.iconfont.cn/

2、引入

把下载包里面的 fonts 文件夹放入页面根目录下
在 CSS 样式中全局声明字体：简单理解把这些字体文件通过css引入到我们页面中。一定注意字体文件路径的问题
html 标签内添加小图标
给标签定义字体
span { font-family: "icomoon"; }

四、鼠标经过边框效果

本项目中商品列表页使用伪元素做鼠标悬停，边框显示的效果。
悬停后添加的伪元素作为新元素加入结构中会改变盒子实际大小，这时需要在添加伪元素之前添加一个透明边框占位，使得鼠标悬停前后盒子大小不变。具体原理参考以下博客：
向前辈致敬！
鼠标悬停，边框会撑大盒子

五、模块化开发及命名规范

我们开始制作首页的头部和底部的时候，根据模块化开发，样式要写到common.css里面
同一个网站的不同页面头部和底部大致相同，我们可以将样式写到一个css文件中，在不同页面html文件中调用即可，这样可以减少代码，优化结构

命名规范

由历史原因及个人习惯引起的 DOM 结构、命名不统一，导致不同成员在维护同一页面时，效率低下，迭代、维护成本极高。以下规范是团队基本约定的部分内容，必须严格遵循。

目录命名

项目文件夹：shoping
样式文件夹：css
脚本文件夹：js
样式类图片文件夹：img
产品类图片文件夹： upload
字体类文件夹： fonts

常用模块类名命名推荐

在这里插入图片描述

ClassName命名

ClassName的命名应该尽量精短、明确，必须以字母开头命名，且全部字母为小写，单词之间统一使用下划线 “_” 连接
注意：ad、banner、gg、guanggao 等有机会和广告挂勾的不建议直接用来做ClassName，因为有些浏览器插件（Chrome的广告拦截插件等）会直接过滤这些类名，因此这种广告的英文或拼音类名不应该出现，另外，敏感不和谐字眼也不应该出现。