h5練習(xí)一：英雄聯(lián)盟主頁(yè)

話不多說(shuō) 上代碼

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">用戶互動(dòng)</p>
                </li>
                <li class="navItem">
                    <p class="title">賽事中心</p>
                </li>
                <li class="navItem">
                    <p class="title">自助系統(tǒng)</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">親愛(ài)的召喚師刀崖，歡迎
                    <span></span>
                    <u class="loginBtn">登錄</u>
                </p>

                <p class="loginSubTip">登錄后查看自己的戰(zhàn)績(jī)、資產(chǎn)、聲望值等</p>

            </div>
        </div>


        <div class="dropList">

            <div class="bigBox">

                <div class="listBox">
                    <ul class="listItem">
                        <p class="item">欄目類(lèi)型一</p>
                        <p class="item">欄目類(lèi)型一</p>
                        <p class="item">欄目類(lèi)型一</p>
                        <p class="item">欄目類(lèi)型一</p>
                        <p class="item">欄目類(lèi)型一</p>
                        <p class="item">欄目類(lèi)型一</p>
                    </ul>
                    <ul class="listItem">
                        <p class="item">欄目類(lèi)型二</p>
                        <p class="item">欄目類(lèi)型二</p>
                        <p class="item">欄目類(lèi)型二</p>

                        <p class="item">欄目類(lèi)型二</p>
                        <p class="item">欄目類(lèi)型二</p>
                    </ul>
                    <ul class="listItem">
                        <p class="item">欄目類(lèi)型三</p>
                        <p class="item">欄目類(lèi)型一</p>


                        <p class="item">欄目類(lèi)型一</p>
                        <p class="item">欄目類(lèi)型一</p>
                    </ul>
                    <ul class="listItem">
                        <p class="item">欄目類(lèi)型一</p>
                        <p class="item">欄目類(lèi)型一</p>
                        <p class="item">欄目類(lèi)型一</p>
                        <p class="item">欄目類(lèi)型一</p>
                        <p class="item">欄目類(lèi)型一</p>
                        <p class="item">欄目類(lèi)型一</p>
                    </ul>
                    <ul class="listItem">
                        <p class="item">欄目類(lèi)型一</p>
                        <p class="item">欄目類(lèi)型一</p>

                        <p class="item">欄目類(lèi)型一</p>
                        <p class="item">欄目類(lèi)型一</p>
                        <p class="item">欄目類(lèi)型一</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">活動(dòng)中心</li>
            </ul>
        </div>
    </div>

    <div class="banner">
        <div class="bannerBox">
            <ul class="bannerList">
                <li class="bannerItem">
                    <p class="title">未來(lái)戰(zhàn)士2018</p>
                    <img class="img" src="img/LOL2.jpg" />
                </li>
                <li class="bannerItem">
                    <p class="title">520大作戰(zhàn)</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">集卡贏獎(jiǎng)勵(lì)</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">關(guān)俊冠軍慶典之夜 五大活動(dòng)強(qiáng)勢(shì)來(lái)襲</p>
                            <p class="subTitle">關(guān)俊打敗Uzi秽褒，重創(chuàng)RNG魁兼，獲得LOL全球最佳電競(jìng)王子的稱號(hào)帆竹，5月26日頒獎(jiǎng)典禮正式啟動(dòng)沟使，歡迎觀看</p>
                        </li>
                        <li class="detailItem">
                            <a class="type">新聞</a>
                            <a class="text">關(guān)俊打敗Uzi愚争，重創(chuàng)RNG孝偎，獲得LOL全球最佳電競(jìng)王子的稱號(hào)</a>
                        </li>
                        <li class="detailItem">
                            <a class="type">新聞</a>
                            <a class="text">關(guān)俊打敗Uzi访敌，重創(chuàng)RNG，獲得LOL全球最佳電競(jìng)王子的稱號(hào)</a>
                        </li>
                        <li class="detailItem">
                            <a class="type">新聞</a>
                            <a class="text">關(guān)俊打敗Uzi衣盾，重創(chuàng)RNG寺旺，獲得LOL全球最佳電競(jìng)王子的稱號(hào)，5月26日頒獎(jiǎng)典禮正式啟動(dòng)</a>
                        </li>
                        <li class="detailItem">
                            <a class="type">新聞</a>
                            <a class="text">關(guān)俊打敗Uzi势决，重創(chuàng)RNG阻塑，獲得LOL全球最佳電競(jìng)王子的稱號(hào)，5月26日頒獎(jiǎng)典禮正式啟動(dòng)</a>
                        </li>
                        <li class="detailItem">
                            <a class="type">新聞</a>
                            <a class="text">關(guān)俊打敗Uzi果复，重創(chuàng)RNG陈莽，獲得LOL全球最佳電競(jìng)王子的稱號(hào)，5月26日頒獎(jiǎng)典禮正式啟動(dòng)</a>
                        </li>
                        <li class="detailItem">
                            <a class="type">新聞</a>
                            <a class="text">關(guān)俊打敗Uzi虽抄，重創(chuàng)RNG走搁，獲得LOL全球最佳電競(jìng)王子的稱號(hào)，5月26日頒獎(jiǎng)典禮正式啟動(dòng)</a>
                        </li>
                        <li class="detailItem">
                            <a class="type">新聞</a>
                            <a class="text">關(guān)俊打敗Uzi迈窟，重創(chuàng)RNG私植，獲得LOL全球最佳電競(jìng)王子的稱號(hào)，5月26日頒獎(jiǎng)典禮正式啟動(dòng)</a>
                        </li>
                        <li class="detailItem">
                            <a class="type">新聞</a>
                            <a class="text">關(guān)俊打敗Uzi车酣，重創(chuàng)RNG曲稼，獲得LOL全球最佳電競(jìng)王子的稱號(hào)，5月26日頒獎(jiǎng)典禮正式啟動(dòng)</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">活動(dòng)推薦</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>賬號(hào)</li>
            </li>
            <li class="item">
                <img src="img/navRight_user.png" />
                <li>賬號(hào)</li>
            </li>
            <li class="item">
                <img src="img/navRight_user.png" />
                <li>賬號(hào)</li>
            </li>
            <li class="item package">
                <img src="img/navRight_user.png" />
                <li>購(gòu)<br />物<br />車(chē)</li>
            </li>
            <li class="item">
                <img src="img/navRight_user.png" />
                <li>賬號(hào)</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

項(xiàng)目下載地址

最后編輯于：2019.12.24 11:50:03

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末骇径，一起剝皮案震驚了整個(gè)濱河市躯肌，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌破衔，老刑警劉巖清女，帶你破解...
沈念sama閱讀 211,817評(píng)論 6贊 492
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異晰筛，居然都是意外死亡嫡丙，警方通過(guò)查閱死者的電腦和手機(jī)拴袭，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 90,329評(píng)論 3贊 385
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門(mén)，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)曙博，“玉大人拥刻，你說(shuō)我怎么就攤上這事「赣荆” “怎么了般哼？”我有些...
開(kāi)封第一講書(shū)人閱讀 157,354評(píng)論 0贊 348
道士緝兇錄：失蹤的賣(mài)姜人
文/不壞的土叔我叫張陵，是天一觀的道長(zhǎng)惠窄。經(jīng)常有香客問(wèn)我蒸眠，道長(zhǎng)，這世上最難降的妖魔是什么杆融？我笑而不...
開(kāi)封第一講書(shū)人閱讀 56,498評(píng)論 1贊 284
?港島之戀（遺憾婚禮）
正文為了忘掉前任楞卡，我火速辦了婚禮，結(jié)果婚禮上脾歇，老公的妹妹穿的比我還像新娘蒋腮。我一直安慰自己，他們只是感情好藕各，可當(dāng)我...
茶點(diǎn)故事閱讀 65,600評(píng)論 6贊 386
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布池摧。她就那樣靜靜地躺著险绘，像睡著了一般。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上呐芥，一...
開(kāi)封第一講書(shū)人閱讀 49,829評(píng)論 1贊 290
城市分裂傳說(shuō)
那天闻伶，我揣著相機(jī)與錄音光绕，去河邊找鬼欣尼。笑死，一個(gè)胖子當(dāng)著我的面吹牛拒啰，可吹牛的內(nèi)容都是我干的剩失。我是一名探鬼主播，決...
沈念sama閱讀 38,979評(píng)論 3贊 408
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼芒粹，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼估脆！你這毒婦竟也來(lái)了？” 一聲冷哼從身側(cè)響起圃阳，我...
開(kāi)封第一講書(shū)人閱讀 37,722評(píng)論 0贊 266
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎作喘，沒(méi)想到半個(gè)月后，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 44,189評(píng)論 1贊 303
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡物咳，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 36,519評(píng)論 2贊 327
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了崖咨。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片婉宰。...
茶點(diǎn)故事閱讀 38,654評(píng)論 1贊 340
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡轮听，死狀恐怖血巍，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情珊随，我是刑警寧澤述寡，帶...
沈念sama閱讀 34,329評(píng)論 4贊 330
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布柿隙，位于F島的核電站，受9級(jí)特大地震影響鲫凶，放射性物質(zhì)發(fā)生泄漏禀崖。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 39,940評(píng)論 3贊 313
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一螟炫、第九天我趴在偏房一處隱蔽的房頂上張望波附。院中可真熱鬧，春花似錦昼钻、人聲如沸掸屡。這莊子的主人今日做“春日...
開(kāi)封第一講書(shū)人閱讀 30,762評(píng)論 0贊 21
一樁弒父案茂嗓，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)。三九已至属韧，卻和暖如春碗淌，著一層夾襖步出監(jiān)牢的瞬間盏求，已是汗流浹背。一陣腳步聲響...
開(kāi)封第一講書(shū)人閱讀 31,993評(píng)論 1贊 266
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工亿眠，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留风喇，地道東北人。一個(gè)月前我還...
沈念sama閱讀 46,382評(píng)論 2贊 360
代替公主和親
正文我出身青樓缕探，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親还蹲。傳聞我的和親對(duì)象是個(gè)殘疾皇子爹耗，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 43,543評(píng)論 2贊 349