HTML&CSS仿京东首页制作静态页面总结

目录

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

 二.favicon图表的使用

三.字体图标的使用

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

五.仿京东首页的制作

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

（2）head头部的制作

（3）顶部导航的制作

（4）footer底部栏的制作

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

（6）推荐部分的制作

（7）楼层区的制作

 （8）电梯导航的制作

---

 

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

        小编是看了一个博主的前端学习路线（对小白很是友好）：2020年零基础前端学习路线（本人亲身经历，9个月拿到拼多多、美团、京东校招offer，5000字长文）_前端彭于晏Eddie的博客-优快云博客https://blog.youkuaiyun.com/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,相机，数码，配件，手表，储存卡，品优购