簡書首頁案例練習

原創 Silent Land 2020-06-25 05:03

簡書首頁案例練習

  • index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="簡書是一個優質的創作社區，在這裏，你可以任性地創作，一篇短文、一張照片、一首詩、一幅畫……我們相信，每個人都是生活中的藝術家，有着無窮的創造力。" />
  <meta name="keywords" content="簡書,簡書官網,圖文編輯軟件,簡書下載,圖文創作,創作軟件,原創社區,小說,散文,寫作,閱讀" />
  <title>簡書 - 創作你的創作</title>

  <!-- 引入favicon圖標-->
  <link rel="shortcut icon" href=" favicon.ico" />

  <!-- 引入公共樣式表 -->
  <link rel="stylesheet" href="./css/base.css" />

  <!-- 引入index樣式 -->
  <link rel="stylesheet" href="./css/index.css" />
</head>

<body>
  <!-- header start -->
  <header id="header">
    <div class="container_fluid clearfix">
      <div class="logo fl">
        <h1>
          <a href="#"><img src="./images/js_logo.png" alt="" /></a>
        </h1>
      </div>
      <div class="header-nav fl">
        <ul>
          <li>
            <a href="#"><span><img src="./images/find_icon.png" alt="" /></span>發現</a>
          </li>
          <li>
            <a href="#"><span><img src="./images/book_icon.png" alt="" /></span>關注</a>
          </li>
          <li>
            <a href="#"><span><img src="./images/ld_icon.png" alt="" /></span>消息</a>
          </li>
        </ul>
      </div>
      <div class="header-search fl">
        <input type="text" placeholder="搜索" /><img src="./images/fd_icon.png" alt="" />
      </div>
      <div class="header-right fr">
        <div class="btn fl">
          <i><img src="./images/jsa_icon.png" alt="" /></i>
        </div>
        <div class="login fl">
          <img src="./images/touxiang_img.png" alt="" />
        </div>
        <div class="write fl">
          <a href="#">
            <span><img src="./images/write_icon.png" alt="" /></span>
            寫文章</a>
        </div>
      </div>
    </div>
  </header>

  <main id="main">
    <div class="container">
      <article>
        <!-- focus 模塊 -->
        <div class="focus">
          <img src="./images/jdt.png" alt="">
        </div>
        <!-- hot模塊 -->
        <div class="hot clearfix">
          <ul>
            <li><a href="#"><span><img src="./images/1.jpg" alt=""></span>故事</a></li>
            <li><a href="#"><span><img src="./images/2.jpg" alt=""></span>讀書</a></li>
            <li><a href="#"><span><img src="./images/3.jpg" alt=""></span>攝影</a></li>
            <li><a href="#"><span><img src="./images/4.jpg" alt=""></span>互聯網</a></li>
            <li><a href="#"><span><img src="./images/1.jpg" alt=""></span>讀書</a></li>
            <li><a href="#"><span><img src="./images/2.jpg" alt=""></span>攝影</a></li>
            <li><a href="#"><span><img src="./images/3.jpg" alt=""></span>互聯網</a></li>
            <li><a href="#"><span><img src="./images/4.jpg" alt=""></span>攝影</a></li>
          </ul>
          <a href="#">更多熱門專題&nbsp;&gt;</a>
        </div>
        <div class="essay">
          <ul>
            <li>
              <h3>排序圖解：js排序算法實現</h3>
              <p>@(彙總)[js] 基礎 Javascript是一種弱類型語言， 它分別有什麼優點和缺點 弱類型語言：<br> 簡單好用，更靈活多變。 但是會犧牲性能，比如一...</p>

              <a href="#"> 遠方不會遠 <span><img src="./images/comment_icon.png" alt=""></span> 999 <span><img
                    src="./images/like_icon.png" alt=""></span> 8989</a>
              <div class="img-right fr">
                <img src="./images/cell_img.jpg" alt="">
              </div>
            </li>
            <li>
              <h3>排序圖解：js排序算法實現</h3>
              <p>@(彙總)[js] 基礎 Javascript是一種弱類型語言， 它分別有什麼優點和缺點 弱類型語言：<br> 簡單好用，更靈活多變。 但是會犧牲性能，比如一...</p>

              <a href="#"> 遠方不會遠 <span><img src="./images/comment_icon.png" alt=""></span> 999 <span><img
                    src="./images/like_icon.png" alt=""></span> 8989</a>
              <div class="img-right fr">
                <img src="./images/cell_img.jpg" alt="">
              </div>
            </li>
            <li>
              <h3>排序圖解：js排序算法實現</h3>
              <p>@(彙總)[js] 基礎 Javascript是一種弱類型語言， 它分別有什麼優點和缺點 弱類型語言：<br> 簡單好用，更靈活多變。 但是會犧牲性能，比如一...</p>

              <a href="#"> 遠方不會遠 <span><img src="./images/comment_icon.png" alt=""></span> 999 <span><img
                    src="./images/like_icon.png" alt=""></span> 8989</a>
              <div class="img-right fr">
                <img src="./images/cell_img.jpg" alt="">
              </div>
            </li>
            <li>
              <h3>排序圖解：js排序算法實現</h3>
              <p>@(彙總)[js] 基礎 Javascript是一種弱類型語言， 它分別有什麼優點和缺點 弱類型語言：<br> 簡單好用，更靈活多變。 但是會犧牲性能，比如一...</p>

              <a href="#"> 遠方不會遠 <span><img src="./images/comment_icon.png" alt=""></span> 999 <span><img
                    src="./images/like_icon.png" alt=""></span> 8989</a>
              <div class="img-right fr">
                <img src="./images/cell_img.jpg" alt="">
              </div>
            </li>
          </ul>
        </div>
      </article>
      <aside>
        <!-- list start -->
        <div class="list">
          <ul>
            <li><a href="#"><img src="./images/jf01.png" alt=""></a></li>
            <li><a href="#"><img src="./images/jf02.png" alt=""></a></li>
            <li><a href="#"><img src="./images/jf03.png" alt=""></a></li>
            <li><a href="#"><img src="./images/jf04.png" alt=""></a></li>
            <li><a href="#"><img src="./images/jf05.png" alt=""></a></li>
          </ul>
        </div>
        <!-- download start -->
        <div class="download">
          <div class="dl-pic clearfix">
            <img src="./images/itlike.png" alt="">
          </div>
          <div class="text">
            <p>下載簡書手機App&gt;</p>
            <p>隨時隨地發現和創造內容</p>
          </div>
        </div>

        <!-- recommend start -->
        <div class="recommend">
          <dl>
            <dt>
              推薦作者 <span>換一批</span>
            </dt>
            <dd>
              <span class="clearfix"><img src="./images/author1.webp" alt=""></span>
              <div class="wz">
                <p> 王老師八卦美術史</p>
                <p>寫了132.4k字 · 788喜歡</p>
              </div>
              <a href="#">+關注</a>
            </dd>
            <dd>
              <span class="clearfix"><img src="./images/author1.webp" alt=""></span>
              <div class="wz">
                <p> 王老師八卦美術史</p>
                <p>寫了132.4k字 · 788喜歡</p>
              </div>
              <a href="#">+關注</a>
            </dd>
            <dd>
              <span class="clearfix"><img src="./images/author1.webp" alt=""></span>
              <div class="wz">
                <p> 王老師八卦美術史</p>
                <p>寫了132.4k字 · 788喜歡</p>
              </div>
              <a href="#">+關注</a>
            </dd>
            <dd>
              <span class="clearfix"><img src="./images/author1.webp" alt=""></span>
              <div class="wz">
                <p> 王老師八卦美術史</p>
                <p>寫了132.4k字 · 788喜歡</p>
              </div>
              <a href="#">+關注</a>
            </dd>
            <dd>
              <span class="clearfix"><img src="./images/author1.webp" alt=""></span>
              <div class="wz">
                <p> 王老師八卦美術史</p>
                <p>寫了132.4k字 · 788喜歡</p>
              </div>
              <a href="#">+關注</a>
            </dd>
            <dd>
              <span class="clearfix"><img src="./images/author1.webp" alt=""></span>
              <div class="wz">
                <p> 王老師八卦美術史</p>
                <p>寫了132.4k字 · 788喜歡</p>
              </div>
              <a href="#">+關注</a>
            </dd>
          </dl>
          <div class="more">
            <a href="#">查看全部</a>
          </div>
        </div>
      </aside>
    </div>
  </main>
</body>

</html>
  • index.less
/* header start */
@color: #e7e7e7;

#header {
    .container_fluid {
        position: fixed;
        top: 0;
        z-index: 100;
        height: 56px;
        line-height: 56px;
        border-bottom: 1px solid @color;
        background-color: #fff;

        .logo {
            width: 110px;
            height: 56px;
            margin-right: 120px;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .header-nav {
            font-size: 16px;

            ul {
                li {
                    float: left;
                    width: 90px;
                    height: 56px;
                    padding: 0 15px;

                    a {
                        color: #000000;

                        span {
                            display: inline-block;
                            width: 23px;
                            height: 23px;
                            margin-right: 5px;
                        }

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }
        }

        .header-search {
            position: relative;
            width: 225px;
            height: 38px;



            input {
                width: 100%;
                height: 100%;
                background-color: #eeeeee;
                border-radius: 20px;
                overflow: hidden;
                padding-left: 15px;

            }

            img {
                position: absolute;
                top: 13px;
                right: 10px;
                width: 32px;
                height: 32px;
            }
        }

        .header-right {
            display: flex;

            .login {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                margin: 0 10px;
                overflow: hidden;
                align-self: center;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .write {
                position: relative;
                width: 100px;
                height: 40px;
                border-radius: 20px;
                background-color: #ea6f5a;
                align-self: center;
                text-align: center;
                line-height: 40px;

                span {
                    position: absolute;
                    top: center;
                    left: 8px;
                }

                a {
                    color: #fff;
                    font-size: 16px;
                    padding-left: 15px;
                }
            }
        }
    }
}


/* main start */
#main {
    position: relative;
    top: 70px;
    overflow: hidden;

    article {
        float: left;
        width: 688px;
        height: 3000px;

        /* focus模塊 */
        .focus {
            width: 688px;
            height: 270px;

            img {
                width: 100%;
                height: 100%;
                border-radius: 5px;
            }
        }

        /* hot模塊 */
        .hot {
            margin-top: 20px;

            ul {
                li {
                    position: relative;
                    float: left;
                    margin: 0 20px 20px 0;
                    height: 32px;
                    background-color: @color ;
                    border-radius: 5px;
                    padding: 0 19px 0 45px;
                    overflow: hidden;
                    line-height: 32px;

                    span {
                        position: absolute;
                        top: -1px;
                        left: 0;
                        display: block;
                        width: 30px;
                        height: 30px;

                        img {
                            width: 100%;
                            height: 100%;
                        }


                    }

                    a {
                        font-size: 14px;
                        color: #000000;
                    }

                }
            }

            a {
                display: block;
                float: left;
                height: 30px;
                line-height: 30px;
                font-size: 16px;
                color: #787878;

            }
        }

        .essay {

            ul {
                li {
                    position: relative;
                    height: 100px;
                    border-top: 1px solid @color;
                    padding-top: 5px;
                    margin-top: 10px;

                    h3 {
                        font-size: 18px;
                        color: #000000;
                    }

                    p {
                        font-size: 14px;
                        margin: 5px 0;
                        color: #666666;
                    }

                    a {
                        font-size: 12px;
                        color: #b4b4b4;
                    }

                    span {
                        margin-left: 10px;
                    }

                    .img-right {
                        position: absolute;
                        top: 5px;
                        right: 0;
                        width: 138px;
                        height: 100px;


                        img {
                            width: 100%;
                            height: 100%;
                            border-radius: 5px;
                        }
                    }
                }
            }
        }
    }

    aside {
        float: right;

        /* list start */
        .list {
            width: 300px;

            ul {
                li {
                    width: 300px;
                    height: 50px;
                    margin-bottom: 5px;

                    img {
                        width: 100%;
                        height: 100%;
                    }

                }
            }
        }

        /* download start */
        .download {
            width: 300px;
            height: 90px;
            border-radius: 5px;
            border: 1px solid #f0f0f0;
            margin-top: 20px;
            padding: 15px 25px;

            .dl-pic {
                float: left;
                width: 60px;
                height: 60px;

                img {
                    width: 100%;
                    height: 100%;
                }


            }

            .text {
                font-size: 14px;


                P {
                    float: left;
                    padding-left: 10px;

                    &:first-child {
                        margin-top: 8px;
                        color: #000000;
                    }

                    &:last-child {
                        color: #b4b4b4;
                    }
                }
            }
        }

        /* recommend */
        .recommend {
            margin-top: 10px;

            dl {

                dt {
                    padding: 5px 10px;
                    font-size: 14px;
                    color: #d1bfb8;

                    span {
                        float: right;
                    }
                }

                dd {
                    overflow: hidden;
                    margin-top: 10px;

                    span {
                        float: left;
                        width: 48px;
                        height: 48px;

                        img {
                            width: 100%;
                            height: 100%;
                            border-radius: 50%;
                        }
                    }

                    .wz {
                        float: left;
                        padding-left: 10px;

                        p {
                            font-size: 16px;

                            &:first-child {
                                color: #000000;

                            }

                            &:last-child {
                                color: #cebbb4;
                            }
                        }
                    }

                    a {
                        float: right;
                        font-size: 16px;
                    }

                }
            }

            .more {
                width: 300px;
                height: 37px;
                line-height: 37px;
                font-size: 16px;
                text-align: center;
                border-radius: 5px;
                margin-top: 20px;
                border: 1px solid #cccccc;

                a {
                    color: #b4b4b4;
                }
            }

        }

    }
}
  • less轉換的index.css
/* header start */
#header .container_fluid {
  position: fixed;
  top: 0;
  z-index: 100;
  height: 56px;
  line-height: 56px;
  border-bottom: 1px solid #e7e7e7;
  background-color: #fff;
}
#header .container_fluid .logo {
  width: 110px;
  height: 56px;
  margin-right: 120px;
}
#header .container_fluid .logo img {
  width: 100%;
  height: 100%;
}
#header .container_fluid .header-nav {
  font-size: 16px;
}
#header .container_fluid .header-nav ul li {
  float: left;
  width: 90px;
  height: 56px;
  padding: 0 15px;
}
#header .container_fluid .header-nav ul li a {
  color: #000000;
}
#header .container_fluid .header-nav ul li a span {
  display: inline-block;
  width: 23px;
  height: 23px;
  margin-right: 5px;
}
#header .container_fluid .header-nav ul li a img {
  width: 100%;
  height: 100%;
}
#header .container_fluid .header-search {
  position: relative;
  width: 225px;
  height: 38px;
}
#header .container_fluid .header-search input {
  width: 100%;
  height: 100%;
  background-color: #eeeeee;
  border-radius: 20px;
  overflow: hidden;
  padding-left: 15px;
}
#header .container_fluid .header-search img {
  position: absolute;
  top: 13px;
  right: 10px;
  width: 32px;
  height: 32px;
}
#header .container_fluid .header-right {
  display: flex;
}
#header .container_fluid .header-right .login {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 0 10px;
  overflow: hidden;
  align-self: center;
}
#header .container_fluid .header-right .login img {
  width: 100%;
  height: 100%;
}
#header .container_fluid .header-right .write {
  position: relative;
  width: 100px;
  height: 40px;
  border-radius: 20px;
  background-color: #ea6f5a;
  align-self: center;
  text-align: center;
  line-height: 40px;
}
#header .container_fluid .header-right .write span {
  position: absolute;
  top: center;
  left: 8px;
}
#header .container_fluid .header-right .write a {
  color: #fff;
  font-size: 16px;
  padding-left: 15px;
}
/* main start */
#main {
  position: relative;
  top: 70px;
  overflow: hidden;
}
#main article {
  float: left;
  width: 688px;
  height: 3000px;
  /* focus模塊 */
  /* hot模塊 */
}
#main article .focus {
  width: 688px;
  height: 270px;
}
#main article .focus img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}
#main article .hot {
  margin-top: 20px;
}
#main article .hot ul li {
  position: relative;
  float: left;
  margin: 0 20px 20px 0;
  height: 32px;
  background-color: #e7e7e7;
  border-radius: 5px;
  padding: 0 19px 0 45px;
  overflow: hidden;
  line-height: 32px;
}
#main article .hot ul li span {
  position: absolute;
  top: -1px;
  left: 0;
  display: block;
  width: 30px;
  height: 30px;
}
#main article .hot ul li span img {
  width: 100%;
  height: 100%;
}
#main article .hot ul li a {
  font-size: 14px;
  color: #000000;
}
#main article .hot a {
  display: block;
  float: left;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  color: #787878;
}
#main article .essay ul li {
  position: relative;
  height: 100px;
  border-top: 1px solid #e7e7e7;
  padding-top: 5px;
  margin-top: 10px;
}
#main article .essay ul li h3 {
  font-size: 18px;
  color: #000000;
}
#main article .essay ul li p {
  font-size: 14px;
  margin: 5px 0;
  color: #666666;
}
#main article .essay ul li a {
  font-size: 12px;
  color: #b4b4b4;
}
#main article .essay ul li span {
  margin-left: 10px;
}
#main article .essay ul li .img-right {
  position: absolute;
  top: 5px;
  right: 0;
  width: 138px;
  height: 100px;
}
#main article .essay ul li .img-right img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}
#main aside {
  float: right;
  /* list start */
  /* download start */
  /* recommend */
}
#main aside .list {
  width: 300px;
}
#main aside .list ul li {
  width: 300px;
  height: 50px;
  margin-bottom: 5px;
}
#main aside .list ul li img {
  width: 100%;
  height: 100%;
}
#main aside .download {
  width: 300px;
  height: 90px;
  border-radius: 5px;
  border: 1px solid #f0f0f0;
  margin-top: 20px;
  padding: 15px 25px;
}
#main aside .download .dl-pic {
  float: left;
  width: 60px;
  height: 60px;
}
#main aside .download .dl-pic img {
  width: 100%;
  height: 100%;
}
#main aside .download .text {
  font-size: 14px;
}
#main aside .download .text P {
  float: left;
  padding-left: 10px;
}
#main aside .download .text P:first-child {
  margin-top: 8px;
  color: #000000;
}
#main aside .download .text P:last-child {
  color: #b4b4b4;
}
#main aside .recommend {
  margin-top: 10px;
}
#main aside .recommend dl dt {
  padding: 5px 10px;
  font-size: 14px;
  color: #d1bfb8;
}
#main aside .recommend dl dt span {
  float: right;
}
#main aside .recommend dl dd {
  overflow: hidden;
  margin-top: 10px;
}
#main aside .recommend dl dd span {
  float: left;
  width: 48px;
  height: 48px;
}
#main aside .recommend dl dd span img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
#main aside .recommend dl dd .wz {
  float: left;
  padding-left: 10px;
}
#main aside .recommend dl dd .wz p {
  font-size: 16px;
}
#main aside .recommend dl dd .wz p:first-child {
  color: #000000;
}
#main aside .recommend dl dd .wz p:last-child {
  color: #cebbb4;
}
#main aside .recommend dl dd a {
  float: right;
  font-size: 16px;
}
#main aside .recommend .more {
  width: 300px;
  height: 37px;
  line-height: 37px;
  font-size: 16px;
  text-align: center;
  border-radius: 5px;
  margin-top: 20px;
  border: 1px solid #cccccc;
}
#main aside .recommend .more a {
  color: #b4b4b4;
}
  • base.css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    /* 手勢 */
    cursor: pointer;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

/* em和i斜體的文字不傾斜 */
em,
i {
    font-style: normal;
}

img {
    /* border 0 照顧低版本的瀏覽器，如果圖片外面包含了連接會有邊框的問題 */
    border: 0;
    /* 取消圖片底側有空白縫隙的問題 */
    vertical-align: middle;
}

button {
    /* 當我們鼠標經過button按鈕的時候，鼠標變成小手 */
    cursor: pointer;

}

input,
button {
    /* "\5B8B\4F53" 就是宋體的意思 這樣瀏覽器兼容性比較好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    /* 默認有灰色邊框我們需要手動去掉 */
    border: 0;
    /* 去掉輪廓線 */
    outline: none;

}

/* 清除浮動 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}

/* 版心 */
.container {
    width: 1000px;
    margin: 0 auto;
}

.container_fluid {
    width: 100%;
}

body {
    /* css3抗鋸齒 讓文字顯示的更清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #ffffff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666;
}

效果圖：在這裏插入圖片描述

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

移動web開發學習整理

移動web flex彈性 案例 彈性攜程首頁 效果： .base.css body, div, span, p, ul, li, a, img, input, h1, h2, h3, h4, i { margin: 0;

Silent Land 2020-07-06 20:14:43

Linux運維進階指令02

Linux 運維進階指令02 df****指令 含義查看磁盤的空間 df指令的作用 語法：df-h 表示以可讀性較高的形式展示大小 free指令 含義查看內存使用情況 free指令的作用 語法：free-m  :表

原創 2024-04-11 11:35:43

wepy 編譯less添加css前綴（autoprefix）

wepy 編譯less添加css前綴（autoprefix） wepy、autoprefix wepy的編譯默認是沒有css autoprefix，所以就有樣式兼容性的問題了； 需要手動去添加配置，如下： 1.安裝 執行 np

这魏先森 2020-07-08 08:25:03

鳥哥linux私房菜 基礎篇 筆記3

絕對路徑與相對路徑： 絕對路徑：路徑的寫法『一定由根目錄 / 寫起』，例如： /usr/share/doc 這個目錄。相對路徑：路徑的寫法『不是由 / 寫起』，例如由 /usr/share/doc 要到 /usr/share/man 底

namehzf 2020-07-07 19:57:09

修改設置vue design/iview的全局主題的時候，less-loader橫插一腳bug，版本太高兼容性報錯？

問題 按照iview文檔設置vue design/iview的全局主題的時候,出現了下面的報錯，導致項目無法啓動 Failed to compile ./src/Home/less/antMotionStyle.less (./n

苏一恒 2020-07-07 13:59:26

Unix shell

1. TITLE hello world Time ver exit cls FC /N C:\Test\a.txt C:\Test\b.txt comp /A /D C:\Test\a.txt C:\Test\b.txt tree C

lexin2046 2020-07-07 13:50:41

linux_shell筆記(一)

    自由軟件：更注重對軟件的解放，而非價格上的免費。 人工智能：AI--artificial intelligence   麻省理工學院：MIT 公共許可協議：General Public License,GPL   POSI

terry_linux 2020-07-07 09:54:12

Five Pervasive Myths About Older Software Developers

  I recently celebrated my 40th birthday.  A friend joked to me, “Hey, gu

andrew_yau 2020-07-07 00:53:41

oracle的一些命令

create tablespace xxx datafile '/data/xxx00.dbf' size 500M;create user xxx identified by passwd default tablespace tbs_

CygX_1 2020-07-06 23:59:44

一個簡單的linux命令——less

less 工具也是對文件或其它輸出進行分頁顯示的工具，應該說是linux正統查看文件內容的工具，功能極其強大。less 的用法比起 more 更加的有彈性。在 more 的時候，我們並沒有辦法向前面翻， 只能往後面看，但若使用了

Vtamins 2020-07-06 19:30:16

庖丁解牛系列（一）

  翻譯很爛D  我在努力中     When global warming finally came, it stuck with a venge

Mark_Chen_V1Point0 2020-07-06 16:10:37

絕對英文經典

Money is not everything. There‘s Mastercard & Visa. 鈔票不是萬能的,有時還需要信用卡. One should love animals. They are so tasty. 每個人都應

Anssin007 2020-07-06 10:37:51

E_WORK

技術問題使韓國推遲火箭發射 (Technical Problems Delay South Korean Rocket Launch) 韓國以技術問題爲由推遲了首枚太空火箭發射。火箭發射前八分鐘工程師突然放棄發射。火箭原計劃星期三

hanhongning 2020-07-06 09:04:58

base64圖片上傳，並顯示圖片，

<a href="javascript:;" class="file">選擇文件 <input type="hidden" id="files-button" /> <input type="file" name="fil

qq_28761593 2020-07-08 02:31:49

【CSS】CSS之層疊性，繼承性，優先級

層疊性 樣式發生衝突的時候，總是執行後邊的樣式，和調用順序無關。 繼承性 文字的所有屬性都可以被繼承 -特殊：h1-h6 文字大小不能被繼承 a標籤文字顏色不能被繼承 優先級 默認樣式<標籤選擇器<類選擇器<id選擇器<行內樣式

乌鲁托拉曼 2020-07-06 18:44:51