📂文章目录
一、📔网站题目
⭐ HTML5静态网页设计 柯南 动漫主题html+css+设计报告 5页 课程设计 网页成品模版。
❤ 我的主页：【🚀获取更多优质源码】
❤ 更多源码：【🔥Web网页设计作业成品源码分享(持续更新)】
二、✍️网站描述
🏷️HTML5网页设计 大学生课程设计 海贼王动漫主题HTML+CSS静态页网页成品，其中包含：html文件5个、css文件1个、images图片16个。
其中标签用到了：div、p、h1、a、img、form、input等标签。
其中5个网页包含：柯南首页、剧情简介页、人物简介页、播出信息页、影迷留言页。
三、📚网站介绍
📔网站布局：采用DIV+CSS进行网页布局，兼容各大浏览器保证可以正常展示；
📘网站素材：图片均采自网络素材，符合了页面主题规范；
📒网站文件：其中HTML是网页的结构、CSS是网页的样式、JS是页面的动态效果；
📙网页编辑：如(DW、HBuilder、NotePAD、VScode、Sublime、Webstorm、Text、Notepad++)都可修改代码。
四、🌐网站演示
五、⚙️网站代码
🧱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="container">
<div class="wrapper">
<div class="header">
<a href="index.html"><img src="images/header.jpg"/></a>
</div>
<div class="nav">
<a href="index.html">柯南首页</a>
<a href="view1.html">剧情简介</a>
<a href="view2.html">人物简介</a>
<a href="view3.html">播出信息</a>
<a href="view4.html">影迷留言</a>
</div>
<div class="main">
<div class="focus">
<a href="view1.html"><img src="images/focus1.jpg"/></a>
</div>
<div class="line">
<a href="view1.html"><img src="images/view1.jpg"/></a>
<h3><a href="view1.html">剧情简介</a></h3>
<p><a href="view1.html">高中生侦探工藤新一是全国著名的高中生侦探，和青梅竹马的同学毛利兰一同去游乐园玩的时候，目击了黑衣男子的可疑交易现场。只顾偷看交易的工藤新一，却忽略了从背后接近的另一名同伙，不幸被团伙成员发现，击晕后喂了神奇的药水，工藤新一变回了小孩！新一找到了经常帮助他的阿笠博士，博士为他度身打造不少间谍武器。如果让那些家伙知道工藤新一还活着的话，不仅性命难保，还会危及身边的人。为了防止犯罪团伙对他进行报复，在阿笠博士的建议下新一决定隐姓埋名，暗中追查他们，希望能得到解药。一日，新一的女友毛利兰来到了阿笠博士的家寻找男友的下落，被小兰撞见的新一情急之下编造了自己名叫江户川柯南，为了搜集那些家伙的情报，随后柯南寄住在父亲以侦探为业的小兰家。为了揭露那些家伙的真面目，小小侦探江户川柯南开始大显身手！</a></p>
</div>
<div class="item">
<a href="view2.html"><img src="images/view2.1.jpg"/></a>
<h3><a href="view2.html">江户川柯南</a></h3>
<p><a href="view2.html">江户川柯南外表看似小孩，其真实身份是高中生侦探——工藤新一。和青梅竹马的同学毛利兰一起去游乐园玩，目击到黑衣男子的可疑交易现场，被灌下开发中的药物，变成了小学生的身体。那天以后，为了隐藏真实身份，化名江户川柯南，在青梅竹马的毛利兰家寄住的同时，解决了许多案件。一切都是为了恢复自己的身体。在阿笠博士的提议下，寄住于小兰的父亲毛利小五郎家中，解决各种案件的同时秘密调查黑衣组织。</a></p>
</div>
<div class="item">
<a href="view2.html"><img src="images/view2.2.jpg"/></a>
<h3><a href="view2.html">工藤新一</a></h3>
<p><a href="view2.html">工藤新一崇拜夏洛克·福尔摩斯的高中生侦探。5月4日出生，17岁。帝丹高中2年级B班。特长是足球，头脑清醒出众。和青梅竹马的小兰一起去游乐园时，遇到了黑衣男子的交易现场，被组织灌下正在开发中的毒药“APTX4869”，此后，就断开了联系。还是高中1年级学生的时候和目暮警官等人相识。之后寻求阿笠博士的帮助，在阿笠博士的提议下，寄住于小兰的父亲、私家侦探毛利小五郎家中，秘密调查黑衣组织。</a></p>
</div>
<div class="list">
<a href="view3.html"><img src="images/view3.jpg"/></a>
<h3><a href="view3.html">播出信息</a></h3>
<p><a href="view3.html">当地时间1996年1月8日19:30，该片在读卖电视台首播。2003年起，该片以“返场特别篇”和“数字修复特别版”的形式，每年重播多集曾播出过的剧集。第11集重播时，还一同播出了青山刚昌的采访影像。2008年10月20日起，读卖电视台开播了“动画☆7”版块，该版块内播出的节目仍旧是《小双侠》和《名侦探柯南》，但不局限于已有的2个30分钟节目的框架。同日起，读卖电视台连续3周播出《名侦探柯南》1小时特别篇。2009年4月4日起，该片播出时间移动至当地时间每周六18时。2014年起，电视播出的字幕形式作了更改。2016年1月9日、16日，该片于当地时间17:30播出新年特别篇《柯南与海老藏歌舞伎十八番之谜》。当地时间2019年1月5日、12日17:30，该片播出特别篇《红色的修学旅行》。</a></p>
</div>
</div>
<div class="footer">
Copyright @ 2021 conan.com All Rights Reserved. 柯南网 版权所有
</div>
</div>
</div>
</body>
</html>💒CSS样式代码
@charset "utf-8";
*{margin:0;padding:0;box-sizing:border-box;
}
html body{font-size:12px;font-family:"Microsoft YaHei";color:#333;
}
a{color:#666;text-decoration:none;cursor:pointer;
}
a:hover{color:#2b7acd;
}
.container{float:left;width:100%;background-image:url(../images/background.jpg);
}
.wrapper{width:1000px;margin:0 auto;overflow:hidden;
}
.header{float:left;width:1000px;
}
.header img{float:left;width:1000px;
}
.nav{float:left;width:1000px;height:40px;line-height:40px;font-size:14px;font-weight:bold;background-color:#2b7acd;
}
.nav a{margin:0 145px 0 20px;color:#fff;
}
.nav a:nth-last-child(1){margin-right:0;
}
.main{float:left;width:1000px;padding-bottom:20px;background-color:#fff;
}
.focus{float:left;width:960px;height:380px;margin:20px 0 15px 20px;
}
.focus img{float:left;width:960px;height:380px;
}
.line{float:left;width:960px;margin:15px 0 0 20px;
}
.line img{float:left;width:400px;margin-top:5px;
}
.line h3{float:right;width:530px;height:30px;line-height:30px;font-size:16px;
}
.line p{float:right;width:530px;line-height:25px;
}
.item{float:left;width:470px;margin:30px 0 0 20px;
}
.item img{float:left;width:220px;height:310px;margin-top:5px;border:1px solid #f1f1f1;
}
.item h3{float:right;width:230px;height:30px;line-height:30px;margin-top:5px;font-size:16px;
}
.item p{float:right;width:230px;line-height:27px;
}
.list{float:left;width:960px;margin:30px 0 10px 20px;
}
.list h3{float:left;width:530px;height:30px;line-height:30px;font-size:16px;
}
.list p{float:left;width:530px;line-height:25px;
}
.list img{float:right;width:400px;margin-top:5px;
}
.text{float:left;width:1000px;padding-bottom:10px;
}
.text h2{float:left;width:1000px;height:30px;line-height:30px;margin-top:20px;font-size:16px;font-weight:bold;color:#2b7acd;text-align:center;
}
.text img{float:left;width:900px;margin:20px 0 10px 50px;
}
.text p{float:left;width:900px;line-height:27px;margin-left:50px;font-size:13px;text-indent:25px;
}
.person{float:left;width:1000px;padding-bottom:10px;
}
.person h2{float:left;width:1000px;height:30px;line-height:30px;margin-top:20px;font-size:16px;color:#2b7acd;text-align:center;
}
.person article{float:left;width:470px;margin:20px 0 0 20px;
}
.person article img{float:left;width:120px;height:170px;margin:18px 0 0 20px;border:1px solid #f1f1f1;
}
.person article h3{float:left;width:290px;height:25px;line-height:25px;margin:15px 0 0 20px;
}
.person article p{float:left;width:290px;line-height:25px;margin-left:20px;
}
.into{float:left;width:1000px;padding-bottom:30px;
}
.into form{float:left;margin:100px 0;
}
.into p{float:left;width:990px;
}
.into p span{float:left;width:300px;height:65px;line-height:65px;font-size:14px;text-align:right;
}
.into p input{float:left;width:330px;height:35px;margin:15px 0 0 20px;
}
.into p input.submit{color:#FFF;letter-spacing:3px;background-color:#2b7acd;border:0;
}
.into p textarea{float:left;width:330px;height:260px;line-height:35px;margin:15px 0 10px 20px;
}
.footer{float:left;width:1000px;height:80px;line-height:80px;color:#fff;text-align:center;background-color:#2b7acd;
}六、🔧完整源码下载
七、📣更多
👉🏻文章推荐：【修改文件修改日期为最新】
👉🏻文章推荐：【Web网页设计作业成品源码分享(持续更新)】
👉🏻关注我，获取更多源码~
👉🏻html网页设计、web前后端网站制作、大学生网页设计作业、个人网站制作、jQuery网站设计、uniapp小程序、vue网站设计、node.js网站设计、网页成品模板、期末大作业，各种设计应有尽有，持续更新中..
👉🏻如果我的文章对您有帮助，请“👍点赞”“✍️评论”“💗收藏” 一键三连哦！
扫一扫
2706
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
