当前位置: 首页 > article >正文

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"> -->
http://www.lryc.cn/news/2420848.html

相关文章:

  • win8如何快速关闭135\445端口,预防onion永恒之蓝病毒
  • 与窗体及消息有关的API
  • SQLServer 连接字符串大全
  • nProtect GameGuard(簡稱GameGuard或GG,其驅動程序為GameMon.des)是由韓國INCA互聯網開發的遊戲反作弊軟體。
  • 获取树莓派4系统信息
  • GBK 编码
  • 地心一号-基于STM8的超迷你自平衡小车-DIY套件
  • ARPU与ARPPU 的概念
  • 物联网实训Day2
  • information security -- 网络拓扑
  • 0基础学IT有有哪些步骤
  • 河南科技大学计算机科学与技术分数线,河南科技大学2020年录取分数线(附2017-2020年分数线)...
  • DLL文件 VC++Matlab混合编程( 调用DLL)
  • 使用VMware Workstation安装Windows10虚拟机(超详细,每一步都有)
  • 揭秘软文外链代发产业
  • 张驰课堂:六西格玛绿带培训证书的作用
  • 实战:小程序购物商城
  • Python]网络爬虫
  • app自动化测试面试题(含答案)
  • python开发的软件有哪些,python一般用来开发什么
  • linux下svn服务器搭建及使用
  • 百度地图api基本用法
  • 自己怎么搭建云存储服务器?
  • 228. Web前端网页制作 蓝色的wap手机旅游网页设计实例 大学生期末大作业 html+css+js
  • 华为性格测试挂的原因是什么?这局怎么破?
  • java接入秒嘀API实现发送短信功能
  • websocket在线测试网站
  • 主题设置_微信主题怎么设置皮肤?猫和老鼠微信主题皮肤链接入口
  • c语言运算符重载格式,运算符重载函数的两种形式
  • Java中随机数函数Random()详解+案例