CSS設計指南（界面組件）

導航菜單

菜單由一組鏈接組成。用HTML 中的列表元素（ul 或ol）來分組鏈接不僅符合邏輯哼绑，而且即使沒有額外的CSS 也能適當顯示鏈接的層次骨稿。默認情況下座菠，由于列表項（li）是塊級元素，因此它們會上下堆疊沉桌。

縱向菜單

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>HTML5 Template</title>
    <!-- <link rel="stylesheet" href="./css/test.css"> -->
    <style>
       * {margin:0; padding:0;}
       nav {margin:50px; width:150px;}
       .list1 ul {border:1px solid #f00; border-radius:3px;
       padding:5px 10px 3px;}
       .list1 li {list-style-type:none;}
       .list1 li + li a {border-top:1px solid #f00;}
       .list1 a {display:block; padding:3px 10px; text-decoration:none; 
        font:20px Exo, helvetica, arial, sansserif;
       font-weight:400; color:#000; background:#ffed53;}
       .list1 a:hover {color:#069;}
    </style>
</head>
<body>
    <nav class="list1">
        <ul>
            <li>
                <a href="#">Alternative</a>
            </li>
            <li>
                <a href="#">Country</a>
            </li>
            <li>
                <a href="#">Jazz</a>
            </li>
            <li>
                <a href="#">Rock</a>
            </li>
        </ul>
    </nav>
</body>
</html>

橫向菜單

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>HTML5 Template</title>
    <style>
      .list1 ul {
        /*強制ul 包圍浮動的li 元素*/
        overflow:hidden;
        }
        .list1 li {
        /*讓li 元素水平排列*/
        float:left;
        /*去掉項目符號*/
        list-style-type:none;
        }
        .list1 a {
        /*讓鏈接填滿li 元素*/
        display:block;
        padding:0 16px;
        /*去掉鏈接的下劃線*/
        text-decoration:none;
        color:#999;
        }
        .list1 li + li a {border-left:1px solid #aaa;}
        .list1 a:hover {color:#555;}
    </style>
</head>

<body>
        <nav class="list1">
                <ul>
                <li><a href="#">Shirts</a></li>
                <li><a href="#">Pants</a></li>
                <li><a href="#">Dresses</a></li>
                <li><a href="#">Shoes</a></li>
                <li><a href="#">Accessories</a></li>
                </ul>
                </nav>
</body>
</html>

下拉菜單

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>HTML5 Template</title>
    <style>
        /*添加視覺樣式*/
        /*頂級垂直菜單寬度*/
        .multi_drop_menu.vertical {
            width: 8em;
        }
        .multi_drop_menu.vertical li a {
            border-right-style: none;
            border-top-style: solid;
        }
        .multi_drop_menu.vertical li li a {
            border-left-style: solid;
        }
        .multi_drop_menu.vertical ul,
        .multi_drop_menu.vertical li {
            /*讓頂級菜單垂直顯示*/
            float: none;
        }
        .multi_drop_menu.vertical li ul {
            /*子菜單左邊與上一級菜單右邊對齊*/
            left: 100%;
            /*子菜單頂邊與上一級菜單項頂邊對齊*/
            top: 0;
        }
        .multi_drop_menu {
            font: 1em helvetica, arial, sans-serif;
        }
        .multi_drop_menu a {
            /*讓鏈接充滿列表項*/
            display: block;
            /*文本顏色*/
            color: #555;
            /*背景顏色*/
            background-color: #eee;
            /*鏈接的內邊距*/
            padding: .2em 1em;
            /*分隔線寬度*/
            border-width: 3px;
            /*可以有顏色谢鹊，也可以透明*/
            border-color: transparent;
        }
        .multi_drop_menu a:hover {
            /*懸停時的文本顏色*/
            color: #fff;
            /*懸停時的背景顏色*/
            background-color: #aaa
        }
        .multi_drop_menu a:active {
            /*點擊時背景變色*/
            background: #fff;
            /*點擊時文本變色*/
            color: #ccc;
        }

        /*添加功能樣式*/
        .multi_drop_menu * {
            margin: 0;
            padding: 0;
        }
        /*強制ul 包圍li*/
        .multi_drop_menu ul {
            float: left;
        }
        .multi_drop_menu li {
            /*水平排列菜單項*/
            float: left;
            /*去掉默認的項目符號*/
            list-style-type: none;
            /*為子菜單提供定位上下文*/
            position: relative;
        }
        .multi_drop_menu li a {
            /*讓鏈接填充列表項*/
            display: block;
            /*給每個鏈接添加一個右邊框*/
            border-right-style: solid;
            /*背景只出現(xiàn)在內邊距區(qū)域后面*/
            background-clip: padding-box;
            /*去掉鏈接的下劃線*/
            text-decoration: none;
        }
        .multi_drop_menu li:last-child a {
            border-right-style: none;
        }

        /* 添加的視覺樣式 */
        /*二級菜單寬度*/
        .multi_drop_menu li ul {
            width: 9em;
        }
        .multi_drop_menu li li a {
            /*去掉繼承的右邊框*/
            border-right-style: none;
            /*添加上邊框*/
            border-top-style: solid;
        }

        /* 添加的功能樣式 */
        .multi_drop_menu li li {
            /*停止浮動算吩，恢復堆疊*/
            float: none;
        }
        .multi_drop_menu li li ul {
            /*繼續(xù)隱藏三級下拉菜單*/
            display: none;
        }
        .multi_drop_menu li ul {
            /*隱藏二級下拉菜單*/
            display: none;
            /*相對于父菜單項定位*/
            position: absolute;
            /*左邊與父菜單項對齊*/
            left: 0;
            /*頂邊與父菜單項底邊對齊*/
            top: 100%;
        }
        .multi_drop_menu li:hover>ul {
            /*父元素懸停時顯示*/
            display: block;
        }
        .multi_drop_menu li li ul {
            /*相對于父菜單定位*/
            position: absolute;
            /*與父菜單右側對齊*/
            left: 100%;
            /*與父菜單項頂邊對齊*/
            top: 0;
        }
    </style>
</head>

<body>
    <nav class="multi_drop_menu vertical">
        <!-- 一級開始 -->
        <ul>
            <li>
                <a href="#">Power</a>
            </li>
            <li>
                <a href="#">Money</a>
            </li>
            <li>
                <a href="#">Love</a>
            </li>
            <li>
                <a href="#">Fame</a>
                <!-- 二級開始 -->
                <ul>
                    <li>
                        <a href="#">Sports Star</a>
                    </li>
                    <li>
                        <a href="#">Movie Star</a>
                    </li>
                    <li>
                        <a href="#">Rock Star</a>
                        <!-- 三級開始 -->
                        <ul>
                            <li>
                                <a href="#">Bruce Springsteen</a>
                            </li>
                            <li>
                                <a href="#">Bono</a>
                            </li>
                            <li>
                                <a href="#">Mick Jagger</a>
                            </li>
                            <li>
                                <a href="#">Bob Dylan</a>
                            </li>
                        </ul>
                        <!-- 三級結束 -->
                    </li>
                    <li>
                        <a href="#">Web Designer</a>
                    </li>
                </ul>
                <!-- 二級結束 -->
            </li>
        </ul>
        <!-- 一級結束 -->
    </nav>
</body>
</html>

表單

表單與其他頁面元素的作用不同。其他元素是把服務器發(fā)過來的內容顯示給用戶佃扼，而表單則是把用戶的信息發(fā)送給服務器偎巢。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>HTML5 Template</title>
    <style>
    </style>
</head>
<body>
    <!-- 必要的form 標簽 -->
    <form class="stylin_form1" action="process_form.php" method="post">
        <h3>A Stylin' Form</h3>
        <!-- 控件組，即各種控件的容器 -->
        <fieldset>
            <!-- 控件組的文字說明兼耀，或標題 -->
            <legend>
                <span>Part 1 &#8226; Basic Controls</span>
            </legend>
            <!-- 開始單行文本輸入控件 -->
            <section>
                <p class="note">* indicates required field</p>
                <!-- for 屬性把標注與控件關聯(lián)起來艘狭，它的值必須與控件ID 值相同 -->
                <label for="user_name">User Name
                    <span> *</span>
                </label>
                <!-- text 屬性讓這個控件可以輸入文本 -->
                <input type="text" id="user_name" name="user_name" />
                <p>Please select a user name</p>
            </section>
            <!-- 開始密碼控件 -->
            <section>
                <label for="password">Password
                    <span> *</span>
                </label>
                <!-- 密碼文本顯示為掩碼 -->
                <input type="password" id="password" name="password" maxlength="20" />
                <p>Password must be 8 or more characters</p>
            </section>
            <!-- 開始多行文本輸入控件 -->
            <section>
                <label for="description">Description</label>
                <textarea id="description" name="description" placeholder="Enter the description here."></textarea>
            </section>
            <!-- 開始HTML5 日期控件 -->
            <section>
                <label for="description">Date</label>
                <input type="date" id="special_date" name="event_date" min="2012-09-05" />
            </section>
        </fieldset>
        <fieldset>
            <legend>
                <span>Part 2 &#8226; Multiple-Choice Controls</span>
            </legend>
            <!-- 開始復選框 -->
            <section>
                <h4>Select Any Number</h4>
                <section>
                    <input type="checkbox" id="check1" name="checkset" value="1" tabindex="4" />
                    <label for="check1">Choice 1</label>
                </section>
                <section>
                    <input type="checkbox" checked="checked" id="check2" name="checkset" value="2" />
                    <label for="check2">Choice 2 is pre-checked</label>
                </section>
                <section>
                    <input type="checkbox" id="check3" name="checkset" value="3" />
                    <label for="check3">Choice 3&mdash;add as many as you need!
                    </label>
                </section>
                <p>You must choose one or more</p>
            </section>
            <!-- 開始單選按鈕 -->
            <section>
                <h4>Select Only One</h4>
                <section>
                    <input checked="checked" id="radio1" name="radioset" type="radio" value="Choice_1" />
                    <label for="radio1">Choice 1 is pre-selected and shows the text wraps nicely if it goes to multiple lines.</label>
                </section>
                <section>
                    <input id="radio2" name="radioset" type="radio" value="Choice_2" />
                    <label for="radio2">Choice 2</label>
                </section>
                <section>
                    <input id="radio3" name="radioset" type="radio" value="Choice_3" />
                    <label for="radio3">Choice 3</label>
                </section>
            </section>
            <!-- 開始選項列表（下拉列表） -->
            <section>
                <label for="select_choice">Select Your Choice</label>
                <select id="select_choice" name="select_choice">
                    <option value="0">None</option>
                    <option value="1">Choice 1</option>
                    <option value="2">Choice 2</option>
                    <option value="3">Choice 3</option>
                    <option value="4">Choice 4</option>
                </select>
            </section>
        </fieldset>
        <!-- 開始提交按鈕 -->
        <section>
            <input type="submit" value="Submit This Form" />
        </section>
    </form>
</body>
</html>

提交表單
用戶提交表單后，他們在表單控件中填寫的表單數(shù)據(jù)或者做出的選擇翠订，都會被發(fā)送到服務器巢音。所謂控件，是對表單中用來收集數(shù)據(jù)的各種表單組件的通稱尽超，包括文本框官撼、復選框、單選按鈕似谁，等等傲绣。表單中的數(shù)據(jù)是以“名=值”的形式發(fā)送給服務器的，
比如“username=chrisconsumer”巩踏，每個控件都是這么一個名/值對形式秃诵。這里的“名”
就是你在控件name 屬性中設定的名字∪恚“值”可能是用戶在文本控件中輸入的信息菠净，
也可能是表示可選控件（如復選框）中某一項是否被選中的布爾狀態(tài)值（比如某個
復選框中用1 表示選中，用0 表示未選中）

控件組
可以把一組相關的表單控件組織到一個控件組元素fieldset 中彪杉。比如毅往，在一個電商網(wǎng)站上，用于收集用戶姓名和地址的控件組派近，可能會加上一個標題叫“收貨人信息”攀唯。隨后可能就是另一個用于填寫信用卡信息的控件組。

控件與標注
label 元素可以包含控件渴丸，也可以放在控件前頭或后頭侯嘀。如果像前面那樣沒有用label包含控件，那么label 的for 屬性與控件的id 屬性必須匹配谱轨，以便把兩者關聯(lián)起來戒幔。不過，控件與標注之間的關系是隱式存在的碟嘴，而且如果label 像下面這樣包含控件溪食，其for 屬性也不是必需的。

for 屬性與id 屬性通過相同的值關聯(lián)起來后娜扇，用戶點擊標注文本也可以選擇單選按鈕和復選框错沃。

控件類型
文本框、復選框雀瓢、單選按鈕等的背后都是input 元素枢析，區(qū)別在于它們的type 屬性。
以下列出了type 屬性部分可能的值：

text：基本的單行文本框刃麸。
password：文本顯示為掩碼醒叁。
checkbox：復選框。
radio：單選按鈕泊业。
submit：提交表單的按鈕把沼。
time、date吁伺、search：HTML5 文本框的變體饮睬。

有一個文本控件不是input 元素的變體，那就是多行文本區(qū)textarea 元素篮奄。另外捆愁，在用戶輸入之前一直顯示的占位符文本，是通過placeholder 屬性設定的窟却。

設計搜索表單

幾乎每個站點都會提供一種搜索機制昼丑。我猜，恐怕你很難把一個搜索框當成一個表單夸赫，但它的確是——一個字段的表單菩帝。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>HTML5 Template</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        header {
            /*在這個例子中代表頁眉*/
            font-family: helvetica, arial, sans-serif;
            display: block;
            overflow: hidden;
            width: 500px;
            margin: 30px;
            border-radius: 6px;
            background-color: #ddd;
        }
        form.stylin_form_search1 {
            /*包含label 和input 的容器*/
            float: right;
            width: 200px;
            margin: 5px;
            padding: 5px;
        }
        form.stylin_form_search1 input {
            float: right;
            width: 70px;
            padding: 2px 0 3px 5px;
            outline: none;
            /*去掉默認的突顯輪廓線*/
            font-size: .8em;
            border-color: #eee #ccc #ccc #eee;
            /*針對其他瀏覽器的廠商前綴*/
            border-radius: 10px;
            -webkit-transition: 2s width;
        }
        form.stylin_form_search1 input:focus {
            width: 200px;
        }
        form.stylin_form_search1 label {
            display: none;
        }
        /*標注是必要的，但不用顯示出來*/
    </style>
</head>
<body>
    <header>
        <form class="stylin_form_search1" action="#" method="post">
            <label for="search">search</label>
            <input type="search" id="search" name="search" placeholder="search" />
        </form>
    </header>
</body>
</html>

運用CSS3 過渡
在前面的CSS 中茬腿，input 規(guī)則將該字段寬度設定為70 像素胁附，input:focus 規(guī)則將該字段寬度修改成了200 像素。這意味著滓彰，在用戶單擊搜索框讓它獲得鍵盤焦點之后控妻，字段寬度會改變。不過揭绑，由于現(xiàn)在有了transition:2s width;聲明弓候，字段不會突然擴展到新寬度，而是會用兩秒鐘時間平滑地伸展到200 像素他匪。必須注意菇存，CSS3 的過渡聲明要放在設定初始狀態(tài)的規(guī)則中。而且邦蜜，transition 屬性需要使用帶廠商前綴的形式——這里只示范了帶有WebKit（Safari/Chrome）前綴的屬性依鸥。

CSS3 過渡
CSS3 過渡可以讓CSS 屬性產(chǎn)生動畫效果。平常被某些事件觸發(fā)時變化很突然的樣式悼沈，比如鼠標懸停時改變鏈接顏色贱迟，使用過渡后會在指定的時間段內逐漸變化姐扮。第一條CSS 規(guī)則設定屬性的初始狀態(tài)和過渡參數(shù)。第二條CSS 規(guī)則設定事件發(fā)生時屬性的目標狀態(tài)衣吠。
在下面這個例子中茶敏，用戶單擊表單輸入字段后，輸入框的邊框顏色會從黑色變化為綠色缚俏，過渡周期為兩秒鐘惊搏。

input {border-color:black; transition:border-color 2s;}
input:focus {border-color:green;}

請注意，使用transition 屬性時要針對所有瀏覽器添加廠商前綴忧换。
通常恬惯，過渡動畫是由用戶鼠標懸停時的:hover 偽類規(guī)則和表單元素獲得焦點時的:focus 偽類規(guī)則觸發(fā)的。除此之外亚茬，還可以在一個帶類名選擇符的規(guī)則中設定新狀態(tài)酪耳，然后通過JavaScript（或jQuery、MooTools 等JavaScript 庫）為元素添加這個類名來觸發(fā)過渡才写，添加類名的時機可以是鼠標點擊或其他事件發(fā)生時葡兑。
有五個過渡屬性：

transition-property，過渡的CSS 屬性名赞草，比如color讹堤、width；
transition-duration厨疙，過渡的持續(xù)時間洲守，以秒或毫秒設定，比如2s沾凄、500ms梗醇；
transition-timing-function，過渡的調速函數(shù)撒蟀，決定動畫效果是否平滑叙谨，是先慢后快還是先快后慢，比如ease-in保屯、ease-out手负、ease-in-out 或linear（默認值）；
transition-delay姑尺，過渡開始前的延遲時間竟终，以秒或毫秒設定，比如1s切蟋、200ms统捶；
transition，過渡的簡寫屬性，例如transition:color 2s ease-in 1ms;喘鸟。

彈出層

彈出層（也叫提示條）指的是在鼠標懸停于某個元素之上時顯示的一個界面組件匆绣。在頁面空間有限的情況下，彈出層是為用戶提供更多信息的一種有效手段迷守。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>HTML5 Template</title>
    <style>
        figure {
            width:120px; /*圖片盒子寬度*/
            height:88px; /*圖片盒子高度*/
            margin:20px 20px; /*圖片盒子間距*/
            border:1px solid #666; /*圖片邊框*/
            position:relative; /*為彈出層提供定位上下文*/
            float:left; /*讓圖片并排顯示*/
            }
        img {display:block;} /*去掉圖片下方的基線空白*/
        figcaption {
            display:none; /*隱藏彈出層*/
            position:absolute; /*相對于容器（圖片）定位*/
            left:74%; top:14px; /*把彈出層放到圖片右側*/
            width:130px; /*彈出層寬度*/
            padding:10px; /*彈出層內邊距*/
            background:#f2eaea;
            border:3px solid red;
            border-radius:6px;
        }
        figure:hover figcaption {display:block;} /*鼠標懸停在圖片上時顯示彈出層*/
        figcaption h3 { /*彈出層的內容*/
            font-size:14px;
            color:#666;
            margin-bottom:6px;
        }
        figcaption a { /*彈出層的內容*/
            display:block;
            text-decoration:none;
            font-size:12px;
            color:#000;
        }
    </style>
</head>
<body>
    <figure>
        <img src="images/door_1.png" alt="pink heels" />
        <figcaption>
            <h3>Pink Platforms</h3>
            <a href="#">More info</a>
        </figcaption>
    </figure>
    <figure class="click_me">
        <img src="images/door_2.png" alt="leopard heels" />
        <figcaption>
            <h3>Leopard Platforms</h3>
            <a href="#">More info</a>
        </figcaption>
    </figure>
    <figure class="click_me">
        <img src="images/door_3.png" alt="red heels" />
        <figcaption>
            <h3>Red Platforms</h3>
            <a href="#">More info</a>
        </figcaption>
    </figure>
</body>
</html>

堆疊上下文和z-index

前兩張圖片的彈出層被右邊的圖片給擋住了一部分犬绒，這是由于figure 元素的堆疊次序導致的旺入。在一個包含多個同輩元素的容器內兑凿，就像這里body 元素的三個figure 子元素一樣，這些同輩元素都會構造一個堆疊上下文茵瘾。CSS 中有一個z-index 屬性礼华，用于控制元素的在堆疊上下文中的次序。z-index 值較大的元素拗秘，在堆疊層次中位于
z-index 值較小的元素上方圣絮。z-index 屬性的值可以是0 到任意大的數(shù)值；負值也可以雕旨，但在某些瀏覽器中并不可靠扮匠。默認情況下，所有堆疊元素的z-index 的值為auto凡涩，相當于0棒搜。
不過，z-index 只對那些position 值為static 之外的元素有效活箕。換句話說力麸，涉及的兩個元素必須是absolute、relative 或fixed 定位才行育韩。

figure:hover figcaption {display:block; z-index:2;} /*把彈出層放到最前面*/

用CSS創(chuàng)造三角形

可以給彈出層左邊添加一個三角箭頭克蚂，讓它指向圖片。大家知道筋讨，::before 和::after 這兩個偽元素是用于添加文本或圖標等少量內容的埃叭。不過，完全可以為它們生成的內容設定任何樣式悉罕，就像給標記中其他元素設定樣式一樣赤屋。

 figcaption::after { /*紅色三角形的盒子*/
            content:""; /*需要有內容，這里是一個空字符串*/
            position:absolute; /*相對于彈出層定位*/
            border:12px solid;
            border-color:transparent red transparent transparent;
            right:100%; top:17px; /*相對于盒子邊框定位三角形*/
            height:0px; width:0px; /*收縮邊框創(chuàng)造三角形*/
        }

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

人面猴
序言：七十年代末蛮粮，一起剝皮案震驚了整個濱河市益缎，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌然想，老刑警劉巖莺奔，帶你破解...
沈念sama閱讀 218,036評論 6贊 506
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異，居然都是意外死亡令哟，警方通過查閱死者的電腦和手機恼琼，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,046評論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來屏富，“玉大人晴竞，你說我怎么就攤上這事『莅耄” “怎么了噩死？”我有些...
開封第一講書人閱讀 164,411評論 0贊 354
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長神年。經(jīng)常有香客問我已维，道長，這世上最難降的妖魔是什么已日？我笑而不...
開封第一講書人閱讀 58,622評論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任垛耳，我火速辦了婚禮，結果婚禮上飘千，老公的妹妹穿的比我還像新娘堂鲜。我一直安慰自己，他們只是感情好护奈，可當我...
茶點故事閱讀 67,661評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布缔莲。她就那樣靜靜地躺著，像睡著了一般逆济。火紅的嫁衣襯著肌膚如雪酌予。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,521評論 1贊 304
城市分裂傳說
那天奖慌，我揣著相機與錄音抛虫，去河邊找鬼。笑死简僧，一個胖子當著我的面吹牛建椰，可吹牛的內容都是我干的。我是一名探鬼主播岛马，決...
沈念sama閱讀 40,288評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼棉姐，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了啦逆？” 一聲冷哼從身側響起伞矩，我...
開封第一講書人閱讀 39,200評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎夏志，沒想到半個月后乃坤，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 45,644評論 1贊 314
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 37,837評論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年湿诊，在試婚紗的時候發(fā)現(xiàn)自己被綠了狱杰。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 39,953評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡厅须，死狀恐怖仿畸，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情朗和，我是刑警寧澤错沽，帶...
沈念sama閱讀 35,673評論 5贊 346
?日本核電站爆炸內幕
正文年R本政府宣布，位于F島的核電站例隆，受9級特大地震影響甥捺，放射性物質發(fā)生泄漏抢蚀。R本人自食惡果不足惜镀层，卻給世界環(huán)境...
茶點故事閱讀 41,281評論 3贊 329
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望皿曲。院中可真熱鬧唱逢，春花似錦、人聲如沸屋休。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,889評論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽劫樟。三九已至痪枫，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間叠艳，已是汗流浹背奶陈。一陣腳步聲響...
開封第一講書人閱讀 33,011評論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留附较，地道東北人吃粒。一個月前我還...
沈念sama閱讀 48,119評論 3贊 370
代替公主和親
正文我出身青樓，卻偏偏與公主長得像拒课，于是被迫代替她去往敵國和親徐勃。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 44,901評論 2贊 355