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

最终效果图：


image.png
image.png
image.png

项目下载地址

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 215,012评论 6赞 497
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,628评论 3赞 389
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 160,653评论 0赞 350
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,485评论 1赞 288
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,574评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,590评论 1赞 293
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,596评论 3赞 414
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,340评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,794评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,102评论 2赞 330
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,276评论 1赞 344
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,940评论 5赞 339
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,583评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,201评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,441评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,173评论 2赞 366
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,136评论 2赞 352