0
点赞
收藏
分享

微信扫一扫

HTML期末大作业~仿京东首页制作海贼王动漫HTML网页(HTML+CSS+JavaScript)


HTML期末大作业~京东首页仿制作海贼王动漫HTML网页(HTML+CSS+JavaScript)

这次网页主要以(HTML+CSS+JavaScript)制作​​海贼王动漫商城​​ , 通过这些可以大概了解这部漫画的内容和他为何如此吸引人的原因 在漫画赏析中我们可以大概看到一些漫画精选!

网页制作介绍(欢迎来到新世界,一起航海吧!)

关于海贼王动漫的HTML网页制作,,​​大作业A+水平​​!!主要特色:京东首页仿制作海贼王动漫HTML网页制作~

作为第一次遇到html期末大作业,熬夜了好几天才做了个大概所以想纪念一下,使用​​京东首页仿制作海贼王动漫HTML网页制作​​,很好看。

作品(动态效果)演示

作品(静态效果)演示

HTML期末大作业~仿京东首页制作海贼王动漫HTML网页(HTML+CSS+JavaScript)_仿京东商城HTML_02

HTML期末大作业~仿京东首页制作海贼王动漫HTML网页(HTML+CSS+JavaScript)_动漫静态网页HTML_03

HTML期末大作业~仿京东首页制作海贼王动漫HTML网页(HTML+CSS+JavaScript)_仿京东制作海贼王HTML_04

文件目录

HTML期末大作业~仿京东首页制作海贼王动漫HTML网页(HTML+CSS+JavaScript)_仿京东商城HTML_05

代码实现

一、情怀墙结构实现

HTML结构

主要知识点:浮动&定位&布局

<!-- 情怀墙模块 -->
<div class="w mosion">

<div class="hd">
<div class="left">情怀墙</div>
<div class="right"><a>我要投稿</a></div>
</div>
<div class="bd">
<img class="img2" src="./img/举手.png"></img>
<p>&nbsp;&nbsp;&nbsp;有一部动漫,让我热血沸腾;有一部动漫,让我悄然泪下;有一部动漫,让我义愤填膺……是的,那是海贼王的旗帜在飞扬;看吧,那是大海的怒狂;听吧,大海的战歌在回荡;咆哮吧!无畏的海贼王!</p>
<img src="./img/海贼王.png" alt="">
</div>
</div>

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格式的图片和一段文字,通过定位让他们位于合适的位置

效果

HTML期末大作业~仿京东首页制作海贼王动漫HTML网页(HTML+CSS+JavaScript)_仿京东商城HTML_06

二、侧边栏

主要知识点:固定定位

固定定位详解:

1.代码:position:fixed;+边偏移

2.特点: 他的父元素就是浏览器,以浏览器的可视窗口为参照点移动,不随滚动条滚动脱标,不再占有原来的位置

3.缺点:当浏览器缩放后,加了固定定位的元素还是就在那个位置

HTML和CSS代码

<!-- 侧边栏 -->
<div class="aside">
<img src="./img/探头.png" alt="">
</div>
/* 侧边栏 */
.aside {
position: fixed;
top: 180px;
left: 30px;
}

效果(注意紫色框框)

HTML期末大作业~仿京东首页制作海贼王动漫HTML网页(HTML+CSS+JavaScript)_Javascript期末大作业_07

滑动滚动条后

HTML期末大作业~仿京东首页制作海贼王动漫HTML网页(HTML+CSS+JavaScript)_Javascript期末大作业_08

这样就有一种图片随着网页动而动的效果了

仿京东静态网站制作最终效果

三、做好的网页效果,如何通过发链接给别人看?

1.1解决部署上线~> 部署上线工具(永久免费使用)

1.不需要买服务器就能部署线上,全世界都能访问你的连接啦, 这里给大家推荐一个程序员必备神器~

插件集成了超级多好用的插件,免费下载安装,简单易懂, 简直神器 ~ 需要可在文章 ↓ 下方公Z号获取

2.就是把你的代码效果做好了以后, 部署到线上, 把链接发给别人, 就可以让对方通过你的连接点击进去, 就能看到你的网页效果啦, 电脑端和手机端都可以噢! (不然别人看你的网页都要发文件过去,体验感不太好哦~)

1.1部署流程

HTML期末大作业~仿京东首页制作海贼王动漫HTML网页(HTML+CSS+JavaScript)_动漫静态网页HTML_09

1.2 哇~ 部署成功

哇~ 部署成功! 将你写好的页面部署上线后, 全世界的人都可以通过链接访问到你的网页了(永久免费使用哦)~

HTML期末大作业~仿京东首页制作海贼王动漫HTML网页(HTML+CSS+JavaScript)_仿京东制作海贼王HTML_10

四、前端 零基础入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)

适合入门到高级的童鞋们入手~

HTML期末大作业~仿京东首页制作海贼王动漫HTML网页(HTML+CSS+JavaScript)_Javascript期末大作业_11

五、源码获取

❉ ~ 关注我,点赞博文~ 每天带你涨知识!

❉ 1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。

❉ 2.关注我~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者,一起探讨 前端 Node 知识,互相学习」!

❉ 3.以上内容技术相关问题可以相互学习,可关注↓公Z号 获取更多源码 !

HTML期末大作业~仿京东首页制作海贼王动漫HTML网页(HTML+CSS+JavaScript)_动漫静态网页HTML_12

六、更多HTML期末学生作业文章

​​1.HTML期末学生结课大作业~html+css+javascript仿叮当电影在线网站(功能齐全)​​

​​2.HTML期末学生作业~html+css+javascript仿猫眼电影在线网站(功能齐全)​​

​​3.HTML期末学生大作业(9套)html+css+javascript仿京东、天猫、服装、各大电商模板(大学毕业设计)​​

​​4.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款表白源码演示地址​​



举报

相关推荐

0 条评论