--------------------------------------------
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文件</title>
<style>
.wrapper {
width: 930px;
margin: auto;
}
.header {
width: 930px;
height: 80px;
background-color: #2DC6DF;
}
.container {
width: 930px;
}
.content {
width: 930px;
float: left;
}
.menu {
width: 180px;
background-color: #90EE90;
float: left;
text-align: center;
}
.main {
width: 750px;
background-color: #FFFFE0;
float: right;
}
.ad {
width: 180px;
background-color: #FAFF5D;
float: right;
}
.footer {
width: 930px;
height: 22px;
background-color: #FFA500;
clear: both;
text-align: center;
}
ul {
list-style: none;
width: 120px;
border-top: 1px solid #404040;
padding: 0;
text-align: left;
}
li {
border-bottom: 1px solid #404040;
}
a {
text-decoration: none;
text-indent: 30px;
background: url('images/icon.png') left center no-repeat;
color: #404040;
line-height: 35px;
letter-spacing: 0.1em;
display: block;
}
a:hover {
color: #fff;
background: #404040 url('images/icon_hover.png') 6px center no-repeat;
}
.wrapper .header h1 {
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
font-style: italic;
font-weight: 200;
text-indent: 8px;
text-shadow: 0 0;
padding-top: 21px;
padding-bottom: auto;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<h1><strong>3C電子商務網站</strong></h1>
</div>
<div class="container">
<div class="content">
<div class="menu">
<ul>
<li><a href="#">回到首頁</a></li>
<li><a href="#">產品介紹</a></li>
<li><a href="#">公司簡介</a></li>
<li><a href="#">服務項目</a></li>
<li><a href="#">合作廠商</a></li>
<li><a href="#">相關連結</a></li>
<li><a href="#">聯絡我們</a></li>
<br><br>
</ul>
</div>
<div class="main">
<br>
3C的網頁文章內容<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</div>
<div class="footer"><strong>版權所有資料</strong></div>
</div>
</body>
</html>
沒有留言:
張貼留言