css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <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>
            
          
!
            
              
.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;
}

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console