品优购实战

2020-08-04  本文已影响0人  Scincyc

目标：

1. 品优购项目介绍

2. 设计目标

3. 前期准备工作

要实现结构和样式相分离的设计思想

目录文件夹

名称 说明
项目文件夹 pinyougou
样式类图片文件夹 img
样式文件夹 css
产品类图片文件夹 upload
字体类文件夹 fonts
脚本文件夹 js

样式文件的分类

4. ⭐网站ico图标

1). 使用ico图标

2). 制作ico图标

方法步骤：

总结：

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

注意：

  1. 她（它）是显示在浏览器中的网页图标
  2. 它是图标形式，不是一个图片
  3. 位置是放到 head 标签中间
  4. 后面的type="image/x-icon" 属性可以省略
  5. 为了兼容性，请将favicon.ico 这个图标放到根目录下

5. ⭐网站优化三大标签

SEO是由英文Search Engine Optimization缩写， 中文意译为“搜索引擎优化”！

SEO是指通过对网站进行站内优化、网站结构调整、网站内容建设、网站代码优化等和站外优化，从而提高网站的关键词排名以及公司产品的曝光度。 简单的说就是，把产品做好，搜索引擎就会介绍客户来

我们现在阶段主要进行站内优化。网站优化，我们应该要懂title、keyword、description三大标签

1). 网页title 标题

title具有不可替代性，是搜索引擎了解网页的入口，和对网页主题归属的最佳判断点

建议：

⭐首页标题：网站名（产品名）- 网站的介绍

例如：

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

小米商城 - 小米5s、红米Note 4、小米MIX、小米笔记本官方网站

2). Description 网站说明

作为搜索结果的“内容摘要”。 就是简要说明我们网站的主要做什么的
我们提倡，Description作为网站的总体业务和主题概括，多采用“我们是…”“我们提供…”“×××网作为…”“电话：010…”之类语句

品优购网：

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

注意点：

  1. 这部分内容是给人看的，所以要写的很详细，让人感兴趣， 吸引用户点击
  2. 同样遵循简短原则，字符数含空格在内不要超过 120 个汉字
  3. 补充在 title 和 keywords 中未能充分表述的说明
  4. 用英文逗号 关键词1,关键词2
<meta name="description" content="小米商城直营小米公司旗下所有产品，囊括小米手机系列小米MIX、小米Note 2，红米手机系列红米Note 4、红米4，智能硬件，配件及小米生活周边，同时提供小米客户服务及售后支持。" />

3). Keywords 关键字

Keywords是页面关键词，Keywords应该限制在6～8个关键词左右，电商类网站可以多 少许

品优购网：

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

小米网：

<meta name="keywords" content="小米,小米6,红米Note4,小米MIX,小米商城" />

4). 总结

  1. 我们的网页要做的优秀，符合搜索引擎的要求，才可以让搜索引擎优先显示我们的网页

所以我们的网站要做很多的优化， 其中就有这三大标签

  1. 一般情况下，三大标签里面的优化词，都是专门的优化人员写的，我们大概了解一下规范就可以了
  2. 我们的主要任务是，能写出这三大标签， 然后把优化人员给我们的内容，添加到里面

6. 字体图标

图片不但增加了总文件的大小，还增加了很多额外的"http请求"，图片放大和缩小会失真

此时，一个非常重要的技术出现了， 这就是字体图标（iconfont)

1). 字体图标优点

可以做出跟图片一样可以做的事情,改变透明度、旋转度，等..
但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等...
本身体积更小，但携带的信息并没有削减。
几乎支持所有的浏览器
移动端设备必备良药...

2). 设计字体图标

UI设计人员在 illustrator 或 Sketch 这类矢量图形软件里创建 icon图标，之后保存为svg格式，交给前端人员

3). 上传生成字体包

前端人员收到svg文件，转换成页面能使用的字体文件， 而且需要生成的是兼容性的适合各个浏览器的

​ 推荐网站： http://icomoon.io

IcoMoon成立于2011年，推出的第一个自定义图标字体生成器，它允许用户选择他们所需要的图标，使它们成一字型。 内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢

http://www.iconfont.cn/

这个是阿里妈妈M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成。 一个字，免费，免费！！

4). 下载兼容字体包

刚才上传完毕， 网站会给我们把UI做的svg图片转换为我们的字体格式， 然后下载（文件记得备份selection.json）

5). 字体引入到HTML

字体图标 本质就是 字体文件，需要引入到我们页面中

 <span></span>  //到网站下载页面复制图标

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?7kkyc2');
  src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
    url('fonts/icomoon.woff?7kkyc2') format('woff'),
    url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

span {
        font-family: "icomoon";
    }

6). 追加字体图标

如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标

http://icomoon.io 点击import icons，把压缩包里面的selection.json 上传，然后，选新的图标，重新下载压缩包，替换原来文件即可

7). 拓展@ 常见字体格式

不同浏览器所支持的字体格式是不一样的，我们有必要了解一下有关字体格式的知识。

.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；

.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+；

woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；

.eot字体是IE专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有IE4+；

.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；

了解了上面的知识后，我们就需要为不同的浏览器准备不同格式的字体，通常我们会通过字体生成工具帮我们生成各种格式的字体，因此无需过于在意字体格式间的区别差异。

10. 品优购首页布局

命名集合：

名称 说明
快捷导航栏 shortcut
头部 header
标志 logo
购物车 shopcar
搜索 search
热点词 hotwrods
导航 nav
导航左侧 dorpdown 包含 .dd .dt
导航右侧 navitems

1). shortcut 制作

1.png

2). header 制作

2.png

3). nav 制作

3.png

4). logo 优化

5). footer 底部制作

1.png

6). main 主体模块制作

这部分是 index 里面 专有的， 注意 需要新的样式文件 index.css

4.png
(1). newsflash 新闻快报模块
(2). news 新闻模块
(3). lifeservice 生活服务模块

此地方有个小技巧，

7). recommend 推荐模块

8.png

8). 楼层区 floor

注意这个floor 一个大盒子 包含， 不要给高度，内容有多少，算多少

[图片上传中...(2.png-49057d-1596098049982-0)]

(1). 家用电器模块
1.png
(2). box-hd 模块
(3). box-bd 模块
3.png

9). 侧边栏 fixedtool 制作

此模块用固定定位 里面包含 li

8. ⭐知识点 -过渡(CSS3)

过渡动画： 是从一个状态 渐渐的过渡到另外一个状态

低版本浏览器不支持（ie9以下版本）；经常和 :hover 一起 搭配使用。

语法格式:

transition: 要过渡的属性  花费时间  运动曲线  何时开始;
属性 描述 CSS
transition 简写属性，用于在一个属性中设置四个过渡属性。 3
transition-property 规定应用过渡的 CSS 属性的名称。 3
transition-duration 定义过渡效果花费的时间。默认是 0。 3
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。 3
transition-delay 规定过渡效果何时开始。默认是 0。 3

​ 属性就是你想要变化的 css 属性， 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡， 写一个all 就可以。

案例：

div {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* transition: 要过渡的属性  花费时间  运动曲线  何时开始; */
            transition: width 0.6s ease 0s, height 0.3s ease-in 1s;
            /* transtion 过渡的意思  这句话写到div里面而不是 hover里面 */
  
            
}
div:hover {  /* 鼠标经过盒子，我们的宽度变为400 */

            width: 600px;
            height: 300px
}

transition: all 0.6s;  /* 所有属性都变化用all 就可以了  后面俩个属性可以省略 */

transition: all 0.5s;

常见效果：

按钮变换底色 图片移动 小米效果 （阴影效果） 传智导航栏效果 等等

9. 列表页制作

1). 列表页准备工作

2). 列表页 header 和 nav 修改

4.png

3). 列表页主体盒子 sk _container

这个盒子里面包含了 所有的 列表页的所有主体内容

7.png

4). sk_goods 布局

8.png

5). 分页制作 page

6.png

10.⭐ 知识点 -获得焦点元素

:focus 伪类 选择器用于选取获得焦点的元素 。 我们这里主要针对的是 表单元素

:hover

语法：

.total input {
  border: 1px solid #ccc;
  height: 30px;
  width: 40px;
  transition: all .5s;
}
/*这个input 获得了焦点*/
.total input:focus {
  width: 80px;
  border: 1px solid skyblue;
}

border: 1px solid #ccc;
height: 30px;
width: 40px;
transition: all .5s;
}
/这个input 获得了焦点/
.total input:focus {
width: 80px;
border: 1px solid skyblue;
}

11. 详情页 detail.html

名称 说明
主体 de_container
面包屑导航 crumb_wrap
产品介绍 product_intro （ introduction介绍）
预览包 preview_wrap（左侧部分）
预览缩略图 preview_img
预览列表 preview_list
左按钮 arrow_prev
右按钮 arrow_next
小图列表 preview_items
产品详细信息区域 itemInfo_wrap （右侧部分）
头部名称 sku_name skull 头骨
新闻 news
摘要 summary
评价 remark
价格摘要 summary_price
配送至 summary_stock
支持 summary_support
选择 choose
选择按钮组 choose_btns
选择数量 choose_amount
减去 reduce
加入购物车 addshopcar
产品细节 product_detail （ detail描述）
左侧边 aside
详细描述 detail

1). 面包屑导航

2). 产品介绍 模块

2.png

3). product_intro模块

4.png

4). itemInfo_wrap 模块

7.png

5). 产品细节模块 product_detail

6.png

6) aside 布局

8.png

7) detail 布局

9.png

12. 注册页面 register

注册页面

名称 说明
注册专区 registerarea
注册内容 reg-form
错误的 error
成功的 success
默认的 default
10.png

registerarea布局

11.png
上一篇 下一篇

猜你喜欢

热点阅读