下面是HTML代碼複製按鍵Ctrl+C複製即可。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>奔夢向前</title>
</head>
<link rel="stylesheet" type="text/css" href="../css/柏油船舶.css"/>
<body>
<div id="header">
<img src="../img/logo.gif" />
<ul>
<li><a href="#">網站地圖</a></li>
<li><a href="#">加入收藏</a></li>
</ul>
</div>
<div id="nav">
<ul>
<li><a href="#">關於我們</a><span>|</span></li>
<li><a href="#">公司業績</a><span>|</span></li>
<li><a href="#">業務中心</a><span>|</span></li>
<li><a href="#">資訊中心</a><span>|</span></li>
<li><a href="#">下載中心</a><span>|</span></li>
<li><a href="#">配件與服務</a><span>|</span></li>
</ul>
</div>
<div id="image">
<img src="../img/banner.jpg" />
</div>
<div id="body">
<div id="left">
<div id="shang">
<a href="#"><h3>新聞資訊</h3></a>
<span><h6>MORE>></h6></span>
</div>
<ul>
<li><a href="#">奔夢向前爲夢想前行</a> <span>（10-4-12 14:49）</span></li>
<li><a href="#">奔夢向前爲夢想前行</a> <span>（10-4-12 14:49）</span></li>
<li><a href="#">奔夢向前爲夢想前行</a> <span>（10-4-12 14:49）</span></li>
<li><a href="#">奔夢向前爲夢想前行</a> <span>（10-4-12 14:49）</span></li>
<li><a href="#">奔夢向前爲夢想前行</a> <span>（10-4-12 14:49）</span></li>
</ul>
</div>
<div id="center">
<div id="shang1">
<a href="#"><h3>新聞資訊</h3></a>
<span><h6>MORE>></h6></span>
</div>
<img src="../img/pic.gif" />
<font>奔夢向前爲夢想而前進</font>
<div id="span1">奔夢向前每一個人心中都有一個夢想</div>
</div>
<div id="right">
<div id="women">
<a href="#"><h3>聯繫我們</h3></a>
<img src="../img/pic1.gif" style="width:240px; margin-top:15px"/>
</div>
<table style="float:left; margin-top:90px; margin-left:20px">
<tr>
<td>用戶名:</td>
<td><input type="text" style="width:100px"/></td>
<td><input type="button" value="登錄" style="margin-left:12px"/></td>
</tr>
<tr>
<td>密 碼</td>
<td><input type="password" style="width:100px"/></td>
<td><input type="button" value="註冊" style="margin-left:12px"/></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
<div id="bottom">
<p style="color:#e8e8e8">奔夢向前_奔夢向前_奔夢向前_奔夢向前_奔夢向前_奔夢向前</p>
<p style="color:#c4c4c4">奔夢向前_奔夢向前_奔夢向前_奔夢向前_奔夢向前-2020-04-24-4</p>
</div>
</body>
</html>
下面是CSS樣式的代碼，和上面一樣，複製即可，小白們切記一定要在路徑相同的文件夾內才行哦！
/* CSS Document */
*{
margin:0;
padding:0;
} /* 通用選擇器，清楚標籤默認的內外邊距*/
body{
font-size:12px; /*文字大小的屬性設置 網頁正文中巨大多數都是12px*/
font-family:"宋體"; /*宋體是所有人電腦都有的字體*/
width:976px;
margin:0 auto; /* 以上2行代碼設置佈局的盒子居中對齊*/
}
ul{
list-style:none; /*清楚列表的項目符號類型*/
}
a{
text-decoration:none; /*去掉超級鏈接的下劃線*/
}
/*頭*/
#header{ width:976px; height:84px;}
#header img{ margin-top:20px; margin-left:27px}
#header ul{ float:right; margin-top:32px}
#header ul li{ background:url(../img/icon.gif) no-repeat left center; float:left; margin-right:39px; padding-left:10px;}
#header a{ color:#000}
#header a:hover{ color:red}
/*導航*/
#nav{ width:976px; height:31px; background:#155c90; }
#nav ul{ background:#155c90; margin-left:20px}
#nav ul li{ float:left; height:31px; line-height:31px; width:106px; text-align:center; background:#155c90; color:#FFF;}
#nav a{ color:#FFF}
#nav a:hover{ color:#F00}
#nav span{ padding-left:25px; color:#367db1; height:60px}
/*大圖*/
#image{ width:976px; height:322px; margin-top:5px}
/*body*/
#body{ width:976px; height:179px; margin-top:13px}
#left{ width:345px; height:179px; float:left}
#shang{ width:345px; height:30px; background:#b90d01; color:#FFF; float:left}
#shang a{ color:#FFF; margin-left:13px; margin-top:8px; float:left}
#shang a:hover{ color:#F00}
#shang span{ float:right; margin-top:14px; margin-right:10px}
#left ul{ margin-left:15px; }
#left ul li{ line-height:25px; color:#666666; padding-left:7px; background:url(../img/icon.gif) no-repeat left center}
#left ul a{ color:#000}
#left ul a:hover{ color:#F00}
#left ul span{ float:right; margin-right:3px; color:#a6a6a6}
#center{ width:329px; height:179px; float:left; margin-left:11px}
#shang1{ width:345px; height:28px; border:1px solid red; background:#b90d01; color:#FFF; float:left}
#shang1 a{ color:#FFF; margin-left:13px; margin-top:6px; float:left}
#shang1 a:hover{ color:#F00}
#shang1 span{ float:right; margin-top:14px; margin-right:10px}
#center img{ margin-top:10px; margin-left:12px; float:left}
#center font{width:206px; height:78px; float:left; margin-top:7px; line-height:22px; color:#676767; margin-left:10px}
#span1{ width:318px; height:40px; padding-top:5px; float:left; margin-left:10px; color:#676767; line-height:20px}
#right{ width:265px; height:179px; margin-left:20px; float:left;}
#women{ float:left; width:250px; height:30px; padding-left:13px; background:#a4a4a4}
#women a{ line-height:25px; color:#FFF; float:left}
#women a:hover{ color:#F00}
#women img{ float:left}
/*底部*/
#bottom{ width:976; height:57px; background:#a4a4a4}
#bottom p{ text-align:center; line-height:0px; margin-top:12px; padding-top:15px}
一起來看效果！
