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

html部分

    
    
    
    
    
    
    



     
        
        
          
          
          
          
        
        
        
        
      
  
      
      
   
        
        
        
            
            
            
                
                
                
                
            
            
        
        
            
                
                    
                    
                    
                    
                    
                    
                
                抵制不良游戏
                    |拒绝盗版游戏|注意自我保护|谨防受骗上当|适度游戏益脑|沉迷游戏伤身|合理安排时间|享受健康生活
                    网络文化经营许可证 浙网文[2016]0199-099号   文网游备字[2010]C-CBG009号   游戏批准文号 科技与数字【2010】284号
                    增值电信业务经营许可证号码 [浙B2-20160108] 杭州游卡网络技术有限公司 　版权所有
            
        
    

css部分

* {
    margin: 0px;
    padding: 0px;
}

.all {
    background: #5d5495 url(./img/bg2.jpg) no-repeat center top;
    
    width: 1847px;
    height: 1096px;
    
    
    margin: 0 auto;
    position: relative;
    
    
}

.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;
    
    
    margin: 0 auto;
    
}

.zhuce {
    position: absolute;
    top: 290px;
    left: 1270px;
}

.body {
    position: absolute;
    top: 410px;
    left: 410px;
}

.four-box {
    height: 365px;
    width: 382px;
    
    position: absolute;
    top: 410px;
    left: 415px;
}

.one {
    width: 117px;
    height: 117px;
    
    position: absolute;
    top: 15px;
    left: 80px;
    
}

.two {
    width: 117px;
    height: 117px;
    
    position: absolute;
    top: 15px;
    left: 230px;
    
}

.three {
    width: 117px;
    height: 117px;
    
    position: absolute;
    top: 175px;
    left: 80px;
    
}

.four {
    width: 117px;
    height: 117px;
    
    position: absolute;
    top: 175px;
    left: 230px;
    
}

.kaishi {
    position: absolute;
    left: 790px;
    top: 800px;
}

.bottom {
    width: 1050px;
    height: 82px;
    
    margin: 0 auto;
    padding-top: 30px;
    margin-top: -350px;
    
}

.b-all {
    height: 52px;
    width: 1050px;
    
    
    margin: 0 auto;
    position: relative;
}

.b-left {
    height: 52px;
    width: 345px;
    
    
    
}

.b-left img {
    float: left;
    margin-right: 17px;
    margin-top: 8px;
}

.long {
    width: 1px;
    height: 25px;
    border-left: 1px solid #a69dc2;
    margin-right: 8px;
    
    
    float: left;
    margin-top: 15px;
    
}

.b-right {
    height: 52px;
    width: 659px;
    
    
    
    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;
    
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    
    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;
}

成果图