python/Day21-30/code/new/web1901/css_practice_1.result.html
2024-12-04 00:04:56 +08:00

74 lines
1.6 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>Boxes</title>
<style type="text/css">
body {
font-size: 80%;
font-family: "Courier New", Courier, monospace;
letter-spacing: 0.15em;
background-color: #efefef;
}
#page {
max-width: 940px;
min-width: 720px;
margin: 10px auto 10px auto;
padding: 20px;
border: 4px double #000;
background-color: #ffffff;
}
#logo {
width: 150px;
margin: 10px auto 25px auto;
}
ul {
width: 570px;
padding: 15px;
margin: 0px auto 0px auto;
border-top: 2px solid #000;
border-bottom: 1px solid #000;
text-align: center;
}
li {
display: inline;
margin: 0px 3px;
}
p {
text-align: center;
width: 600px;
margin: 20px auto 20px auto;
font-weight: normal;
}
a {
color: #000000;
text-transform: uppercase;
text-decoration: none;
padding: 6px 18px 5px 18px;
}
a:hover, a.on {
color: #cc3333;
background-color: #ffffff;
}
</style>
</head>
<body>
<div id="page">
<div id="logo">
<img src="images/logo.gif" alt="The Analog Specialists" />
</div>
<ul id="navigation">
<li><a href="#" class="on">Home</a></li>
<li><a href="#">For Sale</a></li>
<li><a href="#">Repairs</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<p>
<img src="images/keys.jpg" alt="Fender Rhodes, Hohner Clavinet, and Wurlitzer EP200" />
</p>
<p>
We specialize in the sale and repair of classic keyboards, in particular the Fender Rhodes, Wurlitzer EP200, and Hohner Clavinet.
</p>
</div>
</body>
</html>