css案例1:學(xué)成網(wǎng)在線教育平臺首頁01

簡介

這是一個簡單的案例會把之前博客中講到的CSS的基本知識串起來姥闭,算是一個稍微綜合一點的案例了!這里我會詳細(xì)的每一部分的進(jìn)行介紹皂贩!

分析首頁的結(jié)構(gòu)

學(xué)成網(wǎng)首頁.jpg

從這張圖中我們可以看到首頁大致分為如下的幾個部分:

  • 導(dǎo)航欄部分
  • 精品推薦部分
  • 頁面尾部部分

準(zhǔn)備工作

CSS初始化

/* css初始化 */

* {
    /* 清除所有HTML標(biāo)記的默認(rèn)邊距 */
    margin: 0px;
    padding: 0px;
}

.clearfix:before,
.clearfix:after {
    /* 清楚浮動 */
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

ul { 
    /* 清楚li的小圓點 */
    list-style: none;
}
a { /* 超鏈接的樣式 */
    color: #050505;
    text-decoration: none;
}
input {
        border: 0;  /* 所有的表單邊框為0 */
        box-sizing: border-box; /* CSS3盒子模型 border 和 padding 都包含到 width 里面去 */
}
.container { /*版心的寬度都是1200,所以集體聲明*/
    width: 1200px;
    margin: 0 auto;
}
/* css初始化結(jié)束 */

確定版心的大小
可以使用PS的矩陣選框工具確定


版心的大小.png

如圖所示版心的寬為1200px;

導(dǎo)航欄

導(dǎo)航欄的大小為1366px


導(dǎo)航欄的大小.png

可以分為四部分來做:logo、navbar罚渐、search、personal
頁面結(jié)構(gòu)部分:

<!-- 頁面頭 -->
    <header>
        <nav>
            <!-- logo -->
            <div class="logo">
                <img src="images/logo_03.png" alt="">
            </div>
            <!-- 導(dǎo)航欄 -->
            <div class="navbar">
                <ul>
                    <li><a href="#">首頁</a></li>
                    <li><a href="#">課程</a></li>
                    <li><a href="#">職業(yè)規(guī)劃</a></li>
                </ul>
            </div>
            
            <!-- 個人中心部分 -->
            <div class="personal">
                <a href="#">個人中心<img src="images/ling_06.png"  alt=""></a>
                <a href="#"><img src="images/tou_03.png" > 劉德華</a>
            </div>
            <!-- 搜索框部分 -->
            <div class="search">
                    <form action="">
                        <input type="text" placeholder="請輸入關(guān)鍵字">
                        <input type="submit" value="">
                    </form>
                </div>
        </nav>
    </header>

CSS的樣式部分

/* 頁面頭開始 */
body {
    background-color: #f3f5f7;
}
header {
    height: 100px;
    overflow: hidden; /* 嵌套的盒字margin合并消除影響 */
} 
nav {
    width: 1366px;
    height: 42px;
    margin:  30px auto;  /*嵌套的子盒子margin合并*/
}
.logo {
    float: left;
}

.navbar {
    float: left;
    height: 42px;
    line-height: 42px; /*讓文字水平居中斑举,行高給父親搅轿,行高可以繼承*/
    margin-left: 50px;
}

.navbar li {
    float: left;
    font-size: 16px;

}
.navbar li a{
    display: block; /*行內(nèi)元素給高需要轉(zhuǎn)化為行內(nèi)塊*/
    padding: 0 9px;/*行內(nèi)元素不給上下內(nèi)邊距,左右給內(nèi)邊距*/
    height: 42px;
    
}
.navbar li a:hover {
    border-bottom: 1px solid #00a4ff; /*鼠標(biāo)放入底邊框*/
}
/* 搜索框部分 */
.search {
    width: 410px;
    height: 38px;
    border: 1px solid #00a4ff;
    float: right;
}
.search input[type=text] { /*屬性選擇器*/
    width: 360px;
    height: 38px;
    padding-left: 20px;
    box-sizing: border-box; /*css3的屬性富玷,防止padding撐大盒子*/
    float: left; /*文本框?qū)儆谛袃?nèi)元素璧坟,行內(nèi)元素之間并排顯示,中間有空隙赎懦,所以添加浮動*/
}
.search input[type=submit] {
    width: 50px;
    height: 38px;
    float: left;
    background: #00a4ff url(images/search_06.png) no-repeat center center;
}
/*個人中心部分*/
.personal {
    float: right;
    height: 42px;
    line-height: 42px;      /* 這個行高給父親雀鹃, 行高會繼承 */
    margin: 0 15px 0 35px;  /* 上0 右 15  下0 左  35 */
}
.personal img {
    margin: 0 8px;
    vertical-align: middle; /*用來控制圖片/表單與文字的對齊*/
}
/* 個人中心部分結(jié)束 */

其中需要注意的幾個點是:

  • 因為頁面的底色不是白色所以給body一個大的背景色#f3f5f7
  • 導(dǎo)航使用的是ul>li>a的形式
  • head里面嵌套著nav盒子,使用overflow: hidden消除影響
  • 是文字文水平居中對齊時励两,行高可以給父親盒子黎茎,并且此時不用給父盒子高度,行高是可以繼承的
  • box-sizing: border-box css3的屬性当悔,防止padding撐大盒子
  • vertical-align: middle用來控制圖片/表單與文字的對齊

banner部分

結(jié)構(gòu)

<!-- banner部分 -->
    <div class="banner">
        <div class="banner-in container">
            <!-- 左側(cè)導(dǎo)航欄 -->
            <div class="slidebar">
                <ul>
                    <li><a href="#">前端開發(fā)<span>></span></a></li>
                    <li><a href="#">后端開發(fā)<span>></span></a></li>
                    <li><a href="#">移動開發(fā)<span>></span></a></li>
                    <li><a href="#">人工智能<span>></span></a></li>
                    <li><a href="#">商業(yè)預(yù)測<span>></span></a></li>
                    <li><a href="#">云計算&大數(shù)據(jù)<span>></span></a></li>
                    <li><a href="#">運維&測試<span>></span></a></li>
                    <li><a href="#">UI設(shè)計<span>></span></a></li>
                    <li><a href="#">產(chǎn)品<span>></span></a></li>
                </ul>
            </div>
            <!-- 右側(cè)課表 -->
            <dl class="timetable">
                <dt>我的課程表</dt>
                <dd>
                    <h4>繼續(xù)學(xué)習(xí) 程序語言設(shè)計</h4>
                    <p>正在學(xué)習(xí)-使用對象</p>
                </dd>
                <dd>
                    <h4>繼續(xù)學(xué)習(xí) 程序語言設(shè)計</h4>
                    <p>正在學(xué)習(xí)-使用對象</p>
                </dd>
                <dd>
                    <h4>繼續(xù)學(xué)習(xí) 程序語言設(shè)計</h4>
                    <p>正在學(xué)習(xí)-使用對象</p>
                </dd>

                <dd>
                    <a href="#">全部課程</a>
                </dd>
            </dl>
            <!-- 小圓圈 -->
            <ul class="circle">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>

css樣式為:

/* banner開始 */
.banner {
    height: 420px;
    background-color: #1c036c;
}
.banner-in {
    height: 420px ;
    background: url(images/banner_03.png) 0 0 no-repeat;
    position: relative;
}
.slidebar {
    height: 420px;
    width: 190px;
    background-color: rgba(0,0,0,0.3); /* 盒字背景半透明*/
    float: left;
}
.slidebar li a {
    color: #fff;
    font-size: 14px;
    padding: 0 20px;  /*上下0 左右20px*/
    display: block;
    height: 45px;
    line-height: 45px; /*大多數(shù)情況下有了行高就不需要給定高度*/
}
.slidebar li a span {
    float: right;
    font-family: arial; /*符號一般使用這個字體*/
}
.slidebar li a:hover {
    color: #00a4ff;
}
.timetable {
    float: right;
    width: 230px;
    height: 300px;
    background-color: #fff;
    margin-top: 50px;
}
.timetable dt {
    height: 50px;
    background-color: #9bceea;
    text-align: center; /*文字水平居中*/
    line-height: 50px;
    color: #fff;
    font-weight: 700;
    letter-spacing: 2px; /*設(shè)置字間距*/
    margin-bottom: 5px;
}
.timetable dd {
    width: 193px;
    height: 60px;
    margin: 0 auto;
    border-bottom: 1px solid #ccc;
    padding-top:12px;
    box-sizing: border-box; 
}
.timetable dd h4{
    font-weight: normal;
    font-size: 16px;
    color: #4e4e4e;
}
.timetable dd p {
    color: #a5a5a5;
    font-size: 14px;
}
.timetable dd:last-child {
    border: 0; /*消除最后一個底邊框*/            
}
.timetable dd a {
    display: block;
    height: 38px;
    border: 1px solid #00a4ff;
    text-align: center;
    line-height: 38px;
    color: #00a4ff;
    font-weight: 700;
}
.timetable dd a:hover {
    background-color: #00a4ff;
    color: #fff;
}
/* 小圓點模塊 */
.circle {
    width: 180px;
    height: 22px;
    position: absolute;
    bottom: 10px;
    left: 50%; /*父盒子寬度的一半*/
    margin-left: -90px; /*自己寬度的一半*/

}
.circle li {
    float: left;
    width: 12px;
    height: 12px;
    margin: 6px 8px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.4);
}

/* banner結(jié)束 */

注意點:

  • 因為banner里面有個透明的盒子括授,和課程表泡孩,使用子絕父相進(jìn)行定位
  • 盒子背景半透明的寫法需要注意
  • font-family: arial; 符號一般使用這個字體
  • 子盒子水平居中對齊的方法

精品推薦模塊

結(jié)構(gòu)

<!-- 精品推薦部分 -->
    <div class="recommand container">
        <a href="#">精品推薦</a>
        <a href="#">Jquery</a>
        <a href="#">Spark</a>
        <a href="#">MySql</a>
        <a href="#">javaWeb</a>
        <a href="#">MySql</a>
        <a href="#">javaWeb</a>
        <a href="#">修改興趣</a>
    </div>

    <!-- 精品推薦大模塊 -->
    <div class="recom-products container">
        <!--  頭部 -->
        <div class="recom-hd  clearfix">
            <h4>精品推薦</h4>
            <a href="#">查看全部</a>
        </div>
        <!-- 精品推薦主題部分 -->
        <div class="recom-bd clearfix">
            <ul>
                <li>
                    <div class="over"><img src="images/icon1.png" alt=""></div>
                    <h5>Think PHP 5.0 博客系統(tǒng)實戰(zhàn)項目演練</h5>
                    <p><span>高級</span> ? 1125人在學(xué)習(xí)</p>
                </li>
                <li>
                    <div class="over"><img src="images/icon1.png" alt=""></div>
                    <h5>Think PHP 5.0 博客系統(tǒng)實戰(zhàn)項目演練</h5>
                    <p><span>高級</span> ? 1125人在學(xué)習(xí)</p>
                </li>
                <li>
                    <div class="over"><img src="images/icon1.png" alt=""></div>
                    <h5>Think PHP 5.0 博客系統(tǒng)實戰(zhàn)項目演練</h5>
                    <p><span>高級</span> ? 1125人在學(xué)習(xí)</p>
                </li>
                <li>
                    <div class="over"><img src="images/icon1.png" alt=""></div>
                    <h5>Think PHP 5.0 博客系統(tǒng)實戰(zhàn)項目演練</h5>
                    <p><span>高級</span> ? 1125人在學(xué)習(xí)</p>
                </li>
                <li>
                    <div class="over"><img src="images/icon1.png" alt=""></div>
                    <h5>Think PHP 5.0 博客系統(tǒng)實戰(zhàn)項目演練</h5>
                    <p><span>高級</span> ? 1125人在學(xué)習(xí)</p>
                </li>
                <li>
                    <div class="over"><img src="images/icon1.png" alt=""></div>
                    <h5>Think PHP 5.0 博客系統(tǒng)實戰(zhàn)項目演練</h5>
                    <p><span>高級</span> ? 1125人在學(xué)習(xí)</p>
                </li>
                <li>
                    <div class="over"><img src="images/icon1.png" alt=""></div>
                    <h5>Think PHP 5.0 博客系統(tǒng)實戰(zhàn)項目演練</h5>
                    <p><span>高級</span> ? 1125人在學(xué)習(xí)</p>
                </li>
                <li>
                    <div class="over"><img src="images/icon1.png" alt=""></div>
                    <h5>Think PHP 5.0 博客系統(tǒng)實戰(zhàn)項目演練</h5>
                    <p><span>高級</span> ? 1125人在學(xué)習(xí)</p>
                </li>
                <li>
                    <div class="over"><img src="images/icon1.png" alt=""></div>
                    <h5>Think PHP 5.0 博客系統(tǒng)實戰(zhàn)項目演練</h5>
                    <p><span>高級</span> ? 1125人在學(xué)習(xí)</p>
                </li>
                <li>
                    <div class="over"><img src="images/icon1.png" alt=""></div>
                    <h5>Think PHP 5.0 博客系統(tǒng)實戰(zhàn)項目演練</h5>
                    <p><span>高級</span> ? 1125人在學(xué)習(xí)</p>
                </li>
            </ul>
        </div>
    </div>

CSS樣式:

/* 精品推薦開始 */
.recommand {
    height: 60px;
    background-color: #fff;
    margin-top: 8px;
    line-height: 60px;
    /* 盒子陰影 水平位置 垂直位置 模糊距離 影子顏色 */
    box-shadow: 0 2px 2px rgba(0,0,0,0.2)
}
.recommand a {
    padding: 0 30px;
    /* 行內(nèi)元素可以設(shè)置border */
    border-right: 1px solid #ccc;
}
.recommand a:hover {
    color: #00a4ff;
}
.recommand a:first-child {
    color: #00a4ff;
    font-weight: 700;
}
.recommand a:last-child {
    float: right;
    border: 0;
    color: #00a4ff;
}
.recom-products {
    margin-top: 35px;
}
.recom-hd h4 {
    float: left;
    color: #494949;
}
.recom-hd a {
    float: right;
    margin-top: 10px;
    margin-right: 30px;
    font-size: 14px;
    color: #a5a5a5;
}
.recom-hd a:hover {
    color: #00a4ff;
}
.recom-bd ul li,
.prom-bd-l-bottom ul li {
    width: 228px;
    height: 270px;
    background-color:#fff;
    overflow: hidden; /*溢出的部分隱藏*/
    /* box-shadow:水平陰影 垂直陰影 模糊距離 陰影尺寸 陰影顏色  內(nèi)/外陰影; */
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
    float: left;
    margin-right: 15px;
    margin-top: 15px;
}

.recom-bd ul li:nth-child(5n) { /*第五個第十個的外邊距為0*/
    margin-right: 0;
}

.recom-bd ul li h5,
.recom-bd ul li p,
.prom-bd-l-bottom ul li h5,
.prom-bd-l-bottom ul li p {
    padding: 0 20px 0 24px;
    margin-top: 12px;
}
.recom-bd ul li h5,
.prom-bd-l-bottom ul li h5 {
    line-height: 22px;
    font-weight: normal;
    font-size: 14px;
}
.recom-bd ul li p ,
.prom-bd-l-bottom ul li p {
    font-size: 12px;
    color: #999;
}
.recom-bd span,
.prom-bd-l-bottom ul li p span {
    color: #ff7c2d;
}
/* 精品推薦結(jié)束 */

需要注意的是

  • 精品推薦的大模塊是使用的是父盒子不給高度,讓子盒子撐大父盒子此時需要清除浮動
  • 注意靠最右邊的盒子是如何清除邊距的

入門編程部分

結(jié)構(gòu)

<!-- 編程入門 -->
    <div class="programer container">
        <!--  頭部 -->
        <div class="progm-hd  clearfix">
            <h4>編程入門</h4>
            <ul>
                <li><a href="#">熱門</a></li>
                <li><a href="#">初級</a></li>
                <li><a href="#">中級</a></li>
                <li><a href="#">高級</a></li>
            </ul>
            <a href="#">查看全部</a>
        </div>
        <!-- 主題部分 -->
        <div class="prom-bd clearfix">
            <div class="prom-bd-l">
                <img src="images/rumen.png" alt="">
            </div>
            <div class="prom-bd-r">
                <div class="prom-bd-l-top">
                    <img src="images/rumen2.png" alt="">
                </div>
                <div class="prom-bd-l-bottom">
                    <ul>
                        <li>
                            <div class="over"><img src="images/rumen3.png" alt=""></div>
                            <h5>Think PHP 5.0 博客系統(tǒng)實戰(zhàn)項目演練</h5>
                            <p><span>高級</span> ? 1125人在學(xué)習(xí)</p>
                        </li>
                        <li>
                            <div class="over"><img src="images/rumen3.png" alt=""></div>
                            <h5>Think PHP 5.0 博客系統(tǒng)實戰(zhàn)項目演練</h5>
                            <p><span>高級</span> ? 1125人在學(xué)習(xí)</p>
                        </li>
                        <li>
                            <div class="over"><img src="images/rumen3.png" alt=""></div>
                            <h5>Think PHP 5.0 博客系統(tǒng)實戰(zhàn)項目演練</h5>
                            <p><span>高級</span> ? 1125人在學(xué)習(xí)</p>
                        </li>
                        <li>
                            <div class="over"><img src="images/rumen3.png" alt=""></div>
                            <h5>Think PHP 5.0 博客系統(tǒng)實戰(zhàn)項目演練</h5>
                            <p><span>高級</span> ? 1125人在學(xué)習(xí)</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

樣式

/* 編程入門開始 */
.programer {
    margin-top: 35px;
}

.progm-hd h4 {
    float: left;
    color: #494949;
    margin-right: 352px;
}
.progm-hd > a {
    float: right;
    margin-top: 10px;
    margin-right: 30px;
    font-size: 14px;
    color: #a5a5a5;
}
.progm-hd a:hover {
    color: #00a4ff;
}

.progm-hd ul {
    float: left;
}

.progm-hd ul li{
    float: left;
    font-size: 16px;
    padding: 0 36px;
}

.progm-hd ul li a{
    color: #a7a8a9;
}
.prom-bd {
    margin-top: 15px;
}
.prom-bd-l {
    width: 228px;
    height: 390px;
    float: left;
    margin-right: 15px;
    overflow: hidden;
}
.prom-bd-r {
    float: right;
}

.prom-bd-l-bottom ul li:nth-child(4n) {
    margin-right: 0;
}

注意:

  • 注意結(jié)構(gòu)是如何劃分的
  • css的樣式代碼和之前的精品推薦有重疊的部分晚伙,大部分一致

底部

結(jié)構(gòu)

<div class="footer">
        <div class="footer-in container">
            <div class="footer-l">
                <img src="images/logo_03.png" alt="">
                <p>學(xué)成在線致力于普及中國最好的教育它與中國一流大學(xué)和機構(gòu)合作提供在線課程韧衣。<br />
                    ? 2017年XTCG Inc.保留所有權(quán)利其弊。-滬ICP備15025210號</p>
                <a href="#">下載APP</a>
            </div>
            <div class="footer-r">
                <dl>
                    <dt>關(guān)于學(xué)成網(wǎng)</dt>
                    <dd><a href="#">關(guān)于</a></dd>
                    <dd><a href="#">管理團(tuán)隊</a></dd>
                    <dd><a href="#">工作機會</a></dd>
                    <dd><a href="#">客戶服務(wù)</a></dd>
                    <dd><a href="#">幫助</a></dd>
                </dl>
                <dl>
                    <dt>關(guān)于學(xué)成網(wǎng)</dt>
                    <dd><a href="#">關(guān)于</a></dd>
                    <dd><a href="#">管理團(tuán)隊</a></dd>
                    <dd><a href="#">工作機會</a></dd>
                    <dd><a href="#">客戶服務(wù)</a></dd>
                    <dd><a href="#">幫助</a></dd>
                </dl>
                <dl>
                    <dt>關(guān)于學(xué)成網(wǎng)</dt>
                    <dd><a href="#">關(guān)于</a></dd>
                    <dd><a href="#">管理團(tuán)隊</a></dd>
                    <dd><a href="#">工作機會</a></dd>
                    <dd><a href="#">客戶服務(wù)</a></dd>
                    <dd><a href="#">幫助</a></dd>
                </dl>
            </div>
        </div>
    </div>

樣式css

/* 頁面底部分 */
.footer {
    height: 270px;
    background-color: #ffffff;
    margin-top: 100px;
}
.footer-in {
    padding-top: 30px; /*盒子沒有給高度不用擔(dān)心撐開盒子*/
}
.footer-l {
    float: left;
}
.footer-l p {
    font-size: 12px;
    line-height: 18px;
    color: #999;
    margin-top: 20px;  
}
.footer-l a {
    display: block;
    width: 118px;
    height: 33px;
    border: 1px solid #00a4ff;
    text-align: center;
    font-size: 16px;
    line-height: 33px;
    margin-top: 15px;
}
.footer-r {
    float: right;
    color: #333;
}
.footer-r dl {
    float: left;
    width: 225px;
}
.footer-r dt {
    font-size: 16px;
    height: 30px;
}
.footer-r dd {
    font-size: 12px;
    height: 20px;
}
.footer-r dd a:hover {
    color: #00a4ff;
    text-decoration: underline; /*  添加下劃線 */
}

注意

  • 這里最值得學(xué)習(xí)的地方時高度和寬度剩余法

結(jié)果

學(xué)成在線首頁.gif
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末巫橄,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌屏积,老刑警劉巖医窿,帶你破解...
    沈念sama閱讀 218,755評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異炊林,居然都是意外死亡姥卢,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,305評論 3 395
  • 文/潘曉璐 我一進(jìn)店門铛铁,熙熙樓的掌柜王于貴愁眉苦臉地迎上來隔显,“玉大人,你說我怎么就攤上這事饵逐±撸” “怎么了?”我有些...
    開封第一講書人閱讀 165,138評論 0 355
  • 文/不壞的土叔 我叫張陵倍权,是天一觀的道長掷豺。 經(jīng)常有香客問我,道長薄声,這世上最難降的妖魔是什么当船? 我笑而不...
    開封第一講書人閱讀 58,791評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮默辨,結(jié)果婚禮上德频,老公的妹妹穿的比我還像新娘。我一直安慰自己缩幸,他們只是感情好壹置,可當(dāng)我...
    茶點故事閱讀 67,794評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著表谊,像睡著了一般钞护。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上爆办,一...
    開封第一講書人閱讀 51,631評論 1 305
  • 那天难咕,我揣著相機與錄音,去河邊找鬼距辆。 笑死余佃,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的跨算。 我是一名探鬼主播咙冗,決...
    沈念sama閱讀 40,362評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼漂彤!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,264評論 0 276
  • 序言:老撾萬榮一對情侶失蹤挫望,失蹤者是張志新(化名)和其女友劉穎立润,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體媳板,經(jīng)...
    沈念sama閱讀 45,724評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡桑腮,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,900評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了蛉幸。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片破讨。...
    茶點故事閱讀 40,040評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖奕纫,靈堂內(nèi)的尸體忽然破棺而出提陶,到底是詐尸還是另有隱情,我是刑警寧澤匹层,帶...
    沈念sama閱讀 35,742評論 5 346
  • 正文 年R本政府宣布隙笆,位于F島的核電站,受9級特大地震影響升筏,放射性物質(zhì)發(fā)生泄漏撑柔。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,364評論 3 330
  • 文/蒙蒙 一您访、第九天 我趴在偏房一處隱蔽的房頂上張望铅忿。 院中可真熱鬧,春花似錦灵汪、人聲如沸檀训。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,944評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽肢扯。三九已至,卻和暖如春担锤,著一層夾襖步出監(jiān)牢的瞬間蔚晨,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,060評論 1 270
  • 我被黑心中介騙來泰國打工肛循, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留铭腕,地道東北人。 一個月前我還...
    沈念sama閱讀 48,247評論 3 371
  • 正文 我出身青樓多糠,卻偏偏與公主長得像累舷,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子夹孔,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,979評論 2 355

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案被盈? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補...
    _Yfling閱讀 13,754評論 1 92
  • 課程目標(biāo): 學(xué)會使用CSS選擇器熟記CSS樣式和外觀屬性熟練掌握CSS各種選擇器熟練掌握CSS各種選擇器熟練掌握C...
    繁華退卻閱讀 1,743評論 0 0
  • 聲明:此次是收集互聯(lián)網(wǎng)整理析孽,如有侵權(quán)請聯(lián)系本人進(jìn)行刪除 ps:如果大家有的也可以和我討論,希望你們能提出寶貴建議只怎,...
    小向資源網(wǎng)閱讀 6,299評論 2 33
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5袜瞬? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 27,486評論 1 45
  • 碧江浪遏中礦大身堡, 遙看賀蘭破萬軍邓尤。 四年枕踏金波路, 手把干戈咤中原贴谎。
    甜甜的粽子兄閱讀 486評論 0 1