template
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" href="style.css" type="text/css" title="Style 1"/>
<title>www.lac.com</title>
</head>
<body>
<div class="wrapper">
<div class="top">
<a class="logo" href="index.html">
aicun<span>.lu</span>
</a>
<div class="logoRight">
We provide you the world's best Books, Musics and Movies
</div>
</div>
<div class="nav" >
<div>
<a href="index.html" class="active">Home</a>
<a href="books.html" class="alink">Books</a>
<a href="musics.html" class="alink">Musics</a>
<a href="movies.html" class="alink">Movies</a>
</div>
</div>
<div class="home">
<table>
<tr>
<th>Book Name</th>
<th>Author Name</th>
<th>Edition</th>
<th>Publish Year</th>
<th>Price</th>
<th>comment</th>
</tr>
<tr>
<td>Wolf Totem</td>
<td>Rong Jiang</td>
<td>Third</td>
<td>2001</td>
<td>$50</td>
<td>AAAAAAAAAA</td>
</tr>
<tr>
<td>The Last Star</td>
<td>Rick Yancey</td>
<td>Second</td>
<td>2016</td>
<td>$11</td>
<td>AAAAAAAAAA</td>
</tr>
<tr>
<td>The Crown</td>
<td>Kiera Cass</td>
<td>First</td>
<td>2016</td>
<td>$12</td>
<td>AAAAAAAAAA</td>
</tr>
<tr>
<td>World of Warcraft</td>
<td>Chelsea Monroe-Cassel</td>
<td>Second</td>
<td>2016</td>
<td>$21</td>
<td>AAAAAAAAAA</td>
</tr>
<tr>
<td>Harry Potter</td>
<td>J.K Rowling</td>
<td>Third</td>
<td>2003</td>
<td>$22</td>
<td>AAAAAAAAAA</td>
</tr>
</table>
</div>
<footer>
<div class="info">
<h2>Where people connects</h2>
<div class="footerContent">
<div>
<p>Telephone: 222.222.2222</p>
</div>
<div>© 2016 Aicun.lu, All Rights Reserved</div>
</div>
</div>
</footer>
</div>
</body>
</html>
.top{
height:50px;
padding-top: 20px;
line-height: 0px;
}
.logo{
font-family: Georgia;
font-size: 37px;
letter-spacing: 3px;
line-height: 1;
padding-left: 2px;
text-decoration: none;
}
.logoRight{
float: right;
font-size:15px;
font: italic bold Georgia, serif;
color: grey;
line-height:3;
}
.wrapper{
width:60%;
margin: auto;
}
.nav {
background-color: #5f5f5f;
font-size: 20px;
letter-spacing: 1px;
width: 99.8%;
}
.alink {
color: white;
padding: 14px 25px;
text-decoration: none;
display: inline-block;
}
a.alink:hover, a.alink:active{
background-color: red;
text-decoration: none;
}
.active {
color: Red;
padding: 14px 25px;
text-decoration: none;
display: inline-block;
}
table {
border-collapse: collapse;
width: 99.8%;
height:350px;
}
th, td {
border-bottom: 1px solid #ddd;
text-align: center;
}
tr:nth-child(even){background-color: #f2f2f2}
tr:hover {
background-color: #99FFFF
}
th {
background-color: #4CAF50;
color: white;
}
.info{
margin: 0 auto;
height:150px;
background: linear-gradient(to right, #0085c9 0%, #0085c9 53%, #004a86 96%, #004a86 100%);
}
h2{
color: white;
float: left;
width: 20%;
margin:20px;
}
.footerContent{
color: white;
float: right;
position: relative;
margin-right:20px;
}
