首页 - 神途资讯 > HTML5期末大作业：游戏网站设计与实现——基于bootstrap响应式游戏资讯网站制作HTML+CSS+JavaScript

HTML5期末大作业：游戏网站设计与实现——基于bootstrap响应式游戏资讯网站制作HTML+CSS+JavaScript

发布于：2024-12-11 作者：admin 阅读：19

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

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

@TOC

一、网页介绍

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

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

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

一、网页效果

二、代码展示 1.HTML代码结构

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


DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="布卡漫画,专注各种动漫资讯,漫画更新速度快!">
    <meta name="keywords" content="动漫资讯,漫画,动漫更新,电子书">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/module.css">
    <link rel="stylesheet" href="../css/index.css">
    <title>布卡漫画-首页title>
head>
<body>

<div class="top">
    <div class="w top_logo">
        <h1><a href="#" title="布卡漫画">布卡漫画a>h1>
    div>
div>


<div class="top_nav w">
    <div class="nav">
        <ul class="fl">
            <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>
        ul>
    div>
    <div class="search fr">
        <div class="search_box fl">
            <button class="btn">button>
            <input type="text" placeholder="请输入漫画名/作者">
        div>
        <div class="mail fr" title="布卡投稿平台">
            <span><img src="../img/mail.png" alt="">span>
            我要投稿
        div>
    div>
div>


<div class="middle w clearfix">
    
    <div class="middle_left fl">
        
        <div class="banner">
            <ul class="ul_img">
                <li><img src="../img/carousel.jpg" alt="">li>
                <li><img src="../img/carousel1.jpg" alt="">li>
                <li><img src="../img/carousel2.jpg" alt="">li>
                <li><img src="../img/carousel.jpg" alt="">li>
            ul>
            <ul class="ul_dot">
                <li>li>
                <li>li>
                <li>li>
                <li>li>
            ul>
        div>
        
        
        <div class="game_show clearfix">
            <div class="game_title"><h3>游戏中心h3>div>
            <div class="game_prod">
                <ul>
                    <li>
                        <a href="#"><img src="../img/lhsl_199x259.jpg" alt="">a>
                        <p><a href="#">灵魂撕裂a>p>
                    li>
                    <li>
                        <a href="#"><img src="../img/lhsl_199x259.jpg" alt="">a>
                        <p><a href="#">灵魂撕裂a>p>
                    li>
                    <li>
                        <a href="#"><img src="../img/lhsl_199x259.jpg" alt="">a>
                        <p><a href="#">灵魂撕裂a>p>
                    li>
                    <li>
                        <a href="#"><img src="../img/lhsl_199x259.jpg" alt="">a>
                        <p><a href="#">灵魂撕裂a>p>
                    li>
                    <li>
                        <a href="#"><img src="../img/lhsl_199x259.jpg" alt="">a>
                        <p><a href="#">灵魂撕裂a>p>
                    li>
                    <li>
                        <a href="#"><img src="../img/lhsl_199x259.jpg" alt="">a>
                        <p><a href="#">灵魂撕裂a>p>
                    li>
                    <li>
                        <a href="#"><img src="../img/lhsl_199x259.jpg" alt="">a>
                        <p><a href="#">灵魂撕裂a>p>
                    li>
                    <li>
                        <a href="#"><img src="../img/lhsl_199x259.jpg" alt="">a>
                        <p><a href="#">灵魂撕裂a>p>
                    li>
                ul>
            div>
        div>
        
        
        <div class="update clearfix">
            <div class="update_title clearfix">
                <h3 class="fl">最近更新h3>
                <a href="#" class="fr">更多a>
            div>
            <div class="update_prod">
                <ul>
                    <li>
                        <a href="#"><img src="../img/32x(1).jpg" alt="">a>
                        <p><a href="#">时雨a>p>
                        <p class="text"><a href="#">睡筝娘a>p>
                        <p class="text"><a href="#">最后更新:第1话a>p>
                    li>
                    <li>
                        <a href="#"><img src="../img/32x(1).jpg" alt="">a>
                        <p><a href="#">时雨a>p>
                        <p class="text"><a href="#">睡筝娘a>p>
                        <p class="text"><a href="#">最后更新:第1话a>p>
                    li>
                    <li>
                        <a href="#"><img src="../img/32x(1).jpg" alt="">a>
                        <p><a href="#">时雨a>p>
                        <p class="text"><a href="#">睡筝娘a>p>
                        <p class="text"><a href="#">最后更新:第1话a>p>
                    li>
                    <li>
                        <a href="#"><img src="../img/32x(1).jpg" alt="">a>
                        <p><a href="#">时雨a>p>
                        <p class="text"><a href="#">睡筝娘a>p>
                        <p class="text"><a href="#">最后更新:第1话a>p>
                    li>
                    <li>
                        <a href="#"><img src="../img/32x(1).jpg" alt="">a>
                        <p><a href="#">时雨a>p>
                        <p class="text"><a href="#">睡筝娘a>p>
                        <p class="text"><a href="#">最后更新:第1话a>p>
                    li>
                    <li>
                        <a href="#"><img src="../img/32x(1).jpg" alt="">a>
                        <p><a href="#">时雨a>p>
                        <p class="text"><a href="#">睡筝娘a>p>
                        <p class="text"><a href="#">最后更新:第1话a>p>
                    li>
                    <li>
                        <a href="#"><img src="../img/32x(1).jpg" alt="">a>
                        <p><a href="#">时雨a>p>
                        <p class="text"><a href="#">睡筝娘a>p>
                        <p class="text"><a href="#">最后更新:第1话a>p>
                    li>
                    <li>
                        <a href="#"><img src="../img/32x(1).jpg" alt="">a>
                        <p><a href="#">时雨a>p>
                        <p class="text"><a href="#">睡筝娘a>p>
                        <p class="text"><a href="#">最后更新:第1话a>p>
                    li>
                    <li>
                        <a href="#"><img src="../img/32x(1).jpg" alt="">a>
                        <p><a href="#">时雨a>p>
                        <p class="text"><a href="#">睡筝娘a>p>
                        <p class="text"><a href="#">最后更新:第1话a>p>
                    li>
                    <li>
                        <a href="#"><img src="../img/32x(1).jpg" alt="">a>
                        <p><a href="#">时雨a>p>
                        <p class="text"><a href="#">睡筝娘a>p>
                        <p class="text"><a href="#">最后更新:第1话a>p>
                    li>
                    <li>
                        <a href="#"><img src="../img/32x(1).jpg" alt="">a>
                        <p><a href="#">时雨a>p>
                        <p class="text"><a href="#">睡筝娘a>p>
                        <p class="text"><a href="#">最后更新:第1话a>p>
                    li>
                    <li>
                        <a href="#"><img src="../img/32x(1).jpg" alt="">a>
                        <p><a href="#">时雨a>p>
                        <p class="text"><a href="#">睡筝娘a>p>
                        <p class="text"><a href="#">最后更新:第1话a>p>
                    li>
                ul>
            div>
        div>
        
    div>
    
    
    <div class="middle_right fr">
        <h3>游戏中心h3>
        <ul>
            <li>
                <a href="#"><img src="../img/20170111150925_5875d999b41c9.jpg" alt="">a>
                <p class="text"><a href="#">崩坏学园2a>p>
            li>
            <li>
                <a href="#"><img src="../img/20170111150925_5875d999b41c9.jpg" alt="">a>
                <p class="text"><a href="#">崩坏学园2a>p>
            li>
            <li>
                <a href="#"><img src="../img/20170111150925_5875d999b41c9.jpg" alt="">a>
                <p class="text"><a href="#">崩坏学园2a>p>
            li>
            <li>
                <a href="#"><img src="../img/20170111150925_5875d999b41c9.jpg" alt="">a>
                <p class="text"><a href="#">崩坏学园2a>p>
            li>
            <li>
                <a href="#"><img src="../img/20170111150925_5875d999b41c9.jpg" alt="">a>
                <p class="text"><a href="#">崩坏学园2a>p>
            li>
            <li>
                <a href="#"><img src="../img/20170111150925_5875d999b41c9.jpg" alt="">a>
                <p class="text"><a href="#">崩坏学园2a>p>
            li>
            <li>
                <a href="#"><img src="../img/20170111150925_5875d999b41c9.jpg" alt="">a>
                <p class="text"><a href="#">崩坏学园2a>p>
            li>
            <li>
                <a href="#"><img src="../img/20170111150925_5875d999b41c9.jpg" alt="">a>
                <p class="text"><a href="#">崩坏学园2a>p>
            li>
        ul>
    div>
    
div>


<div class="bottom w">
    <ul >
        <li class="address">
            <span class="fl"><img src="../img/addr.png">span>
            <div class="address_text fl">
                <p>珠海布卡科技有限公司p>
                <p>地址: 珠海市香洲区夏美路161号(南厦丰泽园)2栋二层商铺234Cp>
            div>
        li>
        <li class="email">
            <span class="fl"><img src="../img/email.png">span>
            <div class="info_text fl">
                <p>客服: <a href="#">services@buka.cna>p>
                <p>投稿: <a href="#">td.sosobook.cna>p>
                <p>合作: <a href="#">bd@buka.cna>p>
            div>
        li>
        <li class="phone">
            <span class="fl"><img src="../img/phone.png">span>
            <div class="info_text fl">
                <p> *** :p>
                <p>0756-3360306p>
            div>
        li>
        <li class="ICP">
            <span  class="fl">
                <img src="../img/global.png">
                <img src="../img/wenwangwenicon.png">
            span>
            <div class="info_text fl">
                <p>ICP备案号:粤ICP备15028491号-1p>
                <p>网络文化经营许可证:粤网文[2015]2094-438号p>
            div>
        li>
        <li class="tip">
            <img src="../img/bkn.png">
            <img src="../img/tip.png">
        li>
    ul>
div>

body>
html>

2.CSS样式代码

/*头部导航样式设置*/
.top_nav ul li:nth-child(1) {
    background-color: #f8b62d;
    /*color: #fff;*/
}
.top_nav ul li:first-child a{
    color: #fff;
}
/*中部左侧样式开始*/
.middle_left {
    width: 880px;
}
/*中部轮播图样式开始*/
.banner {
    width: 880px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}
.banner .ul_img {
    width: 400%;
}
.banner .ul_img li{
    float: left;
}
.banner .ul_dot {
    position: absolute;
    right: 20px;
    bottom: 10px;
}
.banner .ul_dot li {
    float: left;
    margin: 0 5px;
    width: 20px;
    height: 19px;
    background: url("../img/newicon_20160225.png") no-repeat -66px -264px;
}
.banner .ul_dot li:nth-child(1):hover{
    background-position: -66px -282px;
}
.banner .ul_dot li:nth-child(2){
    background-position: -44px -264px;
}
.banner .ul_dot li:nth-child(2):hover{
    background-position: -44px -282px;
}
.banner .ul_dot li:nth-child(3){
    background-position: 0px -264px;
}
.banner .ul_dot li:nth-child(3):hover{
    background-position: 0px -282px;
}
.banner .ul_dot li:nth-child(4){
    background-position: -22px -264px;
}
.banner .ul_dot li:nth-child(4):hover {
    background-position: -22px -282px;
}
/*中部轮播图样式结束*/
/*游戏中心部分样式开始*/
.game_show {
    width: 880px;
    margin-top: 24px;
    background-color: #fff;
}
.game_title {
    height: 47px;
}
.game_title h3 {
    margin-left: 18px;
    line-height: 50px;
}
.game_prod ul li {
    float: left;
    margin: 0 17px 25px;
    font-size: 14px;
}
.game_prod ul li:hover img {
    opacity: 0.9;
}
.game_prod ul li img {
    width: 185px;
    height: 245px;
    margin-bottom: 12px;
    background-color: #000;
}
/*游戏中心部分样式结束*/
/*最近更新部分样式开始*/
.update {
    width: 880px;
    margin-top: 24px;
    background-color: #fff;
}
.update_show {
    width: 880px;
    margin-top: 24px;
    background-color: #fff;
}
.update_title {
    height: 66px;
}
.update_title h3 {
    margin-left: 18px;
    line-height: 66px;
}
.update_title a {
    right: 10px;
    margin-top: 26px;
    margin-right: 20px;
    color: #afafaf;
    box-sizing: border-box;
}
.update_prod ul li {
    float: left;
    margin: 0 12px 25px 17px;
    font-size: 14px;
}
.update_prod ul li .text {
    font-size: 12px;
    color: #9a9a9a;
    margin-top: 15px;
}
.update_prod ul li img {
    width: 117px;
    height: 178px;
    margin-bottom: 12px;
}
/*最近更新部分样式结束*/
/*中部左侧样式结束*/
/*中部右侧样式开始*/
.middle_right {
    width: 240px;
    background-color: #fff;
}
.middle_right h3 {
    height: 44px;
    line-height: 44px;
    padding-left: 14px;
}
.middle_right ul li {
    margin-bottom: 16px;
}
.middle_right ul li img {
    width: 240px;
    height: 112px;
    margin-bottom: 12px;
}
.middle_right ul li .text {
    padding-left: 14px;
}
/*中部右侧样式结束*/

三、个人总结

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

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

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “点赞” “✍️评论” “收藏”一键三连哦！

2.❤️【关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！

3.以上内容技术相关问题欢迎一起交流学习!

【获取方式】

gitee码云源码仓库-欢迎Star:

二维码

扫一扫关注我们

版权声明：本文内容由互联网用户自发贡献，本站不拥有所有权，不承担相关法律责任。如果发现本站有涉嫌抄袭的内容，请告知我们，本站将立刻删除涉嫌侵权内容。

上一篇：如何制作微信h5小游戏

下一篇：新人礼包领取

相关文章

本站资讯|联系我们|RSS订阅|网站地图

百度关键词：神途,神途手游,神途发布网

二维码

Copyright © 2022 www.5wst.com All right reserved. 赣ICP备2022000132号-15