<!DOCTYPE html>
<!--[if IE]> 
<meta http-equiv="X-UA-Compatible" content="IE=8" /> 
<![endif]-->
<!--[if IE 7]> 
<meta http-equiv="X-UA-Compatible" content="IE=7" /> 
<![endif]-->
<!--[if IE 6]> 
<meta http-equiv="X-UA-Compatible" content="IE=6" /> 
<![endif]-->
<html  lang="zh-Ch">
<head>
<meta charset="utf-8"/>
<title>html5</title>
<script mce_src="html://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://html5media.googlecode.com/svn/trunk/src/html5media.min.js"></script>
<style>
body {
    margin:0px;
    padding:0px;
    font-size:63%;
    text-align:center;
}
/*ie中將header,footer,article等內聯元素->塊元素*/
header, footer, article, section, nav, menu, hgroup {
    display:block;
}
header {
    background-color:#FF9900;
    /*漸變*/
    background:-webkit-gradient(linear, left top, left bottom, from(#e90), to(#FFE0C1));
    background:-moz-linear-gradient(top, #e90, #FFE0C1);
    background:-0-linear-gradient(top, #e90, #FFE0C1);
    background:linear-gradient(top, #e90, #FFE0C1);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF8000', endColorstr='#FFE0C1'); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF8000', endColorstr='#FFE0C1')"; /* IE8 */
}
nav {
    width:960px;
    margin:0 auto;
    border:1px solid #FC3;
    height:25px;
}
nav > * {
    list-style-type:none;
}
nav ul {
    margin:0px;
    padding:0px;
    text-align:center;
    display:block;
}
nav ul li {
    padding:0px 1em;
    /*ul li 中的內容水平居中*/
    overflow:hidden;
    display:inline-block;
 *display:inline;
 *zoom:1;
    /*垂直居中*/
    height:25px;
    line-height:25px;
}
article {
    clear:both;
    border:1px solid #FC3;
    float:left;
    width:645px;
}
aside {
    float:right;
    border:1px solid #FC3;
    width:300px;
}
footer {
    clear:both;
    background-color:#FF9933;
}
.content {
    width:960px;
    margin:0 auto;
}
dl>* {
    padding:2px 5px;
    float:left;
    border:1px solid #3366FF;
    margin:2px;
    text-align:left;
}
dt {
    width:200px;
    overflow:hidden;
    text-overflow:ellipsis; /*超出指定寬度顯示.*/
    white-space:nowrap;/*不換行顯示*/
}
h1 {
    clear:both;
    font-size:14px;
}
.con {
    width:500px;
}
/*垂直居中*/
.middle-demo-4 {
    height: 300px;
    position: relative;
}
.middle-demo-4 div {
    position: absolute;
    top: 50%;
    left: 0;
}
.middle-demo-4 div div {
    position: relative;
    top: -50%;
    left: 0;
}
.pic {
    clear:both;
}
ul li {
    list-style-type:none;
}
.pic li {
    float:left;
    margin-right:5px;
}
.pic li div {
    display:table-cell;
    width:1em;
    height:1em;
    border:1px solid #beceeb;
    font-size:144px;
    text-align:center;
    vertical-align:middle;
}
.pic li div img {
    vertical-align:middle;
}
</style>
</head>
<body>
<header>頭 </header>
<nav>
  <ul>
    <li><a href="/">首頁</a></li>
    <li><a href="/products">產品</a></li>
    <li><a href="/services">服務</a></li>
    <li><a href="/about">關于</a></li>
    <li><a href="/about">關于</a></li>
  </ul>
</nav>
<!--article  log、雜志、文章匯編等中的一篇文章, -->
<div class="content">
  <article>
    <h1>標題</h1>
    <div class="con">
      <dl>
        <dt ><a href="#" title="博客里的文章是我自博客里的文章是我自博客里的文章是我自博客里的文章是我自sss己寫的">·博客里的文章是我自博客里的文章是我自博客里的文章是我自博客里的文章是我自sss己寫的！</a></dt>
        <dd>作者：張三</dd>
      </dl>
      <dl>
        <dt><a href="#" title="博客里的文章是我自己寫的">·博客里的文章是我自己寫的！</a></dt>
        <dd>作者：張三</dd>
      </dl>
      <dl>
        <dt><a href="#" title="博客里的文章是我自己寫的">·博客里的文章是我自己寫的！</a></dt>
        <dd>作者：張三</dd>
      </dl>
    </div>
    <ul class="pic">
      <li>
        <div><img src="img/c1.jpg" /></div>
      </li>
      <li>
        <div><img src="img/c1.jpg" /></div>
      </li>
      <li>
        <div><img src="img/c1.jpg" /></div>
      </li>
      <li>
        <div><img src="img/c2.png" /></div>
      </li>
    </ul>
    <div class="tablesty">
      <div class="tabletr">
        <div class="tabletd"></div>
      </div>
    </div>
  </article>
  <aside>
    <div class="middle-demo-4">
      <div>
        <div>居中</div>
      </div>
    </div>
  </aside>
</div>
<footer>尾</footer>
</body>
</html>