今天用Div+Css写了一个页面模板，效果还蛮简洁的。本来是为部门的“青年文明号”网页而设计，后来越看越喜欢，索性将之改成了Z-Blog的主题。接着是反复的测试，几回过后，感觉都还过得去。也许是因为我向来比较喜欢这类简单的风格吧。呵呵，敝帚自珍。这里与大家分享此模板，有需要的小盆友欢迎下载。

先看模板截图：

OK，我要 下载 此模板！

原始模板演示（点击“运行代码”按钮查看）：

<meta content="text/html; charset=windows-1252" http-equiv="Content-Type" /><meta content="" name="description" /><meta content="HTML-Kit" name="generator" /><style type="text/css"><!--body {font-family: sans-serif;}table {width: 100%; border: solid 0px #111111; font-size: 80%;}td {vertical-align: top;}a {color: #0000ff;}h1 {margin-top: 0; border-bottom: solid 4px #3366cc; color: #3366cc;}h3 {color: #3366cc;}h6 {color: #3366cc; text-align: center;}div#menu {margin: 0; padding: 0; border: solid 1px #cccccc; background-color: #f9f9f9;}div#menu ul {margin: 0; margin-left: 3px; padding: 5px;}div#menu li {list-style: none; border: solid 2px #f9f9f9;}div#menu a { padding: 3px; display: block; color: #0000cc; border: solid 2px #cccccc; text-decoration: none; font-weight: bold;}div#menu a:hover {color: #0000ff; background-color: #ffffff; border: outset 2px #3366cc;}#content {margin-left: 2%; border: solid 0px #666666; background-color: #ffffff;}#content h2 {margin: 0; margin-bottom: 2%;}#content p {text-align: justify; margin: 5px;}#layout {width: 775px; padding-left: 8px; padding-bottom: 8px; border: solid 1px #cccccc;}#layout h2 {color: #3366cc; border-bottom: solid 2px #3366cc;}#left {background-color: #ffffff;}#right {float: right; width: 200px; border: solid 0px #cccccc; background-color: #ffffff; margin-left: 10px;}.module {border: solid 1px #dddddd; padding: 0; margin-bottom: 3%; margin-right: 5px;}.module h3 {background-color: #3366cc; color: #ffffff; margin: 0; padding: 1px; padding-left: 4px;}.module h5 {background-color: #eeeeee; color: #3366cc; margin: 0; margin-bottom: 10px; padding-left: 3px;}.module ul {margin: 0; padding: 7px;}.module li {list-style: none;}.node {width: 550px; border: solid 1px #dddddd; padding: 0; margin-bottom: 2%;}.node h3 {background-color: #3366cc; color: #ffffff; margin: 0; padding: 1px; padding-left: 4px;}.node h5 {background-color: #eeeeee; color: #3366cc; margin: 0; margin-bottom: 10px; padding-left: 3px;}--></style></p><h1>Diyidu</h1><table summary=""> <tbody> <tr> <td width="20%"> <div id="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Design</a></li> <li><a href="#">Computer</a></li> <li><a href="#">Free</a></li> <li><a href="#">Blog_tips</a></li> <li><a href="#">Health</a></li> <li><a href="#">Movie_mp3</a></li> <li><a href="#">Diction</a></li> <li><a href="#">Other</a></li> </ul> </div> </td> <td width="80%"> <div id="content"> <div id="layout"> <h2>BlogSubTitle</h2> <div id="right"> <div class="module"> <h3>DivSidebar1</h3> <form method="get" action="#" name="DaForm"> <p><input size="13" value="Type Here" type="text" /> <select size="1" name="TypeSearch"> <option selected="selected">Select</option> <option value="FirstName">First Name</option> <option value="LastName">Last Name</option> <option value="Title">Title</option> <option value="Division">Deptartment</option> <option value="Phone">Phone</option> <option value="Email">E-Mail</option> </select> <input type="submit" name="B1" value="Search " /></p> </form> </div> <div class="module"> <h3>Quick Links</h3> <ul> <li><a href="http://www.diyidu.cn">Diyidu.cn</a></li> <li><a href="#">Another site</a></li> <li><a href="#">Another quick links</a></li> <li><a href="#">Another site</a></li> <li><a href="#">Another quick links</a></li> </ul> </div> </div> <div id="left"> <div class="node"> <h3>Text Heading</h3> <h5>Other Info</h5> <p>Now is the time for all <a title="A HyperLink to a HTML page" href="#">good men</a> to come to the aid of their fellow man. Now is the time for all good men to come to the aid of their fellow man. Now is the time for all good men to come to the aid of their fellow man. Now is the time for all good men to come to the aid of their fellow man. Now is the time for all good men to come to the aid of their fellow man. Now is the time for all good men to come to the aid of their fellow man.</p> </div> <div class="node"> <h3>Text Heading</h3> <h5>Other Info</h5> <p>Now is the time for all good men to come to the aid of their fellow man. Now is the time for all good men to come to the aid of their fellow man. Now is the time for all good men to come to the aid of their fellow man. Now is the time for <a title="A Hyperlink" href="#">all good men to come to</a> the aid of their fellow man. Now is the time for all good men to come to the aid of their fellow man. Now is the time for all good men to come to the aid of their fellow man. Now is the time for all good men to come to the aid of their fellow man.</p> </div> </div> </div> </div> </td> </tr> </tbody></table><h6>Copyright Today's Date Free for everyone to use, diyidu.cn</h6><p>
提示：您可以先修改部分代码再运行