HTTML4&CSS2--综合案例

网易云音乐导航栏

效果图

2018-12-05_180102.png

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>网易云音乐导航条 demo</title>
    <style>
        body{
            padding: 0px;
            margin: 0px;
        }
        .nav{
            list-style-type: none;
            background-color: #C20C0C;
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;  
            font-size:  0;    /*解决li各个块之间空隙问题*/
        }
        /* 选择器分组 */
        .nav li, .nav a{
            display: inline-block;
            width: 80px;         
        }
        ul a{
            font-size: 17px;     /*配合font-size:0;解决li块之间空隙的问题*/
            /* text-decoration--去掉下划线 */
            text-decoration: none;
            color: #fff;
        }
        .menu{
            background-color: #9B0909;           
        }
        /* 伪类选择器--a:hover */
        .nav a:hover{
            background-color: #fff;
            color: #9B0909;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li><a href="#">推荐</a></li>
        <li><a href="#">排行榜</a></li>
        <li><a href="#" class="menu">歌单</a></li>
        <li><a href="#">主播电台</a></li>
        <li><a href="#">歌手</a></li>
        <li><a href="#">新碟上架</a></li>
    </ul>
</body>
</html>

新闻标题列表

效果图：

image.png

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>新闻标题列表 demo</title>
    <style>
        ul{
            
            list-style-type: none;
            width: 500px;
            height: 120px;
        }
        li{
            border-bottom: 1px dotted #2f8af3;

            /* 将line-height与height设置为相同高度可以实现文字垂直居中的效果 */
            height: 30px;
            line-height: 30px;

            /* 以下是一种组合--将多余的文本隐藏且将隐藏的文本用省略号代替(最多3个省略号)，
            white-space: nowrap;--强制将文本保持在同一行，除非遇到br标签或者直到文本结束才能换行 
            overflow: hidden;--将多余的文本隐藏
            text-overflow: ellipsis;--将隐藏的文本用省略号代替*/
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
        <!-- ul>li*4{文本$}：一次创建4个li且为其赋值 -->
        <!-- <ul>
            <li>文本1</li>
            <li>文本2</li>
            <li>文本3</li>
            <li>文本4</li>
        </ul> -->
        <!-- ul>li*4>lorem20：一次创建4个li且为每个li写入20个字符的内容 -->
        <ul>
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus repudiandae error beatae deserunt expedita sequi, iure veritatis aliquam atque recusandae?</li>
            <li>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum alias soluta nemo temporibus, quam sapiente id labore porro. Aspernatur, laudantium.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore molestias ullam, similique deleniti quisquam consequatur eum corrupti earum assumenda ipsa.</li>
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, blanditiis expedita! Quo distinctio necessitatibus molestias eius asperiores perferendis similique officiis.</li>
        </ul>    
</body>
</html>

教学管理系统登录页

2018-12-05_180506.png

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>login demo</title>
    <link rel="stylesheet" href="../CSS/reset.css">
    <link rel="stylesheet" href="../CSS/base.css">
    <style>
        *{
            /* 清除浏览器默认样式 */
            padding: 0;
            margin: 0;
            border: none;
        }
        div.login{
            width: 340px;
            border: 1px solid #ccc;
            margin: 0 auto;
            margin-top: 150px;
            padding: 25px;
            /* 边框阴影 */
            box-shadow: 0 0 2px 2px rgba(0, 0, 0,0.1);
            border-radius: 5px;
        }
        .login h3{
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            padding: 25px;
        }
        .login input{
            width: 313px;
            margin: 5px;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .login #submit{
            width: 313px;
            box-sizing: content-box;
            margin: 5px;
            padding: 9px;
            background-color: #007ACC;
            color: #fff;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="login">
        <form action="https://www.baidu.com" method="get">
            <h3>教学管理系统</h3>
            <div><input type="text" name="username" id="username" placeholder="请输入用户名"></div>
            <div><input type="password" name="password" id="password" placeholder="请输入密码"></div>
            <div><button id="submit">登录</button></div>
        </form>
    </div>
</body>
</html>

美食杰菜单详情页

效果图

美食网.png

HTML部分

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- SEO优化 -->
    <meta name="keywords" content="美食,美食网,菜谱,菜谱网,美食地图,食谱">
    <meta name="description" content="美食网 - 做你最喜爱的美食网，菜谱网。找家常菜谱，上美食网。">
    <title>egg demo</title>
    <link rel="stylesheet" href="../美食网/css/reset.css">
    <link rel="stylesheet" href="../美食网/css/base.css">
    <link rel="stylesheet" href="../美食网/css/style.css">
</head>

<body>
    <!-- 头部 -->
    <div class="header clearfix">
        <div class="header-c">
            <h1><img src="../美食网/images/logo.png" alt="美食网"></h1>
            <div class="headerItem">
                <a href="#" class="link qq">QQ登录</a>
                <a href="#" class="link weibo">微博登录</a>
                <a href="#">注册</a>
                <a href="#">登录</a>
            </div>
        </div>
    </div>
    <!--div.header END-->

    <!-- 导航栏 -->
    <div class="nav">
        <ul class="navbar">
            <li class="current"><a href="#"><span>首页</span></a></li>
            <li><a href="#">菜谱大全</a></li>
            <li><a href="#">饮食健康</a></li>
            <li><a href="#">美食菜单</a></li>
            <li><a href="#">家居馆</a></li>
            <li>
                <a href="#">美食达人</a>
                <span><img src="../美食网/images/icon.png" alt="美食达人"></span>
            </li>
            <li><a href="#">菜谱视频</a></li>
            <li><a href="#">手机版下载</a></li>
        </ul>
    </div>
    <!--div.nav END-->

    <!-- 菜单详情 -->
    <div class="menu">
        <div class="path">
            <ul>
                <li><a href="#">首页</a></li>
                <li>&gt;</li>
                <li><a href="#">菜谱大全</a></li>
                <li>&gt;</li>
            </ul>
        </div>
        <!--div.path END-->
        <div class="main">
            <h2>西红柿炒鸡蛋</h2>
            <p><span>“</span>这道菜，俺从小吃到大，它承载着我儿时的全部味觉记忆，啥也不说了，吃吧同志们。<span>”</span></p>
            <h3>材料</h3>
            <ul class="material clearfix">
                <li><a href="#">中型西红柿</a><span>2个</span></li>
                <li><a href="#">鸡蛋</a><span>2个</span></li>
                <li><a href="#">料酒</a><span>1茶匙<em>(5ml)</em></span></li>
                <li><a href="#">清水</a><span>1汤匙<em>(15ml)</em></span></li>
                <li><a href="#">青葱</a><span>2根</span></li>
                <li><a href="#">白糖</a><span>2茶匙<em>(10克)</em></span></li>
                <li><a href="#">番茄沙司</a><span>2汤匙<em>(30ml)</em></span></li>
                <li><a href="#">盐</a><span>1茶匙<em>(3克)</em></span></li>
            </ul>
            <h3>制作步骤</h3>
            <ol class="step">
                <li><em>1.</em>将鸡蛋打散，调入料酒和清水，继续搅匀。锅烧热，倒入油大火加热，待油8成热时，倒入鸡蛋，并用铲子迅速搅散。盛出备用。</li>
                <li><em>2.</em>用叉子叉住西红柿底部，放在火上烤10秒钟，待皮裂开后，撕去西红柿皮，将西红柿切块。青葱洗净切碎</li>
                <li><em>3.</em>锅中倒入油大火加热，待油7成熟时，放入青葱碎，随后倒入西红柿块，煸炒2分钟，待西红柿出汤后，调入白糖和番茄沙司，最后放入炒好的鸡蛋搅匀，出锅前放盐即可。</li>
            </ol>
            <h3>图片</h3>
            <ul class="images clearfix">
                <li>
                    <a href="#">
                        <img src="images/egg-1.jpg" alt="准备材料">
                    </a>
                    <span>准备材料</span>
                </li>
                <li>
                    <a href="#"><img src="images/egg-2.jpg" alt="炒鸡蛋">
                    </a>
                    <span>炒鸡蛋</span>
                </li>
                <li>
                    <a href="#"><img src="images/egg-3.jpg" alt="西红柿去皮">
                    </a>
                    <span>西红柿去皮</span>
                </li>
                <li>
                    <a href="#">
                        <img src="images/egg-4.jpg" alt="爆香葱花">
                    </a>
                    <span>爆香葱花</span>
                </li>
                <li>
                    <a href="#"><img src="images/egg-5.jpg" alt="炒西红柿">
                    </a>
                    <span>炒西红柿</span>
                </li>
                <li>
                    <a href="#"><img src="images/egg-6.jpg" alt="把鸡蛋放入一起炒">
                    </a>
                    <span>把鸡蛋放入一起炒</span>
                </li>
                <li>
                    <a href="#"><img src="images/egg-7.jpg" alt="出锅前放盐">
                    </a>
                    <span>出锅前放盐</span>
                </li>
                <li>
                    <a href="#"><img src="images/egg-8.jpg" alt="出锅">
                    </a>
                    <span>出锅</span>
                </li>
            </ul>
        </div>
        <!--div.mian END-->

    </div>
    <!--div.menu END-->

    <!-- 尾部 -->
    <div class="footer">
        <dl class="link  clearfix">
            <dt class="blogroll">友情链接</dt>
            <dd>美食</dd>
            <dd>体质测试</dd>
            <dd>伊特</dd>
            <dd>大粤网美食</dd>
            <dd>9酷音乐网</dd>
            <dd>爱奇艺生活</dd>
            <dd>365音乐网</dd>
            <dd>图吧</dd>
            <dd>汽车论坛</dd>
            <dd>39健康饮食</dd>
            <dd>QQ下载</dd>
            <dd>家具网</dd>
            <dd>搜狐美食</dd>
            <dd>美食天下</dd>
            <dd>中华美食网</dd>
            <dd>合肥公交网</dd>
            <dd>苹果园</dd>
            <dd>红餐微杂志</dd>
            <dd>北京搜房网</dd>
            <dd>更多友情链接</dd>
        </dl>
    </div>
    <!--div.footer END-->
    <div class="back-to-top"><a href="#" class="arrow">回到顶部</a></div>
</body>
</html>

--
CSS部分

div.header{
    background-color: #C10510;
    height: 130px;
    width: 100%; 
    width: 100%;
}
.header .header-c{
    display: block;
    margin: 0 auto;
    width: 990px;
    height: 130px;
}
div.header h1{
    text-align: center;
    height: 130px;
    line-height: 130px;
    float: left;
}
.header .header-c .headerItem{
    float: left;
    float: right;
    height: 130px;
}
.headerItem a{
    font-size: 12px;
    color: #fff;
    padding-left: 27px;
    padding-right: 15px;
    display: inline-block;
    margin-top: 57px;
}
.headerItem .qq{
    height: 28px;
    line-height: 28px;
    background: url(../images/topdsflogin_icon.gif) 0 0 no-repeat;
}
.headerItem .weibo{
    height: 28px;
    line-height: 28px;
    background: url(../images/topdsflogin_icon.gif) -2px -29px no-repeat;
}
.header-c .headerItem a:hover{
   text-decoration: underline;
   background-color: rgba(8, 0, 0, 0.3);
   border-radius: 4px;
}
div.header img{
    vertical-align: middle;
}

div.nav ul{
    text-align: center;
    height: 76px;
    background-color: #fff;
    box-shadow: 0 0 1px 1px #ddd;
}
ul.navbar li{
    display: inline-block;
    height: 76px;
    line-height: 76px;
    position: relative;
}
.nav ul a{
    display: inline-block;
    height: 76px;
    line-height: 76px;
    padding: 0 20px;
    font-size: 18px;
    font-weight: bold;
}
.nav ul li img{
    position: absolute;
    top: 8px;
    left: 84px;
}
.nav ul .current span{
    border-bottom: 4px solid red;
    display: inline-block;
    height: 76px;
} 
  div.menu{
    width: 990px;
    margin: 0 auto;
} 
div.path{
    height: 88px;
}
div.path ul li{
    display: inline-block;
    height: 88px;
    line-height: 88px;
    font-size: 17px;
} 
div.main{
    padding: 20px 0;
    background-color: #fff;
}
div.main h2{
    font-size: 35px;
    text-align: center;
    height: 88px;
    line-height: 88px;
}
div.main p{
    margin-top: 20px;
    padding-left: 15px; 
}
.main p span{
    font-size:30px;
    font-family: Arial;
    color: #ddd;
}
h3{
    font-size: 24px;
    height: 66px;
    line-height: 66px;
    margin-top: 20px;
    padding-left: 15px; 
    border-bottom: 1px solid #eee;
}
.material li a{
    height: 8px;
    line-height: 8px;
}
.material li a:hover{
    color: red;
    text-decoration: underline;
}

.material li{
    float: left;
    width: 207.5px;
    border-bottom: 1px solid #eee;
    padding: 20px;
}
.material li span{
    margin-left: 13px;
    font-size: 13px;
    color: #A699A6;
}
.material li span em{
    margin-left: 8px;
}
ol.step{
    margin-top: 20px;
    padding-left: 15px;   
}
ol.step em{
    color: #ff3232;
    font-size: 20px;  
    font-style: italic;
    font-family: Arial;
}
.main .images{
    padding: 20px;
}
ul.images li{
    float: left;
    padding: 15px;
    border: 1px solid #eee; 
    margin: 10px;
    /* 将li的高度设置为图片的高度，消除蓝色边框 */
    height: 232px;
    position: relative;
}
ul.images img{
    /* 将img宽度设置为li宽度 */
    width: 185.5px;
}
ul.images li:hover{
    box-shadow: 0 0 1px 1px rgba(47, 50, 53, 0.2);
}
ul.images li span{
    position: absolute;
    bottom: 15px;
    left: 15px;
    background: #3F3A32;
    opacity: 0.3;
    width: 185.5px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    text-align: center;
}

div.footer{
    background-color: #3F3A32;
    height: 180px;
    margin-top: 39px;
}
dl dt.blogroll{
    border-bottom: 1px solid #444;
    padding: 40px 0 11px 0;
}
.footer dl.link{
    width: 990px;
    margin: 0 auto;
}

dl.link dt{
    font-size: 15px;
    color: #fff;
}

dl.link dd{
    font-size: 14px;
    float: left;
    width: 99px;
    color: #999;
    padding-top: 11px; 
}
.back-to-top{
    background: url(../images/backtotop_icon.png) no-repeat;  
    width: 48px;
    height: 47px; 
    position: fixed;
    right: 0;
    bottom: 0;
    left: 50%;
    margin-left: 495px; 
    /* 将文字隐藏 */
    font-size: 0; 
}
.arrow{
    /* a标签是行内元素，如果要改变它的高度和宽度，需将其转换为行内块或块元素 */
    display: inline-block;
    width: 48px;
    height: 47px;  
} 
.arrow:hover{
    background: url(../images/backtotop_icon.png) 0 -48px no-repeat;

}

点击登录弹出登录框

效果图：

2018-12-05_180754.png

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>mask demo</title>
    <style>

        *{
            /* 清除浏览器默认样式 */
            padding: 0;
            margin: 0;
        }
        div.mask{
            position: fixed;
            top: 0;
            left: 0;
            z-index: 888;
            background: #000;
            opacity: 0.2;
            width: 100%;
            height: 100%;
            display: none;
        }

        div.login{
            position: fixed;
            top: 50%;
            left: 50%; 
            z-index: 1000;
            margin-top: -170px;
            margin-left: -170px;
            width: 340px;
            border: 1px solid #ccc;
            padding: 25px;
            /* 边框阴影 */
            box-shadow: 0 0 2px 2px rgba(0, 0, 0,0.1);
            border-radius: 5px;
            background-color: #fff;
            display: none;
        }
        div.login span{
            position: absolute;
            top: 10px;
            right: 10px;
            /* 将文本X变为pointer */
            cursor: pointer;
        }
        .login h3{
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            padding: 25px;
        }
        .login input{
            width: 313px;
            margin: 5px;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .login #submit{
            width: 313px;
            box-sizing: content-box;
            margin: 5px;
            padding: 9px;
            background-color: #007ACC;
            color: #fff;
            border-radius: 5px;
        }

    </style>

    <script>
        function submit1() {
            document.getElementById("login").style.display = 'block';
            document.getElementById("mask").style.display = 'block';
        }
    </script>
    <script>
        function close1() {
            document.getElementById('login').style.display = 'none';
            document.getElementById("mask").style.display = 'none';
        }
    </script>
</head>

<body>
    <div class="content">Welcome!</div>
    <button id="submit" onclick="submit1()">登录</button>
    <div class="mask" id="mask"></div>
    <div class="login" id="login">
        <form action="https://www.baidu.com" method="get">
            <h3>教学管理系统</h3>
            <div><input type="text" name="username" id="username" placeholder="请输入用户名"></div>
            <div><input type="password" name="password" id="password" placeholder="请输入密码"></div>
            <div><button id="submit">登录</button></div>
        </form>
        <span onclick="close1()">X</span>
    </div>
</body>
</html>

王者荣耀首页

效果图

王者荣耀首页.png

--
HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>index</title>
    <link rel="stylesheet" href="../王者荣耀/CSS/reset.css">
    <link rel="stylesheet" href="../王者荣耀/CSS/base.css">
    <link rel="stylesheet" href="../王者荣耀/CSS/index.css">
    <link rel="stylesheet" href="../王者荣耀/CSS/animation.css">
</head>
<body>
    <div class="topbar">
        <span>腾讯logo</span>
    </div>
    <div class="container">
        <div class="logo">王者荣耀logo</div>
        <img class="slogan" src="../王者荣耀/images/slogan.png" width="560" height="242" alt="一战封神">
        <a class="zzrz" href="#">作者入驻</a>
        <a class="mtrz" href="#">媒体入驻</a>
        <div class="arrow">箭头</div>
    </div>
</body>
</html>

--
CSS代码

html,body{
    height: 100%;
    overflow: hidden;
}
.topbar{
    height: 40px;
    padding-left: 200px;
}
.topbar span{
    background: url(../images/ost-bg.png) 0 -40px no-repeat;
    /* 将行内元素转换为块元素 */
    display: block;
    width: 205px;
    height: 40px;
    text-indent: -500px;
}
.container{
    background: url(../images/p1-bg.jpg) no-repeat;
    height: 100%;
    /* CSS属性会根据 @viewport 来初始化一个缩放因数。 */
    zoom: 0.715;
    position: relative;
}
.container .logo{
    background: url(../images/logo.png) no-repeat;
    display: block;
    width: 502px;
    height: 97px;
    position: absolute;
    top: 30px;
    left: 200px;
    z-index: 99;
    /* 将文字隐藏 */
    text-indent: -500px;
}
.container .slogan{
    position: absolute;
    display: block;
    left: 50%; 
    top: 236px;
    margin-left: -272px;
}
.container .zzrz{
    background: url(../images/spr.png) no-repeat;
    width: 310px;
    height: 80px;
    position: absolute;
    left: 50%;
    top: 664px;
    margin-left: -350px;
    /* 将文字隐藏 */
    text-indent: -500px;
}
.container .mtrz{
    background: url(../images/spr.png) -310px 0 no-repeat;
    width: 310px;
    height: 80px;
    position: absolute;
    right: 50%;
    top: 664px;
    margin-right: -350px;
    /* 将文字隐藏 */
    text-indent: -500px;
}
.container .arrow{
    background: url(../images/spr.png) -630px 0 no-repeat;
    width: 96px;
    height: 48px;
    position: absolute;
    left: 50%;
    bottom: 80px;
    display: block;
    margin-left: -46px;
    /* 将文字隐藏 */
    font-size: 0;
}

--
实现动态效果的CSS代码

.container .slogan {
    -webkit-animation: scaleIn 0.5s 0.3s both;
    animation: scaleIn 0.5s 0.3s both;
}

.container .zzrz {
    -webkit-animation: fadeInLeft 0.5s both;
    animation: fadeInLeft 0.5s both;
    animation-delay: 0.8s;
    -webkit-animation-delay: 0.8s;
}
.container .mtrz {
    -webkit-animation: fadeInRight 0.5s both;
    animation: fadeInRight 0.5s both;
    animation-delay: 0.8s;
    -webkit-animation-delay: 0.8s;
}
.arrow {
    animation: arrow 0.6s infinite alternate;
    -webkit-animation: arrow 0.6s infinite alternate;
}


@-webkit-keyframes scaleIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(2, 2, 2);
                transform: scale3d(2, 2, 2);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
}
@keyframes scaleIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(2, 2, 2);
                transform: scale3d(2, 2, 2);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
}

@-webkit-keyframes fadeInLeft {
    from {
      opacity: 0;
      -webkit-transform: translate3d(-60%, 0, 0);
              transform: translate3d(-60%, 0, 0);
    }
    to {
      opacity: 1;
      -webkit-transform: none;
              transform: none;
    }
}
@keyframes fadeInLeft {
    from {
      opacity: 0;
      -webkit-transform: translate3d(-60%, 0, 0);
              transform: translate3d(-60%, 0, 0);
    }
    to {
      opacity: 1;
      -webkit-transform: none;
              transform: none;
    }
}
@-webkit-keyframes fadeInRight {
    from {
      opacity: 0;
      -webkit-transform: translate3d(60%, 0, 0);
              transform: translate3d(60%, 0, 0);
    }
    to {
      opacity: 1;
      -webkit-transform: none;
              transform: none;
    }
}
@keyframes fadeInRight {
    from {
      opacity: 0;
      -webkit-transform: translate3d(60%, 0, 0);
              transform: translate3d(60%, 0, 0);
    }
    to {
      opacity: 1;
      -webkit-transform: none;
              transform: none;
    }
}

@-webkit-keyframes arrow {
    0% {
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
      opacity: 0.6;
    }
    80%,100% {
      -webkit-transform: translate3d(0, 20px, 0);
              transform: translate3d(0, 20px, 0);
      opacity: 1;
    }
}
  
@keyframes arrow {
    0% {
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
      opacity: 0.6;
    }
    80%,100% {
      -webkit-transform: translate3d(0, 20px, 0);
              transform: translate3d(0, 20px, 0);
      opacity: 1;
    }
}

最后编辑于：2018.12.07 20:35:39

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

HTTML4&CSS2--综合案例

网易云音乐导航栏

新闻标题列表

教学管理系统登录页

美食杰菜单详情页

点击登录弹出登录框

王者荣耀首页

推荐阅读更多精彩内容