h5练习一:英雄联盟主页

作者: Mr姜饼 | 来源:发表于2019-12-24 11:46 被阅读0次

    话不多说 上代码

    index.html
    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="css/Nav.css" />
        <link rel="stylesheet" href="css/activity.css" />
        <link rel="stylesheet" href="css/dropList.css" />
        <link rel="stylesheet" href="css/tool.css" />
        <link rel="stylesheet" href="css/content.css" />
        <link rel="stylesheet" href="css/banner.css" />
        <link rel="stylesheet" href="css/recommend.css" />
        <link rel="stylesheet" href="css/navRight.css"/>
        
        <title></title>
    </head>
    
    <style>
        body {
            background: rgb(243, 243, 243);
        }
    
        .TopNav:hover .dropList {
            display: block;
        }
    </style>
    
    <body>
    
        <div class="TopNav">
            <div class="navBox">
                <img class="logo" src="img/logo.png">
                <ul class="navList">
    
    
                    <li class="navItem">
                        <p class="title">英雄资料</p>
                    </li>
                    <li class="navItem">
                        <p class="title">商城/合作</p>
                    </li>
                    <li class="navItem">
                        <p class="title">用户互动</p>
                    </li>
                    <li class="navItem">
                        <p class="title">赛事中心</p>
                    </li>
                    <li class="navItem">
                        <p class="title">自助系统</p>
                    </li>
    
    
                </ul>
                <img class="searchBtn" src="img/search.png" />
                <img class="bookBtn" src="img/book.png" />
                <div class="userCenter">
                    <img class="userHead" src="img/userHead.png" />
                    <p class="loginTip">亲爱的召唤师,欢迎
                        <span></span>
                        <u class="loginBtn">登录</u>
                    </p>
    
                    <p class="loginSubTip">登录后查看自己的战绩、资产、声望值等</p>
    
                </div>
            </div>
    
    
            <div class="dropList">
    
                <div class="bigBox">
    
                    <div class="listBox">
                        <ul class="listItem">
                            <p class="item">栏目类型一</p>
                            <p class="item">栏目类型一</p>
                            <p class="item">栏目类型一</p>
                            <p class="item">栏目类型一</p>
                            <p class="item">栏目类型一</p>
                            <p class="item">栏目类型一</p>
                        </ul>
                        <ul class="listItem">
                            <p class="item">栏目类型二</p>
                            <p class="item">栏目类型二</p>
                            <p class="item">栏目类型二</p>
    
                            <p class="item">栏目类型二</p>
                            <p class="item">栏目类型二</p>
                        </ul>
                        <ul class="listItem">
                            <p class="item">栏目类型三</p>
                            <p class="item">栏目类型一</p>
    
    
                            <p class="item">栏目类型一</p>
                            <p class="item">栏目类型一</p>
                        </ul>
                        <ul class="listItem">
                            <p class="item">栏目类型一</p>
                            <p class="item">栏目类型一</p>
                            <p class="item">栏目类型一</p>
                            <p class="item">栏目类型一</p>
                            <p class="item">栏目类型一</p>
                            <p class="item">栏目类型一</p>
                        </ul>
                        <ul class="listItem">
                            <p class="item">栏目类型一</p>
                            <p class="item">栏目类型一</p>
    
                            <p class="item">栏目类型一</p>
                            <p class="item">栏目类型一</p>
                            <p class="item">栏目类型一</p>
                        </ul>
    
    
    
                    </div>
    
                </div>
    
    
            </div>
    
        </div>
    
        <div class="activity"></div>
    
        <div class="toolBar">
            <div class="toolBox">
                <ul class="toolList">
                    <li class="barItem">综合资讯
                        <div class="animationBar"></div>
                    </li>
                    <li class="barItem">视频中心</li>
                    <li class="barItem">赛事中心</li>
                    <li class="barItem">活动中心</li>
                </ul>
            </div>
        </div>
    
        <div class="banner">
            <div class="bannerBox">
                <ul class="bannerList">
                    <li class="bannerItem">
                        <p class="title">未来战士2018</p>
                        <img class="img" src="img/LOL2.jpg" />
                    </li>
                    <li class="bannerItem">
                        <p class="title">520大作战</p>
                        <img class="img" src="img/LOL4.jpg" />
                    </li>
                    <li class="bannerItem">
                        <p class="title">RNG夺冠</p>
                        <img class="img" src="img/LOL3.jpg" />
                    </li>
                    <li class="bannerItem">
                        <p class="title">520周边福利</p>
                        <img class="img" src="img/LOL1.jpg" />
                    </li>
                    <li class="bannerItem">
                        <p class="title">集卡赢奖励</p>
                        <img class="img" src="img/LOL5.jpg" />
                    </li>
    
    
    
                </ul>
    
            </div>
    
            <div class="companyBox">
                <img class="top" src="img/download2.png" />
    
                <ul class="bottom">
                    <li class="item">新手推荐</li>
                    <li class="item">新手推荐</li>
                    <li class="item">新手推荐</li>
                    <li class="item">新手推荐</li>
                    <li class="item">新手推荐</li>
                    <li class="item">新手推荐</li>
                    <li class="item">新手推荐</li>
                    <li class="item">新手推荐</li>
                    <li class="item">新手推荐</li>
                    <li class="item">新手推荐</li>
                    <li class="item">新手推荐</li>
                    <li class="item">新手推荐</li>
    
                </ul>
    
    
    
    
    
            </div>
    
    
        </div>
    
        <div class="content">
    
    
    
    
    
            <div class="leftBox">
                <div class="line"></div>
                <ul class="contentList">
                    <li class="contentItem">
                        <p class="kindTitle">最新资讯</p>
                    </li>
                    <li class="contentItem">
                        <p class="kindTitle">综合新闻</p>
                        <div class="animation"></div>
                        <ul class="contentDetilList">
    
                            <li class="detailItem">
                                <img class="detailImg" src="img/LOL4.jpg" />
                                <p class="title">关俊冠军庆典之夜 五大活动强势来袭</p>
                                <p class="subTitle">关俊打败Uzi,重创RNG,获得LOL全球最佳电竞王子的称号,5月26日颁奖典礼正式启动,欢迎观看</p>
                            </li>
                            <li class="detailItem">
                                <a class="type">新闻</a>
                                <a class="text">关俊打败Uzi,重创RNG,获得LOL全球最佳电竞王子的称号</a>
                            </li>
                            <li class="detailItem">
                                <a class="type">新闻</a>
                                <a class="text">关俊打败Uzi,重创RNG,获得LOL全球最佳电竞王子的称号</a>
                            </li>
                            <li class="detailItem">
                                <a class="type">新闻</a>
                                <a class="text">关俊打败Uzi,重创RNG,获得LOL全球最佳电竞王子的称号,5月26日颁奖典礼正式启动</a>
                            </li>
                            <li class="detailItem">
                                <a class="type">新闻</a>
                                <a class="text">关俊打败Uzi,重创RNG,获得LOL全球最佳电竞王子的称号,5月26日颁奖典礼正式启动</a>
                            </li>
                            <li class="detailItem">
                                <a class="type">新闻</a>
                                <a class="text">关俊打败Uzi,重创RNG,获得LOL全球最佳电竞王子的称号,5月26日颁奖典礼正式启动</a>
                            </li>
                            <li class="detailItem">
                                <a class="type">新闻</a>
                                <a class="text">关俊打败Uzi,重创RNG,获得LOL全球最佳电竞王子的称号,5月26日颁奖典礼正式启动</a>
                            </li>
                            <li class="detailItem">
                                <a class="type">新闻</a>
                                <a class="text">关俊打败Uzi,重创RNG,获得LOL全球最佳电竞王子的称号,5月26日颁奖典礼正式启动</a>
                            </li>
                            <li class="detailItem">
                                <a class="type">新闻</a>
                                <a class="text">关俊打败Uzi,重创RNG,获得LOL全球最佳电竞王子的称号,5月26日颁奖典礼正式启动</a>
                            </li>
    
                            <li class="moreDetail">阅读更多资讯 >></li>
    
                        </ul>
    
    
    
                        <li class="contentItem">
                            <p class="kindTitle">官方公告</p>
                        </li>
                        <li class="contentItem">
                            <p class="kindTitle">赛事新闻</p>
    
                        </li>
                        <li class="contentItem">
                            <p class="kindTitle">论坛资讯</p>
                        </li>
                </ul>
    
    
    
    
    
    
            </div>
    
    
    
            <div class="rightBox">
                <div class="line"></div>
                <ul class="rightList">
                    <li class="rightItem">
                        <p class="title">最新皮肤</p>
                    </li>
                    <li class="rightItem">
                        <p class="title">最新英雄</p>
                        <div class="animation"></div>
                        <ul class="pifuList">
                            <img class="pifu" src="img/LOL6.jpg" />
                            <img class="pifu" src="img/LOL7.jpg" />
                            <img class="pifu" src="img/LOL8.jpg" />
                            <img class="pifu" src="img/LOL9.jpg" />
                            <img class="pifu" src="img/LOL10.jpg" />
                            <img class="pifu" src="img/LOL11.jpg" />
                            <img class="pifu" src="img/LOL1.jpg" />
                            <img class="pifu" src="img/LOL2.jpg" />
                            <img class="pifu" src="img/LOL3.jpg" />
                            <img class="pifu" src="img/LOL4.jpg" />
                            <img class="pifu" src="img/LOL5.jpg" />
                            <img class="pifu" src="img/LOL12.jpg" />
                        </ul>
                    </li>
                    <li class="rightItem">
                        <p class="title">周免英雄</p>
                    </li>
                </ul>
    
    
    
    
    
            </div>
    
    
        </div>
    
    
    
    
    
    
    
    
    
    </body>
    
    
    
        <div class="recommend">
        <div class="line"></div>
        <ul class="recommendList">
    
            <li class="recommendItem">
                <p class="title">最新推荐</p>
    
            </li>
    
            <li class="recommendItem">
                <p class="title">视频推荐</p>
    
    
            </li>
            <li class="recommendItem">
                <p class="title">活动推荐</p>
                <div class="animation"></div>
    
            </li>
    
    
        </ul>
    
    
    
    
        <ul class="activityList">
            <li class="activityItem">
                <img class="activityImg" src="img/LOL1.jpg" />
                <!--<img class="detail" src="img/LOL3.jpg" />-->
            </li>
            <li class="activityItem">
                <img class="activityImg" src="img/LOL2.jpg" />
            </li>
            <li class="activityItem">
                <img class="activityImg" src="img/LOL3.jpg" />
            </li>
            <li class="activityItem">
                <img class="activityImg" src="img/LOL4.jpg" />
            </li>
    
    
        </ul>
    
    
    
    
    </div>
    
    
    
        <div class="navRight">
            <ul class="list">
                <li class="item">
                    <img src="img/navRight_user.png" />
                    <li>账号</li>
                </li>
                <li class="item">
                    <img src="img/navRight_user.png" />
                    <li>账号</li>
                </li>
                <li class="item">
                    <img src="img/navRight_user.png" />
                    <li>账号</li>
                </li>
                <li class="item package">
                    <img src="img/navRight_user.png" />
                    <li>购<br />物<br />车</li>
                </li>
                <li class="item">
                    <img src="img/navRight_user.png" />
                    <li>账号</li>
                </li>
    
            </ul>
        
        </div>
    
    
    
    
    </html>
    
    
    activity.css
    .activity{
        background-image: url(../img/activity.jpeg);
        height: 350px;
        background-position: center center;
        background-size:  1800px 350px;
        background-repeat:  = no-repeat;
        
    }
    
    banner.css
    .banner{
        
        width: 1200px;
        
        height: 400px;
        
        
        margin: 0 auto ;
        
        position: relative;
        
        top: 35px;
    }
    
    
    
    .banner .bannerBox{
        
        width: 800px;
        height:  40px;
        position: absolute;
        
        bottom: 0px;
        
        
        
    }
    
    .bannerBox .bannerList{
        
        list-style: none;
        
    }
    
    
    .bannerList .bannerItem{
        
        float: left;
        
        width: 20%;
        height: 100%;
    
    }
    
    
    .bannerItem .title{
    
        line-height: 45px;
        font-size: 14px;
        text-align: center;
        height: 45px;
        background: rgb(17,17,17) ;
        color: white;
        cursor: pointer;
    }
    
    
    .bannerItem .img{
        
        position: absolute;
        
        width: 800px;
        height: 360px;
        
        left: 0;
        
        top: -360px;
        
        
        opacity: 0;
        
        
        transition: all 0.5s;
        
        z-index: 50;
        
    }
    
    
    .bannerList .bannerItem:nth-child(1) .title{
        background: rgb(48,48,48) ;
        color: rgb(225,173,77);
        
    }
    
    
    .bannerList .bannerItem:nth-child(1) .img{
        
        opacity: 1;
    }
    
    
    .bannerList .bannerItem:hover .img{
        
        opacity: 1;
        
        z-index: 51;
    }
    
    
    .bannerList .bannerItem:hover .title{
        
        background: rgb(48,48,48) ;
        color: rgb(225,173,77);
    }
    
    
    .banner .companyBox{
        
        /*background: red;*/
        height: 405px;
        position: absolute;
        right: 0;
        width: 380px;
    
    }
    
    
    .companyBox .top{
        
        background: blue;
        width: 100%;
        height: 150px;
        
        cursor: pointer;
    }
    
    .companyBox .bottom{
        list-style: none;
        
        position: relative;
        
        top: 10px;
        
    }
    
    .companyBox .bottom .item{
        float: left;
        width: 31.7%;
        margin: 3px;
        /*padding: 2px;*/
        height: 50px;
        line-height: 50px;
        font-size: 15px;
        color:  rgb(88,88,88);
        background: white;
        text-align: center;
        
        cursor: pointer;
        
    }
    
    content
    .content{
        
        
        width: 1200px;
        
        height: 650px;
        
        
        margin: 0 auto ;
        
        position: relative;
        
        top: 100px;
        
        
        
    }
    
    /*leftBox*/
    .content .leftBox{
        
        width: 800px;
        height:  100%;
        position: relative;
        /*background: lightgray;*/
        
    }
    
    .leftBox .contentList{
        list-style: none;
        
        
    }
    
    
    
    
    .contentList .contentItem{
        float: left;
        width: 20%;
        height: 40px;
        
    }
    
    .contentList .contentItem .animation{
        background: rgb(225,173,77);;
        height: 3px;
        width: 20%;
        position: absolute;
        top: 43px;
        
    }
    
    .leftBox .line{
        background: lightgray;
        height: 3px;
        width: 100%;
        position: relative;
        top: 43px;
        
    
    }
    .contentList .contentItem .kindTitle{
        text-align: center;
        line-height: 40px;
        font-size: 15px;
        height: 40px;
        color: gray;
        cursor: pointer;
    }
    
    
    .contentList .contentItem:nth-child(1) .kindTitle{
        text-align: left;
        line-height: 40px;
        font-size: 23px;
        height: 40px;
        color: rgb(53,53,53);
        position: relative;
        top: -10px;
        
    }
    
    .contentList .contentItem:nth-child(2) .kindTitle{
        
        color: rgb(225,173,77);
        
    }
    
    
    .contentList .contentItem:nth-child(1):hover .kindTitle{
        color: rgb(53,53,53);
    }
    
    
    .contentList .contentItem:hover .kindTitle{
        
        color: rgb(225,173,77);
        
    }
    
    
    
    
    
    /*content*/
    .contentList .contentItem .contentDetilList{
        
        /*background: red;*/
        width: 800px;
        height: 580px;
        
        position: absolute;
        
        left: 0;
        
        bottom: 0;
        list-style: none;
        
    }
    
    
    .contentDetilList .detailItem{
        list-style: none;
        
        line-height: 45px;
        
        /*background: lightblue;*/
        
        height: 45px;
        
        cursor: pointer;
        
    }
    
    .contentDetilList .detailItem:nth-child(1){
        
        
        height: 140px;
        
        
    }
    
    
    .contentDetilList .detailItem .detailImg{
        
        width: 200px;
        height: 120px;
        
        
    }
    
    
    
    .contentDetilList .detailItem .title{
        
        position: absolute;
        left: 220px;
        right: 2px;
        height: 30px;
        top: 0px;
        font-size: 28px;
        line-height: 30px;
        font-weight:900;
        color: rgb(17,17,17);
        
    }
    .contentDetilList .detailItem .subTitle{
        
        position: absolute;
        left: 220px;
        right: 2px;
        top: 40px;
        line-height: 20px;
        bottom: 0;
        color: rgb(164,164,164);
        font-size: 14px;
        
    }
    
    
    .contentDetilList .detailItem .type{
        
        
        line-height: 35px;
        
        display: block;
        width: 60px ;
        
        background: rgb(224,224,224);
        
        float: left;
        height: 35px;
        
        text-align: center;
        
        position: relative;
        
        top: 5px;
        left: 2px;
        color: rgb(142,142,142);
        
    
    }
    
    .contentDetilList .detailItem .text{
        
        
        line-height: 45px;
        
        display: block;
        
    
        float: left;
        height: 45px;
        
        /*text-align: center;*/
        
        position: absolute;
        color: rgb(85,85,85);
        
        left: 80px;
        right: 2px;
        
        
    
    }
    
    
    
    .contentDetilList .detailItem:hover .type{
        
        background: rgb(225,173,77);
        color:  white;
        
    }
    
    .contentDetilList .detailItem:hover .text{
        
        color:  rgb(225,173,77);
        
    }
    
    
    
    .contentDetilList .moreDetail{
        
        background: rgb(224,224,224);
        text-align: center;
        height: 45px;
        line-height: 45px;
        position: relative;
        top: 24px;
        color: rgb(85,85,85);
        border-radius: 3px;
        cursor: pointer;
    }
    
    .contentDetilList .moreDetail:hover{
        
        background: rgb(225,173,77);
        color: white;
    }
    
    
    
    
    /*rightBox*/
    .content .rightBox{
        
        
        /*background: red;*/
    
    
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        width: 380px;
        
    }
    
    .rightBox .line{
        background: lightgray;
        height: 3px;
        width: 100%;
        position: relative;
        top: 43px;
        
    
    }
    .rightBox .rightList{
        list-style: none;
    }
    
    .rightBox .rightList .rightItem{
        float: left;
        width: 33.33%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        
        color: gray;
        cursor: pointer;
    
    }
    
    
    .rightList .rightItem .animation{
        background: rgb(225,173,77);;
        height: 3px;
        width: 33.33%;
        position: absolute;
        top: 43px;
    } 
    
    
    .rightList .rightItem:nth-child(2) .title{
        color: rgb(225,173,77);
        
    }
    
    
    .rightList .rightItem:hover .title{ 
        color: rgb(225,173,77);
    }
    
    
    .rightList .rightItem .pifuList{
        list-style: none;
        width: 380px;
        position: absolute;
        left: 0;
        top: 60px;
        
    
    }
    
    .pifuList .pifu{
        
        width:  180px;
        float: left;
        height: 70px;
        
        margin: 5px  ;
        
    }
    
    .pifuList .pifu:nth-child(11){
        
        position: relative;
        top: 40px;
    }
    
    .pifuList .pifu:nth-child(12){
        
        position: relative;
        top: 40px;
    }
    
    dropList.css
    .dropList{
        
        height: 220px;
        /*width: 3000px;*/
        top: 90px;
        position: absolute;
        background: rgba(11,11,11,0.6);
        width: 100%;
        
        display: none;
            
    }
    
    .dropList .bigBox{
        margin: 0 auto;
        width: 1200px;
        height: 100%;
        position: relative;
    }
    
    
    
    .bigBox .listBox{
        position: absolute;
        left: 220px;
        height: 100%;
        width: 600px;
        top: 20px;
        /*background: yellow;*/
    }
    
    .listItem{
        list-style: none;
        width: 20%;
        float: left;
    }
    
    
    .listItem .item{
        
        color:  white;
        height: 30px;
        text-align: center;
        line-height: 30px;
        font-size: 12px;
        cursor: pointer;
    }
    
    .listItem .item:hover{
        color: rgb(225,173,77);
    }
    
    
    Nav.css
    *{
        margin: 0;
        padding: 0;
    }
    
    .TopNav{
        background: rgb(11,11,11);
        height: 90px;
        top: 0;
        position: relative;
    
    }
    
    
    .TopNav .navBox{
        
        margin: 0 auto;
        width: 1200px;
        height: 100%;
        position: relative;
    }
    
    
    .navBox img{
            cursor: pointer;
    
    }
    
    .navBox p{
        color:  white;
    }
    
    .navBox .logo{
        height: 66px;
        width: 190px;
        position: absolute;
        top: 50%;
        left: 0;
        margin-top: -36px;
        float: left;
        
    }
    
    .navBox .navList{
        
        list-style: none;
        position: absolute;
        left: 220px;
        height: 100%;
        width: 600px;
        
    }
    
    
    
    
    .navList .navItem{
        float: left;
        cursor: pointer;
        width: 20%;
    }
    
    .navItem .title{
        color:  white;
        font-size: 18px;
        margin:0 18px;
        line-height: 90px;
        
    }
    
    .navBox .searchBtn{
        
        width: 40px;
        height: 40px;
        position: absolute;
        left: 840px;
        top: 50%;
        margin-top: -20px;
        cursor: pointer;
    }
    
    .navBox .bookBtn{
        
        width: 40px;
        height: 40px;
        position: absolute;
        left: 900px;
        top: 50%;
        margin-top: -20px;
        cursor: pointer;
        
    }
    
    .navBox .userCenter{
        
        float: left;
        position: absolute;
        right: 0;
        height: 100%;
        width: 350px;
        
    
    }
    
    
    .userCenter .userHead{
        
        width: 82px;
        height: 80px;
        position: absolute;
        top: 5px;
        /*float: left;*/
        
    }
    
    .userCenter .loginTip{
        /*float: left;*/
        position: absolute;
        height: 18px;
        right:0 ;
        width: 250px;
        text-align: left;
        top: 25px;
        
        
    }
    
    .userCenter .loginSubTip{
        font-size: 12px;
        top: 50px;
        height: 20px;
        width: 250px;
        right:0 ;
            position: absolute;
                text-align: left;
                color: darkgray;
    
    
    }
    
    
    .loginTip .loginBtn{
        
        color: rgb(225,173,77);
        cursor: pointer;
    }
    
    
    navRight
    .navRight{
        background: rgb(11,11,11);
        width: 50px;
        /*height: 100%;*/
        position: fixed;
        right: 0;
        top: 150px;
        bottom: 150px;
    }
    
    .navRight .list{
        list-style: none;
        color: white;
        text-align: center;
        font-size: 12px;
    
        line-height: 12px;
    }
    
    .navRight .list .item {
        margin: 8px 0;
        
        
        
    }
    
    .navRight .list .package{
        
        pmargin-top: 120px;
        
        
    }
    
    
    .navRight .list .item:nth-child(1){
        margin-top: 20px;
    }
    
    
    
    
    recommend
    
    .recommend{
        
        
        width: 1200px;
        
        height: 300px;
        
        
        margin: 0 auto ;
        
        position: relative;
        
        top: 150px;
        
        /*background: green;*/
        
        
    }
    
    .recommend .line{
        background: lightgray;
        height: 3px;
        width: 100%;
        position: relative;
        top: 43px;
        
    
    }
    
    .recommend .recommendList{
        
        list-style: none;
        width: 450px;
        height: 40px;
        /*background: red;*/
        
    }
    
    .recommendList .recommendItem{
        float: left;
        text-align: center;
        line-height: 40px;
        font-size: 15px;
        width: 33.33%;
        color: gray;
        cursor: pointer;
    }
    
    .recommendList .recommendItem .animation{
        background: rgb(225,173,77);;
        height: 3px;
        width: 150px;
        position: absolute;
        top: 43px;
        
    }
    
    .recommendList .recommendItem:hover .title{
         color:  rgb(225,173,77);
    }
    
    .recommendList .recommendItem:nth-child(1):hover .title{
         color: rgb(53,53,53);
    }
    
    
    .recommendList .recommendItem:nth-child(3){
        color:  rgb(225,173,77);
    }
    
    .recommendList .recommendItem:nth-child(1){
        
        text-align: left;
        line-height: 40px;
        font-size: 23px;
        height: 40px;
        color: rgb(53,53,53);
        position: relative;
        top: -10px;
        
    }
    
    
    
    .recommend .activityList{
        
        width: 1200px;
        height: 300px;
        list-style: none;
        position: relative;
        top: 40px;
    }
    
    .activityList .activityItem{
        
        width: 24%;
        height: 300px;
        float: left;
        margin: 6px;
        cursor: pointer;
        height: 200px;
        /*position: absolute;*/
    }
    
    .activityList .activityItem .activityImg{
        width: 100%;
        height: 100%px;
        /*position: absolute;*/
    
    }
    
    
    .activityList .activityItem .detail{
        width: 50%;
        height: 50%;
        
        
        top: 0;
        
    }
    
    
    toolBar.css
    .toolBar{
        
        height:50px;
        /*background: white;*/
        
        border-bottom: 3px solid rgba(1,1,1,0.1);
        
    }
    
    .toolBar .toolBox{
        
        margin: 0 auto;
        width: 1200px;
    
    }
    
    .toolBox .toolList{
        list-style: none;
    } 
    
    
    .toolList .barItem{
        float: left;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 16px;
        margin: auto 26px;
        color: gray;
        cursor: pointer;
    }
    
    
    
    
    .toolList .barItem:hover{
        color: rgb(225,173,77);
    }
    
    .toolList .barItem:nth-child(1){
        
        color: rgb(225,173,77);
        
    }
    
    
    .toolList .barItem .animationBar{
        width: 100px;
        height: 3px;
        background: rgb(225,173,77);
        position: relative;
        top: -2px;
    }
    

    最终效果图:


    image.png image.png image.png

    项目下载地址

    相关文章

      网友评论

        本文标题:h5练习一:英雄联盟主页

        本文链接:https://www.haomeiwen.com/subject/ykfznctx.html