最近评论
正在载入评论列表...
以下Html代码是本书第九章的范例代码，点击此链接查看演示效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Bulletproof Pretzel Company</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: Verdana, sans-serif;
font-size: small;
background: #fff;
}
a:link {
color: #39c;
}
a:visited {
color: #369;
}
/* layout */
#wrap {
min-width: 500px;
max-width: 1400px;
background: url(img/wrap-bg.gif) repeat-y 70% 0;
}
#content {
float: left;
width: 70%;
font-size: 95%;
color: #333;
line-height: 1.5em;
}
#sidebar {
float: right;
width: 30%;
}
#footer {
clear: both;
background: #828377 url(img/footer-bg.gif) repeat-x top left;
}
/* gutters */
#content .gutter {
padding: 25px;
background: url(img/content-bg.gif) repeat-x top left;
}
#sidebar .gutter, #sidebar-2 .gutter {
padding: 15px;
}
/* header */
#header {
border-bottom: 3px solid #87B825;
background: #B4E637 url(img/header-bg.gif) repeat-x top left;
}
#header h1 {
margin: 0;
padding: 25px;
font-family: Georgia, serif;
font-size: 150%;
color: #374C0E;
background: url(img/bulls-eye.gif) no-repeat top left;
}
/* message row */
#message {
margin: 0;
padding: 10px;
font-size: 90%;
color: #cc9;
text-align: center;
background: #404530 url(img/message-bg.gif) repeat-x top left;
}
#message strong {
padding: 0 0 0 28px;
background: url(img/pretzel.gif) no-repeat 0 50%;
}
/* content */
#content h2 {
margin: 0 0 1em 0;
padding: 0;
font-family: Georgia, serif;
font-size: 150%;
color: #663;
font-weight: normal;
}
dl.feature {
margin: 15px 0;
padding: 15px;
border-top: 1px dotted #ccc;
border-bottom: 1px dotted #ccc;
}
dl.feature:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
dl.feature dt {
margin: 0 0 .5em 0;
font-family: Georgia, serif;
font-size: 140%;
color: #693;
}
dl.feature dt img {
float: left;
margin: 0 15px 0 0;
padding: 0 4px 4px 0;
background: url(img/photo-frame.gif) no-repeat bottom right;
}
dl.feature dd {
margin-left: 169px;
font-size: 90%;
line-height: 1.5em;
color: #666;
}
/* sidebars */
.box {
margin: 0 0 20px 0;
padding: 0 0 12px 0;
font-size: 85%;
line-height: 1.5em;
color: #666;
background: #fff url(img/box-b.gif) no-repeat bottom right;
}
.box h3 {
margin: 0;
padding: 12px;
font-family: Georgia, serif;
font-size: 140%;
font-weight: normal;
color: #693;
background: url(img/box-t.gif) no-repeat top left;
}
.box p, .box ul {
margin: 0;
padding: 0 12px;
}
.box ul li {
margin: 0 0 0 12px;
padding: 0 0 0 18px;
list-style: none;
background: url(img/li-bullet.gif) no-repeat 0 3px;
}
/* footer */
#footer p {
margin: 0;
padding: 15px;
font-size: 85%;
color: #333;
}
/* IE fixes */
#content, #sidebar {
height: 1%;
}
.feature {
display: inline-table;
}
/* Hides from IE/Mac \*/
* html .feature {
height: 1%;
}
.feature {
display: block;
}
#footer {
height: 1%;
}
/* End hide from IE/Mac */
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<h1>Bulletproof Pretzel Company</h1>
</div>
<p id="message">
<strong>Special:</strong> 30% off all week-old pretzels! Get 'em while they're... hot?.
</p>
<div id="content">
<div class="gutter">
<h2>Our Company History</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce libero neque, feugiat non, molestie ut, aliquet ut, leo. Phasellus bibendum aliquam velit. Pellentesque wisi justo, posuere nec, cursus id, facilisis ac, odio. Morbi consectetuer pede ultrices erat egestas bibendum. Duis hendrerit. Nunc id dolor. Duis euismod purus ut mauris. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi odio. Morbi odio. Praesent leo mauris, rutrum nec, mollis ut, scelerisque sit amet, tortor. Sed suscipit ligula et pede. Morbi rutrum mollis lacus. Duis quis eros. Fusce commodo tortor ut ante. Nunc mollis pede nec tellus. Praesent in nulla. Nullam malesuada adipiscing orci. Praesent in felis eu erat sagittis tincidunt. Nulla vel massa vitae risus placerat rutrum.</p>
<dl class="feature">
<dt><img src="img/bldg.jpg" width="150" height="113" alt="building" />Where it all began</dt>
<dd>Vestibulum risus. Nullam adipiscing. Etiam fringilla neque id erat. Sed varius ipsum vitae sem congue mattis. Maecenas gravida diam vitae nibh. Donec enim. Vestibulum risus. Nullam adipiscing. Etiam fringilla neque id erat. Sed varius ipsum vitae sem congue mattis.</dd>
</dl>
<p>Vestibulum risus. Nullam adipiscing. Etiam fringilla neque id erat. Sed varius ipsum vitae sem congue mattis. Maecenas gravida diam vitae nibh. Donec enim. Nullam hendrerit faucibus nulla. Curabitur vel elit at lacus eleifend vulputate. Etiam nec tortor a dolor scelerisque dignissim. Donec lacus ipsum, posuere nec, lobortis vel, suscipit eu, orci. Nam ut felis. Pellentesque id nulla nec eros dignissim sollicitudin.</p>
<p>Phasellus suscipit tristique lorem. Proin dolor massa, eleifend at, mollis lobortis, cursus in, magna. Curabitur ultricies, ligula sit amet aliquet condimentum, tellus arcu mollis leo, a faucibus nibh urna vitae orci. Etiam sapien. In massa dui, imperdiet eget, mollis eu, venenatis porttitor, tortor. Nulla posuere accumsan lacus.</p>
</div>
</div>
<div id="sidebar">
<div class="gutter">
<div class="box">
<h3>What Are Pretzels?</h3>
<p>Pretzels are delicious baked snacks made from dough that's twisted into shape.</p>
</div>
<div class="box">
<h3>Our Pretzels</h3>
<ul>
<li><a href="#">Plain</a></li>
<li><a href="#">Salted</a></li>
<li><a href="#">Chocolate covered</a></li>
<li><a href="#">Yogurt covered</a></li>
<li><a href="#">BBQ</a></li>
</ul>
</div>
<div class="box">
<h3>About Us</h3>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Directions</a></li>
</ul>
</div>
</div>
</div>
<div id="footer">
<p>Copyright © 2005 Bulletproof Pretzel Company. All rights reserved.</p>
</div>
</div> <!-- end #wrap -->
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Bulletproof Pretzel Company</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: Verdana, sans-serif;
font-size: small;
background: #fff;
}
a:link {
color: #39c;
}
a:visited {
color: #369;
}
/* layout */
#wrap {
min-width: 500px;
max-width: 1400px;
background: url(img/wrap-bg.gif) repeat-y 70% 0;
}
#content {
float: left;
width: 70%;
font-size: 95%;
color: #333;
line-height: 1.5em;
}
#sidebar {
float: right;
width: 30%;
}
#footer {
clear: both;
background: #828377 url(img/footer-bg.gif) repeat-x top left;
}
/* gutters */
#content .gutter {
padding: 25px;
background: url(img/content-bg.gif) repeat-x top left;
}
#sidebar .gutter, #sidebar-2 .gutter {
padding: 15px;
}
/* header */
#header {
border-bottom: 3px solid #87B825;
background: #B4E637 url(img/header-bg.gif) repeat-x top left;
}
#header h1 {
margin: 0;
padding: 25px;
font-family: Georgia, serif;
font-size: 150%;
color: #374C0E;
background: url(img/bulls-eye.gif) no-repeat top left;
}
/* message row */
#message {
margin: 0;
padding: 10px;
font-size: 90%;
color: #cc9;
text-align: center;
background: #404530 url(img/message-bg.gif) repeat-x top left;
}
#message strong {
padding: 0 0 0 28px;
background: url(img/pretzel.gif) no-repeat 0 50%;
}
/* content */
#content h2 {
margin: 0 0 1em 0;
padding: 0;
font-family: Georgia, serif;
font-size: 150%;
color: #663;
font-weight: normal;
}
dl.feature {
margin: 15px 0;
padding: 15px;
border-top: 1px dotted #ccc;
border-bottom: 1px dotted #ccc;
}
dl.feature:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
dl.feature dt {
margin: 0 0 .5em 0;
font-family: Georgia, serif;
font-size: 140%;
color: #693;
}
dl.feature dt img {
float: left;
margin: 0 15px 0 0;
padding: 0 4px 4px 0;
background: url(img/photo-frame.gif) no-repeat bottom right;
}
dl.feature dd {
margin-left: 169px;
font-size: 90%;
line-height: 1.5em;
color: #666;
}
/* sidebars */
.box {
margin: 0 0 20px 0;
padding: 0 0 12px 0;
font-size: 85%;
line-height: 1.5em;
color: #666;
background: #fff url(img/box-b.gif) no-repeat bottom right;
}
.box h3 {
margin: 0;
padding: 12px;
font-family: Georgia, serif;
font-size: 140%;
font-weight: normal;
color: #693;
background: url(img/box-t.gif) no-repeat top left;
}
.box p, .box ul {
margin: 0;
padding: 0 12px;
}
.box ul li {
margin: 0 0 0 12px;
padding: 0 0 0 18px;
list-style: none;
background: url(img/li-bullet.gif) no-repeat 0 3px;
}
/* footer */
#footer p {
margin: 0;
padding: 15px;
font-size: 85%;
color: #333;
}
/* IE fixes */
#content, #sidebar {
height: 1%;
}
.feature {
display: inline-table;
}
/* Hides from IE/Mac \*/
* html .feature {
height: 1%;
}
.feature {
display: block;
}
#footer {
height: 1%;
}
/* End hide from IE/Mac */
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<h1>Bulletproof Pretzel Company</h1>
</div>
<p id="message">
<strong>Special:</strong> 30% off all week-old pretzels! Get 'em while they're... hot?.
</p>
<div id="content">
<div class="gutter">
<h2>Our Company History</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce libero neque, feugiat non, molestie ut, aliquet ut, leo. Phasellus bibendum aliquam velit. Pellentesque wisi justo, posuere nec, cursus id, facilisis ac, odio. Morbi consectetuer pede ultrices erat egestas bibendum. Duis hendrerit. Nunc id dolor. Duis euismod purus ut mauris. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi odio. Morbi odio. Praesent leo mauris, rutrum nec, mollis ut, scelerisque sit amet, tortor. Sed suscipit ligula et pede. Morbi rutrum mollis lacus. Duis quis eros. Fusce commodo tortor ut ante. Nunc mollis pede nec tellus. Praesent in nulla. Nullam malesuada adipiscing orci. Praesent in felis eu erat sagittis tincidunt. Nulla vel massa vitae risus placerat rutrum.</p>
<dl class="feature">
<dt><img src="img/bldg.jpg" width="150" height="113" alt="building" />Where it all began</dt>
<dd>Vestibulum risus. Nullam adipiscing. Etiam fringilla neque id erat. Sed varius ipsum vitae sem congue mattis. Maecenas gravida diam vitae nibh. Donec enim. Vestibulum risus. Nullam adipiscing. Etiam fringilla neque id erat. Sed varius ipsum vitae sem congue mattis.</dd>
</dl>
<p>Vestibulum risus. Nullam adipiscing. Etiam fringilla neque id erat. Sed varius ipsum vitae sem congue mattis. Maecenas gravida diam vitae nibh. Donec enim. Nullam hendrerit faucibus nulla. Curabitur vel elit at lacus eleifend vulputate. Etiam nec tortor a dolor scelerisque dignissim. Donec lacus ipsum, posuere nec, lobortis vel, suscipit eu, orci. Nam ut felis. Pellentesque id nulla nec eros dignissim sollicitudin.</p>
<p>Phasellus suscipit tristique lorem. Proin dolor massa, eleifend at, mollis lobortis, cursus in, magna. Curabitur ultricies, ligula sit amet aliquet condimentum, tellus arcu mollis leo, a faucibus nibh urna vitae orci. Etiam sapien. In massa dui, imperdiet eget, mollis eu, venenatis porttitor, tortor. Nulla posuere accumsan lacus.</p>
</div>
</div>
<div id="sidebar">
<div class="gutter">
<div class="box">
<h3>What Are Pretzels?</h3>
<p>Pretzels are delicious baked snacks made from dough that's twisted into shape.</p>
</div>
<div class="box">
<h3>Our Pretzels</h3>
<ul>
<li><a href="#">Plain</a></li>
<li><a href="#">Salted</a></li>
<li><a href="#">Chocolate covered</a></li>
<li><a href="#">Yogurt covered</a></li>
<li><a href="#">BBQ</a></li>
</ul>
</div>
<div class="box">
<h3>About Us</h3>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Directions</a></li>
</ul>
</div>
</div>
</div>
<div id="footer">
<p>Copyright © 2005 Bulletproof Pretzel Company. All rights reserved.</p>
</div>
</div> <!-- end #wrap -->
</body>
</html>
