CSS-SCSS代碼規(guī)范

1 注釋規(guī)范

2 縮進(jìn)/空格/換行規(guī)范

  • 每個縮進(jìn)使用4個空格牙丽，不允許使用 2 個空格 或 tab

    //正確
.sample {
    display: flex;
}
//錯誤
.sample {
  display: flex;
}

  • 選擇器 與 花括號 之間必須包含空格

    //正確
.sample {
    display: flex;
}
//錯誤
.sample{
    display: flex;
}

  • 每條規(guī)則之間必須包含空行

    //正確
.sample {
    display: flex;
}

.sample1 {
    display: block;
}
//錯誤
.sample {
    display: flex;
}
.sample1 {
    display: block;
}

  • 屬性名與冒號之間不允許包含空格， 冒號與屬性值之間必須包含空格

    //正確
display: flex;
//錯誤
display:flex
display : flex
display :flex

  • 逗號前不允許有空格爬凑，逗號后必須跟一個空格

    //正確
font-family: Helvetica, Arial
//錯誤
font-family: Helvetica , Arial
font-family: Helvetica ,Arial
font-family: Helvetica, Arial

  • SCSS mixin的方法參數(shù)括號與 { 之間必須包含一個空格, 各參數(shù)間必須有一個空格

    //正確
@mixin color-box($bg-color: $grey-light, $border-color: $grey) {
    background-color: $bg-color;
    border: 1px solid $border-olor;
}
//錯誤
@mixin color-box($bg-color:$grey-light,$border-color:$grey) {
    background-color: $bg-color;
    border: 1px solid $border-olor;
}

  • '+' '~' '>'選擇器前后必須跟一個空格

    //正確
.radio-label + .radio-box {

}
//錯誤
.radio-label+.radio-box {

}

  • 引用mixin和多層嵌套必須有一個空行

    //正確
.sample {
    @include color-box;

    margin: 15px;

    &:hover {
      display: block;
    }
}
//錯誤
.sample {
    @include color-box;
    margin: 15px;
    &:hover {
      display: block;
    }
}

  • 一組變量的定義办绝，盡量以冒號對齊

    //推薦
$link-hover-color        : #29e;
$hover-color-gray        : #ebebeb;
$icon-hover-color        : #4d4d4d;
$btn-hover-color         : #f0f0f0;
$btn-hover-color-form    : #f9f9f9;
$btn-hover-color-cancel  : #f63737;
//不推薦
$link-hover-color : #29e;
$hover-color-gray : #ebebeb;
$icon-hover-color : #4d4d4d;
$btn-hover-color : #f0f0f0;
$btn-hover-color-form : #f9f9f9;
$btn-hover-color-cancel : #f63737;

  • 多個并行選擇器使用同一規(guī)則次舌，必須換行

    //正確
.a,
.b,
.c {
    box-sizing: border-box;
}
//錯誤
.a, .b, .c {
    box-sizing: border-box;
}

    3 選擇器

  • 禁止使用ID應(yīng)用于樣式熄攘，應(yīng)該使用class

    //正確
.content {
    display: flex;
}
//錯誤
#content {
    display: flex;
}

  • CSS選擇器中避免標(biāo)簽名
    選擇器應(yīng)該是準(zhǔn)確和有語義的class(類)名，不推薦使用標(biāo)簽選擇器彼念。這樣會更容易維護(hù), 只需要修改你的標(biāo)簽名挪圾，而不是你的class
    從分離的角度考慮,在表現(xiàn)層中不應(yīng)該分配html標(biāo)記/語義。

    //推薦
.content {
    display: flex;

    > .nav {
        flex: 1;
    }
}
//不推薦
.content {
    display: flex;

    > nav {
        flex: 1
    }
}

  • 盡量精準(zhǔn)的選擇

    //推薦
.content {
    display: flex;

    > .nav {
        flex: 1;
    }
}
//不推薦
.content {
    display: flex;

    .nav {
        flex: 1
    }
}

  • 選擇器嵌套
    正常的情況下逐沙，我們不推薦使用嵌套洛史，如果需要使用嵌套，我們不推薦嵌套超過三層, 如果嵌套超過三層酱吝，應(yīng)該考慮是不是哪里可以使用更精準(zhǔn)更語義化的class也殖。不推薦直接使用css的嵌套，而是使用SCSS的嵌套务热。

    //推薦
.content {
    display: flex;

    > .nav {
        flex: 1;

        > .item {
            text-align: center;
        }
    }
}
//不推薦
.content .nav .item a {
    text-align: center;
}

  • 在CSS預(yù)處理器如LESS 和 SASS 里 media query 推薦直接在選擇器的嵌套中使用忆嗜，有助于保持媒體查詢屬于的上下文

    //推薦
.content {
    font-size: 1.2rem;

    @media screen and (min-width: 767px) {
        font-size: 1rem;
    }
}
//不推薦
.content {
    font-size: 1.2rem;
}
@media screen and (min-width: 767px) {
    .content {
        font-size: 1rem;
    }
}

  • 屬性選擇器必須使用雙引號

    //正確
[class="icon-"] {
    font-size: 1rem;
}
//錯誤
[class='icon-'] {
    font-size: 1rem;
}

    4 屬性規(guī)范

  • 屬性定義必須另起一行

    // 正確
.selector {
    margin: 0;
    padding: 0;
}

// 錯誤
.selector { margin: 0; padding: 0; }

  • 屬性必須以分號結(jié)尾

    // 正確
.selector {
    margin: 0;
    padding: 0;
}
// 錯誤
.selector {
    margin: 0;
    padding: 0
}

  • 屬性值為0時，省略單位

    // 正確
.box {
    padding: 0;
}
// 錯誤
.box {
    padding: 0px;
}

  • 使用16進(jìn)制表示顏色崎岂，顏色值采用小寫捆毫，#rrggbb的情況簡寫為#rgb，有透明度的情況使用rgba表示

    // 正確
.box {
    background: rgba(0, 0, 255, .5);
    color: #3ec;
}
// 錯誤
.box {
    background: white;
    opacity: 0.5;
    color: #33eecc;
}

  • 同一組屬性盡量按照功能順序書寫冲甘，以 Formatting Model（布局方式绩卤、位置） > Box Model（尺寸） > Typographic（文本相關(guān)） > Visual（視覺效果） 的順序書寫，以提高代碼的可讀性

    • Formatting Model 相關(guān)屬性包括：display / position / top / right / bottom / left / float / overflow 等
    • Box Model 相關(guān)屬性包括：margin / border / padding / width / height 等
    • Typographic 相關(guān)屬性包括：font / line-height / text-align / word-wrap 等
    • Visual 相關(guān)屬性包括：background / color / transition / list-style 等
    // 推薦
.sidebar {
    // formatting model
    position: absolute;
    top: 50px;
    left: 0;
    overflow-x: hidden;
    // box model
    width: 200px;
    padding: 5px;
    border: 1px solid #ddd;
    // typographic
    font-size: 14px;
    line-height: 20px;
    // visual
    background: #f5f5f5;
    color: #333;
    transition: color 1s;
}

  • font-family 屬性

    • font-family 屬性中的字體族名稱應(yīng)使用字體的英文 Family Name江醇，其中如有空格濒憋，須放置在引號中。

      // 示例
h1 {
    font-family: "Microsoft YaHei";
}

    • font-family 不區(qū)分大小寫陶夜，但在同一個項目中凛驮，同樣的 Family Name 大小寫必須統(tǒng)一。

      // 正確
body {
    font-family: Arial, sans-serif;
}

h1 {
    font-family: Arial, "Microsoft YaHei", sans-serif;
}

// 錯誤
body {
    font-family: arial, sans-serif;
}

h1 {
    font-family: Arial, "Microsoft YaHei", sans-serif;
}

    • font-family 按「西文字體在前条辟、中文字體在后」黔夭、「效果佳 (質(zhì)量高/更能滿足需求) 的字體在前、效果一般的字體在后」的順序編寫羽嫡，最后必須指定一個通用字體族( serif / sans-serif )

      // 示例
body {
    font-family: "Helvetica Neue", Helvetica, Arial, PingFangSC-Regular, "Microsoft Yahei", Verdana, sans-serif;
}

    • 不推薦在業(yè)務(wù)中重寫font-family

  • url()中的路徑不添加引號

    // 推薦
.box {
    background-image: url(../imgs/banner.jpg);
}
// 不推薦
.box {
    background-image: url('../imgs/banner.jpg');
}

  • 推薦并適當(dāng)縮寫值
    “適當(dāng)”是因為縮寫總是會包含一系列的值本姥，而有時候我們并不希望設(shè)置某一值，反而造成了麻煩杭棵，那么這時候你可以不縮寫婚惫，而是分開寫。

    // 有時我們只想設(shè)置一個容器水平居中，那么設(shè)置left辰妙，right就好，而top和bottom不是這個樣式要關(guān)心的（如果設(shè)置了反倒會影響其他樣式在這個容器上的使用）

// 示例
<div class="box center"></div>

.box {
    margin-top: 10px;
}
// 這種簡寫將會覆蓋.box里的設(shè)置
.center {
    margin: 0 auto;
}

// 比如下面這個模塊的樣式設(shè)置甫窟，我們確實需要設(shè)置padding的所有項密浑，于是我們就可以采用縮寫
.footer {
    padding: 12px 3px;
}

  • 對于屬性值或顏色參數(shù)，省略小于 1 的小數(shù)前面的 0 （例如粗井，.5 代替 0.5尔破；-.5px 代替 -0.5px）

  • 無邊框設(shè)置

    // 正確
.box {
    border: none;
}
// 錯誤
.box {
    border: 0; // 瀏覽器會進(jìn)行多余的渲染，性能不佳
}

  • 層級(z-index)禁止隨意設(shè)置浇衬，頁面彈窗懒构、氣泡為最高級（最高級為999）；普通區(qū)塊為10-90內(nèi)10的倍數(shù)耘擂；同層的多個元素胆剧，在該層級內(nèi)使用相同的 z-index 或遞增。

  • 禁止使用 !important (特殊情況除外醉冤，如覆蓋第三方插件中的樣式等)

  • 禁止使用 filter

  • 多個class里有一個或多個公共屬性秩霍，應(yīng)該將屬性抽取到一個單獨的class中或者使用泛選擇器([attribute~=value], [attribute^=value],[attribute$=value],[attribute*=value])，泛選擇器應(yīng)確保不會有全局污染蚁阳，避免多次書寫重復(fù)代碼

    // 正確
<div>
    <span class="icon-book"></span>
    <span class="icon-pen"></span>
</div>

[class^="icon-"] {
    background-image: url(../imgs/sprite.png) no-repeat;
}

.icon-book {
    background-positon: 0 -16px;
}

.icon-pen {
    background-positon: -16px -16px;
}
// 錯誤
<div>
    <span class="icon-book"></span>
    <span class="icon-pen"></span>
</div>

.icon-book {
    background-image: url(../imgs/sprite.png) no-repeat;
    background-positon: 0 -16px;
}

.icon-pen {
    background-image: url(../imgs/sprite.png) no-repeat;
    background-positon: -16px -16px;
}

5 Hack規(guī)范

通常我們禁止在CSS的一個選擇器中使用hack混編铃绒，如果你確實需要寫hack, 我們應(yīng)該有一個class： xxx-fix, 最好把所有的hack放在一個獨立的文件, 通過JS特性檢測或者直接添加到dom中。

  // 錯誤
  .selector {
      key: value;
      key: fix-value\0; //ie 9-11
  }
  // 正確
  .selector {
      key: value;
  }

  .selecor-ie-fix {
      key: fix-value\0; //ie 9-11
  }

6 命名規(guī)范

  • 文件夾命名

    • css文件夾命名應(yīng)參照項目文件夾命名規(guī)則螺捐，命名總是以字母開頭而不是數(shù)字颠悬，且字母一律小寫，以中劃線連接多個單詞且不帶其他標(biāo)點符號定血。
      如：input-number
      有復(fù)數(shù)結(jié)構(gòu)時赔癌，采取復(fù)數(shù)命名法。
      如： style styles
      |- components
      |- input-number
      |- inputNumber.html
      |- inputNumber.js
      |- styles
      |- input_number.scss
      |- images
      |- menu

  • 文件命名

    • 全站架構(gòu)：(以下文件放在跟路徑下的styles目錄中)
    基本共用 base.scss
布局澜沟、版面 layout.scss
主題 themes.scss
專欄 columns.scss
文字 font.scss
主要的 main.scss
表單 forms.scss
補丁 mend.scss
打印 print.scss
變量 variables.scss
功能函數(shù) mixins.scss
色值 colors.scss
動畫 animations.scss
字體 iconfont.scss
    • 組件級 / 應(yīng)用級：（放在組件/應(yīng)用目錄中）
    css模塊文件届榄，其文件名必須與模塊名一致。
css頁面文件倔喂，其文件名必須與HTML文件名一致铝条。
目的是讓開發(fā)人員快速找到該頁面或組件對應(yīng)的css文件。
文件命名總是以字母開頭而不是數(shù)字席噩，且字母一律小寫班缰，以下劃線連接且不帶其他標(biāo)點符號。
radio.scss
main-list.scss
main-detail.scss

  • 變量命名

    • 命名變量的最佳方式就是使用抽象名詞悼枢，盡量取消名字和值之間的直接關(guān)系埠忘。
    • 使用'$'開頭+ 語義化的變量名。
    • 避免使用無意義的詞，如: calendar-component ->calendar
    • 推薦變量的意義在前面莹妒，功能在后面
    // 不推薦
$red: #F50707;
$yellow: #B3F724;

// 推薦
$brand-color: #F50707;
$accent-color: #B3F724;

// 你可能會使用名稱加-color的后綴來命名顏色的變量:
// Base colors
$base-color: #333;
$brand-color: #F50707;
$brand-80-color: rgba($color-brand, 0.8);
$accent-color: #B3F724;

// 或者使用header-或者footer-來命名一些特殊的區(qū)域：
// Header
$header-height: 100px;
$header-background-color: $color-brand;
// Footer
$footer-height: 200px;
$footer-background-color: #aaa;

// 不推薦
$z-index-modal
$padding-body
// 推薦
$modal-z-index
$body-padding

  • 選擇器命名

      推薦采用BEM方式命名
  // BE模式 block__element：塊里的元素名船，如：nav（block）里的 a 標(biāo)簽(element)
  <nav class="g-nav">
      <a href="#" class="g-nav__item">工作動態(tài)</a>
  </nav>
  .g-nav__item {

  }

  // BM模式 block--modifier: 塊元素加修飾符
  // g-nav表示導(dǎo)航的通用樣式，g-nav-top表示該導(dǎo)航特有的樣式旨怠，g-nav--active表示激活的nav
  <nav class="g-nav g-nav-top g-nav--active">
  </nav>
  .g-nav--active {

  }

  // BEM模式 block__element--modifier nav塊里的a元素加上active狀態(tài)
  <nav class="g-nav">
      <a href="#" class="g-nav__item g-nav__item--active">當(dāng)前狀態(tài)</a>
  </nav>
  .g-nav__item--active {

  }

  BEM只允許出現(xiàn)B__E--M,不允許出現(xiàn)B__B__B__E--M   B__E__E__E--M   B__E--M--M--M
  如果層級過多渠驼，可以使用以下方式：
  B__E--M > B__E--M > B__E--M(最多3層B__E--M嵌套)

  // 推薦
  <div class="c-card"><!-- B -->
      <div class="c-card__header"><!-- B__E -->
          <h2 class="c-card-title"><!-- B__E > B -->
              <i class="c-card-title__icon--small"></i><!-- B__E > B__E--M -->
              <i class="c-card-title__icon--big"></i><!-- B__E > B__E--M -->
              <span class="c-card-title__text-wrap">Title text here</span><!-- B__E > B__E -->
          </h2>
      </div>
  </div>
  // 推薦
  .c-card {                      // B

      &__header {                // B__E

          > .c-card-title {      // B__E > B

              &__icon--small {   // B__E > B__E--M

              }

              &__icon--big {     // B__E > B__E--M

              }

              &__text-wrap {     // B__E > B__E

              }
          }
      }

  }

  // 不推薦
  <div class="c-card">
      <div class="c-card__header">
          <h2 class="c-card__header__title">
              <i class="c-card__header__title__icon"></i>
              <span class="c-card__header__title__text">Title text here</span>
          </h2>
      </div>
  </div>

  // 不推薦
  .c-card {

      &__header{

          &__title {

              &__icon {

              }

              &__text {

              }
          }
      }
  }

  - 注意到以上示例中使用了c- 前綴。這個c代表'component'鉴腻，給組件加上命名空間爽哎，它提高了代碼的可讀性课锌。
  類型 | 前綴 | 例子 | 描述
  布局 | (g-) | g-header | (global)例如頭部厨内，尾部，主體渺贤，側(cè)欄等
  組件 | (c-) | c-card | (component)較大整體隘庄，如登錄注冊，搜索等
  元件 | (u-) | u-btn | 不可再分個體癣亚，例如按鈕丑掺，input框等
  功能 | (f-) | f-clear | (function)使用頻率較高樣式，例如清除浮動
  皮膚 | (s-) | s-nav | (skin) 只包含皮膚的樣式
  主線 | (ig-) | ig-header | (igoal)主線模塊中組件Block的前綴
  審批 | (ap-) | ap-header | (approve)審批模塊中組件Block的前綴
  ...

命名時需要注意的點：
- 規(guī)則命名中述雾，一律采用小寫加中劃線的方式街州，不允許使用大寫字母或_
- 命名避免使用中文拼音唆缴，應(yīng)該采用更簡明有語義的英文單詞進(jìn)行組合
- 命名注意縮寫，但是不能盲目縮寫
- 不允許通過1黍翎、2面徽、3等序號進(jìn)行命名
- 避免class與id重名
- class用于標(biāo)識某一個類型的對象，命名必須言簡意賅
- 盡可能提高代碼模塊的復(fù)用匣掸，樣式盡量用組合的方式
- 公共樣式名不得包含業(yè)務(wù)名稱

  • mixins命名

    • 見名知義
    • 小寫加中劃線霎匈，不允許出現(xiàn)大小字母或_
    // 不推薦
@mixin button($background: green) {

}
// 不推薦
@mixin buttonBg($background: green) {

}
// 不推薦
@mixin button_bg($background: green) {

}
// 推薦
@mixin button-bg($background: green) {

}

    多個參數(shù)之間用逗號分隔，給參數(shù)設(shè)置默認(rèn)值

7 重寫規(guī)范

我們不允許直接使用公共庫的選擇器進(jìn)行重寫送爸，如果要進(jìn)行重寫铛嘱，必須自己重新加一個新的選擇器暖释，并且，這個選擇器不能對公共庫有影響墨吓。

  // 錯誤
  .qf-xxx .qf-btn {
      //some rewriting code
  }
  // 正確
  .qf-xxx__qf-btn {
      //some rewriting code
  }
  //使用的時候用qf-btn 和 qf-xxx__qf-btn兩個class, 所以在寫組件的時候球匕，為了考慮組件的通用性和可重寫性，建議組件開發(fā)人員帖烘，都提供一個外部的樣式輸入接口
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末亮曹，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子蚓让，更是在濱河造成了極大的恐慌，老刑警劉巖讥珍，帶你破解...
    沈念sama閱讀 217,826評論 6贊 506
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件历极，死亡現(xiàn)場離奇詭異，居然都是意外死亡衷佃，警方通過查閱死者的電腦和手機趟卸，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,968評論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來氏义，“玉大人锄列，你說我怎么就攤上這事」哂疲” “怎么了邻邮？”我有些...
    開封第一講書人閱讀 164,234評論 0贊 354
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長克婶。 經(jīng)常有香客問我筒严，道長，這世上最難降的妖魔是什么情萤？ 我笑而不...
    開封第一講書人閱讀 58,562評論 1贊 293
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任鸭蛙，我火速辦了婚禮，結(jié)果婚禮上筋岛，老公的妹妹穿的比我還像新娘娶视。我一直安慰自己，他們只是感情好睁宰，可當(dāng)我...
    茶點故事閱讀 67,611評論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布肪获。 她就那樣靜靜地躺著，像睡著了一般柒傻。 火紅的嫁衣襯著肌膚如雪贪磺。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 51,482評論 1贊 302
  • 城市分裂傳說
    那天诅愚，我揣著相機與錄音寒锚，去河邊找鬼劫映。 笑死，一個胖子當(dāng)著我的面吹牛刹前，可吹牛的內(nèi)容都是我干的泳赋。 我是一名探鬼主播，決...
    沈念sama閱讀 40,271評論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼喇喉，長吁一口氣：“原來是場噩夢啊……” “哼祖今！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起拣技，我...
    開封第一講書人閱讀 39,166評論 0贊 276
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤千诬，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后膏斤，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體徐绑，經(jīng)...
    沈念sama閱讀 45,608評論 1贊 314
  • ?護(hù)林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,814評論 3贊 336
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年莫辨，在試婚紗的時候發(fā)現(xiàn)自己被綠了傲茄。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,926評論 1贊 348
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡沮榜，死狀恐怖盘榨，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情蟆融，我是刑警寧澤草巡，帶...
    沈念sama閱讀 35,644評論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站型酥，受9級特大地震影響捷犹，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜冕末，卻給世界環(huán)境...
    茶點故事閱讀 41,249評論 3贊 329
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一萍歉、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧档桃，春花似錦枪孩、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,866評論 0贊 22
  • 一樁弒父案蔑舞，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至嘹屯，卻和暖如春攻询，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背州弟。 一陣腳步聲響...
    開封第一講書人閱讀 32,991評論 1贊 269
  • 情欲美人皮
    我被黑心中介騙來泰國打工钧栖， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留低零，地道東北人。 一個月前我還...
    沈念sama閱讀 48,063評論 3贊 370
  • 代替公主和親
    正文 我出身青樓拯杠，卻偏偏與公主長得像掏婶，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子潭陪，可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,871評論 2贊 354

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

  • 1雄妥、垂直對齊 如果你用CSS，則你會有困惑：我該怎么垂直對齊容器中的元素依溯？現(xiàn)在老厌，利用CSS3的Transform，...
    kiddings閱讀 3,164評論 0贊 11
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5黎炉？ 答：HTML5是最新的HTML標(biāo)準(zhǔn)枝秤。 注意：講述HT...
    kismetajun閱讀 27,485評論 1贊 45
  • 選擇qi：是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性： color，font拜隧，text－align宿百，li...
    wzhiq896閱讀 1,753評論 0贊 2
  • 選擇qi：是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性： color趁仙，font洪添，text－align，li...
    love2013閱讀 2,314評論 0贊 11
  • 序：清明閱詩友“一剪梅”散文《一年春事都來幾》有感雀费，隨手拈來《漢宮春》一闋和之干奢。 木筆嫣然，眺春歸日暖盏袄，燕返籬喧忿峻。...
    水影晃樹閱讀 256評論 3贊 5