基于HTML和CSS完成京东页面的制作

首先打开京东页面分析页面元素

由图可把整个页面分为4个部分，分别为top顶部部分，tip提示部分，mid中间部分，foot底部部分
然后编写每一部分的代码，边写边测试结果，防止一步错步步错
代码如下：
HTML部分：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="css/jd-work.css"/></head><body><div class="top"><img src="https://misc.360buyimg.com/lib/img/e/logo-201305-b.png" id="img_1"/><span id="login">欢迎登录</span><div class="top_1"><a href="" id="top_a">登录页面，调查问卷</a></div></div><div class="tip"><span>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版《京东隐私政策》已上线，将更有利于保护您的个人隐私。</span></div><div class="mid"><div class="mid_1"></div></div><div class="foot"><div class="foot_1"><ul id="ul_1"><li><a href="" id="foot_a">关于我们</a></li><li><a href=""id="foot_a">练习我们</a></li><li><a href=""id="foot_a">人才招聘</a></li><li><a href=""id="foot_a">商家入驻</a></li><li><a href=""id="foot_a">广告服务</a></li><li><a href=""id="foot_a">手机京东</a></li><li><a href=""id="foot_a">友情链接</a></li><li><a href=""id="foot_a">销售联盟</a></li><li><a href=""id="foot_a">京东社区</a></li><li><a href=""id="foot_a">京东公益</a></li><li><a href=""id="foot_a">English&nbsp;&nbsp;Site</a></li></ul></div><div class="foot_2"><span id="foot_span">Copyright © 2004-2019  京东JD.com 版权所有</span></div></div></body>
</html>

CSS部分：

/*去除留白*/
body,html{margin: 0px;padding: 0px;
}
/*头部部分*/
.top{width: 100%;height: 80px;border: 1px solid #fff8f0;
}
#img_1{margin-left: 170px;
}
#login{color: black;font-family: "微软雅黑";font-size: 25px;position: absolute;left: 360px;top: 25px;
}
#top_a{color: gray;font-size: 12px;font-family: "宋体";text-decoration: none;float: right;
}
.top_1{position: absolute;top: 50px;right: 200px;
}
#top_a:hover{color: red;text-decoration: underline;
}/*提示部分*/
.tip{width: 100%;height: 35px;background-color: #fff8f0;text-align: center;line-height: 35px;
}
.tip>span{color: gray;font-size: 10px;font-family: "宋体";
}/*中间部分*/
.mid{width: 100%;height: 470px;background-image: url("http://img11.360buyimg.com/da/jfs/t1/46924/22/7292/98299/5d4d0922E6f2c0705/a19b5f67a496b209.jpg");background-repeat: no-repeat;background-position: center;background-color: #971FE3;
}
.mid_1{width: 350px;height: 440px;background-color: #ffffff;float: right;position: relative;top: 10px;right: 170px;
}/*链接部分*/
.foot{width: 100%;
}
#ul_1{margin-left: 170px;
}
#ul_1>li{list-style: none;text-decoration: none;float: left;margin-left: 15px;
}
#foot_a:hover{color: red;
}
/*#foot_a:hover{text-decoration: underline;color: red;
}*/
.foot_1{width: 100%;height: 30px;/*background-color: red;*/text-align: center;line-height: 30px;
}
.foot_2{width: 100%;height: 20px;/*background-color: green;*/text-align: center;line-height: 20px;
}
#foot_span{color: gray;font-size: 12px;font-family: "宋体";
}

最终实现结果如图：

用户扫码登录的功能还没有完成，但是整体思路以及具体怎样去实现有了大致了解，以下是编写工程中用到的知识点，总结如下：

引入CSS的四种方式：
1）行内式，在标签内添加属性style=””,不好维护,不推荐使用。
2）内嵌式，使用style标签
3）连接式，在head头部添加标签link引入css文件,推荐使用。
4）内嵌连接式，用style标签，用@import url(css文件)三种常用选择器的使用场景
1）标签选择器:可以选择到所有相同的指定标签
2）class选择器:可以选择到指定类的标签。
3）id选择器:可以选择的指定到唯一的标签。
常用选择器的优先级：
ID选择器>类选择器>元素选择器CSS中的定位：绝对定位:absolute  :定位离开之后释放的之前的位置   基于外层父级标签来说相对定位：relative: 定位离开之后之前的位置没有释放  基于之前的位置来说 固定定位：fixed   ：始终是基于浏览器的左上角定位    适合做广告默认定位： static   ：初始的定位的操作CSS常用属性：
字体：/*字体的颜色*/color: gray;/*字体的大小*/font-size: 12px;/*/*字体的加粗*//*font-weight: bold;*//*字体的风格*//*font-family: 宋体;*//*字体倾斜*//*font-style: italic;*/
text：/*下划线展示*/text-decoration: underline;/*去除下划线*/text-decoration: none;/*文本居中*/text-align: center;
行高：行高的高度和div外面的高度一致这时候里面的内容就会垂直居中line-height: 40px;
背景：/*设置背景图片*/background-image: url("http://img30.360buyimg.com/da/jfs/t22399/154/765213112/96035/f94f9605/5b17512dN2de9d722.jpg");/*设置背景图片不重复*/background-repeat: no-repeat;           /*调整背景图片的位置   X   Y*/background-position: center;/*调整背景图片的大小   宽  高  *//*background-size: 300px  500px;*//*背景颜色    red   #f0000  rgb(255,0,0)  rgba(255,0,0,.5){包含透明度} */background-color: rgba(255,0,0,.5);.div1{width: 200px;height: 200px;border: 1px solid rgba(255,0,0);/*rgba(0,0,255,0.5)调整颜色    最后一个参数表示透明度*/background-color: red;color: rgba(255,0,0);/*设置透明度，整个背景和字体都会改变  0-1*/opacity: 0.5;/*超出部分隐藏*//*overflow: hidden;*//*超出部分有滚动条*/overflow: auto;}#span_1{width: 100px;height: 100px;border: 1px solid red;/*行内元素转块级元素   inline   block  none(隐藏)*/display: block;}ul{/*设置向右浮动*/float: right;}li{list-style: none;/*设置向左浮动*/float: left;/*内边距*/padding-left: 15px;}

基于HTML和CSS完成京东页面的制作相关推荐

纯HTML+CSS仿作京东页面
纯HTML+CSS仿作京东页面大一学了一个月的网页制作课程,就在今天,我对京东页面下手了. 我用的是旧版京东的素材... 先上效果图接下来让我们看看HTML代码 <!DOCTYPE html ...
html+css实现京东、英雄联盟静态页面
效果展示真高仿,像真的一样,页面的效果几乎都做出来了. 京东刚接触html css的时候写第一个页面,由于当时布局不太熟练,写了将近一个月- 英雄联盟实现功能京东点击切换轮播图京东自动轮播图 ...
HTMl+CSS 模仿京东网登录页面
课后实践项目,仅页面效果,写博客纯属记录! 码云开源仓库地址:https://gitee.com/ynavc/jd 演示地址:https://ynavc.gitee.io/jd 效果图: 实现代码: ...
html和css仿照京东网页页面（文本和链接的跳转）
上图是京东页面的一个参照物用到的语法: 代码块: <!doctype html> <html lang="en"> <head><met ...
利用css对shiny页面优化及利用htmlwidgets包创建HTML控件
内容来源:2017年5月20日,乐逗游戏高级数据分析师在"第十届中国R会议软件工具专场"进行<HTTPS最佳安全实践>演讲分享.IT大咖说作为独家视频合作方,经主办方和 ...
Selenium自动化中DOM，XPATH，CSS定位Web页面对象的优劣性分析
加速IE浏览器自动化执行效率:Selenium自动化中DOM,XPATH,CSS定位Web页面对象的优劣性分析 1.技术背景在Web应用中,用户通过键盘在输入框中输入值和鼠标点击按钮,链 ...
基于React+Koa实现一个h5页面可视化编辑器－Dooring
前言前段时间笔者一直忙于数据可视化方面的工作,比如如何实现拖拽式生成可视化大屏,如何定制可视化图表交互和数据导入方案等,这块需求在B端企业中应用非常大,所以非常有探索价值. 本篇文章并非和数据可视化 ...
Tridiv：基于 Web 的 CSS 编辑器，创建炫丽 3D 图形
Tridiv 是一个基于 Web 的编辑器,使用 CSS 创建 3D 形状.它提供了一个传统的四个面板的操作界面,给出了从每个平面的视图,以及一个预览窗格中示出的最终的效果.使用 Tridiv 可以创 ...
HTML和CSS实现京东首页（html和css详解）
HTML和CSS实现京东首页,效果图如下: 基本代码如下:需要源代码和素材的评论区留言 (1)页面部分设计如下: <!DOCTYPE html> <html lang="e ...

基于HTML和CSS完成京东页面的制作

基于HTML和CSS完成京东页面的制作相关推荐

最新文章

热门文章