HTML网页设计制作大作业-制作漫画网页设计6个页面(HTML+CSS+JavaScript)

置顶

@码出未来-web网页设计

已于 2024-06-08 11:07:28 修改

阅读量3.4w

点赞数 107

分类专栏：学生网页设置作业源码HTML Html+Css+JavaScript HTML期末大作业文章标签： HTML动漫网站设计 HTML期末大作业 HTML网页设计制作大作业 javascript期末作业漫画动画html

于 2021-06-22 15:36:50 首次发布

本文链接：https://blog.csdn.net/ruan365392777/article/details/118108129

版权

🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业：【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码：【🔰 Echarts大屏展示大数据平台可视化(150套) 】
🔖 HTML+CSS+JS实例代码：【🗂️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新中…】
🎁 免费且实用的WEB前端学习指南：【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 曾于2016年、2020年两度荣获CSDN年度十大博客之星。十载寒冰，难凉热血；多年过去，历经变迁，物是人非。然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！

HTML期末大作业~制作简单漫画网页设计6个页面(HTML+CSS+JavaScript)

学生动漫网页设计模板下载海贼王大学生HTML网页制作作品简单漫画网页设计成品 dreamweaver学生网站模板

HTML网页设计制作大作业-供包含注册登录首页动漫电影日本动漫国产动漫 OVA版排行榜等 8个页面

网页制作介绍

关于动漫的HTML网页制作，，HTML期末作业大作业A+水平！！主要特色：附带音效，8个网页8个风格。每个都有不同的美感~
随着动漫产业，动漫文化的不断发展，动漫已经从过去的低年龄层向全民动漫方向发展，
动漫产业链逐步完善，喜欢动漫的爱好者越来越多。当然市场需求量也在不断增长，越来越多的动漫爱好者在这一领域能希望得到更多动漫资源，获得更多的一些能满足他们各种爱好的资源集中地，而画漫翩翩网则包含了动漫和动漫论坛，满足了广大动漫迷的需求，逐渐形成了动漫一种文化特色存在。

心得体会

作为第一次遇到HTML期末大作业，熬夜了好几天才做了个大概所以想纪念一下，模仿的是初音动漫，二次元风格，很好看。

作品展示

动态效果展示

在这里插入图片描述

静态效果展示

注册

在这里插入图片描述

首页

在这里插入图片描述

动漫电影

在这里插入图片描述

文件目录

在这里插入图片描述

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=yes" />
		<title>初樱动漫</title>
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/index_style.css" />
		<!-- 添加js轮播样式 -->
		<style>
			.addWrap{
      position:relative; width:100%;background:#fff;margin:0; padding:0;}
			.addWrap .swipe{
     overflow: hidden;visibility: hidden;position:relative;}
			.addWrap .swipe-wrap{
     overflow:hidden;position:relative;}
			.addWrap .swipe-wrap > div {
     float: left;width: 100%;position:relative;}
			
			#position{
      position:absolute; bottom:0; right:0; padding-right:8px; margin:0; background:#000; opacity: 0.4; width:100%; filter: alpha(opacity=50);text-align:right;}
			#position li{
     width:10px;height:10px;margin:0 2px;display:inline-block;-webkit-border-radius:5px;border-radius:5px;background-color:#AFAFAF;}
			#position li.cur{
     background-color:#FF0000;}
			.img-responsive {
      display: block;}
		</style>
	<body>
		<div id="contain">
			<!-- 全局 -->
			<div id="top">
				<!-- 头部 -->
				<a>
					<div id="logo">
						<!-- logo图片 -->
						<!-- <a href="#"><img class="logo" src="img/logo.png"></a> -->
					</div>
				</a>
				<div id="search">
					<!-- 搜索框 -->
					<input type="search" id="search_width" class="search" required="" placeholder="Search">
					<input type="button" id="search_button" class="search" value="搜 索" />
				</div>
				<div id="login">
					<!-- 登录 -->
					<!-- 注册 -->
					<a href="login.html"><input type="button" class="login" value="登 录" /></a>&nbsp;&nbsp;
					<a href="register.html"><input type="button" class="login" value