自己写的页面3
2011-07-26 10:46 Rollen Holt 阅读(532) 评论(1) 编辑 收藏 举报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=UTF-8" /> <meta name="description" content="Happy template" /> <meta name="keywords" content="happy, template" /> <meta name="author" content="Luka Cvrk (www.solucija.com)" /> <link rel="stylesheet" href="style.css" type="text/css" /> <title>Happy Template - Free Template by Solucija.com</title> </head> <body> <div class="wrap"> <h1 id="logo"><a href="#">happy <br /> template</a></h1> <ul id="menu"> <li> <a href="#">Home</a> </li> <li> <a href="#">Photography</a> </li> <li> <a href="#">Video</a> </li> <li> <a href="#">Locations</a> </li> <li> <a href="#">Contact</a> </li> </ul> <div id="text"> <h2>Nam tortor libero dictum porta</h2> <p> Maecenas erat. Suspendisse odio orci, <a href="#">convallis ac, volutpat non, volutpat et, lectus</a>. In cursus rhoncus ante. Quisque nibh lacus, pellentesque sed, porttitor a, luctus blandit, mi. Nam tortor libero, dictum porta, vulputate nec, imperdiet sed, mauris. Maecenas libero neque, volutpat sit amet, varius et, pretium quis, purus. Nulla ut magna. Nunc nec dui eget erat vulputate sagittis. <a href="#">Suspendisse fermentum</a> odio. Mauris magna sem, pellentesque sit amet, nonummy vel, nonummy id, velit. Mauris facilisis, quam ut semper adipiscing, magna diam laoreet ante, ac varius massa dolor sit amet augue. Vivamus purus. Integer consequat. Nunc et nunc. Phasellus augue diam, vestibulum non, iaculis eget, tristique sed, lectus. Sed pede. Nullam egestas ante a mauris. Aliquam metus turpis, luctus ac, sagittis eget, <a href="#">elementum tincidunt</a>, massa. Aenean justo nisl, luctus sit amet, malesuada ac, dignissim ac, eros. </p> </div> <div id="green_bubble"> <p> <a href="http://www.declips.com" title="serving your daily dose of interesting and relevant videos from all major video sites">Latest Project</a><a href="http://www.solucija.com/commercial-templates" title="Professional CSS Templates">Showcase</a><a href="#">Philosophy</a><a href="#">Vision</a> </p> </div> </div> <div id="footer"> <div class="wrap"> <div id="bubble"> <p> Suspendisse egestas fringilla odio. Donec lacinia tristique ante. Cum sociis. </p> </div> <div id="copyright"> <p> Sponsored by <a href="http://webpoint.wordpress.com/">B4Contact</a> · Released under a <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/">Creative Commons Licence</a> </p> <p> Copyright © 2008 − Happy Template − Design: Luka Cvrk − <a href="http://www.solucija.com/" title="Information Architecture and Web Design">Solucija</a> </p> </div> <div class="clear"></div> </div> </div> </body> </html>
css代码如下:
/* project: happy template author: luka cvrk (www.solucija.com) */ * { margin: 0; padding: 0; } :focus, :active { outline: 0 } ul, ol { list-style: none } h1, h2, h3, h4, h5, h6, pre, code { font-size: 1em; } a img { border: 0 } body { font: .9em Georgia, "Times New Roman", Arial, Sans-Serif; background: #E8F7FC url(images/bg.jpg) repeat-x; color: #306172; } a { color: #3A65A8; text-decoration: none; } h1 { font-size: 2.9em; font-weight: normal; } h2 { float: left; text-transform: lowercase; clear: both; font-size: 2.4em; margin: 0 0 20px; font-weight: normal; color: #CB6F9C; background: url(images/h2bg.jpg) repeat-x bottom; } p { clear: both; margin: 5px 0 15px; line-height: 1.7em; } .clear { clear: both; } .wrap { margin: 0 auto; width: 900px; } #logo { float: left; margin: 40px 0 0; } #menu { text-transform: lowercase; float: right; height: 120px; padding: 73px 0 0 98px; width: 475px; background: url(images/white_bubbles.jpg) no-repeat top right; } #menu li { display: inline; } #menu li a { float: left; padding: 3px 6px; margin: 0 20px 0 0; font-weight: bold; color: #B25281; } #menu li a:hover, #menu li a.current { background: #EDD3E0; } #text { clear: both; margin: 0 0 40px; } #green_bubble { padding: 30px 0 68px 280px; height: 30px; background: url(images/green_bubbles.jpg) no-repeat center left; } #green_bubble a { color: #34AE61; font-weight: bold; margin: 0 30px 0 0; } #footer { padding: 85px 0 5px 0; background: #FF99CB url(images/bottom.jpg) repeat-x; } #copyright { float: left; margin: 80px 0 0; color: #9D436F; font-size: .8em; } #copyright p { margin: 0 0 5px; } #copyright a { color: #60183B; } #bubble { float: right; font-size: .9em; font-weight: bold; color: #D46FA0; background: url(images/pink_bubbles.jpg) no-repeat; width: 220px; height: 145px; padding: 52px 30px 0 150px; text-align: right; }
==============================================================================
本博客已经废弃,不在维护。新博客地址:http://wenchao.ren
我喜欢程序员,他们单纯、固执、容易体会到成就感;面对压力,能够挑灯夜战不眠不休;面对困难,能够迎难而上挑战自我。他
们也会感到困惑与傍徨,但每个程序员的心中都有一个比尔盖茨或是乔布斯的梦想“用智慧开创属于自己的事业”。我想说的是,其
实我是一个程序员
==============================================================================
![](http://service.t.sina.com.cn/widget/qmd/1882500857/8c17d4b5/1.png)