前端小练————三国杀登录页

html部分

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./三国杀.css"><link rel="stylesheet" href="./img/swiper/swiper-bundle.min.css"><script src="./img/swiper/swiper-bundle.min.js"></script>
</head><body><div class="all"><div class="swiper mySwiper"><div class="kuang"></div><div class="swiper-wrapper"><div class="swiper-slide"><img src="./img/图1.jpg" alt=""></div><div class="swiper-slide"><img src="./img/图2.jpg" alt=""></div><div class="swiper-slide"><img src="./img/图3.jpg" alt=""></div><div class="swiper-slide"><img src="./img/图4.jpg" alt=""></div></div><!-- <div class="swiper-button-next"></div><div class="swiper-button-prev"></div> --></div><div class="swiper-pagination"></div><!-- Initialize Swiper --><script>var swiper = new Swiper(".mySwiper", {spaceBetween: 30,centeredSlides: true,autoplay: {delay: 2500,disableOnInteraction: false,},pagination: {el: ".swiper-pagination",clickable: true,},navigation: {nextEl: ".swiper-button-next",prevEl: ".swiper-button-prev",},});</script><div class="denglu"><a href=""><img src="./img/下载.png" alt=""></a></div><div class="guanwang"><a href=""><img src="./img/官网.png" alt=""></a></div><div class="main"><div class="zhuce"><a href=""><img src="./img/下载 (1).png" alt=""></a></div><div class="body"><a href=""><img src="./img/下载 (2).png" alt=""></a></div><div class="four-box"><a href=""><div class="one"></div></a><a href=""><div class="two"></div></a><a href=""><div class="three"></div></a><a href=""><div class="four"></div></a></div><div class="kaishi"><a href=""><img src="./img/下载 (3).png" alt=""></a></div></div><div class="bottom"><div class="b-all"><div class="b-left"><a href=""><div><img src="./img/下载 (4).png" alt=""></div></a><div class="long"></div><a href=""><div><img src="./img/下载 (5).png" alt=""></div></a><a href=""><div><img src="./img/下载 (6).png" alt=""></div></a><a href=""><div><img src="./img/下载 (7).png" alt=""></div></a><div class="long"></div></div><div class="b-right">抵制不良游戏<span>|</span>拒绝盗版游戏<span>|</span>注意自我保护<span>|</span>谨防受骗上当<span>|</span>适度游戏益脑<span>|</span>沉迷游戏伤身<span>|</span>合理安排时间<span>|</span>享受健康生活网络文化经营许可证 浙网文[2016]0199-099号   文网游备字[2010]C-CBG009号   游戏批准文号 科技与数字【2010】284号增值电信业务经营许可证号码 [浙B2-20160108] 杭州游卡网络技术有限公司 　版权所有</div></div></div></div>
</body></html>

css部分

* {margin: 0px;padding: 0px;
}.all {background: #5d5495 url(./img/bg2.jpg) no-repeat center top;/* background-color: aqua; */width: 1847px;height: 1096px;/* position: relative; *//* padding: 0px; */margin: 0 auto;position: relative;/* width: 1050px; *//* padding-top: 408px; */
}.denglu {width: 50px;height: 20px;position: absolute;left: 1440px;top: 73px;
}.guanwang {width: 50px;height: 20px;position: absolute;top: 73px;left: 1510px;
}.main {height: 983px;width: 945px;/* text-align: center; *//* background-color: aquamarine; */margin: 0 auto;/* margin-top: -40px; */
}.zhuce {position: absolute;top: 290px;left: 1270px;
}.body {position: absolute;top: 410px;left: 410px;
}.four-box {height: 365px;width: 382px;/* background-color: gray; */position: absolute;top: 410px;left: 415px;
}.one {width: 117px;height: 117px;/* background-color: aqua; */position: absolute;top: 15px;left: 80px;/* color: aliceblue; */
}.two {width: 117px;height: 117px;/* background-color: aqua; */position: absolute;top: 15px;left: 230px;/* color: aliceblue; */
}.three {width: 117px;height: 117px;/* background-color: aqua; */position: absolute;top: 175px;left: 80px;/* color: aliceblue; */
}.four {width: 117px;height: 117px;/* background-color: aqua; */position: absolute;top: 175px;left: 230px;/* color: aliceblue; */
}.kaishi {position: absolute;left: 790px;top: 800px;
}.bottom {width: 1050px;height: 82px;/* background-color: aqua; */margin: 0 auto;padding-top: 30px;margin-top: -350px;/* margin-bottom: 0px; */
}.b-all {height: 52px;width: 1050px;/* margin-top:30px ; *//* background-color: blue; */margin: 0 auto;position: relative;
}.b-left {height: 52px;width: 345px;/* background-color: bisque; *//* float: left; *//* padding: 10px; */
}.b-left img {float: left;margin-right: 17px;margin-top: 8px;
}.long {width: 1px;height: 25px;border-left: 1px solid #a69dc2;margin-right: 8px;/* vertical-align: middle; *//* display: inline-block; */float: left;margin-top: 15px;/* background-color: green; */
}.b-right {height: 52px;width: 659px;/* background-color: gray; *//* float: right; *//* margin-bottom: 60px; */position: absolute;top: 0px;right: 0px;font-size: 12px;color: white;
}.b-right span {color: #a69dc2;padding: 0 4px;
}.swiper {width: 546px;height: 318px;position: absolute;top: 425px;left: 200px;/* background-image: url(./slider_bg.png); */
}.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-slide img {display: block;width: 100%;height: 100%;object-fit: cover;
}.kuang {background-image: url(./img/slider_bg.png);height: 318px;width: 546px;position: absolute;z-index: 200;left: -px;
}.swiper-pagination{position: absolute;top: 755px;margin-left: 200px;
}
.swiper-pagination .swiper-pagination-bullet:nth-child(1) {background: url(./img/QQ截图20220714135546.png);width: 52px;height: 31px;}.swiper-pagination .swiper-pagination-bullet:nth-child(2) {background: url(./img/QQ截图20220714135546.png);width: 52px;height: 31px;
}.swiper-pagination .swiper-pagination-bullet:nth-child(3) {background: url(./img/QQ截图20220714135546.png);width: 52px;height: 31px;
}.swiper-pagination .swiper-pagination-bullet:nth-child(4) {background: url(./img/QQ截图20220714135546.png);width: 52px;height: 31px;
}
.swiper-pagination .swiper-pagination-bullet {background-color: #64cdbe;width: 45px;height: 5px;border-radius: 0;opacity: 1;
}.swiper .swiper-pagination-bullet-active {background: #fff;
}/* .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{width: 0.4rem;height: 0.3rem;border-radius: 50%;} */
/* .swiper-pagination-bullet-active {background: rgb(235,111,111) url(./QQ截图20220714135546.png );width: .8rem;} */

成果图

前端小练————三国杀登录页相关推荐

前端小练————天猫国际登录页
html代码部分 <!DOCTYPE html> <html lang="en"><head><meta charset="UT ...
小程序：登录页获取用户信息并传递用户数据到个人中心页
步骤一:个人中心页添加"立即登录"按钮跳转至登录页一.个人中心页的me.wxml代码 <view class="userinfo"><but ...
vue前端架构文档_Dubbo分布式架构搭建教育PC站-Vue前端：课程和登录页
srcouterindex.js import Vue from 'vue'import VueRouter from 'vue-router'import Vuex from 'vuex'impor ...
H5C3第一个完整大项目————三国杀登录页跳转游卡官网
本次展示一下游卡官网的代码与成果图成果图如下其中业务板块可以悬停切换图片与下面内容代码如下 html代码 <!DOCTYPE html> <html lang="en ...
前端小练——CSS如何做十字图样
#box{position:absolute;/* 定位改变位置 */top:0;left:10;right:0;bottom:30;width:40px;height:30px;/* 设置宽高 */ ...
【实战 Ids4】小技巧篇：自定义登录页操作
今天的内容很简单,1分钟就能看完,5分钟就能学会,但是却是在我们平时开发中必须要学会的一个小知识点,我就不让大家走弯路了,直接看操作. 在平时的IdentityServer4开发中呢,我们都是根据官方 ...
前端炫酷登录页，拿来就能用
一. 炫酷星空代码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&qu ...
前端登录页做个简单记住密码
前端登录页如何做记住密码在一般的项目中,我们需要在登录页面点击登录时记住密码,比较方便下次登录时快速登录,这个时候我们需要在点击登录时判断记住密码是否为选中状态,如果是选中状态把用户名和输入框的值存 ...
前端登录页如何做记住密码
前端登录页如何做记住密码在一般的项目中,我们需要在登录页面点击登录时记住密码,比较方便下次登录时快速登录,这个时候我们需要在点击登录时判断记住密码是否为选中状态,如果是选中状态把用户名和输入框的值存 ...

前端小练————三国杀登录页

前端小练————三国杀登录页相关推荐

最新文章

热门文章