<!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>