框架
<html>
<head>
<style type="text/css">
div.container
{
width:80%;
margin:0px;
border:1px solid gray;
line-height:300%;
}
div.header,div.footer
{
padding:2em;
background-color:#4B0082;
clear:left;
}
h1.header
{
padding:0;
margin:0;
}
div.left
{
float:left;
width:180px;
margin:0;
padding:1em;
}
div.content
{
margin-left:300px;
border-left:1px solid gray;
padding:5em;
}
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300}
li {display:inline}
img
{
opacity:0.4;
filter:alpha(opacity=40)
}
</style>
</head>
<body>
<div class="header"><h1 class="header">
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link three</a></li>
</h1></div>
<div class="left"><p><img src="D:\img\three01.jpg" width="150" height="140" alt="threes"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" /></p></div>
<div class="left"><p><img src="D:\img\three02.jpg" width="150" height="140" alt="threes"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" /></p></div>
<div.header,div.footer>
<h1>哈哈哈</h1>
<p>THIS is book.THIS is book.THIS is book.THIS is book.THIS is book.
THIS is book.THIS is book.THIS is book.THIS is book.THIS is book.</p>
<p>This is text.This is text.This is text.This is text.This is text.</p></div>
<div class="footer">Welcome to Taipei</div>
</div>
</body>
</html>
