。請檢查下面的HTML及以下
HTML代碼CSS代碼： -
<body>
<header>
<img src="images/pumpkin.gif" alt="Pumpkin" width="85">
<h2>The Halloween Store</h2>
<h3>For the little Goblin in all of us!</h3>
</header>
<section>
<nav id="nav_bar">
<ul>
<li id="home"><a href="index.html" class="current">Home</a>
</li>
<li id="products"><a href="">Product List</a>
</li>
<li id="personal"><a href="">Personal</a>
</li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Decorating Items</a>
<div class="dropdown-content">
<a href="#">Outdoor</a>
<a href="#">Indoor</a>
<a href="#">TableTreats</a>
</div>
</li>
<li id="email"><a href="">Join Email</a>
</li>
</ul>
</nav>
<table>
<tr>
<td style="text-align:left;vertical-align:top;width=160px;">
<nav id="nav_list">
<ul>
<li><a href="products/props.html">Props</a>
</li>
<li><a href="products/costumes.html">Costumes</a>
</li>
<li><a href="products/special.html">Special FX</a>
</li>
<li><a href="products/masks.html">Masks</a>
</li>
</ul>
</nav>
</td>
<td>
<main>
<h1>Welcome to my site.<br>Please come in and stay awhile.</h1>
<p>I started this web site because Halloween has always been my favorite holiday. But during the last year, I started selling some of my favorite Halloween products, and they've become quite a hit.</p>
<p>If you click on the Personal link, you can browse my favorite Halloween pictures, stories, and films. And if you join my email list, I will keep you up-to-date on all things Halloween.</p>
<h2>Product of the week</h2>
<a href="products/masks.html">
<img src="images/cat1.jpg" alt="Deranged cat"></img>
<br>
</a>
<a href="products/masks.html">20" Deranged cat</a>
<br>
<br>
<h3>My guarantee</h3>
<p>If you aren't completely satisfied with everything you buy from my site, you can return it for a full refund. <strong>No questions asked!</strong>
</p>
</main>
</td>
</tr>
</table>
</section>
<footer>
<p>© 2016 Ben Murach</p>
</footer>
</body>
CSS代碼下面： -
html {
background-color: white;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
width: 800px;
background-color: white;
margin: 0 auto;
padding: 0;
border: 3px solid black;
box-shadow: 0 9px 18px 9px;
}
h1, h2, h3, p {
margin: 0;
padding: 0;
}
a {
color: white;
}
a:link, a:visited {
color: white;
}
/* Header */
header {
background-image: -webkit-linear-gradient(45deg, white 0%, orange 75%, black 100%);
background-image: -moz-linear-gradient(45deg, white 0%, orange 75%, black 100%);
background-image: -o-linear-gradient(45deg, white 0%, orange 75%, black 100%);
background-image: linear-gradient(45deg, white 0%, orange 75%, black 100%);
padding: 30px;
border-bottom: 2px solid black;
}
header img {
float: left;
padding-right: 15px;
}
header h2 {
font-size: 230%;
}
header h3 {
font-size: 125%;
}
/* Main */
main {
padding: 0px 25px 25px 25px;
}
main h1 {
font-size: 140%;
margin-bottom: .5em;
}
main h1:first-letter {
font-size: 240%;
}
main h2 {
font-size: 125%;
margin: .8em 0 .5em 0;
}
main h3 {
font-size: 110%;
margin-bottom: .5em;
}
main p {
margin-bottom: .5em;
}
main ul {
margin-top: 0;
}
main a {
font-weight: bold;
}
#nav_list ul {
padding-top: 1.25em;
padding-left: .8em;
list-style: none;
}
#nav_list li {
width: 125px;
margin-bottom: .5em;
background-color: orange;
border: 2px solid black;
}
#nav_list li a {
display: block;
padding: .5em .5em .5em .5em;
text-decoration: none;
color: black;
font-weight: bold;
}
section {
position: relative;
top: -20px;
}
#nav_bar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
}
#nav_bar li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#nav_bar li a:hover, .dropdown:hover .dropbtn {
background-color: grey;
}
#nav_bar li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: white;
background-color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
li .current {
color: orange;
}
/* Footer */
footer {
border-top: 2px solid black;
padding: 15px;
background-image: -webkit-linear-gradient(45deg, black 0%, orange 25%, white 100%);
background-image: -moz-linear-gradient(45deg, black 0%, orange 25%, white 100%);
background-image: -o-linear-gradient(45deg, black 0%, orange 25%, white 100%);
background-image: linear-gradient(45deg, black 0%, orange 25%, white 100%);
}
footer p {
font-size: 90%;
text-align: center;
}
