当前位置：首页 > news >正文

HTML5静态网页设计——柯南动漫主题html+css+设计报告 5页课程设计网页成品模版

news 2026/4/25 4:14:06

📂文章目录

一、📔网站题目

二、✍️网站描述

三、📚网站介绍

四、🌐网站演示

五、⚙️网站代码

🧱HTML结构代码

💒CSS样式代码

六、🔧完整源码下载

七、📣更多

一、📔网站题目

⭐ 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; }