2023年11月26日发(作者：美图m8参数)
Web程序设计基础期末⼤作业——模仿QQ飞车⼿游S联赛官⽹编写的⽹页
QQ飞车⼿游是我⾮常喜欢的游戏，也是我现在为数不多的常在玩的游戏，刚好我Web程序设计基础的⼤作业是要做⼀套⽹站，我就借此机会模仿飞车S联赛官⽹的页⾯⾃⼰做了⼀个⽹页，⼜
加了⼀些⾃⼰的元素，由于我做这个的时候，刚好处于车神赏⾦赛的阶段，因此图⽚也⽤的是赏⾦赛的图⽚。
⽂件说明
⾸页
：⾸页
：⾸页的css样式⽂件
模块页
:模块页1（俱乐部介绍）
:模块页1（俱乐部介绍）css⽂件
:模块页2（资讯）
：模块页2（资讯）css⽂件
详细页
:详细页1（云海介绍页，⼊⼝为俱乐部介绍中明星选⼿云海图⽚）
：详细页1（云海介绍页）css⽂件
:详细页2（赛事资讯）
:：详细页2（赛事资讯）css⽂件
其他页
：联系我们
:联系我们css样式⽂件
开发设计⽂档
有些图⽚因为太⼤了，图⽚上传对⼤⼩有限制就只能压缩画质，凑合着看吧
⾸页：&
界⾯整体说明：
整个页⾯分为以下⼏个部分：
1.顶部标题图⽚
2.导航栏
3.页⾯主体部分
4.底部版权等信息说明条
其中由于1、2、4条每个页⾯基本相同，之后⼏个部分中将不再赘述。
整体界⾯布局⽅式为浮动（float）布局为主。
接下来是每个部分的详细说明。
详细说明
顶部标题图⽚
顶部标题由于我所制作的为⼀个游戏的职业联赛的⽹站，因此在我考虑了各种⽅式之后，觉得以这个联赛的宣传图⽚作为标题可能更加的合适，因此我选择了今年的⼀张联赛宣传图作为整个⽹页也是所有界⾯（除联系我们页
⾯）的所有顶部标题图⽚
顶部图⽚放在
在对应的css样式中，⾏宽采⽤100%，列宽根据图⽚的实际宽度定为626px，图⽚采⽤background属性以背景图⽚的⽅式插⼊，图⽚居中，这样可以保证主体部分被展现，布局⽅式为相对布局，css样式如下：
.background1 {
width: 100%;
其对应的css样式由于过长此处不进⾏展⽰，详细可见⽂件
主体⼀级导航采⽤相对布局的⽅式，⽽⼆级导航采⽤绝对定位的布局⽅式，导航部分定义float属性为left，即靠左布局，为右侧的时间栏提供空间，所有⽂字居中，字体⼤⼩等情况则是根据界⾯美观性加以考虑得到的。
右侧的时间栏放置于span中，对应使⽤的float属性值为right。
时间显⽰中包含了整个⽹页中的第⼀个js，创建的对象获取当前时间，将其按照⼀定的格式加以输出，同时判断其对应是星期⼏，提取数组中的值输出出来，根据常识判断当前是早中下晚哪个时间段，对应输出早上好、中午
好、下午好、晚上好，对应的js代码如下：
var iCount = 2;
= function () {
// 时间栏js
function addZero(number) {
if (number <= 9) return "0" + number;
else return number
}
function isWhen(hour) {
if (hour < 11) return "上午好"
else if (hour < 13) return "中午好"
else if (hour < 18) return "下午好"
else return "晚上好"
}
function currenTime() {
var oData = new Date();
var year = lYear();
var mouth = th() + 1;
var data = e();
var day = ();
var hours = rs();
var minutes = utes();
var seconds = onds();
var str = "";
var div1 = mentById("currentime");
var week = ["⽇", "⼀", "⼆", "三", "四", "五", "六"];
str = str + year + "年" + addZero(mouth) + "⽉" + addZero(data) + "⽇ 星期" + addZero(week[day]) + " " + addZero(hours) + ":" + addZero(minutes) + ":" + addZero(seconds) + " " + isWhen(hours);
TML = str;
}
erval(currenTime, 500);
页⾯主体部分
页⾯主体部分位于 包含三个部分，分别为赛事介绍、资讯、历届赛事，整体同样采⽤浮动布局的⽅式为主，其中三个标题为对应图⽚。 赛事介绍 赛事介绍主体为⽂字，并通过调节margin属性来使其放置到合理的位置，并添加边框使其更加有整体感，具体代码如下： QQ 在UP2018腾讯新⽂创⽣态⼤会上，《QQ飞车⼿游》发布了全新的电竞赛事体系，⽽作为这⼀体系核⼼的《QQ飞车⼿游》S联赛在2018年5⽉正式启动，整体赛事奖⾦⾼达百万级。 QQ飞车⼿游S联赛每个赛季分为季前赛、常规赛、季后赛及总决赛四部分。由⼴汽传祺联合赞助的2018年⾸届QQ飞车⼿游S联赛夏季赛于2018年5⽉26⽇燃起战⽕，20⽀参与S联赛季前赛的战队展开新⼀轮竞速。 具体css样式如下： /* 赛事介绍 */ /* 标题 */ .title { width: 1005px; height: 124px; margin: auto; /* 居中 */ } /* 具体介绍 */ #recommendation .details p { margin-top: 15px; margin-left: 130px; margin-right: 130px; padding: 10px; /* ⾏间距 */ line-height: 40px; /* 边框 */ border-color: #abc5e6cc; border-style: groove; border-width: 5px; } 资讯 资讯部分分为左右两个部分，左侧放置在 左侧部分每⼀条均放置在单独的h3标签中，每⼀条资讯均可点击，通过超链接链接到详细页中，但由于时间所限，因此所有链接均指向同⼀个详细页，点击右上⾓的了解更多，会跳转到最新资讯的模块 页中。具体html代码如下，css代码由于长度限制，此处不做展⽰： 历届赛事 历届赛事由四个section组成，其中⼀三两个图⽚的浮动⽅式为float：left，⽂字为right，⼆四两个图⽚为right，⽂字为left，以此产⽣⼀种交错的美感，代码由于过长，此处不做展⽰ 底部版权信息 第⼀⾏所有⽂字（除|）均设有超链接，超链接指向实际⽹站， 整个⽂字栏包含在两个div中，采取相对布局的⽅式。移动到有超链接的⽂字时，⽂字会改变颜⾊并出现下划线 模块页1：& 整体界⾯说明 页⾯进⼊⽅式为任意界⾯点击导航条上的俱乐部或⼆级导航的任意选项均可进⼊。点击俱乐部介绍跳转到界⾯最上端，俱乐部介绍跳转到俱乐部介绍开始，明星选⼿同样跳转到明星选⼿开始。 主体部分分为两部分 1.俱乐部介绍 2.明星选⼿ 整体页⾯呈现： 主体部分主要采⽤flex布局的⽅式，其中⼀⼩部分采⽤浮动布局。主体部分为更好的展⽰，因此再设置height属性时，将其设置为了auto 详细说明 俱乐部介绍 俱乐部介绍由三个section+三个section组成。 前三个section，class为c，每个section中都有四个div，每个div展⽰⼀个俱乐部，包含俱乐部名称和俱乐部logo，整体的flex布局主轴⽅向为column，主轴对齐⽅式为flex-start，具体如下 display: flex; flex-wrap: wrap; flex-direction: column; /*主轴为⽔平⽅向，起点在左端。*/ justify-content: flex-start; /*主轴对齐⽅式为向左*/ 每个⼩的section中，主轴⽅向为row，主轴对齐⽅式为center display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center ; 后三个section，class为details，每个section包含四个p标签，⽤于显⽰每个俱乐部的介绍，默认为隐藏。 每个div中均包含js nmouseover="getElementById('RNGM').y = 'block';" onmouseout="getElementById('RNGM').y = 'none';" 其主要功能为当⿏标放置到任⼀俱乐部时，会显⽰俱乐部的介绍。如下图 明星选⼿ 包含在中，由标题图⽚和组成，整体采⽤flex布局，具体如下： display: flex; flex-wrap: wrap; flex-direction: row; /*主轴为⽔平⽅向，起点在左端。*/ justify-content: center; 由⼗⼆张选⼿图⽚组成，每张图⽚放置在a标签中，整体采⽤flex布局，具体如下 .xuan { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; } 每张图⽚均设有超链接，点击跳转到对应选⼿的个⼈简介中，但由于时间所限，共只制作了⼀张选⼿的个⼈介绍页，因⽽点击任意选⼿的图⽚都会跳转到此详细页中。 模块页2：& 整体界⾯说明 本页主体部分为赛事资讯⼀个模块，主体部分为与另⼀模块页俱乐部不同选择了浮动布局为主，少量部分使⽤了flex布局。整体页⾯如下图： 页⾯进⼊⽅式有三种，⼀是点击导航条上的赛事资讯，⼆是点击⾸页资讯的了解更多，三是点击资讯详细页的左侧导航。 详细说明 本模块⼀共可以分为两个部分，顶部标题和下⽅的选项卡。 顶部标题赛事资讯四个字float值为left，右侧⽂字float值为right，右侧⽂字中，“⾸页”设有超链接，可跳转到⾸页。 选项卡在中 五个选项采⽤flex布局，整体的flex布局如下 display: flex; flex-direction: row; justify-content: center; border-bottom-style: solid; border-bottom-width: 3px; border-bottom-color: 114689; 单个选项div的flex布局如下 display: flex; flex-direction: row; justify-content: center; align-items: center; 选项卡正⽂内容由五个section构成，每个section中含有⼋个div，每个div对应⼀条资讯，每个div中资讯简称的两三个字对应的p标签采⽤绝对定位的⽅式。每个资讯均可以点击，由于时间限制，每个资讯都指向同⼀个详细页。 选项卡功能通过js来实现，原理是默认状态下显⽰，同时其对应的选项卡标题S联赛添加背景颜⾊。当⿏标移动到任意标签时，先遍历，将所有选项卡标题的background-color属性变为rgba(8, 190, 245, 0)，所有资讯内容框的display属性设置为none，再将当前选中的便签的background-color属性变为rgba(8, 190, 245, 0.3)，对应的资讯内容框的display属性设置为block，具体代码如下： mentById("n1").onmouseover = function () { for (var i = 1; i <= 5; i++) { mentById("textBody" + i).y = "none"; mentById("n" + i).oundColor = "rgba(8, 190, 245, 0)"; } mentById("textBody1").y = "block"; mentById("n1").oundColor = "rgba(8, 190, 245, 0.3)"; } mentById("n2").onmouseover = function () { for (var i = 1; i <= 5; i++) { mentById("textBody" + i).y = "none"; mentById("n" + i).oundColor = "rgba(8, 190, 245, 0)"; } mentById("textBody2").y = "block"; mentById("n2").oundColor = "rgba(8, 190, 245, 0.3)"; } mentById("n3").onmouseover = function () { for (var i = 1; i <= 5; i++) { mentById("textBody" + i).y = "none"; mentById("n" + i).oundColor = "rgba(8, 190, 245, 0)"; } mentById("textBody3").y = "block"; mentById("n3").oundColor = "rgba(8, 190, 245, 0.3)"; } mentById("n4").onmouseover = function () { for (var i = 1; i <= 5; i++) { mentById("textBody" + i).y = "none"; mentById("n" + i).oundColor = "rgba(8, 190, 245, 0)"; } mentById("textBody4").y = "block"; mentById("n4").oundColor = "rgba(8, 190, 245, 0.3)"; } mentById("n5").onmouseover = function () { for (var i = 1; i <= 5; i++) { mentById("textBody" + i).y = "none"; mentById("n" + i).oundColor = "rgba(8, 190, 245, 0)"; } mentById("textBody5").y = "block"; mentById("n5").oundColor = "rgba(8, 190, 245, 0.3)"; } 详细页1：& 整体界⾯说明 主体部分由两个部分构成。 1.左侧导航栏 2.右侧正⽂内容 整体布局⽅式为flex布局，进⼊⽅式为在俱乐部>明星选⼿中点击任⼀选⼿图⽚。整体界⾯如下（由于界⾯过长，此处仅截取⼀部分） 正⽂包含顶部流程条、个⼈荣誉、正⽂⽂本三部分，采⽤flex布局，具体如下 main { display: flex; flex-direction: column; justify-content: center; width: 100%; height: auto; } 顶部流程条为 ⾸页>明星选⼿>RNGM.云海 其中⾸页、明星选⼿均可点击从⽽跳转到对应的⽹页 个⼈荣誉包含左侧图⽚和右侧⽂字，同样采⽤flex布局，同时在四周加上边框以显⽰出⼀种独⽴的感觉，具体整体布局如下： #honor { width: 1100px; height: 500px; border-style: inset; border-color: red; border-width: 5px; margin: 0 auto; display: flex; flex-direction: row; align-items: center; } 右侧⽂字通过text-align: center;来实现⽂字的居中对齐，同时⾏宽设置为40px 正⽂⽂本主要有p标签和img构成，所有img和所有p分别采⽤同⼀种css样式，这部分整体采⽤flex布局⽅式，具体如下： #zw { width: 1200px; margin: 0 auto; padding-top: 15px; display: flex; flex-direction: column; } #zw p { line-height: 30px; font-size: 18px; } #zw img { width: 70%; margin: 0 auto; padding-bottom: 10px; } 详细页2：& 整体界⾯说明 本页主体部分分为两个部分 1.左侧导航 2.右侧正⽂ 由于需要与另⼀详细页采⽤不同的布局⽅式，因此本页⾯采⽤浮动布局的⽅式为主，少量采⽤flex布局。 具体界⾯如下图（由于页⾯过长，仅截取部分） 页⾯进⼊⽅式为最新资讯内任⼀资讯或⾸页资讯中任⼀资讯。 详细说明 整体采⽤浮动布局的⽅式。 左侧导航栏 代码如下 > S联赛 width: 900px; height: auto; padding-top: 20px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px; text-align: left; line-height: 40px; } #right_main h5 { width: 300px; height: auto; padding-top: 5px; padding-bottom: 5px; margin: 0 auto; text-align: center; color: #114689; border-bottom-style: solid; border-bottom-color: #114689; border-bottom-width: 3px; border-top-style: solid; border-top-color: #114689;
发布者：admin，转转请注明出处：http://www.yc00.com/num/1700957748a1039898.html相关推荐
评论列表（0条）