自己写的页面2
2011-07-26 09:35 Rollen Holt 阅读(403) 评论(0) 编辑 收藏 举报先看看效果再说吧
css代码如下:
/** * Css文件 */ *{ padding: 0; margin: 0; } body{ background: #fff url(images/main_bg.jpg) no-repeat; font-size: 62.5%; font-family: Georgia, "Times New Roman", Times, serif; } #headerwrapper{ width: 505px; height: 180px; margin-top: 265px; margin-left: 120px; } #header_left{ width: 255px; float: left; } .heading_color{ color: #CCCC99; font-style: normal; } blockquote{ font-size: 1.6em; font-style: italic; color: #CCCC99; padding-top: 20px; padding-left: 5px; margin-top: 10px; } .quote_author{ color: #CCCC99; text-align: right; font-style: italic; font-size: 0.7em; font-weight: bold; margin: 0px; } #header_right{ float: right; width:185px; padding-top:20px; font-size: 1.2em; } #navlist{ border-bottom: 1px solid #CCCCCC; width: 175px; } #navlist li{ list-style: none; margin: 0; padding: 0.25em; border-top: 1px solid #CCCCCC; } #navlist li a{ color: #999900; text-decoration: none; } p{ color: #666666; margin: 20px; } h1{ font-size: 3em; color: #CCCCCC; font-style: italic; border-bottom: 1px dotted #CCC; padding-bottom: 8px; } h2{ margin-left: 20px; color: #444444; font-size: 1.2em; background: url(images/date.gif) no-repeat; padding-top: 1px; padding-left: 5px; height: 25px; } #main_content{ width: 580px; clear: both; margin-top: 75px; margin-left: 100px; font-size: 1.2em; } .date { font-size: .6em; color: #CCCCCC; } #footer{ font-size: 1.2em; width: 580px; margin-top: 10px; clear: both; margin-left: 100px; text-align: center; } a:link {color: #999900} /* unvisited link */ a:visited {color: #999900} /* visited link */ a:hover {color: #993300} /* mouse over link */ a:active {color: #999900} /* selected link */
html代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>The Leaf | By Dieter Schneider 2007 | www.csstemplateheaven.com</title> <link rel="stylesheet" type="text/css" title="The Leaf" media="screen" href="style.css" /> </head> <body> <div id="headerwrapper"> <div id="header_left"> <h1>The <span class="heading_color">BIG</span> Leaf</h1> <blockquote> <p> Dreams are renewable. No matter what our age or condition, there are still untapped possibilities within us and new beauty waiting to be born. </p> <p class="quote_author"> -Dale Turner- </p> </blockquote> </div> <div id="header_right"> <ul id="navlist"> <li id="active"> <a href="#" id="current">Home</a> </li> <li> <a href="#">About</a> </li> <li> <a href="#">Blog</a> </li> <li> <a href="#">Forum</a> </li> <li> <a href="#">Contact</a> </li> </ul> </div> </div> <div id="main_content"> <h2>About the template <br /> <span class="date">2007.04.25</span></h2> <p> Duis suscipit, tellus et sollicitudin pharetra, neque mauris placerat nibh, ultrices porta felis quam sit amet tortor. Nulla eget ipsum ac odio tincidunt volutpat. In iaculis condimentum magna. Sed molestie. Sed libero justo, bibendum ac, sagittis et, imperdiet quis, ante. Vivamus et risus. Etiam a dolor vehicula libero eleifend aliquet. Integer eget ligula quis dui luctus porta. Aliquam nonummy. In hac habitasse platea dictumst. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse rhoncus molestie nulla. Nullam consectetuer lectus quis pede. Proin viverra pharetra risus. Nam ut nulla non nisl tincidunt venenatis. Suspendisse potenti. </p> <h2>Integer eget <br /> <span class="date">2007.04.25</span></h2> <p> Duis suscipit, tellus et sollicitudin pharetra, neque mauris placerat nibh, ultrices porta felis quam sit amet tortor. Nulla eget ipsum ac odio tincidunt volutpat. In iaculis condimentum magna. Sed molestie. Sed libero justo, bibendum ac, sagittis et, imperdiet quis, ante. Vivamus et risus. Etiam a dolor vehicula libero eleifend aliquet. Integer eget ligula quis dui luctus porta. Aliquam nonummy. In hac habitasse platea dictumst. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse rhoncus molestie nulla. Nullam consectetuer lectus quis pede. Proin viverra pharetra risus. Nam ut nulla non nisl tincidunt venenatis. Suspendisse potenti. </p> <h2>Maecenas erat <br /> <span class="date">2007.04.25</span></h2> <p> Mauris in velit quis nisl molestie dictum. Ut ac lacus. Nullam sed orci cursus leo luctus euismod. In mauris eros, ultrices in, auctor nec, porttitor eu, orci. Fusce at quam. Sed ornare posuere lorem. Aliquam erat volutpat. Pellentesque nulla est, auctor eu, molestie vitae, ultrices id, neque. Duis adipiscing sagittis arcu. Maecenas erat diam, volutpat ac, condimentum nec, dictum id, libero. Duis sed lorem eget justo posuere iaculis. Quisque sodales aliquam diam. </p> </div> <div id="footer"> <p> Created by <a href="http://www.dieter.no">Dieter Schneider</a> 2007 | <a href="http://www.csstemplateheaven.com"> www.csstemplateheaven.com</a> </p> </div> </body> </html>
==============================================================================
本博客已经废弃,不在维护。新博客地址:http://wenchao.ren
我喜欢程序员,他们单纯、固执、容易体会到成就感;面对压力,能够挑灯夜战不眠不休;面对困难,能够迎难而上挑战自我。他
们也会感到困惑与傍徨,但每个程序员的心中都有一个比尔盖茨或是乔布斯的梦想“用智慧开创属于自己的事业”。我想说的是,其
实我是一个程序员
==============================================================================
![](http://service.t.sina.com.cn/widget/qmd/1882500857/8c17d4b5/1.png)