HTML期末大作业~仿京东商城模板网站(HTML+CSS+JavaScript)
这次网页主要以(HTML+CSS+JavaScript)制作登录 注册 首页 购物 商品详情
,等多个页面~特别适合web期末作业
网页制作介绍
关于HTML期末网页制作,,大作业A+水平
!!主要特色:京东首页HTML网页制作~
作为第一次遇到html期末大作业,熬夜了好几天才做了个大概所以想纪念一下~仿京东商城,很好看。
作品(动态效果)演示
作品(静态效果)演示
登录
注册
文件目录
代码实现
一、京东商城实现
HTML结构
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>京东-欢迎登录</title><link rel="stylesheet" href="../css/cssreset.css"><link rel="stylecut icon" href="../favicon.ico"><link rel="stylesheet" href="../css/login.css"><script src="../js/jquery-3.0.0.min.js"></script><script src="../js/login.js"></script></head><body><form action="#"><header><h1><img src="../images/logo-201305-b.png" alt=""></h1><h2><img src="../images/l-icon.png" alt=""></h2><a href="#"><span></span>登录页面,调查问卷</a></header><div class="tip"><p><span></span>依据《网络安全法》,为保障您的账户安全和正常使用,请尽快完成手机号验证!新版<a href="#">《京东隐私政策》</a>已上线,将更有利于保护您的个人隐私。</p></div> <main><div class="con"><div class="login-all"><p><span></span>京东不会以任何理由要求您转账汇款,谨防诈骗。 </p><ul><li class="redd">扫码登录</li><li>账户登录</li></ul><div class="mid"><div class="mid-top"><div class="mid1"> <img src="../images/show.png" alt=""> </div><div class="mid2"></div></div> <p>打开<a href="#">手机京东</a>扫描二维码</p><ul><li><span>免输入</span></li><li><span>更快</span></li><li><span>更安全</span></li></ul></div> <div class="midd"><p class="tipp tip1"><span></span>请输入账户名和密码</p><p class="tipp tip2"><span></span>请输入账户名</p><p class="tipp tip3"><span></span>请输入密码</p><span></span><input type="text" placeholder="邮箱/用户名/登录手机" class="inp1"><span></span><input type="password" placeholder="密码" class="inp2"><p class="forget"><a href="#">忘记密码</a></p><button>登录</button></div><div class="bot"><ul><li><span></span><a href="#">QQ</a></li><li><span></span><a href="#">微信</a></li></ul><a href="sign-up.html"><span></span>立即注册</a></div></div></div> </main><footer><p><a href="#">关于我们</a><a href="#">联系我们</a><a href="#">人才招聘</a><a href="#">商家入驻</a><a href="#">广告服务</a><a href="#">手机京东</a><a href="#">友情链接</a><a href="#">销售联盟</a><a href="#">京东社区</a><a href="#">京东公益</a><a href="#">English Site</a></p><p>Copyright © 2004-2020 京东JD.com 版权所有</p></footer></form><script src="../js/login.js"></script></body>
</html>
CSS代码
.mosion {height: 530px;
}.mosion .hd {height: 40px;border-bottom: 1px solid #ededed;
}.mosion .hd .left {float: left;font-size: 18px;line-height: 40px;
}.mosion .hd .right {float: right;font-size: 24px;
}.mosion .bd {position: relative;
}.mosion .bd .img2 {position: absolute;top: -70px;left: 124px;
}.mosion .bd img {position: absolute;top: 120px;left: 348.5px;
}.mosion .bd p {position: absolute;top: 30px;width: 1200px;font-family: '楷体';font-weight: 700;font-size: 30px;line-height: 45px;color: #000;
}
思路复盘:
.hd模块标题部分就是一个大盒子里两个子盒子,一个左浮动,一个右浮动就好了
.bd主体部分就是两张经过PS处理过的png格式的图片和一段文字,通过定位让他们位于合适的位置
二、侧边栏
主要知识点:固定定位
固定定位详解:
1.代码:position:fixed;+边偏移
2.特点: 他的父元素就是浏览器,以浏览器的可视窗口为参照点移动,不随滚动条滚动脱标,不再占有原来的位置
3.缺点:当浏览器缩放后,加了固定定位的元素还是就在那个位置
HTML和CSS代码
<!-- 侧边栏 --><div class="aside"><img src="./img/探头.png" alt=""></div>
/* 侧边栏 */
.aside {position: fixed;top: 180px;left: 30px;
}
这样就有一种图片随着网页动而动的效果了仿京东静态网站制作最终效果
三、做好的网页效果,如何通过发链接给别人看?
1.1解决部署上线~> 部署上线工具(永久免费使用)
1.不需要买服务器就能部署线上,全世界都能访问你的连接啦, 这里给大家推荐一个程序员必备神器~
插件集成了超级多好用的插件,免费下载安装,简单易懂, 简直神器 ~ 需要可在文章 ↓ 下方公Z号获取
2.就是把你的代码效果做好了以后, 部署到线上, 把链接发给别人, 就可以让对方通过你的连接点击进去, 就能看到你的网页效果啦, 电脑端和手机端都可以噢! (不然别人看你的网页都要发文件过去,体验感不太好哦~)
1.1部署流程
1.2 哇~ 部署成功
哇~ 部署成功! 将你写好的页面部署上线后, 全世界的人都可以通过链接访问到你的网页了(永久免费使用哦)~
四、前端 零基础入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~
五、源码获取
❉ ~ 关注我,点赞博文~ 每天带你涨知识!
❉ 1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。
❉ 2.关注我~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者,一起探讨 前端 Node 知识,互相学习」!
❉ 3.以上内容技术相关问题可以相互学习,可关注↓公Z号 获取更多源码 !
六、更多HTML期末学生作业文章
1.HTML期末学生结课大作业~html+css+javascript仿叮当电影在线网站(功能齐全)
2.HTML期末学生作业~html+css+javascript仿猫眼电影在线网站(功能齐全)
3.HTML期末学生大作业(9套)html+css+javascript仿京东、天猫、服装、各大电商模板(大学毕业设计)
4.HTML期末大作业~海贼王中乔巴专题漫画学生网页设置作业源码(HTML+CSS+JavaScript)
5.HTML期末大作业~仿京东首页制作海贼王动漫HTML网页(HTML+CSS+JavaScript)
七、HTML期末作业作业(下载)
1.web前端期末节课大作业~html学生信息管理系统模板
2.web前端期末节课大作业 ~HTML学校后台用户登录界面模板
3.web前端期末节课大作业 ,~小米官网竖直分类导航菜单
4.web前端期末节课大作业~HTML5大学生网上报到系统响应式模板
5.web前端期末节课大作业~自考大学官网HTML模板
6.web前端期末节课大作业 ~小米商城官网首页模板
7.web前端期末节课大作业-绿色IT技术在线教育响应式模板
8.web前端期末节课大作业~HTML教育培训机构网站模板
9.web前端期末结课大作业html+css+javascript大学实验教学示范中心HTML网站模板
10.web前端期末节课大作业 ~HTML5响应式少儿舞蹈培训学校网站模板
11.web前端期末节课大作业~红色教育培训画室HTML网站模板
12.HTML期末作业-绿色果蔬商城购物网模板(HTML+CSS+JavaScript)
八、更多源码
❤100款表白源码演示地址
HTML期末大作业~仿京东商城模板网站(HTML+CSS+JavaScript)相关推荐
- HTML5期末大作业:新疆旅游模板网站设计——新疆旅游模板首页(1页) HTML+CSS+JavaScript
HTML5期末大作业:新疆旅游模板网站设计--新疆旅游模板首页(1页) HTML+CSS+JavaScript 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. ...
- web前端期末大作业 ~我的家乡-绿城之都html+css+javascript旅游网页设计实例
web前端期末大作业 ~ 我的家乡-绿城之都html+css+javascript旅游网页设计实例 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页 ...
- Web前端期末大作业--马尔代夫旅游网页设计(HTML+CSS+JavaScript+)实现
- HTML期末大作业~花店鲜花商城网站模板设计与实现(HTML+CSS+JavaScript)
HTML期末大作业~花店鲜花商城系统网站模板网站设计与实现 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适的模板?等等一 ...
- HTML5期末大作业:京东网站设计——仿2016版京东首页(1页) HTML+CSS+JavaScript 大学生网页作品 电商网页设计作业模板 学生网页制作源代码下载
HTML5期末大作业:京东网站设计--仿2016版京东首页(1页) HTML+CSS+JavaScript 大学生网页作品 电商网页设计作业模板 学生网页制作源代码下载 常见网页设计作业题材有 个人. ...
- HTML5期末大作业:京东网购网站设计——京东网购商城模板(8页) HTML+CSS+JavaScript 学生DW网页设计作业成品 HTML网页设计制作大作业
HTML5期末大作业:京东网购网站设计--京东网购商城模板(8页) HTML+CSS+JavaScript 学生DW网页设计作业成品 HTML网页设计制作大作业 常见网页设计作业题材有 个人. 美食. ...
- 大学web基础期末大作业~仿品优购商城页面制作(HTML+CSS+JavaScript)
HTML网页设计期末课程大作业~~仿品优购页面制作(HTML+CSS+JavaScript) 关于HTML期末网页制作,大作业A+水平 ~仿品优购网页作业HTML+CSS+JavaScript实现,共 ...
- HTML期末大作业~节日礼品购物商城网站html模板(HTML+CSS+JavaScript)
HTML期末大作业~节日礼品购物商城网站html模板(HTML+CSS+JavaScript) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求 ...
- HTML5期末大作业:电商购物网站设计——电商购物网站设计(55页) 电商网页设计制作 简单静态HTML网页作品 购物网页作业成品 学生商城网站模板
HTML5期末大作业:电商购物网站设计--电商购物网站设计(55页) 电商网页设计制作 简单静态HTML网页作品 购物网页作业成品 学生商城网站模板 常见网页设计作业题材有 个人. 美食. 公司. 学 ...
最新文章
- 关于TVM的点滴记录
- c++文件读取空格_程序员术与道:术—C语言对文件进行处理,文件处理的基本操作...
- 计算机相关概念总结(3)
- mysql 查询日志介绍
- unilever news
- 【学习笔记】多重背包相关优化——二进制优化/单调队列优化
- 菜鸟学Java(六)——简单验证码生成(Java版)
- 黑马商城项目源代码_Python学习路线图--Python框架与项目
- php magento 开发,php – Magento:如何将配置更改从开发环境迁移到生产环境?
- python中for循环缩进_Python基础- 缩进,选择和循环
- dede使用方法---用js让当前导航高亮显示
- win10一直显示正在更新怎么关闭计算机,Win10自动更新关不掉?原来就少这么一步...
- 打破985校史!她以独作身份投中顶刊,曾因换方向重读博士7年,科研之路也“坎坎坷坷”……...
- JavaWeb自学笔记(一)
- 所谓的我对大学的目标与期望!!!
- 多视图立体视觉:从几何到学习 (PAMI2022, IJCV2022)
- NuSences 数据集解析以及 nuScenes devkit 的使用
- Microsoft AjaxToolkits 17. UpdatePanelAnimation控件
- 前端转java学习之路(一):java高精度计算之bigdecimal
- webbrowser php,webBrowser C#是实现的网页浏览器,能够打开各种 ,调用 搜索。 WEB(ASP,PHP,...) 238万源代码下载- www.pudn.com...
热门文章
- [附源码]JAVA+ssm计算机毕业设计_旅游系统(程序+Lw)
- 杨梅坑单车、西冲冲浪、出海捕鱼休闲一日游
- 国办关于当前金融促进经济发展的若干意见
- (1.3.3)插入排序:直接插入、交换插入、折半插入
- 全连接条件随机场_【项目案例】北京大兴机场BIM技术应用
- MySQL常用基础命令行
- python中使用np.array()将list转换成Array的坑
- springboot依赖springframework版本关系
- python取整函数 向上取整 向下取整 四舍五入
- 这篇文章,把我都快看哭了...