前端HTML5+CSS3静态页面开发-京东首页

核能气质少年 提交于 2020-08-10 13:52:03

前端html5+css3静态页面开发-京东首页

项目介绍
(1)京东首页项目由html + css 布局完成页面,对前端基础知识的入门及掌握有非常好的提升效果,本项目旨在教授HTML和CSS的基础知识,提升基础技能,使用的工具可以是简单的代码编辑工具,这里使用VSCode(Visual Studio Code)进行项目代码的编辑。
(2)VSCode的下载地址:https://code.visualstudio.com/,根据自己的电脑下载对应的版本,按照默认的安装进程将工具安装好。
项目相关知识点
HTML + CSS
盒子模型 + 浮动 + 定位
部分H5标签和C3属性
在这里插入图片描述






项目演示图
在这里插入图片描述
在这里插入图片描述
实现步骤
(1)将所用到的图片插入项目的images文件夹中,京东图标导入项目中。
(2)将所用到的外部样式文件 normalize.css放入项目的css文件夹中。
(3)将所需要导入的字体文件font文件导入项目中。
导入后的项目如图:
在这里插入图片描述
(图片中的笔记文件是小编自己记录的笔记,大家可以不创建笔记文件)








引入css样式
在这里插入图片描述
我们要注意的是,引入外部css时,路径一定要写正确,否则将没有css样式修饰。

注:meta标签中charset指定了编码格式,descroption是页面内容描述,Keywords是搜索引擎搜索页面的关键字,title标签是页面标题。

引入字体样式css部分。代码如下:
在这里插入图片描述

顶部html与css部分。代码如下:
在这里插入图片描述
在这里插入图片描述
导航html与css部分。代码如下:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述





注:u标签是用于定义无序列表,一般与标签一起使用,a标签用于定义超链接,从一个页面链接到另一个页面,href属性指定的是链接的目标,#代表是错点链接。i标签中不是空格,是引入字体文件的图标。

logo、搜索部分、热词部分、购物车、电脑、导航栏信息html与css部分。代码如下:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述



注:h1标签是标题标签,添加title属性后会在鼠标移动到标签后显示title中的内容,input标签是输入框,value属性是输入框中的默认内容,em标签告诉浏览器把其中的内容表示为强调的内容。

剩余广告html与css部分。代码如下:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述







footer html与css部分。代码如下:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
到这里我们的京东首页项目就成功完成了,大家是否能实现自己理想的效果呢?一起动手操作吧!






易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!