1500字范文 > 大学生HTML+CSS动漫主题网页制作——刀剑神域(6页) dreamweaver作业静态HTML网页设计

大学生HTML+CSS动漫主题网页制作——刀剑神域(6页) dreamweaver作业静态HTML网页设计

时间：2022-01-21 13:49:15

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

⚽精彩专栏推荐👇🏻👇🏻👇🏻

❤ 【作者主页——🔥获取更多优质源码】

❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】

文章目录🌰

一、网页介绍📖一、网页效果🌌二、代码展示😈1.HTML代码结构 🧱2.CSS样式代码 🏠 三、个人总结😊四、更多干货🚀

一、网页介绍📖

1网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。

2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。

3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。

一、网页效果🌌

二、代码展示😈

1.HTML代码结构 🧱

代码如下（示例）：以下仅展示部分代码供参考~

<!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><link rel="stylesheet" href="/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"crossorigin="anonymous"><script src="/jquery/3.3.1/jquery.js"></script><script src="/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"crossorigin="anonymous"></script></head><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><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-expand" aria-hidden="true"></span>番剧<span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">番剧分类</a></li><li><a href="#">连载动画</a></li><li><a href="#">完结动画</a></li><li><a href="#">番剧索引</a></li><li><a href="#">历史记录</a></li><li role="separator" class="divider"></li><li><a href="#">官方延伸</a></li></ul></li><li><a data-toggle="modal" href='#modal-id'><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>关于</a></li></ul><form class="navbar-form navbar-left"><div class="form-group"><input type="text" class="form-control" placeholder="Search"></div><button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>搜索</button></form><ul class="nav navbar-nav navbar-right"><li><a href="denglu.html">登录</a></li><button type="注册" class="btn btn-default zhuces"><a href="zhuce.html">注册</a></button></ul> </div></div></nav><hr><div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><ol class="carousel-indicators"><li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-target="#carousel-example-generic" data-slide-to="2"></li><li data-target="#carousel-example-generic" data-slide-to="3"></li><li data-target="#carousel-example-generic" data-slide-to="4"></li></ol><div class="carousel-inner" role="listbox"><div class="item active"><img src="images/刀剑.jpg" alt="刀剑神域3"><div class="carousel-caption"><h1>刀剑神域3</h1></div></div><div class="item"><img src="images/盾.jpg" alt="盾"><div class="carousel-caption"><h1>盾之勇者成名录</h1></div></div><div class="item"><img src="images/进击的巨人3.JPG" alt="进击的巨人3"><div class="carousel-caption"><h1>进击的巨人3</h1></div></div><div class="item"><img src="images/魔法禁书目录3.jpg" alt="魔法禁书目录3"><div class="carousel-caption"><h1>魔法禁书目录3</h1></div></div><div class="item"><img src="images/妖神记之影妖篇.jpg" alt="妖神记之影妖篇"><div class="carousel-caption"><h1>妖神记之影妖篇</h1></div></div></div><a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div><hr><div id="row1" class="row"><div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"><img class="img-circle" src="images/国创.png" alt="Generic placeholder image" width="140" height="140"><h2>国创动漫</h2><p><a class="btn btn-success" href="guochan.html" role="button">点击进入 »</a></p></div><div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"><img class="img-circle" src="images/日本.jpg" alt="Generic placeholder image" width="140" height="140"><h2>日本动漫</h2><p><a class="btn btn-success" href="riben.html" role="button">点击进入 »</a></p></div><div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"><img class="img-circle" src="images/timg.jpg" alt="Generic placeholder image" width="140" height="140"><h2>动漫电影</h2><p><a class="btn btn-success" href="dianying.html" role="button">点击进入 »</a></p></div></div><div class="row" id="row2"><h3 class="h3">强势推鉴作品<a id="gengduo" class="btn btn-success btn-sm" href="#" role="button">更多 »</a></h3><div class="col-xs-4 col-sm-4 col-md-4 col-lg-2" id="tui"><div class="in-anishe-text"><img alt="刀剑神域" src="images/刀剑3.png"><a target="_blank" href="#" class="mod-cover-list-mask" title="刀剑神域"><span class="mod-cover-list-text">更新至14话</span></a><h5><a target="_blank" href="#" class="mod-cover-list-name">刀剑神域3</a></h5><p><a class="btn btn-info btn-xs" href="#" role="button">点击播放 »</a></p><p><a target="_blank" href="#" class="mod-tag-item">热血</a><a target="_blank" href="#" class="mod-tag-item">日本</a></p></div></div><div class="col-xs-4 col-sm-4 col-md-4 col-lg-2" id="tui"><div class="in-anishe-text"><img alt="斗罗大陆" src="images/斗罗大陆.jpg"><a target="_blank" href="#" class="mod-cover-list-mask" title="斗罗大陆"><span class="mod-cover-list-text">更新至32话</span></a><h5><a target="_blank" href="#" class="mod-cover-list-name">斗罗大陆3</a></h5><p><a class="btn btn-info btn-xs" href="#" role="button">点击播放 »</a></p><p><a target="_blank" href="#" class="mod-tag-item">热血</a><a target="_blank" href="#" class="mod-tag-item">中国</a></p></div></div><div class="col-xs-4 col-sm-4 col-md-4 col-lg-2" id="tui"><div class="in-anishe-text"><img alt="妖神记" src="images/妖神记推荐.jpg"><a target="_blank" href="#" class="mod-cover-list-mask" title="妖神记"><span class="mod-cover-list-text">更新至113话</span></a><h5><a target="_blank" href="#" class="mod-cover-list-name">妖神记之影妖篇</a></h5><p><a class="btn btn-info btn-xs" href="#" role="button">点击播放 »</a></p><p><a target="_blank" href="#" class="mod-tag-item">热血</a><a target="_blank" href="#" class="mod-tag-item">中国</a></p></div></div><div class="col-xs-4 col-sm-4 col-md-4 col-lg-2" id="tui"><div class="in-anishe-text"><img alt="工作细胞" src="images/工作细胞.jpg"><a target="_blank" href="#" class="mod-cover-list-mask" title="工作细胞"><span class="mod-cover-list-text">更新至14话</span></a><h5><a target="_blank" href="#" class="mod-cover-list-name">工作细胞</a></h5><p><a class="btn btn-info btn-xs" href="#" role="button">点击播放 »</a></p><p><a target="_blank" href="#" class="mod-tag-item">日常搞笑</a><a target="_blank" href="#" class="mod-tag-item">日本</a></p></div></div><div class="col-xs-4 col-sm-4 col-md-4 col-lg-2" id="tui"><div class="in-anishe-text"><img alt="斩兽之刃" src="images/斩兽之刃.jpg"><a target="_blank" href="#" class="mod-cover-list-mask" title="斩兽之刃"><span class="mod-cover-list-text">更新至4话</span></a><h5><a target="_blank" href="#" class="mod-cover-list-name">斩兽之刃</a></h5><p><a class="btn btn-info btn-xs" href="#" role="button">点击播放 »</a></p><p><a target="_blank" href="#" class="mod-tag-item">战斗奇幻</a><a target="_blank" href="#" class="mod-tag-item">中国</a></p></div></div><div class="col-xs-4 col-sm-4 col-md-4 col-lg-2" id="tui"><div class="in-anishe-text"><img alt="fate系列" src="images/FATE.jpg"><a target="_blank" href="#" class="mod-cover-list-mask" title="fate系列"><span class="mod-cover-list-text">连载中</span></a><h5><a target="_blank" href="#" class="mod-cover-list-name">fate系列</a></h5><p><a class="btn btn-info btn-xs" href="#" role="button">点击播放 »</a></p><p><a target="_blank" href="#" class="mod-tag-item">热血战斗奇幻</a><a target="_blank" href="#" class="mod-tag-item">日本</a></p></div></div> </div><hr width="980px"><div id="foot"><img src="images/二维码.jpg" alt="微信二维码" /><img src="images/收款码.png" alt="微信收款码" /><p>Copyright©-2050 DONGMANZIJIAcom,CAIJIAHAN ALL right reserved.</p><p>-2040,版权所有 85CP 备 </p></div><div class="modal fade" id="modal-id"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h4 class="modal-title">关于</h4></div><div class="modal-body"><p>本网站隶属于广东环境保护工程职业学院机电工程系。<br>版权所有归属于，是一个从事互联网网站开发的爱好者。秉承“开拓、创新、积极向上、努力拼搏”的精神，将互联网网站特性以网站形式全面的展现出来，致力于为网站事业及爱好学者奉献出自己的力量。</p></div><div class="modal-footer"><button type="button" class="btn btn-success" data-dismiss="modal">了解了/关闭</button></div></div></div></div></body></html>

2.CSS样式代码 🏠

三、个人总结😊

一套合格的网页应该包含(具体可根据个人要求而定)

页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；所有页面相互超链接，可到三级页面，有5-10个页面组成；页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；菜单美观、醒目，二级菜单可正常弹出与跳转；要有JS特效，如定时切换和手动切换图片新闻；页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；页面清爽、美观、大方，不雷同。网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。