HTML5动漫网页设计——少女漫画心(HTML+CSS+JavaScript+Bootstrap)
HTML5期末大作业:动漫网站设计——少女漫画心HTML+CSS+JavaScript+Bootstrap 动漫网页HTML代码 学生网页课程设计期末作业下载 大学生动漫网页设计成品
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适的模板?等等一系列问题。你想要解决的问题,在这篇博文中基本都能满足你的需求~
原始HTML+CSS+JS页面设计, web大学生网页设计作业源码,这是一个不错的网页制作,画面精明,非常适合初学者学习使用。
作品介绍
1.网页作品简介方面
:日语学习网站前端模板,采用HTML+CSS+JavaScript+Bootstrap响应式框架设计。 网站自带轮播图特效,背景荧光虫特效,点击打开课程后BGM自启动,带有搜索框及其他模块分栏选项。 网站具有响应式布局的媒体自适应功能,可同时在移动端和PC端进行预览。
2.网页作品编辑方面
:此作品为学生个人主页网页设计题材,代码为简单学生水平 html+css 布局制作,作品下载后可使用任意HTML编辑软件(例如:DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm
所有编辑器均可使用)
3.网页作品布局方面
:网页布局整体为LOGO、导航、主体内容布局。子页面多种布局,兴趣爱好内容使用图片列表布局,成绩页面插入了表格,联系我们使用图片对齐方式设置了左对齐。
4.网页作品技术方面
:使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。 首页制作了留言表单,同时简单使用JavaScript制作了表单判断(提交时表单不能为空)
文章目录
- HTML5期末大作业:动漫网站设计——少女漫画心HTML+CSS+JavaScript+Bootstrap 动漫网页HTML代码 学生网页课程设计期末作业下载 大学生动漫网页设计成品
- 作品介绍
- 一、作品演示
- 1.主页(含音乐+多背景切换)
- 2.趣味图文
- 二、代码目录
- 三、代码实现
- 四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)
- 五、源码获取
- 六、更多HTML期末大作业(成品下载)
- >>>戳我>>>点击进入200例期末大作业作品
一、作品演示
1.主页(含音乐+多背景切换)
2.趣味图文
二、代码目录
三、代码实现
<!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>日语学习</title><link rel="stylesheet" href="bootstrap-4.3.1-dist/css/bootstrap.min.css"><link rel="stylesheet" href="index.css"><script src="jquery/jquery.js"></script><style>#titleBigfont {/* font-weight: 600; *//* font-size: 28px; */font-family: "黑体";color: #8c888b;/* background: -webkit-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5); */background: -webkit-linear-gradient(45deg, #1df4ff, #ff844b, #ffdf3c, #8f74df, #78b0ff);-moz-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);-ms-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);color: transparent;/*设置字体颜色透明*/-webkit-background-clip: text;/*背景裁剪为文本形式*/animation: ran 10s linear infinite;/*动态10s展示*/}@keyframes ran {from {backgroud-position: 0 0;}to {background-position: 2000px 0;}}</style>
</head><body><nav class="navbar navbar-expand-lg navbar-light bg-dark"><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03"aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><a class="navbar-brand" style="color: #fff" href="#">日语学习</a><div class="collapse navbar-collapse" id="navbarTogglerDemo03"><ul class="layui-nav" style="background-color:#343a40!important" lay-filter=""><li class="layui-nav-item layui-this"><a href="">主页</a></li><li class="layui-nav-item"><a href="html/interesting.html">趣图趣文</a></li><li class="layui-nav-item"><a id="kok" href="javascript:;">更多</a><dl class="layui-nav-child"><!-- 二级菜单 --><dd><a href="html/culture.html">日本文化</a></dd><dd><a href="html/cartoon.html">动漫语录</a></dd><dd><a href="html/video.html">影视作品</a></dd></dl></li><!-- ()=>{document.getElementById('layerNotice').click()} --><li class="layui-nav-item"><a href="javascript:;" onclick="layuiNotice();">社区</a><div class="site-demo-button" id="layerNotice" style="margin-bottom: 0;"> <buttondata-method="notice" class="layui-btn">示范一个公告层</button></div></li><li class="layui-nav-item" style="margin-top:4px"><form class="form-inline my-2 my-lg-0 nav-form"><input class="form-control mr-sm-2" type="search" plabeholder="大人,您要搜什么(*╹▽╹*)"aria-label="Search"><button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button></form></li></ul></div></nav><!-- 背景满天星 --><div style="position:fixed;width: 100%;height:100%;top:0;z-index: -1"><div id="background" class="wall"></div><div id="midground" class="wall"></div><div id="foreground" class="wall"></div><div id="top" class="wall"></div></div><audio controls autoplay preload="metadata"><source src="asset/media/日语动漫 - Illusionary Daytime.mp3"></audio><!-- 主体开始 --><div class="container"><!-- <div class="row" id="line01"> -->