前端HTML5+CSS3静态页面开发-京东首页
前端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部分。代码如下：
到这里我们的京东首页项目就成功完成了，大家是否能实现自己理想的效果呢？一起动手操作吧！
前端HTML5+CSS3静态页面开发-京东首页相关推荐
- 前端HTML5+CSS3静态页面开发-博文尚美
前端html5+css3静态页面开发-博文尚美 项目介绍 博文尚美是一个设计网站, 此项目由html + css 布局完成页面,对前端基础知识的入门及掌握有非常好的提升效果,对html和css的使用及 ...
- python 50 前端 html5 css3
1 # 前端 2 3 接下来我们进入前端知识的学习,前端的学习目的就是为我们开发的应用程序提供一个与用户进行交互的界面,前端分为HTML5.CSS3.JavaScript三大部分,我们学习内容共分 ...
- 尚硅谷新版Web前端HTML5+CSS3知识点集合篇【p1-p8】
尚硅谷新版Web前端HTML5+CSS3知识点集合笔记篇 尚硅谷新版Web前端HTML5+CSS3全套基础教程完整版(初学者零基础入门) p1(22:55) 一.软件的分类: 1.系统软件 -wind ...
- 移动端开发——京东首页制作（流式布局）
移动端开发--京东首页制作(流式布局) 项目准备 初始化基本文件夹 创建index.html 设置视口 引入基本公共样式 引入自己的css样 <!DOCTYPE html> <htm ...
- 超棒的HTML5/CSS3单页面响应式模板（支持Bootstrap）
在线演示 使用Bootstrap实现的响应式单页面模板. 桌面效果: 移动设备效果: 阅读全文:超棒的HTML5/CSS3单页面响应式模板(支持Bootstrap)
- 浅谈京东静态html原理,京东首页前端架构设计.ppt
京东首页前端架构设计 工程化 Windows可视化工具 * 工程化 前端模块构建平台 * 总结 * QA * * JD.com JD.com JD.com JD.com JD.com JD.com J ...
- Web前端html5+css3前端开发入门学习笔记
文章目录 前言 HTML 认识HTML 1. 网页组成和本质 2.了解浏览器 3.web标准 4.HTML感知 5.HTML骨架 6.编译软件vscode的简介和使用 7.注释 8.标签组成和关系 9 ...
- 前端HTML5+CSS3学习笔记
HTML5+CSS3学习笔记 ==CSS第一天== 一.css简介 二.css语法规范 三.css代码风格 四.css选择器的作用 五.css基础选择器 1.标签选择器: 2.类选择器 3.多类名选择 ...
- 前端 html5 css3 框架,UI,分享,CSS3,HTML5,前端框架
随着HTML5和CSS3以及网页设计布局的全面翻新创新改革.让很多网页设计者和界面设计师都知道一个道理.就是去掌握一套对应的工具包.这不仅仅是未来提高工作的效率,还能更好的去处理网页整体视觉效果.界面 ...
最新文章
- 人群密度估计--Spatiotemporal Modeling for Crowd Counting in Videos
- SAP销售和财务数据库表之间的关系
- HTML 中表单form 的相关知识
- 前端学习（660）：比较运算符
- Mac怎么连接多个蓝牙音箱？
- SQL Server 字段类型Char Varchar 比较
- 2022年最新《谷粒学院开发教程》：6 - 整合SpringCloud
- keep 虚拟路线修改器_从初音未来到歌王子殿下，尚未VTuber化的虚拟偶像
- 组策略设置计算机计划任务,使用组策略配置域中任务计划
- 利用打码平台识别点选验证码
- 苹果电脑计算机找不到打印机,在苹果电脑上连接打印机可以这样操作
- 二元隐函数求二阶偏导_二元隐函数的二阶偏导数的计算方法
- word打不开html,word打不开怎么办？word文档打不开怎么办？
- linux下rtc时间不准,Linux中系统时间和RTC时间的关系
- 飞桨首款韩女团小卡扭蛋机
- 520,都来被虐吧。。。
- 这些电脑小技巧可以让你在朋友圈很时髦！
- 简洁无广告的解压软件
- 工作流之待办事宜消息提醒篇
- 计算机培训普通话是什么,普通话培训(计算机辅助普通话测试介绍).ppt