关于动漫的HTML网页设计作业——动漫网页(刀剑神域6个页面)
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适的模板?等等一系列问题。你想要解决的问题,在这篇博文中基本都能满足你的需求~
原始HTML+CSS+JS页面设计, web大学生网页设计作业源码,这是一个不错的网页制作,画面精明,非常适合初学者学习使用。
作品介绍
1.网页作品简介方面
:日本动漫网页(6个页面)网站模板。喜欢的可以下载,文章页支持手机PC响应式布局。主要有:登录、注册、主页、动漫介绍、动漫列表 动漫时间表
等总共6个页面html下载。
2.网页作品编辑方面
:此作品为学生个人主页网页设计题材,代码为简单学生水平 html+css 布局制作,作品下载后可使用任意HTML编辑软件(例如:DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm
所有编辑器均可使用)
3.网页作品布局方面
:网页布局整体为LOGO、导航、主体内容布局。子页面多种布局,兴趣爱好内容使用图片列表布局,成绩页面插入了表格,联系我们使用图片对齐方式设置了左对齐。
4.网页作品技术方面
:使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。 首页制作了留言表单,同时简单使用JavaScript制作了表单判断(提交时表单不能为空)
文章目录
一、作品演示
1.首页
2. 日本动漫
3.动漫介绍
4.时间表
5.登录/注册
二、代码目录
三、代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<!-- jQuery -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
</head>
<style>
@media(max-width:768px) {
#carousel-id .item {
height: 300px;
}
}
.carousel .item img{
width: 100%;
}
.zhuces{
margin-top: 8px;
margin-right: 10px;
}
/* 国创,日本,电影 */
.row .col-lg-4 {
margin-top: 10px;
margin-bottom: 20px;
text-align: center;
border: 1px solid #ffffff;
background:rgb(198, 218, 233);
}
.img-circle {
margin-top: 20px;
}
/* 强势推荐作品 */
.in-anishe-text{
/* border: 2px solid rgb(27, 231, 27); */
text-align: center;
}
#gengduo{
float: right;
margin-right: 50px;
}
.in-anishe-text img {
width: 133px;
height: 200px;
display: block;
margin: 0px auto;
}
.mod-cover-list-mask {
position: relative;
left: 0px;
display: block;
width: 133px;
height: 22px;
background-color: rgba(0,0,0,0.6);
color: #fff;
text-align:center;
margin: 0px auto;
}
.mod-cover-list-text:hover{
color: #fff;
}
.h3{
margin-left: 20px;
font-weight:bolder;
color: rgb(27, 231, 27)
}
#row2{
background:rgb(198, 218, 233);
}
#tui{
border: 1px solid rgb(27, 231, 27);
}
/* 页脚 */
#foot{
width: 100%;
height: 200px;
background:rgb(18, 15, 22);
color: #fff;
line-height: 26px;
text-align: center;
padding-top: 50px;
margin-top: 3px;
}
#xiao{
margin-top: -15px;
}
#foot img{
width: 70px;
height: 70px;
margin: 3px;
}
</style>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="menu-nav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="images/小电视.jpg" id="xiao" alt="" style="width:100px;height:50px;" />
</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<!-- 首页标题 -->
<li><a class="active" href="index.html"><span class="glyphicon glyphicon-home" aria-hidden="true"></span>首页<span class="sr-only">(current)</span></a></li>
<li><a href="xingpanbiao.html"><span class="glyphicon glyphicon-time" aria-hidden="true"></span>新番时间表</a></li>
<li><a href="jiesao.html"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>动漫介绍</a></li