0
点赞
收藏
分享

微信扫一扫

h5练习一：英雄联盟主页

半夜放水 2021-09-28 阅读 52
h5之旅网页前端后台技...

话不多说 上代码

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

最终效果图：


项目下载地址

举报

相关推荐

vue3+vite+ts视频背景酷炫登录模板【英雄联盟主题】

spring boot后端javafilter

从0-1 h5 h5 授权 适配 h5微信授权

html5vue.jsnpm

英雄联盟是什么？

游戏

H5测试

APP测试经验总结h5数据加载Spark大数据

H5 - URL

htmlweb服务器锚点Java编程语言

h5基础

htmlcss前端

Android H5

移动开发Androidhtml.netHtml/CSS前端开发

h5内嵌app，h5图片不展示，crossOrigin=“anonymous“

前端获取数据HTTP客户端Python后端开发

h5新增标签

html5前端

H5 Web Workers

前端
0 条评论