2024/10/10Wiki--浏览次数--访问次数--跳出率--平均停留

Html和CSS学习

自己正经开始学编程的第一门语言！

15. 品优购项目上篇-搭建与公共模块

15.1 项目规划

原型图： 页面的布局，告知我们开发人员，整个页面的结构是怎样的，说白了就是什么地方放什么内容

效果图： 告知我们开发人员，最终做出来的成品应该是什么样子，相比原型图，效果图里面包含内容，风格，字体大小等等

15.2 项目介绍

原型图：

主页：

列表页：

注册页：

15.3 项目搭建工作

15.3.1 创建的文件夹如下（称为项目结构）

经常更换的图片要放到upload文件夹中

不经常换的放到images文件夹中

15.3.2 创建文件如下

初始化样式：

有些网站初始化的不太提倡 * { margin: 0; padding: 0; }

比如新浪： html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img{margin:0;padding:0}

通配符选择器写代码的时候简单，但是浏览器渲染的时候没有后边类似于新浪这样的效率高

15.3.3 项目模块化开发

所谓的模块化：将一个项目按照功能划分，一个功能一个模块，互不影响，模块化开发具有重复使用、更换方便等优点

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

通过link方法来引入

15.3.4 网站 favicon 图标

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

制作favicon图标

①把品优购图标切成 png 图片

②把 png 图片转换为 ico 图标，这需要借助于第三方转换网站，例如比特虫：http://www.bitbug.net/

favicon图标放到网站根目录下
HTML页面引入favicon

在html 页面里面的 <head> </head>元素之间引入代码

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

复制这行代码或者在生成这个的网站进行复制

在网站后边输入/favicon.ico就可以得到这个网站的图标

例如:https://www.jd.com/favicon.ico

15.3.5 TDK三大标签SEO优化

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

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

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

title网站标题

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

例：

京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！
小米商城 - 小米5s、红米Note 4、小米MIX、小米笔记本官方网站

description网站描述

简要说明我们网站主要是做什么的

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

例：

<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />

keywords关键词

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

例：

<meta name= " keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />

这里它是电商所以写的多，把最好产品往前写，越好的产品权重越高

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

代码总结

CODE

<!-- HTML 代码示例 -->
<div class="example">
  示例内容
</div>

15.4 项目公共部分制作

15.4.1 常用模块类命名

15.4.2 快捷导航 shortcut 制作

布局思路：

通栏的盒子命名为 shortcut ，是快捷导航的意思。注意这里的行高，可以继承给里面的子盒子
里面包含版心的盒子
版心盒子里面包含 1 号左侧盒子左浮动
- 1 号盒子里面包含一个ul，ul包裹li，第一个li里面包裹文字就行，因为不能点击，第二个li包含两个a标签
- 里面的内容是水平排列，所以需要给li设置浮动
- 文字要垂直居中，我们可以给 shortcut设置行高，因为行高可以继承，里面的孩子就不需要设置了
版心盒子里面包含 2 号右侧盒子右浮动
- 2 号盒子里面包含一个ul，ul包裹li，中间的|可以用样式去设置，也可以用字符 |
- 里面内容水平排列，给li设置浮动
- 找到里面所有偶数的 li 设置样式（偶数的 li 显示是一个 | 竖线，所以需要单独选择出来设置样式，利用nth-child就可以实现）
需要用到字体图标
- 利用伪元素的方式来实现字体图标，给需要添加的标签设置类名为： arrow-icon
- 先要引入字体图片的资源
- 在样式里面利用 font-face 来进行声明
- 在伪元素的 content属性设置图标的编码
- 给伪元素设置font-family属性

结构实例代码：

CODE

div::before {
  content: "";
  display: block;
}

样式实例代码：

CODE

div::before {
  content: "";
  display: block;
}

15.4.3 header 头部模块搭建

header 盒子必须要有高度

1 号盒子是 logo 标志定位，在正常开发过程中， logo的布局其实是有讲究的，需要进行 logoSEO的优化（★★★）

logo 里面首先放一个 h1 标签，目的是为了提权，告诉搜索引擎，这个地方很重要
h1 里面再放一个链接，可以返回首页的，把 logo 的背景图片给链接即可
为了搜索引擎收录我们，我们链接里面要放文字（网站名称），但是文字不要显示出来
- 方法1：text-indent 移到盒子外面（text-indent: -9999px) ，然后 overflow:hidden ，淘宝的做法
- 方法2：直接给 font-size: 0; 就看不到文字了，京东的做法
最后给链接一个 title 属性，这样鼠标放到 logo 上就可以看到提示文字了

结构实例代码：

CODE

<a href="https://example.com" target="_blank">链接文字</a>

样式实例代码：

CODE

<a href="https://example.com" target="_blank">链接文字</a>

2 号盒子是 search 搜索模块定位

search盒子利用定位的方式放在对应的位置
search盒子设置绝对定位，header盒子设置相对定位
search盒子里面包含两个子元素，一个是输入框，一个是按钮，分别跟定固定的宽高（搜索框宽度：454px；按钮宽度：80px）
输入框和按钮本来就是行内块元素，在一行显示，但是中间会有间隙，所以我们可以让让这两个元素浮动起来

结构实例代码：

CODE

div, p, h1, ul, li {
  /* 块级元素：独占一行，可设宽高 */
  display: block;
}

样式实例代码：

CODE

div, p, h1, ul, li {
  /* 块级元素：独占一行，可设宽高 */
  display: block;
}

这里为了避免给大盒子加边框子，小盒子不加边框塞进大盒子后，他们之间会有神奇的空隙问题，当浏览器缩放一定程度没有空隙，但是大部分都会有空隙问题，避免该问题，通过不给大盒子边框，给小盒子边框来解决

3 号盒子是 hotwords 热词模块定位

热词模块怎么简单怎么来，直接在里面放a标签即可
给里面所有的a标签设置左右10px的外边距
给第一个a标签设置文字变红色（#c81623）

结构实例代码：

CODE

div {
  margin: 0 auto;
}

样式实例代码：

CODE

div {
  margin: 0 auto;
}

4 号盒子是 shopcar 购物车模块

在shopcar里面添加一个before伪元素和after伪元素，分别放置购物车的图标和右箭头
count 统计部分用绝对定位做
count 统计部分不要给宽度，因为可能买的件数比较多，让件数撑开就好了，给一个高度
一定注意左下角不是圆角，其余三个是圆角写法： border-radius: 7px 7px 7px 0;

结构实例代码：

CODE

/* 静态定位（默认） */
.static { position: static; }
/* 相对定位 */
.relative { position: relative; }
/* 绝对定位 */
.absolute { position: absolute; }
/* 固定定位 */
.fixed { position: fixed; }
/* 粘性定位 */
.sticky { position: sticky; }

样式实例代码：

CODE

/* 静态定位（默认） */
.static { position: static; }
/* 相对定位 */
.relative { position: relative; }
/* 绝对定位 */
.absolute { position: absolute; }
/* 固定定位 */
.fixed { position: fixed; }
/* 粘性定位 */
.sticky { position: sticky; }

15.4.4 `nav`导航模块制作

nav 盒子通栏有高度，而且有个下边框，里面包含版心，版心里面包含 1 号盒子和 2号盒子

1 号盒子左侧浮动，dropdown

1号盒子有讲究，根据相关性里面包含 .dt 和 .dd 两个盒子
.dt 内容是全部商品分类，然后把这个盒子的宽高设置跟父亲一样，这样就把 .dd 挤到下面去了
给 .dd 盒子设置宽度和高度，以及背景颜色
给 .dd 盒子里面定义无序列表（ul > li > a）
每个 li 都有一个高度（31px），宽度可以不用设置，让文字垂直居中，左边设置2个像素的margin值
给 li 里面的a设置文字大小（14px）
给 li 设置 hover，当鼠标移入的时候，让li的背景变成白色，让里面的文字变成红色
li 右侧的三角就可以利用伪元素来实现，给伪元素设置字体图标，利用定位的方式放在li的右侧，那么给li设置相对定位

一定要注意相关性

结构实例代码：

CODE

div::before {
  content: "";
  display: block;
}

样式实例代码：

CODE

div::before {
  content: "";
  display: block;
}

尽量使用伪元素选择器添加后边的那个符号吧，当时使用的是em盒子加浮动做的

2 号盒子左侧浮动，navitems 导航栏组

里面结构是 ul > li > a
导航栏都是能点击的，所以我们不能给定宽度，给a左右的padding把两侧撑开
让文字垂直居中（行高等于高度）

在制作导航栏是将li变为浮动，对a设置高度，这样就可以实现上图中的效果，并不一定非得点击文字才行，点击文字的周围也是可以的

结构实例代码：

CODE

.box {
  float: left;
}

样式实例代码：

CODE

.box {
  float: left;
}

补充一下下边这个美观问题，把大盒子的左边边框给挡住了，解决方法是给家用电器这个的大盒子一个magin，让它下去一些，就ok

CODE

div {
  border: 1px solid #ccc;
}

footer 页面底部盒子通栏给一个高度（415px）和灰色的背景
footer 里面有一个大的版心
版心里面包含 1 号盒子，mod_service 是服务模块，mod 是模块的意思
- 给 mod_service 设置高度（80px）和下边框
- 在里面定义 ul > li ,每个li 宽度是300px 高度是 50px，给每个li设置35px的左内边距
- 在每个li里面，放一个 h5（里面放图标），一个div（里面放div和p）
- 给 h5设置浮动，让h5与这个div左右排列
- 通过精灵图技术（核心思路：利用background-position来实现），把图标设置给h5

结构实例代码：

CODE

.icon {
  width: 20px;
  height: 20px;
  background: url(sprites.png) no-repeat -10px -20px;
}

样式实例代码：

CODE

.icon {
  width: 20px;
  height: 20px;
  background: url(sprites.png) no-repeat -10px -20px;
}

版心里面包含 2 号盒子，mod_help 是帮助模块

给 mod_help 设置 50px的左内边距和20px的上内边距，给定高度（185px）
里面的布局利用自定义列表来实现（dl > dt + dd）
给 dl 设置浮动，让其可以水平排列，给每个dl盒子设置宽度
给 dt 设置文字大小（16px），设置下外边距（10px），让dt和dd之间有些距离
最后一个 dl 结构和样式不一样，需要单独设置

结构实例代码：

CODE

div {
  margin: 0 auto;
}

样式实例代码：

CODE

div {
  margin: 0 auto;
}

版心里面包含 3 号盒子，mod_copyright 是版权模块

分为上下两块，上面是 links 友情链接，下面是 copyright，给mod_copyright 大盒子设置文字水平居中，20px的上内边距，让上面内容和下面内容之间有些间隙
把内容分别复制到相应模块中
给 links 设置 15px 的下外边距，给links 里面的 a 标签设置左右 3px 的外边距
给copyright 设置 20px 的行高

结构实例代码：

CODE

div {
  margin: 0 auto;
}

样式实例代码：

CODE

div {
  margin: 0 auto;
}

回顾：对于每行文字的间隔采用line-height （行高）来处理