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