Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- 引入字型 -->
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+TC:300,500,700&display=swap&subset=chinese-traditional" rel="stylesheet">
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-12">
      <h1>H1文章主標題</h1>
      <b>用p示範</b><br/>
      <p>監督有利於業務語音父親,可以說站點除了百萬改變看不到訪,能否狀態各國父母調整時間二十方式進一步衛,對手房屋快樂奇怪低價可能騎士原,發現影響參加家庭軍隊三個普遍鬱悶,附近講話很多英雄深刻不在,註明放心緩緩國內項目雙方興奮她說我市擔心,市場平衡資料建材基本上一路細胞來說法院的錢用戶她是品質不到孩。
      </p>
      <p>保險少年下載地址他就覺得集團素質歷史引進和,居民高效水平<b>不承擔恐怖武漢</b>請,正式發佈高效也是生活改革二人淡淡一陣反覆私服最為盯着絶不補,出現展示更是臉色相關內容任務日子最快,股市上傳成就隨時實行詳細內容,浙江微笑所以一直完了模樣本報到來奇蹟回去性感焦點達到將其,諮詢給我們任何人演唱會情形其他望着天空技能交,回到停止競爭你知道空中瀏覽器武漢內,說完顯卡廣東車輛連結華人天津擴大同志依據號。
      </p>
      <p style="line-height: 1.4;">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id perspiciatis voluptas dolore obcaecati at impedit magnam accusamus culpa illo veniam officia, sed qui cupiditate aliquam repellendus maxime ad necessitatibus tempora.</p>
      <h2>H2文章段落副標題 第一個</h2>
      <h3>H3段落小標題</h3>
      <p>金融一點創造戰鬥當然人民尚未國內答應鮮花不代表就算繼續調整,航空影響穿著無比聲音意識北京很多人作戰,講話支撐後來主義還會商城娛樂播放得到醫生評估要是英語放棄語音,一流感受飲食第一章努力最好,那時留言能否值得我想山西軍隊早就質量特殊昨,原創南方範圍覺得修改保密走進規範有,職位後果優惠一臉音樂網轉變典型適應商品出處網遊才會。</p>
    <h3>H3段落小標題</h3>
    <p>金融一點創造戰鬥當然人民尚未國內答應鮮花不代表就算繼續調整,航空影響穿著無比聲音意識北京很多人作戰,講話支撐後來主義還會商城娛樂播放得到醫生評估要是英語放棄語音,一流感受飲食第一章努力最好,那時留言能否值得我想山西軍隊早就質量特殊昨,原創南方範圍覺得修改保密走進規範有,職位後果優惠一臉音樂網轉變典型適應商品出處網遊才會。</p>
    <h4>H4解釋段落小標題</h4>
    <b>細節項目</b><br/>
    <ol>
      <li>第一項目<br>
        室內說過論壇長時間哥哥圖形都要招聘製作創建和你人民幣電,職業達到介紹上海是這樣做出,我愛帳號調節她說成長年輕還要完善完整默認日常發佈主體的確,所說關鍵感動商機報價應用沒人性質國際遺憾創。
      </li>
      <li>第二項目<br>
        室內說過論壇長時間哥哥圖形都要招聘製作創建和你人民幣電,職業達到介紹上海是這樣做出,我愛帳號調節她說成長年輕還要完善完整默認日常發佈主體的確,所說關鍵感動商機報價應用沒人性質國際遺憾創。
      </li>
      <li>第三項目<br>
        室內說過論壇長時間哥哥圖形都要招聘製作創建和你人民幣電,職業達到介紹上海是這樣做出,我愛帳號調節她說成長年輕還要完善完整默認日常發佈主體的確,所說關鍵感動商機報價應用沒人性質國際遺憾創。
      </li>
    </ol>
    <h5>H5小標題</h5>
    <h6>H6小標題</h6>
    <br/>
    <h2>H2文章段落副標題 第二個</h2>
    <b>用br換行示範</b><br/>
    幾乎靈活準備身上標誌一步教師各國最多信用吸收而在外資有很,種種回覆身材多個畢業生配合翻譯未來增加當地監督競爭力檢索容,普通完成西部臉色尋求實踐古代只見前進人民幣工,涉及版權所有走進正文現代化是否年齡航空臨時,研發委員會面臨唯一卻是新增千萬治療帶來收購歷史美麗在他下載,事實委員會難道旁邊博士列表。<br/>
    <br/>
    <h3>H3段落小標題</h3>
    情緒方面發展風景數碼相機技巧不願,我只辦法輕易試驗形勢團結星座鬱悶通知下列必然著名實際,走了人才資訊承諾和諧這場發達走出總經理近年來顯示事業轎,還有斑竹體內公主還能持,預防心靈考察攻擊重點新疆其它球,女人飛機資本硬件費用威脅醫藥見面角色提出。<br/>
    <br/>
    情緒方面發展風景數碼相機技巧不願,我只辦法輕易試驗形勢團結星座鬱悶通知下列必然著名實際,走了人才資訊承諾和諧這場發達走出總經理近年來顯示事業轎,還有斑竹體內公主還能持,預防心靈考察攻擊重點新疆其它球,女人飛機資本硬件費用威脅醫藥見面角色提出。<br/>
    </div>
  </div>
</div>
              
            
!

CSS

              
                html {
  font-size: 62.5%;
}
body {
  font-family: 'Noto Sans TC', sans-serif, Arial, Microsoft JhengHei !important;
  font-size: 1.7rem;
  line-height: 1.75;
  color: #1a1a1a;
  font-weight: 300;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
  margin-bottom: 0.5rem;
}
h1 {
  font-size: 3.2rem;
}
h2 {
  font-size: 2.8rem;
}
h3 {
  font-size: 2.4rem;
}
h4 {
  font-size: 2.2rem;
}
h5 {
  font-size: 2.0rem;
}
h6 {
  font-size: 1.8rem;
}
b {
  font-weight: 500;
}
p{
  margin-bottom: 2.5rem;
}
ol,
ul {
  padding-left: 1.7rem;
}
              
            
!

JS

              
                
              
            
!
999px

Console