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;"> </div>
<div class="fa fa-bars fa-3x dis_phone" style="line-height: 80px; color: white; display: none;"> </div>
<div class="fa fa-window-close fa-3x dis_phone_1" style="line-height: 80px; color: white; display: none;"> </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