html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaJam Coffee House</title>
<link rel="stylesheet" href="01.css">
</head>
<body>
<div id="wrapper">
<h1 >JavaJam Coffee House</h1>
<nav >
<a href="index.html" target="_blank" id="a" >Home</a> <br> <a href="Menu.html" target="_self">Menu</a> <br> <a href="Music.html" target="_blank">Music</a> <br> <a href="#" target="_blank">Jobs</a>
</nav>
<main>
<h2 align="left">Follow the Winding Roal to javajam</h2>
<ul align="left" type="square">
<li>Speciality Coffee and Tea</li>
<li>Bagels,Muffins,and Organic Snacks</li>
<li>Music and Poetry Readings</li>
<li>Open Mic Night Every Friday Night</li>
</ul>
<ul align="left" type="none" class="news">
<li>54321 Route 42<br/></li>
<li>Ellison Bay,WI54210<br/></li>
<li>1-888-555-5555<br/></li>
</main>
<footer>
Copyright © 2016 JavaJam Coffee House
<br>
<a href="#" target="_blank" id="red">yourfirstname@yourfirstname.com<</a>
</footer>
</div>
</body>
</html>
css文件
#wrapper {background-color: #E2D2B0;
text-align: center;
margin: 10px 50px;
height: 810px;
margin-top: 10px;
margin-top: 10px;
}
div{padding-top: 0px;}
nav {float: left;
width: 180px;
background-color: #fff;
height: 550px;
}
nav a{text-decoration: none;
margin-top: 50px;}
h2 {padding-top: 60px;
margin-left: 40px;}
main {background-color: #F5F5DC;
margin-left: 175px;
height: 550px;
background-image: url("li.jpg");
}
main img {float: left;
padding-right: 2px;}
main ul { list-style-position: inside;
margin-top: 40px;}
main div {overflow: auto;
font-size: 90%;
padding-left: 5px;
padding-right: 5px;}
nav ul {list-style: none;
padding-left: 0;
font-size: 1.2em;}
a:link {color: #795240;}
a:visited {color: #A58366;}
a:hover {color: #F5F5DC;}
footer{text-align: center;
margin-top: 10px;}
footer a:link{ color: #2E0000;}
footer a:visited{color: #000000;}
footer a:hover{color: #F5F5DC;}
h1 {height: 120px;
font-size: 110px;
text-align: center;
}
.news{ margin-top: 40px;}