最近评论
正在载入评论列表...
以下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">
<head>
<title>Chapter 4: Creative Floating</title>
<style type="text/css" media="screen">
body {
font-family: Arial, sans-serif;
font-size: small;
}
#sweden {
float: left;
width: 304px;
padding: 10px 0;
background: url(img/bg.gif) no-repeat top left;
}
#sweden dl {
float: left;
width: 260px;
margin: 10px 20px;
padding: 0;
display: inline; /* fixes IE/Win double margin bug */
}
#sweden dt {
float: right;
width: 162px;
margin: 0;
padding: 0;
font-size: 130%;
letter-spacing: 1px;
color: #627081;
}
#sweden dd {
margin: 0 0 0 98px;
padding: 0;
font-size: 85%;
line-height: 1.5em;
color: #666;
}
#sweden dl dd.img {
margin: 0;
}
#sweden dd.img img {
float: left;
margin: 0 8px 0 0;
padding: 4px;
border: 1px solid #D9E0E6;
border-bottom-color: #C8CDD2;
border-right-color: #C8CDD2;
background: #fff;
}
/* reverse float */
#sweden .alt dt {
float: left;
}
#sweden .alt dd {
margin: 0 98px 0 0;
}
#sweden .alt dd.img img {
float: right;
margin: 0 0 0 8px;
}
</style>
</head>
<body>
<div id="sweden">
<dl>
<dt>Stockholm</dt>
<dd class="img"><img src="img/gamlastan.jpg" width="80" height="80" alt="Gamla Stan" /></dd>
<dd>This was taken in Gamla Stan (Old Town) in a large square of amazing buildings.</dd>
</dl>
<dl class="alt">
<dt>Gamla Uppsala</dt>
<dd class="img"><img src="img/uppsala.jpg" width="80" height="80" alt="Gamla Uppsala" /></dd>
<dd>The first three Swedish kings are buried here, under ancient burial mounds.</dd>
</dl>
<dl>
<dt>Perpetual Sun</dt>
<dd class="img"><img src="img/watch.jpg" width="80" height="80" alt="Wristwatch" /></dd>
<dd>During the summer months, the sun takes forever to go down. This is a good thing.</dd>
</dl>
</div>
</body>
</html>
