HTML+CSS静态页面游戏网站设计——腾讯游戏(页)学生HTML个人网页作业作品下载个人网页设计制作大学生个人网站作业模板简单个人网页制作

最新推荐文章于 2024-06-10 22:01:09 发布

优质内容贡献

最新推荐文章于 2024-06-10 22:01:09 发布

阅读量244

点赞数

分类专栏： web大学生个人网站作业模学生div+css静态网页设计成品 html网页设计作业文章标签： css html 前端 javascript 游戏

本文链接：https://blog.csdn.net/qq_524614081/article/details/122406204

版权

这是一份HTML5期末大作业，展示了使用HTML、CSS和JavaScript设计的静态页面游戏网站。作品包括游戏主题的个人网页设计，提供学生作业模板下载，适合大学生进行个人网站制作学习。

摘要由CSDN通过智能技术生成

HTML5期末大作业

一、作品展示

在这里插入图片描述

二、文件目录

在这里插入图片描述

三、代码实现



 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title> 仿腾讯游戏官网</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
  <link rel="icon" type="image/x-icon" href="./img/未标题-1.png" />
  <link rel="stylesheet" href="./Swiper/swiper.min.css">
  <link rel="stylesheet" href="./font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="./css/index.css">
  <script src="./js/jquery-2.1.0.js"></script>
  <script src="./Swiper/swiper.min.js"></script>
  <style>
    html, body {
     
      position: relative;
      height: 100%;
    }
    .dis_bottom{
     
        display: none;
    }
    body {
     
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
     
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
     
      /* text-align: center; */
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
    .swiper-pagination-bullet{
     
        border-radius: 100%;
        height: 30px;
        border: 4px solid white;
        background: none;
        box-shadow:  0px 2px 5px aliceblue ;
    }
    .swiper-pagination{
     
        margin-right: 3%;
    }
  </style>
</head>
<body>
  <!-- Swiper -->
  <div class="container1" style="z-index: 999999999; position: fixed; display: flex; justify-content: space-between;">
    <a href="./index.html" style="z-index: 99;">
        <img  src="./img/logo.png" alt="">
    </a>
<div class="f1_1" style="z-index: 99; display: flex; justify-content: space-around; width: 25%; position: absolute; right: 0;">
    <div style="color: whitesmoke; line-height: 80px;">
        <a href="./about.html">关于腾讯游戏</a>
        </div>
    <div style="color: whitesmoke; line-height: 80px;">
        <a href="./Introduction.html">游戏介绍</a>
        </div>
    <div style="color: whitesmoke; line-height: 80px;">
        <a href="./Brands.html">品牌活动</a>
        </div>
</div>
<div class="fa fa-bars fa-3x dis_bottom" style="line-height: 80px; color: white;  z-index: 99999999;">&nbsp;&nbsp;&nbsp;</div>
<div class="fa fa-bars fa-3x dis_phone" style="line-height: 80px; color: white; display: none;">&nbsp;&nbsp;&nbsp;</div>
<div class="fa fa-window-close fa-3x dis_phone_1" style="line-height: 80px; color: white; display: none;">&nbsp;&nbsp;&nbsp;</div>
</div>
<div  class="fix_phone" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: black; z-index: 9999999;  padding: 100px 40px ;">
    <a href="./index.html">
        <div style="color: white; font-size: 25px; margin-top: 20px;"> 首页</div>
    </a>
    <a href="./about.html">
        <div style="color: white; opacity: 0.5;  margin-top: 20px;font-size: 25px;"> 关于腾讯游戏</div

最低0.47元/天解锁文章

优质内容贡献

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS静态页面游戏网站设计——腾讯游戏(页)学生HTML个人网页作业作品下载个人网页设计制作大学生个人网站作业模板简单个人网页制作

HTML5期末大作业：游戏网站设计——腾讯游戏(页)学生HTML个人网页作业作品下载个人网页设计制作大学生个人网站作业模板简单个人网页制作常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢
复制链接

扫一扫