纯css 简单网页

<div id="wrapper">
 <header>
 
 <section>
 <h1>Web Design<h1>
 <h2>much efforts much prosperity!!
 </section>
 
 <nav>
 <ul>
 <li><a  href="#demo1">index</a>
 <ul>
 <li><a  href="#demo2">about me</a></li>
 <li><a  href="#demo3">news  all</a></li>
 <li><a  href="#demo2">about aaa</a></li>
 </ul>
 </li>
 <li><a  href="#demo2">about</a></li>
 <li><a  href="#demo3">news</a></li>
 <li><a  href="#demo3">newsdd</a></li>
 <li><a  href="#demo3">newsddd</a></li>
 </ul>
 </nav>
 
 <form>
 <label for="namedd">1</label><input  id="namedd" type="text" placeholder="search"/>
 </form>
 </header>
 
 <section id="feature">
 <article>
 <div class="inner">
 <h4>this  is  my web </h4>
 <h1>we are family</h1>
 <img  src="file:///C:/Documents%20and%20Settings/Administrator/%E6%A1%8C%E9%9D%A2/20.jpg" width="80px"alt="this  is  picture"/ >
 <p id="tt">雨后的空气是纯净的，清新的，看人老远就能分辨出模样来，心胸感到清了，说话人都感觉听的真了。
雨后，视野宽阔了，心感到轻松了许多，坐在那儿也能品味出一种清静感，思路能理出很多的感想，往日的喧嚣，在雨后，似乎都沉淀了，在雨后漫步也是难得的好机遇，如果是知音人更是有一番情趣。</br>
</br><p class="t">人生可以回味的东西太多了，如生活的几多坎坷，说不尽的曲曲折折，说不完的话，做不完的事，操不完的心，日出日作，日落日息，重复着每天的生活，或许灵活的头脑已僵化，或许生活的感受太多，已让自己麻木不仁，但你感受过雨后吗？</br>
</br><p class="kt">
雨后，对自己，对生命都是一种洗理，这时候你静下心来，看天，看山，看水，看遥远的小山村，一切都过去了，昨天还模糊的景色，今天去看一下，显得格外清晰了，昨天还烦躁的心情。
随着雨的洗涤，说不上来出现了一个好心情，昨天喝苦涩的酽茶，都感觉不到味道，今日你喝一杯清亮的白开水，感觉都有一种清香。说句心理话，人生不知道要经历过多少雨后，但谁都不为雨后而思考，当你发现雨后也是人生一个不可缺少的转折点时，你会发现雨前的心，雨中的心，雨后的心，都有不同的变化，看景色更是变化盛万千，你会品味出生活的感受，还有大自然的心灵影响。</p>
</span>
</p>
 </div>
 </article>

<aside> 
<form>
<fieldset>
<legend><span>Sign in  for code and news</span></legend>

<section>
<label for="namedd">email</label><input  id="namedd" type="text" placeholder="name"/>
</section>

<section>
<label for="named">password</label><input  id="named" type="text" placeholder="password"/>
<p class="error">wrong user or password!!</p>
</section>

<section>
<input type="submit"class="sub"value="Sign in "/><p><a href="#">Register Now!</a></p>
</section>

</fieldset>
</form>

<nav><h3>recent articles</h3>
<ul>
<li><a href="#">morehhhdadad&gt</a></li>
<li><a href="#">less&jjfalkfidsah</a></li>
<li><a href="#">copy@c</a></li>
</ul>
</nav>
</aside>
</section>


 <section id="book">
 <article class="left">
 <div class="inner">
 <h3>javascript design</h3>
 <img src="file:///C:/Documents%20and%20Settings/Administrator/%E6%A1%8C%E9%9D%A2/14.jpg" alt="web"/>
 <aside>
<ol>
<li>study </li>
<li>buy </li>
<li>read </li>
</ol> 
<aside/>
</div></article>

<article class="left">
 <div class="inner">
 <h3>javascript design</h3>
 <img src="file:///C:/Documents%20and%20Settings/Administrator/%E6%A1%8C%E9%9D%A2/13.jpg" alt="web"/>
 <aside>
<ol>
<li>study </li>
<li>buy </li>
<li>read </li>
</ol> 
<aside/>
</div></article>

<article class="right">
 <div class="inner">
 <h3>javascript design</h3>
 <img src="file:///C:/Documents%20and%20Settings/Administrator/%E6%A1%8C%E9%9D%A2/12.jpg" alt="web"/>
 <aside>
<ol>
<li>study </li>
<li>buy </li>
<li>read </li>
</ol> 
<aside/>
</div></article>

<article class="right">
 <div class="inner">
 <h3>javascript design</h3>
 <img src="file:///C:/Documents%20and%20Settings/Administrator/%E6%A1%8C%E9%9D%A2/11.jpg" alt="web"/>
 <aside>
<ol>
<li>study </li>
<li>buy </li>
<li>read </li>
</ol> 
<aside/>
</div></article>
 </section>
 <footer>
 <p>北方有佳人，绝世而独立。
一顾倾人城，再顾倾人国。
宁不知倾城与倾国？佳人难再得。</p>

 <nav><ul><li><a href="#">contact</a></li>
 <li><a href="#">privacy</a></li>
 </ul></nav>
 </footer> 
 <style>
*{margin:0;padding:0}
body{background:#efefef}
#wrapper{width:980px;margin:0 auto 20px}

header{
border:1px  solid red;
position:relative;height:70px;margin:10px 0;
border-radius:20px 0 20px  0;padding:1px;box-shadow:0 15px 8px -9px #555;
background:#fff;}

header section{position:absolute;top:0;left:0;width:300px;}
header h1{padding:9px 12px 0;font-size：2.2em;line-height:1;color:#4eb8ea;letter-spacing；-.025em}
header h2{color:#333;font-size:.9em;letter-spacing；-.025em}
 
 header form{position:absolute;right:20px;top:20px;width:150px;}
 header form input{transition:2s all;float：right;width:70px;border-radius:10px 0 10px 0;font-size:1em;outline:none
 color:#888;padding：0px 0 3px 0}
 header form input:focus{width:140px;}
 header form label{display:none}
 header form input{background:#fff}
 header form input::placeholder{background:#ccc}
 
 
header nav{margin:19px auto;padding:0;text-align:center;font-size:.8em;}
nav>ul{display:inline-block}
nav  li{float:left;list-style:none;position:relative}
nav  li a{display:block;padding:.25em .8em ;color:red;text-align:left;text-decoration:none;font-weight:600}
header nav li a:hover{color:#555;border:0;}
header  nav li:last-child a{border-bottom-right-radius:10px}
header  nav li:first-child a{border-top-left-radius:10px}
 
 header nav li  ul{opacity:0;visibility:hidden;position:absolute;width:10em;left:0;top:100%;
 transition:2s all;}
 header nav li:hover>ul{opacity:1;visibility:visible}
 header  nav li li {float:none;background:#eee}
 section#feature{margin:16px 0 0 ;padding:0 0 10px;overflow:hidden}
 section#feature>article{float:left;width:64%;}    
 section#feature >asdie{float:right;width:35%}
 section#feature img{float:left;padding:0 10px 10px 0}

 #feature .inner{padding:12px;background:#fff;border-radius:20px 0;box-shadow:0 12px 8px -9px #555}
 #feature article h4{font-size:1em;font-style:normal;color:#f58c21;letter-spacing:-.25em}
 #feature article h3{font-family:lato,sans-serif;color:#555;margin:0 0 12px 0;letter-spacing:-.05em;font-size:1.75em}
 #feature article p{font-size:0.9em;color:#616161;margin:0px;line-height:1.5em} 
 #feature article p#tt:first-letter{font-size:4.5em;float:left;margin:0.15em 0.02em 0.051em 0 ;line-height:0.6;text-shadow:5px 3px 5px #aaa;color:gray} 

#feature article p.t{text-indent:80px;float:none}
#feature article p.kt{text-indent:80px;float:none}
#feature aside form{width:19em;float:right;background:#fff;border-radius:10px 0 10px 0;box-shadow:0 12px 8px -9px #55}
#feature aside form  fieldset{border:0;margin:10px 14px}
#feature aside form  legend span{color:#4eb8ea;letter-spacing:-0.05em}
#feature aside form  section{overflow:hidden;padding:.25em 0}
#feature aside form  section label{float:left;width:5em;margin:.5em .3em 0 0;line-height:1.1;color:#555}
#feature aside form  section input{float:right;width:10.5em;padding:3px 10px 2px;color:#555;font-size:0.8em;
outline:none;border-radius:10px 0 10px 0}
#feature aside input.sub{float:right;width:auto;margin:0 2px 3px 0;padding:0px 8px 3px;
border:none;color:red;background:#d6e636;box-shadow:1px 1px 3px #888}
#feature aside form  section p.error{clear:both;display:none;color:#f00}
#feature aside nav{width:19em;float:right;margin:15px 0 0 ;padding:0.6em 0 0.75em;background:#fff;border-radius:10px 0 10px 0;box-shadow:0 12px 8px -9px #555}
#feature aside nav h3{padding:0 14px0;font-size:1.3em;color:#aaa;text-align:left}
#feature aside nav ul{margin:0 0 0 20px}
#feature aside nav li{padding:0.7em 0 0 2em;position:relative;lis-style:none;}
#feature aside nav li:before{content:"";position:absolute;height:10px;width:10px;left:12px;top:12px;
border-radius:5px  0 5px 0;background:#d6e636;box-shadow:1px 1px 2px #888}
#feature aside nav li  a:hover{color:#000}

section#book{clear:both;border-radius:20px 0;border:1px solid #f58c21;margin:8px 0 16px;overflow:hidden;}
#book article{float:left;width:25%;padding:11px 0;background:none}
#book .inner{position:relative;width:140px;margin:0 atuo}
#book .inner h3{position:absolute;width:160px;left:112%;bottom:5px;transform:rotate(-90deg);transform-origin:bottom left;color:red;font-size:1.1em;text-align:left}
#book article img{width:120px;height:120px;box-shadow:0 12px 8px -9px #555;}
#book article aside{display:none;position:absolute;z-index:2;width:200px;background:pink;font-size:.8em;line-height:1.5em;}
#book article aside li{list-style:none}
#book article:hover aside{display:block}
#book article aside li{padding:0.25em 0 0.75em 1em;line-height:1.2em;}
#book article.right aside{right:84%;top:14px}
#book article.left aside{left:84%;top:14px}
footer{padding"0.5em 0 0.35em 0;text-align:center;border-radius:10px 0 ;background:#ddd；box-shadow:0 12px 8px -9px #555;}
footer p{font-size:0.85em;color:#555;}
footer ul{display:inline-block;margin:4px 0 0 0 }
footer li{float:left;font-size:1em;padding:5px}
footer li+li{border-left:2px solid red}
 </style>

效果图：