【网页设计】期末大作业html+css（动漫网站）
一、网站题目
在校园范畴之内，针对篮球相关网页实施的设计工作、足球这一体育运动领域、体育范畴里的游泳运功分部方面、之于乒乓球项目呀、关于网球门类呀，以及其他同等之网站的设计和制作事宜 。
二、️网站描述
大学学生的关于校园运动之静态HTML网页设计作品，是借助DIV CSS布局予以制作的，其内容涵盖校园运动，还有运动技巧、运动规则、技术规则以及经典动作，页面主体内容区域的宽度是1200PX，网页整体运用CSS设置了网页背景图片，页面精美且包含多个排版布局，是按照学生网页作业水平来制作的。
一套优质的网页设计应该包含 (具体可根据个人要求而定)
页面被划分成四大部分，分别是页头爱游体育app下载官网，菜单导航栏也就是最好可以具备下拉功能的部分，中间内容板块，以及页脚 。所有的页面彼此之间是相互超链接的状态，能够抵达三级页面 ，此页面由5到10个页面共同构成 。页面的样式风格呈现出统一布局且显示正常，不会出现错乱的情形 ，运用的是Div+Css技术 。菜单不仅美观而且醒目，二级菜单能够正常弹出并且进行跳转 。还要拥有JS特效，像是定时切换以及手动切换图片轮播之类的 。页面当中存在多媒体元素，像gif、视频、还有音乐，并且要有表单技术的运用 。页面要实现清爽、美观、大方的效果，可以做到不雷同 。不仅得能将用户所需要求之内容予以展现，还得达成布局优良、界面好看、配色雅致、表现模样多多等要求，三、网站讲述。
针对网站布局这一方面，有着这样的计划，这项计划打算采用当下被视为主流的，具备能够兼容各个不同主流浏览器能力的，且其显示效果稳固稳定的浮动网页布局架构形式。
网站程序这块，打算使用当下最为崭新的网页编程语言 HTML5 ，加入另一个 CSS3程序语言 ，再有 JavaScript这样的程序语言去达成网站的功能设计。并且一定要保证网站代码与目前市面上全部主流浏览器都具备兼容性 ，借以达到一经打开就立刻能够看到网站呈现的效果 。
从网站素材这一块说起：打算去搜罗源自各大平台的、具有观赏美感的图片素材，从中万分仔细地挑选跟页面风格相合适的图片，继而动用PS创作出契合网页尺寸要求的图片。
说起网站文件这一块儿，网站系统文件所涵盖的种类有、html制作网页结构的文件，存在css体现网页样式的文件，蕴含js实现网页特效的文件，有着images展示网页图片的文件 。
在网页编辑范畴内，网页作品代码具备简洁的特性，能够运用随便一款针对 HTML 的编辑软件，像 Dreamweaver 或者 HBuilder，还有 Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等当中的任意一款 html 编辑软件，来开展运行以及修改编辑之类的操作。其中，（1）html文件有所包含，其中index.html属于首页，其他html是二级页面；（2）css文件存有，ess关联全部页面样式，并有文字滚动，和图片放大表现等；（3）js 文件涉及，运用 j实现s动态轮播特效，进行表单提交，且会发出 clicks 点击事件等等，个别网页还会应实际情况去予以运用。
四、网站演示
五、️ 网站代码HTML结构代码
HTML>
<html>
<head>
<meta charset="utf-8">
<title>守望先锋title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
head>
<body>
<div class="top">
<a href="index.html"><img src="images/logo.jpg" />a>
div>
<div class="daohang">
<div id="nav">
<ul>
<li><a href="index.html">首页a>li>
<li><a href="jianjie.html">守望简介a>li>
<li><a href="yingxiong.html">经典英雄a>li>
<li><a href="lianxi.html">联系我们a>li>
<li><a href="huiyuan.html">会员登录a>li>
ul>
div>
div>
<div class="banner">
<img src="images/banner.jpg" alt="">
div>
<div class="main">
<div class="sleft">
<div class="stitle">
<p>守望先锋简介p>
div>
<img src="images/left-img.jpg" />
div>
<div class="sright">
<div class="sbox1">
<div class="wen">
<h1>游戏背景h1>
<p> 在21世纪20年代刚开始的时候，人类设计出那种由人工智能创造出来的智能机械，也就是简称为智械的东西。这种智械存在的目标是加强生产以及创造世界经济繁荣。可是呢，令人难以相信的状况发生了，智械变得满怀恶意，还开始大规模生产那种军用机器人，企图去毁灭人类。各个国家的政府没办法阻止聪明机械掀起的进攻，于是联合国创立了一个国际维和组织，以便反抗智能机械。那个聚集了全世界范围内最优秀、最精英的组织被称作"守望先锋"，它将会围绕着机器人军队展开一场实力并不对等的争斗。p>
div>
<img src="images/ri01.jpg" />
div>
<div class="sbox2">
<img src="images/ri02.jpg" />
<div class="wen">
<h1>物品道具h1>
<p>跟着玩家持续达成一场接一场的赛事竞赛，不管是获胜利还是遭失败，玩家都会斩获经验数值进而得到技能等级提升。每一回技能等级提升以后，玩家均可获取一份补充给养之品类，这其中涵盖最多4件视觉外观装饰道具或者游戏内部流通货币，物品质量特性被划分成白色、蓝色、紫色和金色这四类。当玩家实现了某些专用特殊成就之后会得到成就点数以及专用特殊性质的成就徽章标签表征 。玩家能够在成就展示页面察看玩家的成就以及身份性质特性徽章信息内容，与此同时还能够知晓玩家自身的游玩行事方法以及职业技能水准程度 。这些成就，玩家能借助主菜单里的浏览生涯概况选项，跟玩家的朋友去分享，特殊的成就，是用来解锁特定物品的。p>
div>
div>
div>
div>
<div class="bottom">
<div class=" daoh">
<ul>
<li><a href="index.html">首页a>li>
<li><a href="jianjie.html">守望简介a>li>
<li><a href="yingxiong.html">经典英雄a>li>
<li><a href="lianxi.html">联系我们a>li>
<li><a href="huiyuan.html">会员登录a>li>
ul>
div>
<img src="images/logo2.jpg" />
div>
body>
html>
CSS样式代码
@charset "utf-8";
/* CSS Document */
body {
margin: 0 auto;
font-size: 12px;
font-family: "宋体",arial;
line-height: 22px;
}
div,p,input,ul,li,h1,h2,h3,h4,h5,h6,dl,dt,dd {
height: auto;
margin: 0;
; padding: 0;
vertical-align: middle;
}
li {
list-style: none;
}
.a2 {
width: 100px;
margin-left: 5px;
padding: 2px;
background: #ccc
}
.error {
background: #ccc url(../images/error.gif) no-repeat;
padding-left: 25px;
padding-right: 3px
}
.righta {
background: #ccc url(../images/righta.gif) no-repeat;
padding-left: 25px;
padding-right: 3px
}
.btn {
background: #ffb72f;
width: 50px;
border: none;
padding: 3px;
color: #fff;
}
/*---bottom结束-----*/
.bottom {
width: 1366px;
margin: 0 auto;
margin-top: 20px;
height: 143px;
background: #000000;
}
.bottom img {
float: right;
margin-right: 20px;
margin-top: 20px;
}
.bottom .daoh {
color: #111111;
width: 700px;
float: left;
height: 50px;
margin-top: 50px;
}
.bottom .daoh ul {
padding:0px;
}
.bottom .daoh ul li {
width: 100px;
height: 50px;
float: left;
font-size: 18px;
line-height: 50px;
background: url(../images/jiange.png) right no-repeat;
text-align: center;
}
.bottom .daoh ul li a {
color: #ebba20;
}
/*---bottom结束-----*/
六、 如何让学习不再盲目
有不少才刚开始接触编程的新手小白学到了基础语法，然而却不清楚语法有着啥用途，也不晓得该怎去加深印象爱游戏ayx官网登录入口，更不明白究竟该怎么提升自身，在这个阶段的时候每天自己主动去刷一些题就显得极为重要（百炼成神）爱游戏app入口官网首页，能够前往牛客网上开展编程初学者入门训练。那个专题处于编程入门的水准，契合刚学完语法的小白去练习，题目涵盖编程基础语法，还有基本结构等等，每一道题都带有练习模式以及考试模式，既能够还原考试模式实施模拟，也可以靠着练习模式来练习 。
