动漫主题dreamweaver作业静态HTML网页设计——仿京东(海贼王)版本
【摘要】 HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 精彩专栏推荐👇🏻👇🏻👇🏻👇🏻文末获取源码 ❤ 【作者主页——获取更多优质源码】 ❤ 【web前端期末大作业——毕设项目精品实战案例(1000套)】@...
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
精彩专栏推荐👇🏻👇🏻👇🏻👇🏻文末获取源码
❤ 【作者主页——获取更多优质源码】
❤ 【web前端期末大作业——毕设项目精品实战案例(1000套)】
@TOC
一、网页介绍
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。
2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。
一、网页效果
二、代码展示
1.HTML代码
代码如下（示例）：以下仅展示部分代码供参考~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新世界</title>
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="shootcut icon" href="./favicon .ico">
</head>
<body>
<!-- 快捷导航栏shortcut -->
<div class="shortcut">
<div class="cut">
<ul class="left">
<li>新世界欢迎您！ </li>
<li><a href="#">请登录 </a><a href="#" class="red">免费注册</a></li>
</ul>
<ul class="right">
<li>我的关注</li>
<li>|</li>
<li class="add">我的新世界</li>
<li>|</li>
<li>新世界会员</li>
<li>|</li>
<li>历史记录</li>
<li>|</li>
<li class="add">关注新世界</li>
<li>|</li>
<li class="add">售后服务</li>
<li>|</li>
<li class="add">网站导航</li>
</ul>
</div>
</div>
<!-- deader头部 -->
<div class="header">
<div class="logo">
<img src="./img/onepiece.png" alt="" width="286px" height="106px">
</div>
<p>欢迎来到新世界,一起航海吧!</p>
</div>
<!-- nav导航栏 -->
<div class="nav">
<div class="both">
<div class="dropdown">
<div class="dt">
<dt>导航</dt>
</div>
<div class="dd">
<dd><a href="#">原创服装</a></dd>
<dd><a href="#">海报、壁纸</a></dd>
<dd><a href="#">美妆、洗护</a></dd>
<dd><a href="#">订制、家具、家装</a></dd>
<dd><a href="#">男装、女装、童装</a></dd>
<dd><a href="#">化妆、宠物</a></dd>
<dd><a href="#">饰品、手表</a></dd>
<dd><a href="#">户外运动</a></dd>
<dd><a href="#">手办、玩具</a></dd>
<dd><a href="#">鞋靴、T恤</a></dd>
<dd><a href="#">医疗保健</a></dd>
<dd><a href="#">明信片、通缉令</a></dd>
<dd><a href="#">会员、漫画</a></dd>
<dd><a href="#">充值、票务</a></dd>
<dd><a href="#">众筹、应援</a></dd>
</div>
</div>
<div class="navitems">
<li><a href="#">简介</a></li>
<li><a href="#">服饰美妆</a></li>
<li><a href="#">海报壁纸</a></li>
<li><a href="#">手办</a></li>
<li><a href="#">应援物</a></li>
<li><a href="#">拍卖</a></li>
<li><a href="#">漫画</a></li>
</div>
</div>
</div>
<!-- 首页焦点图与快报模块focus&newsflash -->
<div class="w">
<div class="main">
<div class="focus">
<ul>
<li><img src="./img/大图.png" alt=""></li>
</ul>
<div class="dotted">
<li></li>
<li></li>
<li></li>
<li></li>
</div>
</div>
<div class="newsflash">
<li>
<h3>今日致敬</h3>
</li>
<p>再见了，</p>
<p>火拳艾斯。</p>
<img src="./img/艾斯致敬.png" alt="">
</div>
</div>
</div>
<div class="sec2">
<img src="./img/艾斯2.png" alt="">
<p>印花T恤+破洞牛仔裤休闲套装</p>
<span class="now">￥2449</span>
<span class="pass">￥2999</span>
<div></div>
<span class="one">已售</span>
<span class="red"><strong>75%</strong></span>
<div class="line">
<li></li>
</div>
<span class="one">剩余</span>
<span class="red"><strong>37%</strong></span>
<span class="one">件</span>
<div class="box">立即抢购</div>
</div>
<div class="sec3">
<img src="./img/艾斯3.png" alt="">
<p>印花T恤+拖地裤休闲套装</p>
<span class="now">￥2599</span>
<span class="pass">￥2999</span>
<div></div>
<span class="one">已售</span>
<span class="red"><strong>90%</strong></span>
<div class="line">
<li></li>
</div>
<span class="one">剩余</span>
<span class="red"><strong>19</strong></span>
<span class="one">件</span>
<div class="box">立即抢购</div>
</div>
<div class="sec4">
<img src="./img/艾斯4.png" alt="">
<p>运动风休闲套装</p>
<span class="now">￥2999</span>
<span class="pass">￥3499</span>
<div></div>
<span class="one">已售</span>
<span class="red"><strong>95%</strong></span>
<div class="line">
<li></li>
</div>
<span class="one">剩余</span>
<span class="red"><strong>5</strong></span>
<span class="one">件</span>
<div class="box">立即抢购</div>
</div>
</div>
</div>
<!-- 情怀墙模块 -->
<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> 有一部动漫，让我热血沸腾；有一部动漫，让我悄然泪下；有一部动漫，让我义愤填膺……是的，那是海贼王的旗帜在飞扬；看吧，那是大海的怒狂；听吧，大海的战歌在回荡；咆哮吧！无畏的海贼王！</p>
<img src="./img/海贼王.png" alt="">
</div>
</div>
<!-- 侧边栏 -->
<div class="aside">
<img src="./img/探头.png" alt="">
</div>
<!-- footer底部制作 -->
<div class="footer">
<div class="top w">
<div class="mod_service">
<div class="out1">
<div class="slogan"></div>
<div class="text">
<dt class="dt">正品保障</dt>
<dd class="dd">正品保障，提供发票</dd>
</div>
</div>
<div class="out2">
<div class="slogan"></div>
<div class="text">
<dt class="dt">极速物流</dt>
<dd class="dd">极速物流，极速发货</dd>
</div>
</div>
<div class="out3">
<div class="slogan"></div>
<div class="text">
<dt class="dt">无忧售后</dt>
<dd class="dd">7天无理由退换货</dd>
</div>
</div>
<div class="out4">
<div class="slogan"></div>
<div class="text">
<dt class="dt">特色服务</dt>
<dd class="dd">私人订制家电套餐</dd>
</div>
</div>
<div class="out5">
<div class="slogan"></div>
<div class="text">
<dt class="dt">帮助中心</dt>
<dd class="dd">您的购物指南</dd>
</div>
</div>
</div>
<div class="mod_help w">
<div class="sec1">
<dt class="dt">购物指南</dt>
<dd class="dd">购物流程</dd>
<dd class="dd">会员介绍 </dd>
<dd class="dd"> 生活旅行/团购</dd>
<dd class="dd"> 常见问题 </dd>
<dd class="dd"> 大家电 </dd>
<dd class="dd"> 联系客服</dd>
</div>
<div class="sec2">
<dt class="dt">配送方式</dt>
<dd class="dd">上门自提</dd>
<dd class="dd">211限时达 </dd>
<dd class="dd"> 配送服务咨询</dd>
<dd class="dd"> 配送费收取标准</dd>
<dd class="dd"> 海外配送 </dd>
</div>
<div class="sec3">
<dt class="dt">支付方式</dt>
<dd class="dd">货到付款</dd>
<dd class="dd">在线支付 </dd>
<dd class="dd"> 分期付款</dd>
<dd class="dd"> 邮局汇款 </dd>
<dd class="dd"> 公司转账</dd>
</div>
<div class="sec4">
<dt class="dt">售后服务</dt>
<dd class="dd">售后政策</dd>
<dd class="dd">价格保护 </dd>
<dd class="dd"> 退款说明</dd>
<dd class="dd"> 返修/退换货 </dd>
<dd class="dd"> 取消订单</dd>
</div>
<div class="sec5">
<dt class="dt">特色服务</dt>
<dd class="dd">夺宝岛</dd>
<dd class="dd">DIY装机 </dd>
<dd class="dd"> 延保服务</dd>
<dd class="dd"> 品优购E卡 </dd>
<dd class="dd"> 品优购通信</dd>
</div>
<div class="sec6">
<dt class="dt">帮助中心</dt>
<dd class="dd"><img src="./img/二维码.png" alt="" width="100px" height="100px"></dd>
</div>
</div>
<div class="mod_copyright">
<div class="part1">
<li>关于我们</li>
<li>|</li>
<li>联系我们</li>
<li>|</li>
<li>联系客服</li>
<li>|</li>
<li>商家入驻</li>
<li>|</li>
<li>营销中心</li>
<li>|</li>
<li>手机品优购</li>
<li>|</li>
<li>友情链接</li>
<li>|</li>
<li>销售联盟</li>
<li>|</li>
<li>品优购社区</li>
<li>|</li>
<li>品优购公益</li>
<li>|</li>
<li>English Site</li>
<li>|</li>
<li>Contact U</li>
</div>
<div class="part2">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn</div>
<div class="part3">京ICP备08001421号京公网安备110108007702</div>
</div>
</div>
</div>
</body>
</html>
2.CSS代码
/* 声明字体图标 注意更改路径 */
/* 快捷导航栏 */
.shortcut {
height: 31px;
line-height: 31px;
background-color: #f1f1f1;
}
.cut {
width: 1200px;
margin: 0 auto;
}
.cut .left {
float: left;
}
.cut .right {
float: right;
}
.cut li {
float: left;
font-size: 12px;
}
.red {
color: #c81623;
}
.cut ul li:nth-of-type(even) {
padding: 0 10px;
}
.cut .right .add::after {
content: '\e900';
font-family: 'icomoon';
margin-left: 5px;
}
/* 头部header */
.header {
height: 106px;
width: 1200px;
margin: 0 auto;
}
.header .logo img {
float: left;
}
.header p {
float: right;
font-family: '方正舒体';
font-size: 72px;
color: #c9021e;
}
/* nav导航栏 */
.nav {
height: 45px;
border-bottom: 2px solid #b1191a;
}
.nav .both {
height: 47px;
line-height: 47px;
width: 1200px;
margin: 0 auto;
}
.dropdown {
float: left;
width: 208px;
height: 512px;
background-color: #078ffc;
}
.dropdown .dt {
text-align: center;
font-size: 18px;
color: #fff;
}
.dropdown dd {
/* display: none; */
position: relative;
padding-left: 10px;
margin-left: 1px;
text-align: left;
line-height: 31px;
height: 31px;
background-color: #58affc;
}
.dropdown dd a {
color: #f1f1f1;
font-size: 14px;
}
.dropdown dd:hover {
background-color: #f1f1f1;
}
.dropdown dd:hover a {
color: #c81623;
}
.like .hd {
height: 40px;
}
.like .hd .left {
float: left;
font-size: 18px;
line-height: 40px;
}
.like .hd .right {
float: right;
line-height: 40px;
margin-right: 20px;
}
.like .hd .right img {
widows: 12px;
height: 12px;
}
.like .bd {
height: 240px;
border: 1px solid #ededed;
}
.like .bd li {
height: 240px;
width: 199px;
float: left;
}
.like .bd li .img {
width: 170px;
height: 140px;
text-align: center;
line-height: 140px;
margin-bottom: 5px;
}
.like .bd li .text {
position: relative;
width: 170px;
margin-left: 30px;
}
.like .bd li i {
color: #df3033;
font-size: 18px;
}
.like .text:nth-child(-n+5)::after {
content: '';
position: absolute;
bottom: 10px;
right: 5px;
width: 1px;
height: 45px;
background-color: #ddd;
}
/* 角色简介 */
.actor-help {
height: 1100px;
}
.actor {
height: 1100px;
}
.actor .hd {
height: 40px;
border-bottom: 1px solid #ededed;
}
.actor .hd .left {
float: left;
font-size: 18px;
line-height: 40px;
}
.actor .hd .right {
float: right;
line-height: 40px;
margin-right: 20px;
}
.actor .hd .right img {
widows: 12px;
height: 12px;
}
.actor .bd>div {
position: relative;
float: left;
width: 366px;
height: 328px;
margin-top: 1px;
margin-left: 25.5px;
margin-bottom: 30px;
border: 5px solid #000;
}
.actor .bd .sec1 .background {
position: absolute;
left: 50px;
bottom: 2px;
z-index: -1;
}
.actor .bd .sec3 .background {
position: absolute;
left: 200px;
top: 225px;
z-index: -2;
.mod_help .dd {
line-height: 22px;
}
.mod_copyright {
height: 135px;
text-align: center;
}
.mod_copyright .part1 {
height: 16px;
margin-top: 36px;
margin-bottom: 16px;
}
.mod_copyright .part1 li {
float: left;
padding-left: 20px;
}
.mod_copyright .part2 {
margin-bottom: 10px;
}
三、个人总结
一套合格的网页应该包含(具体可根据个人要求而定)
- 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
- 所有页面相互超链接，可到三级页面，有5-10个页面组成；
- 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
- 菜单美观、醒目，二级菜单可正常弹出与跳转；
- 要有JS特效，如定时切换和手动切换图片新闻；
- 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
- 页面清爽、美观、大方，不雷同。
- 网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
四、更多干货
1.看到这里了就 【点赞收藏博文】 三连支持下吧，你的支持是我创作的动力, 【观注作者 |获取更多源码| 优质文章】。
2.关注我带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
💂【获取方式】
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）