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

文章目录

项目二 <品优购电商项目开发>
前言
一、网站 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的广告拦截插件等）会直接过滤这些类名，因此这种广告的英文或拼音类名不应该出现，另外，敏感不和谐字眼也不应该出现。

…

代码规范旨在增强团队开发协作、提高代码质量,这里就不再展开列举…

总结

本项目是模拟品优购电商类网站，开发过程中笔者对网页开发流程有了一个整体感知，知道了结构样式相分离的优点，体会到了好的结构布局可以让代码更加清晰简洁，后续学习将会查缺补漏，争取让自己的布局结构更加规范简洁。

项目二《品优购电商网站》相关推荐

基于HTML(品优购)电商项目项目的设计与实现（html前端源码和论文设计）
XXXX职业学院毕业论文题目: 基于HTML品优购项目的设计与实现所属系部: 信息工程学院专业班级: 学生姓名: 指导教师: 2020 年 11 月 29 日摘要品优购网上商城是 ...
基于HTML+CSS+JavaScript (品优购)电商购物项目的设计与实现（计算机毕业设计）
HTML5期末大作业:电商网站设计--仿品优购 (毕业设计含论文) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计 ...
【03】品优购电商项目：00-品优购项目代码规范
文章目录代码规范 1. 概述 HTML规范图片规范 CSS规范命名规范 2. HTML 规范 DOCTYPE 声明页面语言lang charset 字符集合书写风格 HTML代码大小写类型 ...
CSS综合案例-品优购电商04
目录 1. 品优购项目(四) 1). 详情页 detail.html 常用单词 2). 面包屑导航 3). 产品介绍模块 4). 预览区域制作 3.1 preview_list 制作 5). 产品详 ...
品优购电商系统开发第19章秒杀解决方案
课程目标目标1:能够说出秒杀实现思路目标2:实现秒杀频道首页功能目标3:实现秒杀商品详细页功能目标4:实现秒杀下单功能目标5:实现秒杀支付功能 1.秒杀业务分析 1.1需求分析所谓&quo ...
前端基础 - 案例二：酱品购电商网站首页（精简版）
酱品购电商网页–精简版 HTML : <!DOCTYPE html> <html lang="en"><head><meta charse ...
品优购电商系统部署----MyCat Nginx （2）
课程目标目标1:理解MyCat分片,能够配置MyCat分片目标2:掌握Nginx的安装与静态网站部署目标3:掌握Nginx的静态网站部署目标4:理解Nginx的反向代理与负载均衡,能够配置反向 ...
商品规格js_品优购电商系统开发第3章规格及模板管理
课程目标目标1:理解和运用angularJS的service 目标2:理解和运用控制器继承目标3:掌握代码生成器的使用目标4:实现规格管理目标5:实现模板管理 1.前端分层开发 1.1 需求分 ...
html静态网站基于品优购电商购物网站网页设计与实现共计3个页面 html+css+javascript网页设计实例企业网站制作...
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游戏. 节日. ...

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