一.网站优化三大标签：title（网站标题），description（网站说明），Keywords（网站关键词）

二.favicon图表的使用

三.字体图标的使用

四.base.css和common.css的使用

五.仿京东首页的制作

（1）顶部快捷导航的制作

（2）head头部的制作

（3）顶部导航的制作

（4）footer底部栏的制作

（5）main主要部分的制作编辑

（6）推荐部分的制作

（7）楼层区的制作

（8）电梯导航的制作

这个页面是小编最近几天完成的，然后花了几个小时整理出来的，也是对这几天知识的一个巩固与强化记忆。当然不是自己突发奇想写出页面的。

小编是看了一个博主的前端学习路线（对小白很是友好）：2020年零基础前端学习路线（本人亲身经历，9个月拿到拼多多、美团、京东校招offer，5000字长文）_前端彭于晏Eddie的博客-CSDN博客https://blog.csdn.net/weixin_45495667/article/details/110385134?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164609621716780271977048%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=164609621716780271977048&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-110385134.pc_search_result_control_group&utm_term=%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF&spm=1018.2226.3001.4187

然后就是其中博主划重点的一个哔哩哔哩pink老师的手把手的项目：

pink老师的品优购电商项目https://www.bilibili.com/video/BV1Pt411M749?from=search&seid=3002275474792573106 pink老师真的讲的超级详细，超级耐心，已经被圈粉了，建议和我一样的小白学一学pink老师的视频，真的很实用。

一.网站优化三大标签：title（网站标题），description（网站说明），Keywords（网站关键词）

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

格式为 [网站名-网站的介绍] 如：

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

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

就是网站说明，如：

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

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

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

下图为搜索引擎中显示的部分与页面所写的标签关系。

二.favicon图表的使用

当浏览网站时，网站的title前方会有一个图标代表这个网站，如京东：

在网站的末尾加上favicon.ico可以获取图标

由于作者还是小白，只会获取，尚不会制作，尚且到此。。。

三.字体图标的使用

关于字体文字，在实战中会经常用到，因为只会阿里巴巴字体图标，所以这里只介绍使用阿里巴巴的字体图标流程。

1.登录阿里巴巴字体图标官网iconfont-阿里巴巴矢量图标库

2.点击资源管理下面的我的项目

在这里创建一个项目，用来存放你需要用到的所有字体图标。

3.选择你需要的字体图标，点购物车，重复操作，将所有你需要的字体图标都加入购物车

4.点击购物车，可以预览你所选的字体图标，然后点击“添加至项目”

5.然后重复步骤2，点击“我的项目”

6.然后点击下载至本地

下载并解压后会出现如下几个文件

7.在项目中创建一个fonts目录用来存放字体，并将上一步中的后面六个文件复制到其中

8.调用iconfont字体，这里有两种方法

第一种方法是在页面中链接iconfont.css这个文件，在需要的地方给标签赋一个class="iconfont",

第二种方法是在需要的地方自己命名一个class，然后在css中，将属性font-family的属性值赋值为'iconfont'

9.在项目中选择需要的字体图标，点击“复制代码”,粘贴到标签中的文本部分，即使用成功。

10.如果要添加新的字体图标，要重新下载素材，并覆盖原来的6个文件，因为新加的字体图标在原来的文件中没有说明。

四.base.css和common.css的使用

base.css :这个css文件中主要放置基本的一些样式，如：button上出现小手，a标签取消下划线，a标签放上颜色的变化，input输入框取消轮廓线等等。

common.css:这个css文件中存放公共部分的样式，因为这篇文章主要讲的是首页的编辑，对于其他页面有与首页公共的部分，如顶部快捷导航、头部、脚部等整个网站公共部分，这个文件存放的便是公共部分的样式，在其他页面要用的直接引用即可，不用重新写公共部分。

五.仿京东首页的制作

下面是效果图：

接上面

好的，现在开始总结具体的一些做法。（下面每一个部分都有一个div包裹全部，一下省略未写）

（1）顶部快捷导航的制作

分析：这个部分可以分为两个部分，左边一个div左浮动，右边一个div有浮动。

左边div中用ul标签，下面用两个li标签存放，一个li放置“品优购欢迎你！”,一个li中放置两个a标签用来放置登录和注册，并给“免费注册设置颜色”。其中li设置向左浮动，才能保持水平。

右边的div中也是ul标签包裹13个li标签，因为这里将6个小竖线处理为li，剩余7个存放文字，其中第2、5、6、7文字中还包含了向下的箭头的字体图标。其中的li也要设置为左浮动，才能保持水平。

（2）head头部的制作

分析：该部分可以分为四个小部分，一个div存放logo，一个div存放搜索框，一个div存放热词，一个div存放购物车。因为这四个部分位置不统一，所以这一部分都是采用绝对定位，来定位这些块元素。

logo的div：因为logo的作用很大，为了让搜索引擎关注，我们用h1标签包裹a标签，将a标签的背景设置为logo图片的路径。（h1标签通常一个网站只使用一次）

搜索框的div：其中包含一个输入框input和一个按钮button，设置他们的css样式即可，注意的是将两个都设置为左浮动，才能保持水平。

热词的div：其中是7个a标签，设置他们的样式，距离等等，还有他们都向左浮动，第一个热词的颜色设置为红色即可。

购物车的div：首先是一个购物车的字体图标，其次是“我的购物车文字”，然后是一个右箭头的字体图标，比较麻烦的是显示数量的那个部分，要设置它的高度，不要设置宽度，因为数量大了，数字会跑到盒子外面去，然后要设置它的一个border-radius的值左上、右上、右下设置相同的值，左下设置为0，即可完成图标样式。

（3）顶部导航的制作

分析：大的方向是两个div，左侧一个div用来存放下拉列表，右侧一个div存放导航。

左侧下拉列表的div：其中又分为两个div，第一个div放置“全部商品分类”，第二个div放置下拉内容，较为复杂的是第二个下拉内容，其中是ul包裹许多的li，每一个li中按关键字的个数设置a标签的个数，末尾包含一个向右的字体图标，字体图标向右浮动，设置每个li的高度、字体颜色、hover特效、背景颜色等等即可完成。

右侧导航div：是一个常规的ul包裹li，li标签中再包裹a标签，设置他们向左浮动和样式即可。

（4）footer底部栏的制作

这里先说footer底部栏的制作，是因为到此（包括此部分）所有的都为公共部分，以上的所有样式都写在common.css文件中，方便其重复使用。

分析：这部分大的主要分为3个部分，3个div，第一个div设置服务，第二个div设置帮助，第三个div设置版权。

服务的div：其中是一个ul包含5个li，每个li中包裹一个字体图标和一个div描述文字，div中包含一个h5标签简述服务，一个p标签描述服务。将5个li设置为左浮动实现水平。

帮助的div：其中是dl，每个dl根据数量设置dd的数量。设置6个dl向左浮动，实现水平。每个dl和dd设置高度可实现间隔。

版权的div：其中包含两个p标签，第一个p标签中包含着若干个a标签，这里的小竖线为了简洁，直接在p标签内用“|”表示，第二个p标签用来放置地址和邮箱。

注意：到这里，公共部分就做好了，以上的样式都存放在common.css中，下面的部分就要新写一个index.css文件了，用来放置首页所用到的样式，因为这篇文章就只描述首页的制作。

（5）main主要部分的制作

分析：这部分主要是两个大的div，左侧一个是轮播图的div，然后右侧是一个新闻的div，新闻的div又可以分为3个部分，一个新闻咨询的div，一个生活服务的div，一个折扣的div。

轮播图的div：其中放置了两个a标签，a标签中放字体图标，来表示上一张和下一张的链接；然后是ol包裹li来链接图中小圆点所表示的图；最后是ul中包裹许多li，每个li中包含一张带图片的链接。

新闻咨询的div：其中包含两个div，一个div是写新闻的图标，一个div是写咨询条目，其中是常规的ul包含许多的li，设置字体的样式和边距即可。

生活服务的div：其中是一个ul中包含了12个li，每个li中放置一个字体图标和一个p文字标签，设置li标签向左浮动，边线以及溢出处理即可。

折扣的div：这个div比较简单，放置一张图片即可。

（6）推荐部分的制作

分析：其中主要是两个大的div，左边放置今日推荐，右边放置推荐条目。

今日推荐的div：其中是一张图片，和一个p标签的文字描述。

推荐条目的div：其中是ul标签中包裹4个li标签，而每个li标签中又包含一个a标签，然后每个a标签中包含一张图片。

（7）楼层区的制作

之所以叫做楼层区，是因为网页中有很多雷同的区域，比如家用电器，手机通讯区域，都是换汤不换药，点击前面的导航，就会跳到指定的区域，像楼房一样，所以叫做楼层区。

分析：主要是两个大的div，一个div是顶部的导航，一个div是盒子的身体部分。

顶部导航的div：其中包含一个h3标签放置“家用电器”，一个div盒子放置右侧的导航，也是一个常规的ul>li>a的一个结构，注意的是li向右浮动实现水平。

身体部分的div：也是一个典型的ul>li>a>img的结构，只不过第一个li里面又包含一个小的ul>li>a结构，是用来放置文字链接的。

（8）电梯导航的制作

之所以叫做电梯导航，是因为这个部分是页面中固定不变的地方，屏幕的滚动也不会影响它的位置，而点击其中一个链接，就会跳到相应的部分，像电梯一样，所以这样叫。

分析：一个div即可，也是典型的ul>li>a结构，设置大div的position为fixed即可实现其固定。

啊啊啊，好辛苦，终于是写完了，花了几个小时，才发现这个博主是真的很辛苦啊~~

HTMLCSS仿京东首页制作静态页面总结相关推荐

HTMLCSS仿京东详情页静态页面制作总结
目录 1.页面效果 2.页面分析 3.页面制作 (1)产品介绍模块编辑 (2)产品细节模块编辑 1.页面效果接上面 2.页面分析头部导航栏和底部栏跟前面的大相径庭,这里就不再总结了. 详情页的 ...
仿京东首页（静态html+css）
京东首页的头部和尾部代码 html代码: <!DOCTYPE> <html lang="en"><head><meta charset=& ...
仿猫眼官网静态页面（纯HTML）
仿猫眼官网静态页面(纯HTML) 准备工作正文 HTML CSS 小结准备工作用到的图片如下,具体可以去官网下面截取(这里就不上传图片了,供参考) 界面效果正文 HTML <!DOCTY ...
Android开发笔记（一百六十四）仿京东首页的下拉刷新
上一篇文章介绍了高仿京东的沉浸式状态栏,可是跟京东首页的头部轮播图相比,依然有三处缺憾: 1.京东的头部Banner上方,除了有悬浮着的状态栏,状态栏下面还有一行悬浮工具栏,内嵌扫一扫图标.搜索框,以 ...
jQuery仿京东首页广告图片切换图片轮播
1.效果图如下: 2.源码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
移动端开发——京东首页制作（流式布局）
移动端开发--京东首页制作(流式布局) 项目准备初始化基本文件夹创建index.html 设置视口引入基本公共样式引入自己的css样 <!DOCTYPE html> <htm ...
android 高仿京东首页,android 粗略的仿京东首页嵌套方式滚动
简单述说最近没有什么事情,就看到了京东的首页,感觉还不错,但是我目前也只是粗略的模仿了出来. github 地址 V2版本仿京东首页.gif 设计思路简单画图.png 滚动黄色的recycleV ...
分享课程设计仿电商纯静态页面果冻零食商城
分享课程设计仿电商纯静态页面果冻零食商城一.主要功能: 1.登录注册功能登录注册模块中有分为登录模块和注册模块,通过这两个模块实现进入系统主页面的功能. (1)登录模块登录模块中有帐号输入 ...
android高仿京东秒杀,Android仿京东首页秒杀倒计时
本文实例为大家分享了Android仿京东首页秒杀倒计时的具体代码,供大家参考,具体内容如下 xml配置 android:layout_width="wrap_content" an ...

HTMLCSS仿京东首页制作静态页面总结

一.网站优化三大标签：title（网站标题），description（网站说明），Keywords（网站关键词）

二.favicon图表的使用

三.字体图标的使用

四.base.css和common.css的使用

五.仿京东首页的制作

（1）顶部快捷导航的制作

（2）head头部的制作

（3）顶部导航的制作

（4）footer底部栏的制作

（5）main主要部分的制作

（6）推荐部分的制作

（7）楼层区的制作

（8）电梯导航的制作

HTMLCSS仿京东首页制作静态页面总结相关推荐

最新文章

热门文章