京东首页项目---总述

Posted qdhxhz

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了京东首页项目---总述相关的知识,希望对你有一定的参考价值。

京东首页项目总述

这里做一个京东首页的项目。主要目的是总结和提高 html+ CSS 技术。该项目暂不涉及JS相关技术。

一、首页效果

先看首页完成最终完成的效果

技术图片

说明 项目做完后,也会附上项目github地址(包含整个项目的素材和代码)。


二、项目介绍

1、设计目标

- 熟悉CSS+DIV布局,页面的搭建工作
- 了解常用电商类网站的布局模式

2、浏览器兼容问题

因为浏览器的不同,所以需要我们在前端开发的时候去兼容不同的浏览器,而这部分css样式肯定不需要我们自己去写,这里使用一个叫CSS Rest 类库,为跨浏览器兼容做准备。

normalize.css   只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。它的作用如下:
- 保护有用的浏览器默认样式而不是完全去掉它们
- 一般化的样式:为大部分HTML元素提供
- 修复浏览器自身的bug并保证各浏览器的一致性
- 优化CSS可用性:用一些小技巧
- 解释代码:用注释和详细的文档来

3、技术栈

HTML5 结构 + CSS3  布局 (在这里不涉及到JS 和 后端技术)

4、目录说明

要实现结构和样式相分离的设计思想。 根目录下有这4个文件。

技术图片

写代码之前,先引入css基础公共样式文件

<!--    引入css初始化文件-->
    <link rel="stylesheet" href="css/normalize.css">
<!-- 头部和底部结构基本相同 做基本公共样式-->
    <link rel="stylesheet" href="css/base.css">

base.css是基本公共样式,和初始化文件都放在css文件夹中。


三、SEO优化

概念 SEO 中文意译为“搜索引擎优化”!SEO是指通过对网站进行站内优化站外优化,从而提高网站的关键词排名以及公司产品的曝光度。

站内优化中网页SEO涉及到3个关键字:title(标题)、Description(网站说明)、Keywords(关键字)

1、title (标题)

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

重点 对于标题而言最先出现的词它的权重越高。所以对于网站首页标题建议:网站名(产品名)- 网站的介绍

例如

京东 :京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物!
简书:简书 - 创作你的创作。
淘宝:淘宝网 - 淘!我喜欢。

2、Description (网站说明)

对于关键词的作用明显降低,但由于很多搜索引擎,仍然大量采用网页的MATA标签中描述部分作为搜索结果的“内容摘要”。 就是简要说明我们网站的主要做什么的。

Description作为网站的总体业务和主题概括,多采用“我们是…”“我们提供…”“×××网作为…”“之类语句。

建议

1. 描述中出现关键词,与正文内容相关,这部分内容是给人看的,所以要写的很详细,让人感兴趣, 吸引用户点击。
2. 同样遵循简短原则,字符数含空格在内不要超过 120  个汉字。
3. 补充在 title  和 keywords  中未能充分表述的说明.
4. 用英文逗号 关键词1,关键词2

例如

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

简书:简书是一个优质的创作社区,在这里,你可以任性地创作,一篇短文、一张照片、一首诗、一幅画……我们相信,每个人都是生活中的艺术
         家,有着无穷的创造力。

淘宝:淘宝网 - 亚洲较大的网上交易平台,提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品,同时提供担保交易(先收货后付款)
         等安全交易保障服务,并由商家提供退货承诺、破损补寄等消费者保障服务,让你安心享受网上购物乐趣!

3、Keywords (关键字)

Keywords是页面关键词,是搜索引擎关注点之一。Keywords应该限制在6~8个关键词左右,电商类网站可以多 少许。

例如

京东:网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东

简书:简书,简书官网,图文编辑软件,简书下载,图文创作,创作软件,原创社区,小说,散文,写作,阅读

淘宝:淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,
         买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺


四、favicon.ico图标

1、什么是favicon.ico

概念 所谓favicon,便是其可以让浏览器的收藏夹中除显示相应的标题外,还以图标的方式区别不同的网站。

技术图片

我们看到标题左边的那个小图标就是favicon.ico,简书、京东、百度、淘宝都有它们自己的ico。

2、引用favicon.ico

引入这个ico其实很简单,只需一行代码,放在 head 标签中间。

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

注意 为了兼容性,将favicon.ico 这个图标放到根目录下。

技术图片

3、转换favicon.ico图标

我们可以自己做的图片,转换为 ico图标,以便放到我们站点里面。 http://www.bitbug.net/




你如果愿意有所作为,就必须有始有终。(11)








以上是关于京东首页项目---总述的主要内容,如果未能解决你的问题,请参考以下文章

安卓首页图片轮播效果(淘宝京东首页广告效果)

安卓首页图片轮播效果(淘宝京东首页广告效果)

前端静态网页实战项目京东首页

跟我一起做京东金融的项目首页

高仿京东 2020 版首页布局及刷新效果

高仿京东 2020 版首页布局及刷新效果