• <sub id="xcyjv"></sub><nav id="xcyjv"><code id="xcyjv"><meter id="xcyjv"></meter></code></nav>
      <nav id="xcyjv"></nav>
    1. <form id="xcyjv"><th id="xcyjv"></th></form><nav id="xcyjv"><mark id="xcyjv"></mark></nav>

        運用CSS methodologies去實現模塊化的方法示例

          發布時間:2019-09-26 15:48:48   作者:小蔣不素小蔣   我要評論
        這篇文章主要介紹了運用CSS methodologies去實現模塊化的方法示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

        一、什么是 CSS methodologies

        CSS methodologies,可以理解成 設計模式,也可以理解成 css 規范,市面使用情況如下圖:

        上圖來源:https://2019.stateofcss.com/technologies/

        你可能在日常開發中并不會專門花時間去注意和了解 CSS methodologies,但隨著你經驗的積累,你可能會自己思考,或者閱讀別人的代碼、參考網上成熟的框架,這里面都或多或少的蘊含了一些 css methodologies 的閃光點。而下面要介紹的幾種主流的 css methodologies,則可以幫你做到很好的總結和梳理。

        二、常見的 CSS methodologies

        1、OOCSS

        面向對象的 CSS(Object-Oriented CSS,簡稱 OOCSS ),由 Nicole Sullivan 于 2008 年提出,這基于她在雅虎的工作。

        (1)規則

        1、不要使用 ID 用 Class

        直接使用class來設定樣式,這樣寫不只是可以增加語義,同時也降低css對html的依賴。

        2、結構和樣式分離

        雖然早期 html 和 css 實現了結構和樣式的分離,但 css 內部同樣存在兩種類型的樣式:

        • 結構樣式(例如長寬、距離)
        • 皮膚樣式(例如顏色、陰影)

        所以 OOCSS 建議把這兩種樣式拆開。

        比如有三種按鈕,白色的/綠色的/紅色的,可分別定義為:

        class="btn btn-default"
        
        class="btn btn-green"
        
        class="btn btn-red"

        如果你真的有很多個具有紫色按鈕,則可以創建一個單獨的紫色按鈕類。這樣可以大大減少CSS代碼的數量。

        3、容器和內容分離

        內容絕不應該限制于特定的容器,為了重用,得分離開。

        # 錯誤寫法
        .header .action {
        }
        .header .action .login {
        }
        .header .action .register {
        }
        
        # 正確寫法
        .header{
        }
        .action{
        }
        .login {
        }
        .register {
        }

        繼承選擇符是有用的,它可以減少因相同命名引發的樣式沖突(常發生于多人協作開發)。但是,我們不應過度使用。

        (2)利弊

        好處:

        • 模塊化,可重用
        • 減少代碼重復
        • 提高可拓展性、可維護性、可讀性

        缺點:

        • 雖減少了深層的嵌套選擇器,但是多了更多的類
        • 如果代碼中沒有大量重復的視覺模式,比如一些小項目,則應用OOCSS可能不切實際

        (3)實例

        Bootstrap 就是用的 OOCSS。

        例如:

        html

         <div class='header'>
                <ul class='menu'> 
                    <li class='menu-item active'>1</li>
                    <li class='menu-item'>2</li>
                    <li class='menu-item'>3</li>
                </ul>
                <div class="action">
                    <button class="btn btn-login">login</button>
                    <button class="btn btn-register">register</button>
                </div>
            </div> 

        css:

        .header {
        }
        .menu {
        }
        .menu-item {
        }
        .item.active {
        }
        .action {
        }
        .btn {
        }
        .btn-login {
        }
        .btn-register{
        }

        2、BEM

        BEM - Block Element Modfier(塊元素編輯器)。誕生于2009年。

        (1)內容

        BEM 包括三個:

        • Block - 塊,如 header
        • Element - 子元素,如 塊menu 下的 item
        • Modfier - 狀態,如.current、.active

        (2)規則

        1、命名規范

        • -中劃線 :僅作為連字符使用,表示某個塊或者某個子元素的多單詞之間的連接記號。
        • __ 雙下劃線:用來連接塊和塊的子元素。
        • -- 雙中劃線:用來描述一個塊或者塊的子元素的一種狀態。

        在某些公司(如騰訊)的規范里,雙中劃線被單下劃線(_)替代。

        例如:.block-name__element--modifier

        demo - html:

            <div class='header'>
                <ul class='header__menu'> 
                    <li class='header__menu-item--active'>1</li>
                    <li class='header__menu-item'>2</li>
                    <li class='header__menu-item'>3</li>
                </ul>
                <div class="header__action">
                    <button class="header__btn--login">login</button>
                    <button class="header__btn--register">register</button>
                </div>
            </div> 

        demo - less:

        .header {
            &__menu {}
            &__menu-item {}
            &__action {}
            &__btn {  
                &--login {}
                &--register {}
            }    
        }

        2、避免嵌套

        BEM 最多只有 B+E+M 三級。

        所以請避免 .block__el1__el2 的格式,直接改為 .block_el2。

        這里的 block 就很像命名空間了。

        (3)利弊

        好處:

        • 層級關系一目了然,具有可讀性
        • 不需要依靠層級選擇器來限定約束作用域,可避免跨組件的樣式污染。

        缺點:

        • 命名方式長而難看,書寫不便(可以通過 less/sass 來簡化書寫)
        • 在較小的組件中,BEM 格式可能顯得雞肋。但對于公共的、全局性的模塊樣式定義,還是推薦使用 BEM 格式。(尤其對外發布的公共組件)

        其他:

        BEM 命名會使得 Class 類名變長,但經過 gzip 壓縮后這個帶寬開銷可以忽略不計。

        BEM是不允許用標簽選擇器的,哪怕最簡單的 li 也得寫成 .menu-item。

        (4)實踐

        餓了么的框架elementUI就是BEM的一種,或者你也可以研究網站company.yandex.ru/。

        3、SMACSS

        SMACSS(Scalable & Modular Architecture CSS ,即 CSS 的可擴展性和模塊化架構)。Jonathan Snook 于 2011 年提出,當時他在雅虎工作,為 Yahoo Mail 編寫 CSS。

        (1)規則

        1、Categorizing CSS Rules(CSS 分類規則)

        它將 CSS 分為5個不同的類別:

        Base 基本規范

        例如 CSS Reset 和 CSS Normalize。

        Layout 布局規范

        例如左右分欄、柵格系統。

        Module 模塊

        例如一個產品列表,一個導航條?芍赜。

        State 狀態規范

        例如選中狀態。

        Theme 樣式規范

        2、Naming Rules(命名規則)

        為類名添加前綴

        Base 不需要前綴。而且是用標簽而不是 class 和 ID。

        • l- 用作 Layout 的前綴:l-inline
        • m- 用作 Module 的前綴:m-callout。但也可以不用前綴。
        • is- 用作 State 的前綴:is-collapsed
        • Theme 一般會新建個 theme.css,用之前存在的類名。如果想用單獨的類名,可用 theme- 前綴。

        例子:

        <div class="l-box m-profile m-profile--is-pro-user">
          <img class="m-avatar m-profile__image" />
          <p class="m-profile__bio">...</p>
        </div>

        (2)實例

        在線 demo:https://codepen.io/savemuse/pen/gWVpvd

        4、 Atomic CSS

        Atomic CSS 也是雅虎提出的,可以從字面意思理解成原子 CSS。

        (1)示例

        <div className="P(10px) M(20%) Pos(f) Start(50%) Bgc(#fff)" />

        會有專門的 Atomic css 工具,幫助將上面 html 中的 class name 解析成正常的 css。(略)

        (2)利弊

        好處:將 CSS style 最小元件化,重用性最大化。

        壞處:這根本就是在寫 inline-style,只是我們用 class name 的方式來表示而已。

        (3)總結

        這種做法真的很激進。我暫時無法接受。

        三、總結

        拋開激進的Atomic,我對剩下的 OOCSS / BEM / SMACSS 有如下建議:

        他們各自的思想有互補也有沖突,在實際開發中可以有取舍的使用

        他們都可以結合 CSS 預處理器(如 less/sass )獲得更好的效率

        把上文分別介紹他們的好處列舉在一起對比匯總,發現他們解決的核心問題就是:模塊化
         

        以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

        相關文章

        • css模塊化方案

          這篇文章主要介紹了css模塊化方案,css的模塊化方案可能和js的一樣多,下面簡單介紹幾種主要的模塊方案,非常具有實用價值,需要的朋友可以參考下
          2019-01-09
        • CSS的樣式合并與模塊化提高代碼執行效率

          本文的核心觀點為CSS的合并與模塊化,似乎與前一篇文章“CSS樣式的再分離”有矛盾,其實不然,分離可以精簡CSS代碼,合并也可以精簡CSS代碼,一切都是權衡,本文的“合并”
          2013-01-11
        • Css 模塊化編碼技巧

          原生Js因jQuery的"write less,do more"變得極簡, Html因語義化編碼變得簡明, 那么, 有沒有一種方式讓Css也更加的高效精致呢? 當然有, 那便是模塊化編碼.
          2011-01-27
        • CSS 模塊化 實現方法

          最近被“模塊化”纏身,又是文章又是PPT的,被逼著想了很多相關的東西。整理下我這段時間對于“模塊化”的思考,大多都是我自己從事頁面重構這份工作
          2009-06-26
        • CSS模塊化思想的優勢

          網頁制作Webjx文章簡介:名字,你看名字多重要,我不太清楚。我寫書的話我的書被人改變名稱去誤導別人我是不喜歡的。這是我一直說的作為一個技術人員應當遵守的準則——互
          2009-04-02
        • CSS模塊化的理解

          網頁制作Webjx文章簡介:我沒有看過CSS模塊化的相關書籍,所以我下面說的不一定正確,但是在工作中,我會用我理解的模塊化方式提高工作效率,我理解的模塊化,主要分為兩類
          2009-04-02
        • css模塊化的思想讓后期維護變得簡單

          網頁制作Webjx文章簡介:這里著重講一下模塊化開發為后期維護帶來的好處! 首先,不管了不了解,鬼哥的這篇文章都可以看一下,從宜家的家具設計講模塊化ht
          2009-04-02
        • CSS 模塊化的理解

          在Twinsen Liang的博客上看到一篇名為語義化單單的限定在html么?的文章,文中主要是提及了CSS的命名規則,仔細閱讀后,我認為這個其實就是模塊化思想。(作者也提了這一點
          2009-02-04

        最新評論

        01彩票网app
      1. <sub id="xcyjv"></sub><nav id="xcyjv"><code id="xcyjv"><meter id="xcyjv"></meter></code></nav>
          <nav id="xcyjv"></nav>
        1. <form id="xcyjv"><th id="xcyjv"></th></form><nav id="xcyjv"><mark id="xcyjv"></mark></nav>
            石河子 | 琼中 | 长垣 | 禹州 | 山南 | 七台河 | 眉山 | 涿州 | 姜堰 | 乐平 | 顺德 | 鄂尔多斯 | 通辽 | 滁州 | 盘锦 | 锡林郭勒 | 张掖 | 忻州 | 库尔勒 | 定安 | 荆门 | 黔南 | 广汉 | 西藏拉萨 | 陵水 | 宁波 | 果洛 | 青海西宁 | 临猗 | 楚雄 | 宁德 | 咸阳 | 台山 | 渭南 | 洛阳 | 淄博 | 鸡西 | 开封 | 宜宾 | 烟台 | 沭阳 | 开封 | 洛阳 | 醴陵 | 新疆乌鲁木齐 | 黄石 | 攀枝花 | 遂宁 | 株洲 | 大连 | 赵县 | 阿里 | 海南 | 鞍山 | 溧阳 | 驻马店 | 绥化 | 唐山 | 泗阳 | 沧州 | 海拉尔 | 陕西西安 | 改则 | 河池 | 昭通 | 荆门 | 芜湖 | 临猗 | 白银 | 香港香港 | 六安 | 绥化 | 乐山 | 锡林郭勒 | 阿坝 | 天长 | 遂宁 | 靖江 | 马鞍山 | 馆陶 | 平顶山 | 诸暨 | 三门峡 | 长葛 | 河源 | 怀化 | 大连 | 丽水 | 昌都 | 恩施 | 绵阳 | 肇庆 | 塔城 | 醴陵 | 东方 | 十堰 | 包头 | 张北 | 通化 | 张掖 | 德宏 | 海拉尔 | 临海 | 吐鲁番 | 赵县 | 自贡 | 安庆 | 安岳 | 济源 | 周口 | 潍坊 | 蓬莱 | 玉溪 | 雄安新区 | 天长 | 山南 | 东方 | 安徽合肥 | 大兴安岭 | 洛阳 | 海西 | 石河子 | 大连 | 长治 | 恩施 | 包头 | 江西南昌 | 湖南长沙 | 公主岭 | 霍邱 | 深圳 | 湖北武汉 | 龙岩 | 伊犁 | 五家渠 | 聊城 | 丹东 | 屯昌 | 嘉善 | 抚顺 | 石狮 | 阿拉尔 | 汉中 | 湖州 | 鸡西 | 浙江杭州 | 株洲 | 临沧 | 仁寿 | 大丰 | 甘肃兰州 | 鹤岗 | 陵水 | 三沙 | 黔南 | 阜阳 | 偃师 | 湖北武汉 | 山西太原 | 崇左 | 保山 | 兴安盟 | 河北石家庄 | 海北 | 商洛 | 张北 | 基隆 | 绵阳 | 青州 | 雄安新区 | 兴安盟 | 兴安盟 | 辽源 | 双鸭山 | 塔城 | 任丘 | 宁国 | 绥化 | 鄢陵 | 扬中 | 桂林 | 酒泉 | 海安 | 厦门 | 齐齐哈尔 | 黔南 | 六盘水 | 海安 | 沭阳 | 景德镇 | 阿克苏 | 黑龙江哈尔滨 | 泰州 | 珠海 | 迁安市 | 海丰 | 孝感 | 苍南 | 辽宁沈阳 | 果洛 | 株洲 | 瑞安 | 姜堰 | 广元 | 凉山 | 宜宾 | 商洛 | 嘉峪关 | 防城港 | 马鞍山 | 孝感 | 莒县 | 汉中 | 荆州 | 临猗 | 镇江 | 克孜勒苏 | 承德 | 铜陵 | 遂宁 | 塔城 | 兴安盟 | 贵州贵阳 | 阳江 | 保定 | 平凉 | 泗洪 | 晋江 | 南京 | 雅安 | 南阳 | 丹东 | 迁安市 | 余姚 | 石嘴山 | 澳门澳门 | 沛县 | 景德镇 | 济南 | 济南 | 泰州 | 渭南 | 临海 | 海宁 | 塔城 | 吉林 | 德州 | 长葛 | 乌兰察布 | 郴州 | 菏泽 | 靖江 | 佛山 | 广安 | 潜江 | 昭通 | 琼海 | 云浮 | 如东 | 崇左 | 柳州 | 咸宁 | 临海 | 海东 | 绵阳 | 锦州 | 兴安盟 | 苍南 | 嘉善 | 锦州 | 章丘 | 吉林 | 咸阳 | 湘潭 | 韶关 | 呼伦贝尔 | 大庆 | 玉树 | 梅州 | 燕郊 | 启东 | 衡阳 | 松原 | 灌云 | 文昌 | 佳木斯 | 日照 | 正定 | 文山 | 酒泉 | 吉林 | 肥城 | 聊城 | 滁州 | 漳州 | 灵宝 | 湖北武汉 | 鹰潭 | 绵阳 | 大丰 | 许昌 | 邯郸 | 咸宁 | 香港香港 | 玉树 | 白银 | 株洲 | 天长 | 和县 | 灌南 | 诸城 | 邵阳 | 中卫 | 通化 | 亳州 | 临猗 | 许昌 | 吕梁 | 泰州 | 象山 | 石狮 | 怀化 | 九江 | 景德镇 | 五指山 | 通化 | 五家渠 | 福建福州 | 海南海口 | 许昌 | 玉溪 | 山西太原 | 海东 | 桂林 | 仙桃 | 张掖 | 鹰潭 | 山南 | 晋中 | 株洲 | 永新 | 山东青岛 | 姜堰 | 雅安 | 昆山 | 阿坝 | 日土 | 喀什 | 宜昌 | 巢湖 | 内蒙古呼和浩特 | 湘潭 | 仁怀 | 泰兴 | 孝感 | 惠州 | 汉川 | 洛阳 | 定西 | 齐齐哈尔 | 河源 | 定西 | 眉山 | 昌吉 | 大丰 | 安岳 | 博尔塔拉 | 广西南宁 | 果洛 | 涿州 | 泸州 | 德州 | 汉川 | 姜堰 | 高雄 | 包头 | 丽水 | 武威 | 怒江 | 汉川 | 镇江 | 龙岩 | 蓬莱 | 鸡西 | 高雄 | 仁怀 | 海门 | 芜湖 | 运城 | 迁安市 | 咸阳 | 陵水 | 台北 | 河北石家庄 | 武威 | 娄底 | 昌都 | 杞县 | 阿拉尔 | 临夏 | 甘孜 | 丹阳 | 娄底 | 慈溪 | 固原 | 芜湖 | 大丰 | 五家渠 | 库尔勒 | 浙江杭州 | 明港 | 汉川 | 湖南长沙 | 益阳 | 潍坊 | 辽阳 | 鹤壁 | 迪庆 | 泰兴 | 高密 | 阿里 | 灌云 | 赤峰 | 四川成都 | 仁寿 | 曲靖 | 松原 | 博尔塔拉 | 红河 | 广安 | 定州 | 延安 | 宁夏银川 | 莱芜 | 楚雄 | 随州 | 娄底 | 宜都 | 四川成都 | 芜湖 | 昌都 | 鹤壁 | 启东 | 福建福州 | 东莞 | 永新 | 保定 | 朝阳 | 吉林 | 顺德 | 乌兰察布 | 通辽 | 白沙 | 铁岭 | 南充 | 丽江 | 曲靖 | 邯郸 | 临猗 | 连云港 | 启东 | 衡水 | 海北 | 石狮 | 菏泽 | 涿州 | 辽阳 | 云浮 | 偃师 | 阜阳 | 高密 | 河北石家庄 | 中卫 | 保定 | 象山 | 诸暨 | 诸城 | 松原 | 中卫 | 台中 | 余姚 | 海南 | 广安 | 鄂州 | 温岭 | 库尔勒 | 山东青岛 | 烟台 | 神农架 | 雄安新区 | 东海 | 乌兰察布 | 渭南 | 明港 | 苍南 | 常州 | 库尔勒 | 台湾台湾 | 临海 | 诸城 | 阿克苏 | 章丘 | 三门峡 | 吉林长春 | 公主岭 | 燕郊 | 荆门 | 迪庆 | 阿勒泰 | 无锡 | 河池 | 海宁 | 平潭 | 兴化 | 莒县 | 平潭 | 保亭 | 阜阳 | 台北 | 景德镇 | 萍乡 | 新余 | 包头 | 台南 | 黑河 | 沧州 | 延安 | 德宏 | 桂林 | 上饶 | 丹东 | 四川成都 | 巴中 | 青海西宁 | 遂宁 | 东台 | 德宏 | 保定 | 山南 | 儋州 | 鄢陵 | 毕节 | 南平 | 新乡 | 乌兰察布 | 新泰 | 宁波 | 乳山 | 阳江 | 雄安新区 | 佛山 | 保定 | 驻马店 | 马鞍山 | 锡林郭勒 | 河池 | 湘西 | 莱州 | 朝阳 | 伊犁 | 咸阳 | 山南 | 平凉 | 灌云 | 潜江 | 丽江 | 许昌 | 东海 | 十堰 | 厦门 | 伊春 | 瑞安 | 铜陵 | 台湾台湾 | 威海 | 黔东南 | 抚州 | 海西 | 白沙 | 文昌 | 湖州 | 马鞍山 | 资阳 | 广饶 | 荣成 | 桐城 | 牡丹江 | 朔州 | 长垣 | 辽阳 | 天水 | 兴安盟 | 永州 | 临汾 | 吐鲁番 | 巢湖 | 赣州 | 盘锦 | 如东 | 榆林 | 燕郊 | 辽阳 | 云南昆明 | 芜湖 | 辽源 | 蓬莱 | 定州 | 海宁 | 咸宁 | 博尔塔拉 | 和田 | 信阳 | 鄂州 | 锡林郭勒 | 广西南宁 | 东台 | 郴州 | 毕节 | 汕头 | 乐山 | 瑞安 | 乌海 | 黄山 | 基隆 | 枣阳 | 武夷山 | 潜江 | 鄂尔多斯 | 鞍山 | 永新 | 克拉玛依 | 果洛 | 慈溪 | 汕尾 | 新疆乌鲁木齐 | 柳州 | 渭南 | 凉山 | 乐清 | 澳门澳门 | 遵义 | 永康 | 内蒙古呼和浩特 | 河北石家庄 | 吴忠 | 霍邱 | 延边 | 新疆乌鲁木齐 | 松原 | 广元 | 濮阳 | 昆山 | 四川成都 | 临海 | 滁州 | 鸡西 | 漯河 | 涿州 | 济南 | 黄山 | 吕梁 | 天门 | 文山 | 神农架 | 普洱 | 仁怀 | 廊坊 | 德阳 | 佳木斯 | 如皋 | 铁岭 | 那曲 | 公主岭 | 三河 | 喀什 | 余姚 | 如东 | 乌兰察布 | 濮阳 | 宁国 | 铜陵 | 连云港 | 临沧 | 新余 | 文昌 | 晋城 | 阜新 | 宜都 | 泸州 | 平顶山 | 东阳 | 阜阳 | 抚顺 | 文山 | 黑河 | 广元 | 随州 | 昆山 | 遂宁 | 黑河 | 如皋 | 仁寿 | 儋州 | 汉中 | 开封 | 澳门澳门 | 和县 | 灵宝 | 张掖 | 鄂州 | 仁怀 | 赣州 | 安康 | 基隆 | 丹阳 | 乳山 | 吉林长春 | 日土 | 漯河 | 海拉尔 | 广安 | 五指山 | 河北石家庄 | 运城 | 澄迈 | 西双版纳 | 赣州 | 宝鸡 | 铁岭 | 新沂 | 乳山 | 庆阳 | 滕州 | 海宁 | 廊坊 | 苍南 | 克拉玛依 | 如东 | 通化 | 白城 | 琼海 | 赤峰 | 六安 | 靖江 | 防城港 | 朔州 | 酒泉 | 三沙 | 吐鲁番 | 诸暨 | 白银 | 海安 | 台山 | 曲靖 | 梧州 | 保亭 | 铜陵 | 沛县 | 济源 | 漳州 | 沧州 | 资阳 | 达州 | 姜堰 | 大同 | 陇南 | 盘锦 | 潍坊 | 澳门澳门 | 锡林郭勒 | 沧州 | 顺德 | 益阳 | 沧州 | 东莞 | 基隆 | 吉林长春 | 抚顺 | 简阳 | 红河 | 大连 | 白沙 | 湖州 | 无锡 | 阿坝 | 扬州 | 肇庆 | 石嘴山 | 自贡 | 宜春 | 邳州 | 贵州贵阳 | 扬中 | 海北 | 宿州 | 益阳 | 娄底 | 邯郸 | 济南 | 汕头 | 儋州 | 黔南 | 五家渠 | 厦门 | 北海 | 招远 | 顺德 | 安岳 | 蓬莱 | 永新 | 新余 | 长葛 | 朝阳 | 常德 | 临夏 | 湛江 | 黔南 | 包头 | 潍坊 | 张掖 | 张北 | 漯河 | 乌兰察布 | 台中 | 桂林 | 鄂州 | 定安 | 荆门 | 荣成 | 衢州 | 丹东 | 大庆 | 天水 | 昭通 | 大同 | 新泰 | 日喀则 | 乌兰察布 | 遵义 | 遵义 | 杞县 | 海门 | 库尔勒 | 来宾 | 和田 | 博罗 | 阿克苏 | 吉林长春 | 鹰潭 | 黔东南 | 甘肃兰州 | 镇江 | 平潭 | 安顺 | 项城 | 福建福州 | 宝应县 | 曲靖 | 安阳 | 鹤壁 | 鄢陵 | 青海西宁 | 贺州 | 庆阳 | 醴陵 | 济源 | 灌南 | 泰安 | 忻州 | 梅州 | 克孜勒苏 | 梅州 | 曲靖 | 巴音郭楞 | 渭南 | 玉环 | 铜川 | 昆山 | 陇南 | 苍南 | 景德镇 | 龙岩 | 鄂州 | 甘南 | 辽阳 | 喀什 | 衢州 | 建湖 | 三沙 | 惠州 | 宜宾 | 迁安市 | 克孜勒苏 | 三明 | 迪庆 | 海西 | 海拉尔 | 湘西 | 山南 | 如东 | 四平 | 宝应县 | 天水 | 荆州 | 周口 | 七台河 | 公主岭 | 如皋 | 仁寿 | 莱州 | 伊犁 | 林芝 | 杞县 | 山南 | 铜陵 | 揭阳 | 曲靖 | 梧州 | 保山 | 燕郊 | 红河 | 扬州 | 临夏 | 秦皇岛 | 鹤岗 | 济源 | 德宏 | 黔东南 | 连云港 | 萍乡 | 迁安市 | 十堰 | 福建福州 | 曲靖 | 绥化 | 新泰 | 郴州 | 娄底 | 诸城 | 莱州 | 莒县 | 秦皇岛 | 宝鸡 | 东阳 | 湖北武汉 | 眉山 | 唐山 | 深圳 | 襄阳 | 湘潭 | 新乡 | 固原 | 阿拉尔 | 果洛 | 济宁 | 惠州 | 忻州 | 酒泉 | 那曲 | 枣阳 | 霍邱 | 青海西宁 | 石嘴山 | 毕节 | 启东 | 鄂尔多斯 | 江门 | 迁安市 | 抚州 | 阿拉尔 | 大连 | 青州 | 大连 | 荆州 | 五指山 | 防城港 | 肇庆 | 德宏 | 石嘴山 | 武威 | 屯昌 | 楚雄 | 海西 | 亳州 | 晋江 | 咸阳 | 辽宁沈阳 | 宁夏银川 | 龙口 | 蚌埠 | 长兴 | 龙口 | 白银 | 佳木斯 | 中卫 | 新泰 | 宁德 | 乌海 | 咸阳 | 沧州 | 邹城 | 迪庆 | 儋州 | 梅州 | 五家渠 | 汕头 | 淮安 | 固原 | 延边 | 南京 | 昌吉 | 咸宁 | 山南 | 大庆 | 雄安新区 | 齐齐哈尔 | 屯昌 | 乐平 | 惠州 | 西藏拉萨 | 吴忠 | 黑龙江哈尔滨 | 诸暨 | 巴中 | 洛阳 | 金坛 | 贺州 | 瑞安 | 阿克苏 | 黔南 | 吴忠 | 保山 | 赵县 | 贺州 | 灵宝 | 龙口 | 来宾 | 江苏苏州 | 眉山 | 济南 | 德州 | 湘西 | 迪庆 | 永新 | 邹平 | 潮州 | 保亭 | 天水 | 库尔勒 | 潍坊 | 白沙 | 四川成都 | 儋州 | 中卫 | 齐齐哈尔 | 黑龙江哈尔滨 | 珠海 | 肇庆 | 鞍山 | 滁州 | 青海西宁 | 濮阳 | 鞍山 | 珠海 | 黔南 | 苍南 | 单县 | 六安 | 鹤壁 | 莱芜 | 阿坝 | 庄河 | 宁波 | 沭阳 | 来宾 | 汉川 | 铜仁 | 东方 | 海门 | 安康 |