最近评论
正在载入评论列表...
以下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>Chapter 3: Expandable Rows</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
font-size: small;
text-align: center;
}
#container {
width: 768px;
margin: 0 auto;
text-align: left;
font-size: 80%;
}
#register {
float: left;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
color: #690;
background: #BDDB62 url(img/reg_bottom.gif) no-repeat bottom left;
}
#register a {
text-decoration: none;
color: #360;
}
#reg {
float: left;
margin: 0;
padding: 8px 14px;
}
#find {
float: right;
margin: 0;
padding: 8px 14px;
background: url(img/mag-glass.gif) no-repeat 0 50%;
}
#message {
clear: both;
font-weight: bold;
font-size: 110%;
color: #fff;
text-align: center;
background: #92B91C url(img/ship_top.gif) no-repeat top left;
}
#message p {
margin: 0;
padding: 8px 14px;
background: url(img/ship_bottom.gif) no-repeat bottom left;
}
#message strong {
text-transform: uppercase;
}
#message a {
margin: 0 0 0 6px;
padding: 2px 15px;
text-decoration: none;
font-weight: normal;
color: #fff;
background: url(img/arrow.gif) no-repeat 0 50%;
}
</style>
</head>
<body>
<div id="container">
<ul id="register">
<li id="reg">Not registered? <a href="#">Register</a> now!</li>
<li id="find"><a href="#">Find a store</a></li>
</ul>
<div id="message">
<p><strong>Special this week:</strong> $2 shipping on all orders! <a href="#">LEARN MORE</a></p>
</div>
</div>
</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>Chapter 3: Expandable Rows</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
font-size: small;
text-align: center;
}
#container {
width: 768px;
margin: 0 auto;
text-align: left;
font-size: 80%;
}
#register {
float: left;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
color: #690;
background: #BDDB62 url(img/reg_bottom.gif) no-repeat bottom left;
}
#register a {
text-decoration: none;
color: #360;
}
#reg {
float: left;
margin: 0;
padding: 8px 14px;
}
#find {
float: right;
margin: 0;
padding: 8px 14px;
background: url(img/mag-glass.gif) no-repeat 0 50%;
}
#message {
clear: both;
font-weight: bold;
font-size: 110%;
color: #fff;
text-align: center;
background: #92B91C url(img/ship_top.gif) no-repeat top left;
}
#message p {
margin: 0;
padding: 8px 14px;
background: url(img/ship_bottom.gif) no-repeat bottom left;
}
#message strong {
text-transform: uppercase;
}
#message a {
margin: 0 0 0 6px;
padding: 2px 15px;
text-decoration: none;
font-weight: normal;
color: #fff;
background: url(img/arrow.gif) no-repeat 0 50%;
}
</style>
</head>
<body>
<div id="container">
<ul id="register">
<li id="reg">Not registered? <a href="#">Register</a> now!</li>
<li id="find"><a href="#">Find a store</a></li>
</ul>
<div id="message">
<p><strong>Special this week:</strong> $2 shipping on all orders! <a href="#">LEARN MORE</a></p>
</div>
</div>
</body>
</html>
