HTML+CSS练习——实现京东登录静态页面
2024-05-31 21:58:19
文章目录
- 1、准备阶段
- 获取素材
- 分析出基本的布局
- 掌握的知识
- 2、实现阶段
- 头部
- 身体
- 尾部
- 3、效果图
- 代码奉上
1、准备阶段
获取素材
首先打开 京东登录页面，按下F12，依次按着步骤进行。把所需要的素材都下载下来。
分析出基本的布局
每做一个页面最重要的一步就是分析布局，布局的好坏影响着你所做的页面的效果。
可以了把一个大的页面分为一个个小部分，每个框框的部分都可以当作一个div。
掌握的知识
1、html的基本知识
2、css的基本知识
2、实现阶段
头部
这里要注意 京东 和 欢迎登录 是图片
<div class="header"><img class="logo" src="img/logo-201305-b.png" ><img src="img/l-icon.png" ><a href="#" class="header_one"><img src="img/q-icon.png" ><span>登录页面，调查问卷</span></a></div><div class="header_top"><p><img src="img/icon-tips.png" >依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版<a href="">《京东隐私政策》</a>已上线，将更有利于保护您的个人隐私。</p></div>
经过css的修饰就如下图
身体
这部分也就是一个页面主要的内容部分了，是由背景图片、div标签、a标签和from表单
等构成的。这里的from表单是个重点。
代码如下
<div class="content"><div class="contion"><div class="login"><p class="login_header">京东不会以任何理由要求您转账汇款，谨防诈骗。</p><a class="login_a" href="#">扫码登录</a><a class="login_a" href="#">账户登录</a><form action="#"><div class="login_content"><i></i><input type="text" name="user" value="" placeholder="邮箱/用户名/手机"></div><div class="login_content"><i></i><input type="text" name="user" value="" placeholder="密码"></div><div class="fpwd"><a href="#">忘记密码</a></div><a class="login_b" href="#">登     录</a></form><div class="login_footer"><a class="footer_c" href="#"><i></i>QQ</a>丨<a class="footer_c" href="#"><i></i>微信</a><a class="footer_c" href="#"><i></i>立即注册</a></div></div></div></div>
css修饰后的效果
尾部
代码如下
<div class="footer"><a href="#">关于我们</a><span> | </span><a href="#">联系我们</a><span> | </span><a href="#">人才招聘</a><span> | </span><a href="#">商家入驻</a><span> | </span><a href="#">广告服务</a><span> | </span><a href="#">手机京东</a><span> | </span><a href="#">友情链接</a><span> | </span><a href="#">销售联盟</a><span> | </span><a href="#">京东社区</a><span> | </span><a href="#">京东公益</a><span> | </span><a href="#">English Site</a><p class="footer_m">Copyright © 2004-2022 京东JD.com 版权所有</p></div>
3、效果图
代码奉上
html代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>京东登录</title><link rel="stylesheet" type="text/css" href="css/common.css"/></head><body><div class="header"><img class="logo" src="img/logo-201305-b.png" ><img src="img/l-icon.png" ><a href="#" class="header_one"><img src="img/q-icon.png" ><span>登录页面，调查问卷</span></a></div><div class="header_top"><p><img src="img/icon-tips.png" >依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版<a href="">《京东隐私政策》</a>已上线，将更有利于保护您的个人隐私。</p></div><div class="content"><div class="contion"><div class="login"><p class="login_header">京东不会以任何理由要求您转账汇款，谨防诈骗。</p><a class="login_a" href="#">扫码登录</a><a class="login_a" href="#">账户登录</a><form action="#"><div class="login_content"><i></i><input type="text" name="user" value="" placeholder="邮箱/用户名/手机"></div><div class="login_content"><i></i><input type="text" name="user" value="" placeholder="密码"></div><div class="fpwd"><a href="#">忘记密码</a></div><a class="login_b" href="#">登     录</a></form><div class="login_footer"><a class="footer_c" href="#"><i></i>QQ</a>丨<a class="footer_c" href="#"><i></i>微信</a><a class="footer_c" href="#"><i></i>立即注册</a></div></div></div></div><div class="footer"><a href="#">关于我们</a><span> | </span><a href="#">联系我们</a><span> | </span><a href="#">人才招聘</a><span> | </span><a href="#">商家入驻</a><span> | </span><a href="#">广告服务</a><span> | </span><a href="#">手机京东</a><span> | </span><a href="#">友情链接</a><span> | </span><a href="#">销售联盟</a><span> | </span><a href="#">京东社区</a><span> | </span><a href="#">京东公益</a><span> | </span><a href="#">English Site</a><p class="footer_m">Copyright © 2004-2022 京东JD.com 版权所有</p></div></body>
</html>css样式代码
*{margin: 0;padding: 0;/* 头部 */}.header{width: 990px;height: 60px;margin:0 auto;padding: 10px 0;}.header .logo{margin-right: 20px;}.header a{color:#999999 ;float: right;padding-top: 40px;font-size: 13px;}.header a:hover span{color: red;border-bottom: 1px solid red;}.header a img{vertical-align: middle;font-size: 13px;}/* 头部下边 */.header_top{ background-color: #fff8f0;}.header_top p{line-height: 40px;text-align: center;margin:0 auto;font-size: 12px;color: #999999;}.header_top p img{vertical-align: middle;font-size: 12px;margin-right: 5px;margin-top: -4px;}.header_top p a{color: black;}.header_top p a:hover{border-bottom: 1px solid black;}/* 整个内容 登录页 */.content{background-color: #e93854;}.content .contion{width: 990px;height: 475px;margin: 0 auto;background: url(img/background.png) ;}.content .contion .login{width: 346px;height: 398px;float: right;margin-top: 10px;background-color: white;}.content .contion .login .login_header{width: 346px;line-height: 40px;/* background-color: #fff8f0; */background:#fff8f0 url(img/icon-tips.png) no-repeat 20px center;font-size: 12px;text-align: center;color: #999999;}.content .contion .login .login_a{display: inline-block;width: 50%;line-height: 55px;text-align: center;/* float: left; */text-decoration: none;color: black;font-size: 18px;border-bottom: 1px solid #f4f4f4;}.content .contion .login .login_a::after{clear: both;}.content .contion .login .login_a:hover{color: red;}.content .contion .login .login_content{width: 304px;height: 38px;border: 1px solid #999999;margin: 0 auto;margin-top: 30px;}.content .contion .login .login_content:nth-of-type(1){margin-bottom: -10px;}.content .contion .login .login_content i{/* display: inline-block; */height: 38px;width: 39px;float: left;border-right: 1px solid #999999;}.content .contion .login .login_content:nth-of-type(1) i{background: url(img/pwd-icons-new.png) no-repeat;}.content .contion .login .login_content:nth-of-type(2) i{background: url(img/pwd-icons-new.png) no-repeat -48px 0;}.content .contion .login .login_content input{/* vertical-align: middle; */box-sizing: border-box;width: 250px;height: 38px;border: none;padding-left: 10px;outline: none;}.content .contion .login .fpwd a{font-size: 12px;border-bottom: none;margin-left: 280px;line-height: 55px;color: black;text-decoration: none;}.content .contion .login .fpwd a:hover{border-bottom: 1px solid red;color: red;}.content .contion .login .login_b{display: inline-block;width: 304px;line-height: 33px;margin: 0 21px;background-color: #e4393c;text-align: center;text-decoration: none;color: white;font-size: 18px;}.content .contion .login .login_footer{background-color:white;height: 50px;margin: 34px 20px 0px 20px;width: 306px;}.content .contion .login .login_footer .footer_c{line-height: 50px;text-decoration: none;color: #999999;}.content .contion .login .login_footer a:nth-of-type(3){color: red;}.content .contion .login .login_footer .footer_c i{display: inline-block;width: 20px;height: 20px;vertical-align: middle;}.content .contion .login .login_footer .footer_c:nth-of-type(1) i{ background: url(img/QQ-weixin.png) no-repeat;}.content .contion .login .login_footer .footer_c:nth-of-type(2) i{background: url(img/QQ-weixin.png) no-repeat -20px 0;}.content .contion .login .login_footer .footer_c:nth-of-type(3) {/* margin-left: 50px; */float: right;}.content .contion .login .login_footer .footer_c:nth-of-type(3) i{background: url(img/pwd-icons-new.png) no-repeat -103px -75px;}.footer{width: 845px;margin: 0 auto;text-align: center;color: gray;font-size: 14px;margin-top: 20px;}.footer a{text-decoration: none;color: gray;}.footer p{margin-top: 10px;}
到这里就结束了
新手上路觉得不错的点赞关注呦
泽泽泽持续更新教程
HTML+CSS练习——实现京东登录静态页面相关推荐
- css京东购物车静态页面实现
css京东购物车静态页面实现 <!DOCTYPE html> <html><head><meta charset="utf-8">& ...
- 使用html+css+js实现的登录注册页面
使用html+css+js实现的登录注册页面 这学期学了web,按照自己的想法实现下面的登录注册页面. 在注册页面里,使用js实现对邮箱格式.密码强度和密码一致性的检查. 源码放在github上,顺带 ...
- 京东首页静态页面html+css
个人名片:
- 用css制作好看的登录注册页面
在这里插入代码片<!DOCTYPE html> <html lang="en"><head><meta charset="UTF ...
- html+css实现京东、英雄联盟静态页面
效果展示 真高仿,像真的一样,页面的效果几乎都做出来了. 京东 刚接触html css的时候写第一个页面,由于当时布局不太熟练,写了将近一个月- 英雄联盟 实现功能 京东点击切换轮播图 京东自动轮播图 ...
- 案例:京东登录页面css创建
京东登录页面 效果图 一.整体html代码 <!DOCTYPE html> <html><head><meta charset="utf-8&quo ...
- 电脑端京东的我的订单html+css页面_给静态页面上使用JS实现动态页面
首先我们做的京东购物车的案例 首先使用css和html创建静态页面代码如下 <!DOCTYPE html> <html><head><meta charset ...
- 用HTML和CSS做一个简单的静态京东手机端页面含源码分享
10分钟内的时间可以完成,具体完成效果如下: 百度链接:https://pan.baidu.com/s/11XGuDfeDZsY2xYYmq4KcRg 提取码:42jq 整体文件为: 代码部分: i ...
- 毕业设计游戏类网站设计静态页面基于html，div+css+jquery（含源码）
首页.游戏简介.游戏资料.单机攻略.手游攻略.网络攻略.登录|注册等相关功能页面 适合商业项目或大学生毕业设计程序,整套静态页面html,div+css+jquery相关技术 更多相关内容,请点击下载 ...
- html模仿 商城 静态页面,HTML+CSS简单实现凡客商城静态网页
[实例简介] 用HTML+CSS模仿凡客商城做的静态页面,包括首页.列表页.详情页.登录.注册.购物车.支付页等 [实例截图] [核心代码] 凡客商城 └── 凡客商城 ├── css │ ├── ...
最新文章
- 十分钟了解分布式计算:GraphX
- 比特币前首席开发人员：LN可能还需要18个月
- 关于研究生申请的心态：submitted之后就等一下结果，不要着急
- SAP CRM IBASE保存的逻辑分析
- mysql5.7乱码_mysql5.7中解决中文乱码的问题
- 肯德基圣代中间空心_建造冰淇淋圣代解释CSS位置
- （68）zabbix windows性能计数器使用详解
- 我的第一个项目----Java图书管理系统
- azure云服务器搭建连接_如何创建到Azure SQL数据库的链接服务器
- 在线可视化python网站_利用Python优雅地可视化数据
- 硬盘序列号更改工具 v0.1 下载
- 印章管控私有化部署，助力政企办公开启新纪元
- java虚拟机创建失败_java虚拟机创建失败的原因整理
- 深度解析PHP数组函数array_combine
- MySQL学习2：表的创建和增删改
- 用p5.js绘制创意自画像
- 乡村振兴的道路，农村污水处理设备搭建至关重要
- 【竞品分析】Android音乐播放器的竞品分析
- 从2012 飞到 2013 —— 梦想依旧
- 【树哈希】poj1635 Subway tree systems