个人在做的时候遇到的，自己觉得需要注意的内容

模块化

1.有些样式和结构在很多页面会出现，比如页面的头部和底部，大部分页面都有。此时可以把这些结构和样式单独作为一个模块，然后重复使用

2.这里最典型的应用就是common.css公共样式。写好一个样式，其余的页面用到这些相同的样式

3.模块化开发具有重复使用，修改方便等优点。

common.css公共样式里面包含版心宽度，清除浮动，页面文字颜色等公共样式。

网站favicon 图标

在浏览器上面左侧有一个图标如

Favicon.ico一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上

目前主要的浏览器都支持favicon图标。

制作favicon图标

把图标切成png图片

把png图片转化为ico图片。https://www.bitbug.net/

引入到页面，图标放到根目录下。大部分网站都是这么做的。

<link rel="shortcut icon" href=" /favicon.ico" />

网站的TDK三大标签seo优化

SEO就是搜索引擎。比如百度，搜狗等等。是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式

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

前端写的网站需要复合SEO，三大标准

Title网站标题

具有不可替代性，是我们内页的一个重要标签，是搜索引擎了解网页的入口喝对网页主题归属的最佳判断点。

建议：网站名（产品名）-网站的介绍（尽量不要超过30个汉字）

如下

<title>品优购商城-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title>

description网站说明

简要说梦我们网站主要做什么的。

我们提倡，description作为网站的总体业务和主题概括，多采用“我们是…”“我们提供……”“XXX网站作为….”“电话：101….”之类语句。

Keywords关键字

Keywords是页面关键词，是搜索引擎的关注点之一。

Keywords最好限制为6-8个关键词，关键词之间用英文逗号隔开，采用关键词1,关键词2的形式

命名规范

由历史原因及个人习惯引起的 DOM 结构、命名不统一，导致不同成员在维护同一页面时，效率低下，迭代、维护成本极高。

目录命名

* 项目文件夹：shoping

* 样式文件夹：css

* 脚本文件夹：js

* 样式类图片文件夹：img

* 产品类图片文件夹： upload

* 字体类文件夹： fonts

ClassName命名

ClassName的命名应该尽量精短、明确，必须以**字母开头命名**，且**全部字母为小写**，单词之间**统一使用下划线** “_” 连接

品优购过程中笔记

1.nth-child(n)选择某个父级的一个或多个特定的子元素。在做导航上面下拉箭头时候使用。而且下拉箭头可以用结构伪类选择器（：：after）来制作。然后用图标字体库弄。

2.logo 制作需要符合SEO优化

（1）logo里面首先放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方很重要
（2）h1里面要放一个链接，可以返回首页的，把logo的背景图片给链接即可。
（3）为了搜索引擎更好收录，我们链接里面要放文字（网站名称），但是文字不要显示出来

方法1 ：text-indent（首行缩进）移到盒子外面（text-indent:-9999px）,然后overflow:hidden,（溢出隐藏）淘宝的做法。

方法2：直接给font-size:0;就看不到文字了，京东的做法。

（4）.最后给链接一个title属性，这样鼠标放上lgog上就可以看到提示文字了。

3.input 标签记得使用H5新增的。

4.一些部分内容想清楚要不要给宽度，因为有可能会文字大小会变大。最好让文字撑开。只给一个高度。

5..注意做左边分类栏目的时候问题。看下面的样式。鼠标经过的时候背景色变成白色同时字体颜色变成红色。用li包含a标签做的。

/* 鼠标经过li之后a标签变化 */

6.注意伪元素选择器的父级是添加伪元素选择器的元素。

如 dropdown .dd ul li::after 它的父级是.dropdown .dd ul li:

7. 在做底部的服务内容时候，这个用不了nth-of-type()指定类型E的第n个。因为结构比较复杂，经过观察分析所以用了nth-child(n)先选出li,然后再选第几个li里面的h5元素。于是有了下面的代码。验证成功了。

8.底部版权部分不用li做，用li做的话就很难是模块里面的文字水平居中。我成功。按照老师的方法做就可以。直接用a来做。

9.制作焦点图时候注意不要直接用背景来做，由于会有轮播的情况，所以用li来做最好，方便后期图片切换。

8.生活服务模块的时候，用li做小框框掉下来了。如下面。

解决方法是，可以给li的都盒子也就是ul宽度增大，增大到足够宽。给了ul 252 宽度后如下图所示，有溢出部分

给父级用overflow：hidden。切掉它即可。正常显示了如下图。

9..recom_bd ul li:nth-child(-n+3):after

在做一些伪元素选择器时候，注意灵活运用，比如上面的这个，意思就是从第三个li开始向前数。在制作今日推荐模块的竖线使用到。

最后个位置不需要这个竖线，可以用nth-child(-n+3)选中前面的三个做:after，最后一个不做，就不会有竖线。

扩展;如果nth-child(n+3)，就是从第三个往后面选。

10.问题：猜你喜欢模块的时候，上面的“猜你喜欢”“换一批” 制作的时候。开始我用了两个行内元素做的，为了让他们在一行上所以我选了行内元素。接着我分别给他们一个左浮动一个右浮动分开。这样是没问题的，但是影响了下面的产品展示。因为下面产品展示我用li做的，当我给li加左浮动的时候，就乱透了。下面的和上面的文字混在一起了。

解决：把“猜你喜欢”“换一批”的浮动去掉了，用绝对定位来做就解决了。

品优购项目案例制作需要注意的内容笔记相关推荐

品优购项目的制作——知识分享
目录前言一.首页 1.基本的布局 2.版心部分 3.主要内容模块二.注册页面三.产品列表页面四.产品详情页面总结前言品优购项目是一个需要糅杂大量HTML5+CSS3知识点的网站项目,一 ...
PC端品优购项目——首页制作
目录 1. 品优购项目规划 1.1 网站制作流程 1.2 品优购项目整体介绍 1.3 品优购项目的学习目的 1.4 开发工具以及技术栈 1.5 总结 1.6 品优购项目搭建工作 1.6.1 创建文件夹 ...
品优购项目案例（练习）
主页面 <!DOCTYPE html> <html><head><meta charset="utf-8"><title> ...
品优购项目学习记录--01公共模块制作
文章目录一.品优购项目规划 1.1 开发工具以及技术栈 1.1.1 开发工具 1.1.2 技术栈 1.2 品优购项目搭建工作 1.2.1 相关文件夹以及文件创建 1.2.2 模块化开发 1.2.3 ...
综合案例：品优购项目（品优购项目流程，SEO优化，TDK三大标签，代码）后期逐步优化
品优购项目流程 SEO优化 SEO(Search Engine Optimization)汉译为搜索引擎优化,是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式. SEO 的目的是对网站进 ...
品优购项目——黑马程序员pink老师/完整源代码/项目讲解/内容补充完善
话不多说先看效果图,源代码在文末首页产品页:根据此前京东抢购案例补充完善注册页文章目录品优购项目规划 1. 网站制作流程 2. 品优购项目整体介绍 3. 开发工具以及技术栈 4. 品优购项目 ...
web前端入门学习 css（9）广义的html5 品优购项目（html+css基础完结，js开始，移动端布局开始）
文章目录广义的html5 品优购项目导读网站制作流程原型图项目规划项目整体介绍项目规划项目搭建网站favicon图标网站TDK三大标签SEO优化品优购首页制作常用模块类名命名快 ...
品优购项目html+css+js
品优购项目html+css+js 跟着pink老师学前端,第一个完成的项目,总共有三个页面,分别是index.html.list.html和detail.html,下面是该项目的一些总结,最后有源码呦 ...
品优购项目笔记（十四）：微信支付
品优购项目笔记(十四) 订单订单三张表关系提交订单二维码介绍优势容错级别 qrious二维码生成插件微信支付微信支付流程项目支付流程生成支付链接查询是否支付成功订单订单三张表 ...

品优购项目案例制作需要注意的内容笔记

模块化