Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

Save Automatically?

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

              
                <body>
  <div class="container">

<header>
  <h1 class="text-center">朱元璋</h1>
  <h3 class="text-center"><em>明朝开国皇帝</em></h3>
  <div class="photo">
    <img  src="http://imgtu.lishiquwen.com/20150709/1436430259346687.jpg">
  <p class="text-center photoDescription">朱元璋画像
  </p>
 </div>
</header>
<!--Top part-->
<div class="main">
  <h3>人物生平:</h3>
  <ul>
    <li><strong>1368 </strong>- 朱元璋在应天府即皇帝位,国号明,年号洪武,是为太祖高皇帝</li>
    <li><strong>1370</strong>- 朱元璋封九子、从孙为藩王。同年,定科举制度,仿宋朝经义,规定八股格式</li>
    <li><strong>1376</strong> 空印案起,逮捕官员数百人,大多处死</li>
    <li><strong>1379</strong>- 右丞相汪广洋以欺君之罪被贬海南,后遭追杀</li>
    <li> <strong>1380</strong>- 丞相胡惟庸以“谋反”罪被杀,前后死者三万余人</li>
    <li> <strong>1381</strong>- 登记全国户口,编制黄册</li>
    <li> <strong>1382</strong>- 置锦衣卫,掌侍卫缉拿刑狱之事,镇抚司划归锦衣卫管辖。朱元璋所办诏狱,常交镇抚司审讯,不由三法司。同年,置殿阁大学士,以备顾问</li>
    <li><strong>1385</strong>- 郭桓案发,牵连被杀者数万人</li>
    <li><strong>1387</strong>- 度量并登记全国田亩,编制鱼鳞图册</li>
    <li> <strong>1392</strong>- 皇太子朱标卒,朱元璋册立皇孙朱允炆为皇太孙</li>
    <li><strong>1393</strong>- 凉国公蓝玉因谋反罪被杀,株连死者一万五千余人</li>
    <li><strong>1397</strong> - 南北榜案发,开明朝科举取士分南北的先例</li>
    <li><strong>1398</strong> - 太祖死。皇太孙朱允炆即位,是为建文帝。建文帝重用齐泰、黄子澄,定议削藩。以谋反罪废周王为庶人</li>
    
    <blockquote><strong><q>太祖以聪明神武之资,抱济世安民之志,乘时应运,豪杰景从,戡乱摧强,十五载而成帝业。崛起布衣,奄奠海宇,西汉以后所未有也。惩元政废弛,治尚严峻。而能礼致耆儒,考礼定乐,昭揭经义,尊崇正学,加恩胜国,澄清吏治,修人纪,崇凤都,正后宫名义,内治肃清,禁宦竖不得干政,五府六部官职相维,置卫屯田,兵食俱足。武定祸乱,文致太平,太祖实身兼之。至于雅尚志节,听蔡子英北归。晚岁忧民益切,尝以一岁开支河暨塘堰数万以利农桑、备旱潦。用此子孙承业二百余年,士重名义,闾阎充实。至今苗裔蒙泽,尚如东楼、白马,世承先祀,有以哉。</q></strong>
      <footer class="attribute">史记.明史</footer></blockquote>

 <h3>更多内容请参见 <a href="https://zh.wikipedia.org/zh-hk/%E6%9C%B1%E5%85%83%E7%92%8B" title="朱元璋">维基百科</a></h3>
</div>
 <!--main part-->
<footer class="text-center">Written and coded by<a href=#> xajh</a>.
 </footer>
 </body>
              
            
!

CSS

              
                
.container{
  background-color:gold;
  font-size:62.5%;
  width:70%;
  margin:auto;
}
.photo{
margin-bottom:35px;
margin-left:auto;
margin-right:auto;
background-color:#FFF;

}
img{
  width:100%;max-width:100%;height:auto;display:block;
}
.photoDescription{
  padding-bottom:10px;
}
.main{
  margin-left:auto;
  margin-right:auto;
  width:auto;
  font-size:0.5em;
}
.photoDescription{
  margin-top:10px;
}
.topPhoto{
  margin-left:auto;
  margin-right:auto;
}
.attribute{
font-style:italic;
margin-top:20px;
}
blockquote{
  border-left: none;
  margin-left:-30px;
  font-size:1em;
}

              
            
!

JS

              
                
              
            
!
999px

Console