單身狗的凝視跟著李南江學習HTML5-項目總結

基礎課很快就結束了肋杖，終于要迎來期待已久的大神班了！

如果說要拿出一個項目來總結基礎班的知識挖函，我覺得這個努比亞的首頁最能概括了

先上我做的效果
https://afue.github.io/nubia_index/

再上我的源代碼

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Nubia-努比亞手機</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <style>
        /*通配*/
        h1{
            display: none;
        }
        .sameWidth{
            width: 1200px;
            margin: 0 auto;
        }
        .redSpan{
            color:#f00;
            font-weight:normal;
        }
        /*頭部開始*/
        .header{
            height: 180px;
        }
        /*頂部導航欄*/
        .top-bar{
            background-color: #000;
        }
        .top{
            height: 60px;
        }
        .top .logo{
            float: left;
            width: 190px;
            height: 60px;
            background: url("images/nubia-logo.png") no-repeat 0 0;
        }
        .top .nav{
            height: 60px;
            line-height: 60px;
            float: left;
            margin-left: 330px;
        }
        .top a:hover{
            color:#f00;
            text-decoration: none;
        }
        .nav ul li:hover a{
            color:#f00;
        }
        .nav ul li{
            float: left;
            margin-right: 40px;
        }
        .nav ul li a{
            color: #fff;
            font-size: 16px;
        }

        .top .user{
            height: 60px;
            float: right;
        }
        .user a{
            font-size: 12px;
            color: #ccc;
        }
        .user li{
            height: 30px;
            line-height: 30px;
            float: left;
            padding-top:15px;
            padding-right:15px;
        }
        .user-icon{
            background: url("images/nubia-syb-all.png") no-repeat 0 0;
            width: 30px;
            height: 30px;
            display: inline-block;
        }
        /*手機推薦導航*/
        .phones > ul{
            height: 122px;
            width: 1040px;
            margin: 0 auto;
        }
        .phones > ul > li{
            width: 140px;
            margin-right:10px;
            float: left;
            height: 122px;
            box-sizing:border-box;
        }
        .phones > ul > li:hover{
            border-bottom: 2px solid #f00;
        }
        .phones > ul > li:last-of-type{
            /*疑問：為什么會掉下來10像素状植？*/
            margin-top:-10px;
            margin-right:0;
        }
        .phones > ul > li a{
            width: 140px;
            height: 120px;
            display: inline-block;
            text-align: center;
        }
        .phones > ul > li img{
            width: 120px;
            height: 80px;
        }
        .phones > ul > li a > span{
            display: inline-block;
            width: 140px;
            font-size:12px;
            color: #ccc;
        }
        /*頭部結束*/
        /*內(nèi)容開始*/
        .content{
            background-color: #f4f4f4;
        }
        /*video容器*/
        .video{
            height:270px;
        }
        .video ul{
            width:1200px;
            height:270px;
        }
        .video ul li{
            float: left;
            margin:10px 5px;
            width:390px;
            height:250px;
            background-size: auto 250px;
            position:relative;
        }
        .video-li-1{
            background: url("images/video1.jpg") no-repeat center;
        }
        .video-li-2{
            background: url("images/video2.jpg") no-repeat center;
        }
        .video-li-3{
            background: url("images/video3.jpg") no-repeat center;
        }
        .video ul a{
            text-decoration: none;
            width:390px;
            height:250px;
            display: inline-block;
        }
        .video ul li a > div{
            opacity: 0;
            position: relative;
            width:390px;
            height:250px;
            background-color: rgba(0,0,0,0.5);
            transition:opacity 800ms;
        }
        .video-icon{
            width: 60px;
            height: 60px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left:-30px;
            margin-top:-30px;
        }
        .video-title{
            width: 160px;
            height: 50px;
            position: absolute;
            left: 50%;
            margin-left:-80px;
            bottom: 40px;
            text-align: center;
        }
        .video-title h2{
            font-size: 16px;
            color: #fff;
        }
        .video-title p{
            font-size: 12px;
            color: #fff;
        }
        /*video容器基本樣式結束，動畫開始*/
        /*50怨喘，70津畸，55，60*/
        .video ul li:hover a > div{
            opacity: 1;
        }
        .video ul li:hover .video-icon{
            animation:sparkle 3.3s linear infinite;
        }
        /*video容器動畫結束*/
        .title{
            text-align: center;
            height: 140px;
            line-height: 45px;
            padding-top:20px;
        }
        .title a{
            color: #f00!important;
            text-decoration: none;
        }
        .new-phone a{
            color: #000;
        }
        .hava-a-look{
            font-size:12px;
            display: inline-block;
            width: 110px;
            height: 30px;
            line-height:30px;
            text-align: center;
            border: 1px solid #ccc;
            border-radius: 3px;
        }
        .hava-a-look:hover{
            border: 1px solid #f00;
            color: #f00;
        }
        /*z11黑金版*/
        .new-phone-z11{
            height: 400px;
            width: 1200px;
            background-color: #fff;
            overflow: hidden;
            position: relative;
        }
        .new-phone-z11 img{
            height: 260px;
            width: auto;
            position: absolute;
            left: -40px;
            top:70px;
            transform:translateX(0);
            transition:transform 1s;
        }
        .new-phone-z11:hover img{
            transform:translateX(40px);
        }
        .new-phone-z11 .npz-text1{
            position: absolute;
            top:150px;
            right:145px;
            font-size:18px;
            line-height:25px;
            display: inline-block;
            height: 25px;
            margin: 0;
        }
        .new-phone-z11 .npz-text2{
            position: absolute;
            top:175px;
            right:165px;
            font-size:12px;
            display: inline-block;
            height: 15px;
            line-height: 15px;
            color: #666;
        }
        .new-phone-z11 .npz-text3{
            position: absolute;
            top:200px;
            right:136px;
        }
        /*其他手機*/
        .new-phone-other{
            margin-top:10px;
            height: 795px;
            width: 1200px;
            position: relative;
        }
        .nfo-left{
            float: left;
            width: 400px;
            height: 795px;
            overflow: hidden;
            position: relative;
            background-color: #fff;
        }
        .nfo-left img{
            width: 400px;
            transition:transform 1s;
        }
        .nfo-left a{
            width: 400px;
            height: 795px;
            display: inline-block;
        }
        .nfo-left h2{
            position: absolute;
            left:135px;
            bottom:85px;
            font-size:18px;
            line-height:25px;
            display: inline-block;
            height: 25px;
            margin: 0;
        }
        .nfo-left .nfol-text1{
            position: absolute;
            left:163px;
            bottom:70px;
            font-size:12px;
            display: inline-block;
            height: 15px;
            line-height: 15px;
            color: #666;
        }
        .nfo-left .nfol-text2{
            position: absolute;
            left:143px;
            bottom:30px;
        }
        .nfo-left:hover img{
            transform:scale(1.1);
        }
        .nfo-right{
            float: right;
            width: 790px;
            height: 795px;
        }
        .nfor-top{
            width: 790px;
            height: 390px;
            background-color: #fff;
            margin-bottom:10px;
            overflow: hidden;
            position: relative;
        }
        .nfor-top a{
            width: 790px;
            height: 390px;
            display: inline-block;
        }
        .nfor-top img{
            height: 250px;
            transition:transform 1s;
        }
        .nfor-top h2{
            position: absolute;
            left:332px;
            bottom:85px;
            font-size:18px;
            line-height:25px;
            display: inline-block;
            height: 25px;
            margin: 0;
        }
        .nfor-top .nfort-text1{
            position: absolute;
            left:364px;
            bottom:70px;
            font-size:12px;
            display: inline-block;
            height: 15px;
            line-height: 15px;
            color: #666;
        }
        .nfor-top .nfort-text2{
            position: absolute;
            left:350px;
            bottom:30px;
        }
        .nfor-top:hover img{
            transform:translateX(-40px);
        }
        .nforb-l{
            float: left;
            width: 390px;
            height: 395px;
            background-color: #fff;
            overflow: hidden;
            position: relative;
        }
        .nforb-l a{
            width: 390px;
            height: 395px;
            display: inline-block;
        }
        .nforb-l img{
            height: 320px;
            transition:transform 1s;
        }
        .nforb-l h2{
            position: absolute;
            left:133px;
            bottom:45px;
            font-size:18px;
            line-height:25px;
            display: inline-block;
            height: 25px;
            margin: 0;
        }
        .nforb-l .nforbl-text{
            position: absolute;
            left:175px;
            bottom:30px;
            font-size:12px;
            display: inline-block;
            height: 15px;
            line-height: 15px;
            color: #666;
        }
        .nforb-l:hover img{
            transform:scale(1.1);
        }
        .nforb-r{
            float: right;
            width: 390px;
            height: 395px;
            background-color: #fff;
            overflow: hidden;
            position: relative;
        }
        .nforb-r a{
            width: 390px;
            height: 395px;
            display: inline-block;
        }
        .nforb-r img{
            height: 320px;
            transition:transform 1s;
        }
        .nforb-r h2{
            position: absolute;
            left:128px;
            bottom:45px;
            font-size:18px;
            line-height:25px;
            display: inline-block;
            height: 25px;
            margin: 0;
        }
        .nforb-r .nforbr-text{
            position: absolute;
            left:155px;
            bottom:30px;
            font-size:12px;
            display: inline-block;
            height: 15px;
            line-height: 15px;
            color: #666;
        }
        .nforb-r:hover img{
            transform:scale(1.1);
        }
        /*精選配件*/
        .parts-list,.parts-list > ul{
            width: 1200px;
            height: 300px;
        }
        .parts-list > ul >li{
            float: left;
            height: 300px;
            background-color: #fff;
            margin-right:10px;
            overflow: hidden;
        }
        .parts-list > ul >li > a{
            height: 300px;
            width: 295px;
            display: inline-block;
            text-decoration: none;
        }
        .parts-list > ul >li > a > img{
            height: 240px;
            transition:transform 1s;
        }
        .parts-list > ul >li > a >p{
            width: 290px;
            text-align: center;
            line-height: 25px;
            color: #666;
            position: relative;
        }
        .par-list1{
            width: 295px;
        }
        .par-list2{
            width: 290px;
        }
        .par-list3{
            width: 290px;
        }
        .par-list4{
            width: 295px;
            margin-right:0!important;
        }
        .parts-list > ul >li:hover img{
            transform:scale(1.1);
        }
        /*底部全部機型列表*/
        .all-phones{
            /*height:500px;*/
            margin-top:100px;
            padding-top:40px;
            background-color: #fff;
        }
        .phones-list-border{
            padding-top:20px;
            border-top:1px solid #ccc;
        }
        .phones-list{
            width: 1000px;
            margin: 0 auto;
        }
        .apl-title{
            height: 17px;
            line-height: 17px;
        }
        .apl-title img{
            width: 14px;
            height: 13px;
        }
        .apl-item{
            padding-top:25px;
            height: 190px;
        }
        .apl-item > li{
            height: 190px;
            float: left;
            margin-right: 100px;
        }
        .apl-item > li > ul >li > h3{
            font-size:12px;
            color: #333;
        }
        .apl-item > li > ul >li > a{
            color: #999;
            text-decoration: none;
        }
        .apl-item > li > ul >li > a:hover{
            color: #f00;
        }
        /*內(nèi)容結束*/
        /*尾部開始*/
        .footer{
            height: 130px;
        }
        .footer-box{
            height: 130px;
            clear:left;
        }
        .footer-top,.footer-bottom{
            height: 30px;
            line-height: 30px;
            width: 1000px;
            margin: 10px auto;
        }
        .footer-top a{
            font-size:10px;
            color: #999;
            text-decoration: none;
            vertical-align: middle;
        }
        .footer-top a:hover{
            color: #f00;
        }
        .footer-top .just-a-line{
            font-size:10px;
            color: #999;
            margin:0 10px;
        }
        .app-icon,.cloud-icon,.weibo-icon,.tel-icon{
            width: 30px;
            height: 30px;
            display: inline-block;
            margin:0 8px;
        }
        .app-icon{
            background: url("images/nubia-syb-all.png") no-repeat -246px 0px;
        }
        .cloud-icon{
            background: url("images/nubia-syb-all.png") no-repeat -186px 0px;
        }
        .weibo-icon{
            background: url("images/nubia-syb-all.png") no-repeat -126px 0px;
        }
        .tel-icon{
            background: url("images/nubia-syb-all.png") no-repeat -216px 0px;
        }
        .footer-top strong{
            font-weight:normal;
            font-size:16px;
            color: #ccc;
        }
        /*copyright*/
        .footer-bottom{
            font-size:10px;
            color: #ccc;
        }
        .footer-bottom a{
            text-decoration: none;
            font-size:10px;
            color: #ccc;
        }
        .footer-bottom img{
            height: 15px;
            margin: 0 5px;
        }
        .hover-black:hover{
            color: #000;
        }
        /*尾部結束*/
        @keyframes sparkle {
            0%{
                transform:scale(1);
            }
            20%{
                transform:scale(1);
            }
            40%{
                transform:scale(0.6);
            }
            60%{
                transform:scale(1.4);
            }
            80%{
                transform:scale(0.8);
            }
            100%{
                transform:scale(1);
            }
        }
    </style>
</head>
<body>
    <!--頭部開始-->
    <h1>努比亞手機-Nubia</h1>
    <div class="header">
        <!--頂部導航條開始-->
        <div class="top-bar">
            <div class="top sameWidth">
            <a href="javascript:"><div class="logo"></div></a>
            <div class="nav">
                <ul>
                    <li><a href="javascript:">首頁</a></li>
                    <li><a href="javascript:">商城</a></li>
                    <li><a href="javascript:">產(chǎn)品</a></li>
                    <li><a href="javascript:">應用</a></li>
                    <li><a href="javascript:">服務</a></li>
                    <li><a href="javascript:">體驗店</a></li>
                    <li><a href="javascript:">社區(qū)</a></li>
                </ul>
            </div>
            <ul class="user">
                <li><a href="javascript:" class="user-icon"></a></li>
                <li><a href="javascript:">注冊</a></li>
                <li><a href="javascript:">登錄</a></li>
            </ul>
        </div>
        </div>
        <!--頂部導航條結束-->
        <div class="phones sameWidth">
            <ul>
                <li><a href="javascript:">![](images/phone1.png)<span>Z11 miniS <strong class="redSpan">新款</strong></span></a></li>
                <li><a href="javascript:">![](images/nav-phone2.png)<span>Z11</span></a></li>
                <li><a href="javascript:">![](images/nav-phone3.png)<span>Z11 Max</span></a></li>
                <li><a href="javascript:">![](images/nav-phone4.png)<span>Z11 mini</span></a></li>
                <li><a href="javascript:">![](images/nav-phone5.png)<span>N1</span></a></li>
                <li><a href="javascript:">![](images/nav-phone6.png)<span>布拉格S</span></a></li>
                <li><a href="javascript:">![](images/nav-phone7.png)<span>My 布拉格</span></a></li>
            </ul>
        </div>
    </div>
    <!--頭部結束-->
    <!--內(nèi)容開始-->
    <div class="content">
        <div id="myCarousel" class="carousel slide">
            <!-- 輪播（Carousel）指標 -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
            <!-- 輪播（Carousel）項目 -->
            <div class="carousel-inner">
                <div class="item active">
                    ![](images/banner1.jpg)
                </div>
                <div class="item">
                    ![](images/banner2.jpg)
                </div>
                <div class="item">
                    ![](images/banner3.jpg)
                </div>
            </div>
        </div>
        <div class="video sameWidth">
            <ul>
                <li class="video-li-1"><a href="javascript:">
                    <div>![](images/nb-pro-video-ico-s.png)<div class="video-title"><h2>Z11 黑金版</h2><p>產(chǎn)品視頻</p></div></div>
                </a></li>
                <li class="video-li-2"><a href="javascript:">
                    <div>![](images/nb-pro-video-ico-s.png)<div class="video-title"><h2>微距相機</h2></div></div>
                </a></li>
                <li class="video-li-3"><a href="javascript:">
                    <div>![](images/nb-pro-video-ico-s.png)<div class="video-title"><h2>nubia Z11</h2><p>突破邊界</p></div></div>
                </a></li>
            </ul>
        </div>
        <div class="products sameWidth">
            <div class="new-phone">
                <div class="title">
                    <h2>最新產(chǎn)品</h2><a href="javascript:">查看全部手機></a>
                </div>
                <a href="javascript:"><div class="new-phone-z11">
                    ![](images/nb-pro-hj2-z11.jpg)
                    <h2 class="npz-text1">Z11 黑金版</h2><span class="npz-text2">無邊美學</span><span class="npz-text3 hava-a-look">一探究竟</span>
                </div></a>
                <div class="new-phone-other">
                    <div class="nfo-left">
                        <a href="javascript:">![](images/con-phone2.jpg)<h2>nubia Z11 miniS</h2><span class="nfol-text1">手機攝影專家</span><span class="nfol-text2 hava-a-look">一探究竟</span></a>
                    </div>
                    <div class="nfo-right">
                        <div class="nfor-top">
                            <a href="javascript:">![](images/con-phone3.jpg)<h2>nubia Z11 咖啡金</h2><span class="nfort-text1">無邊框旗艦手機</span><span class="nfort-text2 hava-a-look">一探究竟</span></a>
                        </div>
                        <div class="nfor-bottom">
                            <div class="nforb-l">
                                <a href="javascript:">![](images/nb-pro-new-z11maxbaihe2.jpg)<h2>nubia Z11 Max</h2><span class="nforbl-text">大·不同</span></a>
                            </div>
                            <div class="nforb-r">
                                <a href="javascript:">![](images/nb-pro-new-z11mini3.jpg)<h2>nubia Z11 mini</h2><span class="nforbr-text">小世界·大精彩</span></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="phone-parts">
                <div class="title">
                    <h2>精選配件</h2><a href="javascript:">查看全部配件></a>
                </div>
                <div class="parts-list">
                    <ul>
                        <li class="par-list1"><a href="javascript:">![](images/accessories1.jpg)<p>努比亞快充移動電源</p></a></li>
                        <li class="par-list2"><a href="javascript:">![](images/accessories2.jpg)<p>努比亞圈鐵耳機</p></a></li>
                        <li class="par-list3"><a href="javascript:">![](images/accessories3.jpg)<p>努比亞炫美自拍桿</p></a></li>
                        <li class="par-list4"><a href="javascript:">![](images/accessories4.jpg)<p>nubia攝影三腳架</p></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="all-phones">
            <div class="phones-list-border sameWidth">
                <div class="phones-list">
                    <div class="apl-title">![](images/nb-pro-ft-logo-x2.jpg)>全部機型</div>
                    <ul class="apl-item">
                        <li>
                            <ul>
                                <li><h3>Z系列</h3></li>
                                <li><a href="javascript:">nubia Z11</a></li>
                                <li><a href="javascript:">nubia Z11 Max</a></li>
                                <li><a href="javascript:">nubia Z11 mini</a></li>
                            </ul>
                        </li>
                        <li>
                            <ul>
                                <li><h3>M系列</h3></li>
                                <li><a href="javascript:">nubia 布拉格S</a></li>
                                <li><a href="javascript:">nubia My 布拉格</a></li>
                            </ul>
                        </li>
                        <li>
                            <ul>
                                <li><h3>配件</h3></li>
                                <li><a href="javascript:">保護殼</a></li>
                                <li><a href="javascript:">皮套</a></li>
                                <li><a href="javascript:">貼膜</a></li>
                                <li><a href="javascript:">耳機</a></li>
                                <li><a href="javascript:">數(shù)據(jù)線/充電器</a></li>
                                <li><a href="javascript:">周邊產(chǎn)品</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!--內(nèi)容結束-->
    <!--尾部開始-->
    <div class="footer">
        <div class="footer-box sameWidth">
            <div class="footer-top">
                <a href="javascript:">關于我們</a><span class="just-a-line">|</span><a href="javascript:">聯(lián)系我們</a><span class="just-a-line">|</span><a href="javascript:">新聞中心</a><span class="just-a-line">|</span><a href="javascript:">加入我們</a><span class="just-a-line">|</span><a
                href="javascript:">合作注冊</a><span class="just-a-line">|</span><a href="javascript:">公益</a><span class="just-a-line">|</span><a href="javascript:">以舊換新</a><span class="just-a-line">|</span><a
                href="javascript:">問題反饋</a><span class="just-a-line">|</span><a href="javascript:">簡體中文</a><a href="javascript:" class="app-icon"></a><a
                href="javascript:" class="cloud-icon"></a><a href="javascript:" class="weibo-icon"></a><a href="javascript:" class="tel-icon"></a><strong>服務熱線：400-700-6600</strong></div>
            <div class="footer-bottom">
                <span>2012-2017 努比亞技術有限公司 版權所有 </span><a href="javascript:" class="hover-black">粵ICP備10006213號-2</a><a href="javascript:"><img
                    src="images/gs.jpg"></a><span>ICP經(jīng)營許可證編號：粵B2-20120688</span><a href="javascript:">![](images/gh.png)粵公網(wǎng)安備 44030502000309號</a>
            </div>
        </div>
    </div>
    <!--尾部結束-->
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

這個demo就是對我這段時間基礎班的一個總結必怜，幾乎用到了所有基礎班的知識肉拓，不得不說老師出的題很不錯。

雖然洋洋灑灑800行代碼棚赔，但是實際上知識點并不算多帝簇，動畫基本上都是用transform配合transition給個過度。

中間遇到兩個奇葩問題:

底部footer-top的元素總是不在一個水平線上靠益，a標簽都掉出父元素范圍了丧肴，后來在老師的指導下給了一個vertical-align:middle;終于解決了，這就是有大神帶的好處胧后！

導航欄浮動的那一排手機芋浮，最后一個li莫名其妙的掉了10像素，只好先給個margin-top：-10px壳快；望大神指教纸巷。

學HTML5就選李南江，選培訓機構我只選小碼哥（www.520it.com）

最后編輯于：2017.12.06 01:31:59

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

人面猴
序言：七十年代末眶痰，一起剝皮案震驚了整個濱河市瘤旨，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌竖伯，老刑警劉巖存哲，帶你破解...
沈念sama閱讀 222,000評論 6贊 515
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異七婴，居然都是意外死亡祟偷，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 94,745評論 3贊 399
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門打厘，熙熙樓的掌柜王于貴愁眉苦臉地迎上來修肠，“玉大人，你說我怎么就攤上這事户盯∏妒” “怎么了饲化？”我有些...
開封第一講書人閱讀 168,561評論 0贊 360
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長艰管。經(jīng)常有香客問我滓侍，道長，這世上最難降的妖魔是什么牲芋？我笑而不...
開封第一講書人閱讀 59,782評論 1贊 298
?港島之戀（遺憾婚禮）
正文為了忘掉前任撩笆，我火速辦了婚禮，結果婚禮上缸浦，老公的妹妹穿的比我還像新娘夕冲。我一直安慰自己，他們只是感情好裂逐，可當我...
茶點故事閱讀 68,798評論 6贊 397
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布歹鱼。她就那樣靜靜地躺著，像睡著了一般卜高。火紅的嫁衣襯著肌膚如雪弥姻。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 52,394評論 1贊 310
城市分裂傳說
那天掺涛，我揣著相機與錄音庭敦，去河邊找鬼。笑死薪缆，一個胖子當著我的面吹牛秧廉，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播拣帽，決...
沈念sama閱讀 40,952評論 3贊 421
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼疼电，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了减拭？” 一聲冷哼從身側響起蔽豺，我...
開封第一講書人閱讀 39,852評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎拧粪，沒想到半個月后修陡，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 46,409評論 1贊 318
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡既们，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 38,483評論 3贊 341
?白月光啟示錄
正文我和宋清朗相戀三年濒析，在試婚紗的時候發(fā)現(xiàn)自己被綠了正什。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片啥纸。...
茶點故事閱讀 40,615評論 1贊 352
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖婴氮，靈堂內(nèi)的尸體忽然破棺而出斯棒，到底是詐尸還是另有隱情盾致，我是刑警寧澤，帶...
沈念sama閱讀 36,303評論 5贊 350
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布荣暮，位于F島的核電站庭惜，受9級特大地震影響，放射性物質發(fā)生泄漏穗酥。R本人自食惡果不足惜护赊，卻給世界環(huán)境...
茶點故事閱讀 41,979評論 3贊 334
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望砾跃。院中可真熱鬧骏啰，春花似錦、人聲如沸抽高。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,470評論 0贊 24
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽翘骂。三九已至壁熄，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間碳竟，已是汗流浹背草丧。一陣腳步聲響...
開封第一講書人閱讀 33,571評論 1贊 272
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留瞭亮，地道東北人方仿。一個月前我還...
沈念sama閱讀 49,041評論 3贊 377
代替公主和親
正文我出身青樓，卻偏偏與公主長得像统翩，于是被迫代替她去往敵國和親仙蚜。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 45,630評論 2贊 359

單身狗的凝視跟著李南江學習HTML5-項目總結

推薦閱讀更多精彩內(nèi)容