以下是HTML代碼，複製即可，切記一定要新建一個文件夾，裏面要有2個文件夾，命名css、img、因爲這個網頁是靜態的不是動態的，所以說沒有js。
<!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/neike.css"/>
<body>
<div id="header">
<img src="../image/1header_bg.jpg" />
</div>
<div id="nav">
<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>
<li><a href="#">奔夢向前！</a></li>
</ul>
</div>
<div id="zhong">
<span>滾動新聞:</span>奔夢向前！奔夢向前！奔夢向前！
<font>今天是2020年04月24日，星期五，上下晚午好！</font>
</div>
<div id="body">
<div id="left">
<img src="../image/5Left_Pho.jpg" />
<div id="span">奔夢向前！奔夢向前！奔夢向前！奔夢向前！奔夢向前！奔夢向前！奔夢向前！</div>
</div>
<div id="center">
<div style="width:355px; height:31px; color:#0F0; line-height:31px; padding-left:20px">
<font>信息動態和公告</font> <span style="float:right; margin-right:10px; color:#999">更多>></span>
</div>
<ul style="line-height:24px; margin-top:15px; padding-left:10px">
<li style="background:url(../image/7Li_bg_03.gif) no-repeat left center; padding-left:10px">奔夢向前！<span style="float:right; margin-right:10px">2020-04-24</span></li>
<li style="background:url(../image/7Li_bg_03.gif) no-repeat left center; padding-left:10px">奔夢向前！<span style="float:right; margin-right:10px">2020-04-24</span></li>
<li style="background:url(../image/7Li_bg_03.gif) no-repeat left center; padding-left:10px">奔夢向前！<span style="float:right; margin-right:10px">2020-04-24</span></li>
<li style="background:url(../image/7Li_bg_03.gif) no-repeat left center; padding-left:10px">奔夢向前！<span style="float:right; margin-right:10px">2020-04-24</span></li>
<li style="background:url(../image/7Li_bg_03.gif) no-repeat left center; padding-left:10px">奔夢向前！<span style="float:right; margin-right:10px">2020-04-24</span></li><li style="background:url(../image/7Li_bg_03.gif) no-repeat left center; padding-left:10px">奔夢向前！<span style="float:right; margin-right:10px">2020-04-24</span></li>
<li style="background:url(../image/7Li_bg_03.gif) no-repeat left center; padding-left:10px">奔夢向前！<span style="float:right; margin-right:10px">2020-04-24</span></li>
<li style="background:url(../image/7Li_bg_03.gif) no-repeat left center; padding-left:10px">奔夢向前！<span style="float:right; margin-right:10px">2020-04-24</span></li>
<li style="background:url(../image/7Li_bg_03.gif) no-repeat left center; padding-left:10px">奔夢向前！<span style="float:right; margin-right:10px">2020-04-24</span></li>
<li style="background:url(../image/7Li_bg_03.gif) no-repeat left center; padding-left:10px">奔夢向前！<span style="float:right; margin-right:10px">2020-04-24</span></li>
<li style="background:url(../image/7Li_bg_03.gif) no-repeat left center; padding-left:10px">奔夢向前！<span style="float:right; margin-right:10px">2020-04-24</span></li>
</ul>
</div>
<div style="width:680px; height:130px; float:left">
<img src="../image/132o2t.jpg" style="margin-top:20px; margin-left:20px" />
</div>
</div>
<div id="right">
<div style="border:1px solid #075d02;">
<div style="width:188px; height:30px; ; color:#0F0; padding-left:10px; line-height:30px; background:#f4f4f4">會員登錄</div>
<table style="margin-left:20px">
<tr style="height:35px">
<td>用戶名</td>
<td><input type="text" style="width:100px"/></td>
</tr>
<tr style="height:25px">
<td>密碼</td>
<td><input type="password" style="width:100px" /></td>
</tr>
<tr style="height:25px">
<td>驗證碼</td>
<td><input type="text" style="width:50px" /> 1820</td>
</tr>
<tr style="height:25px">
<td></td>
<td><input type="submit" value="登錄" />
<input type="reset" value="重置" /></td>
</tr>
<tr>
<td><img src="../image/11 Rgi_ico.jpg" /></td>
<td>註冊會員|找回密碼</td>
</tr>
</table>
</div>
<div style="width:200px; height:47px; border:1px solid #075d02; margin-top:12px; float:left">
<input type="text" value="請輸入搜索關鍵詞" style=" float:left; margin-top:10px; width:120px; margin-left:10px" />
<img src="../image/13 Search_Bot.jpg" style=" float:left; text-align:center; margin-left:10px; margin-top:10px" />
</div>
<div style=" width:200px; height:198px; float:left; margin-top:10px;">
<div style="width:188px; height:30px; line-height:30px; padding-left:10px; color:#0C6; background:#ebebeb">
學術技術研究進展
<span style="float:right; line-height:30px; color:#CCC">更多>></span>
</div>
<ul style="line-height:24px; margin-top:5px; margin-left:5px">
<li style="background:url(../image/132ot.jpg) no-repeat left center; padding-left:5px">奔夢向前！奔夢向前！</li>
<li style="background:url(../image/132ot.jpg) no-repeat left center; padding-left:5px">奔夢向前！奔夢向前！</li>
<li style="background:url(../image/132ot.jpg) no-repeat left center; padding-left:5px">奔夢向前！奔夢向前！</li>
<li style="background:url(../image/132ot.jpg) no-repeat left center; padding-left:5px">奔夢向前！奔夢向前！</li>
<li style="background:url(../image/132ot.jpg) no-repeat left center; padding-left:5px">奔夢向前！奔夢向前！</li>
<li style="background:url(../image/132ot.jpg) no-repeat left center; padding-left:5px">奔夢向前！奔夢向前！</li>
</ul>
</div>
</div>
<div style="width:900px; height:39px; float:left;">
<ul style="text-align:center; background-color:#f2f2f2; float:left;width:800px; height:39px; line-height:39px; padding-left:100px">
<li style="float:left; width:80px ; border-right:1px solid #cfcfcf;line-height:14px; margin-top:14px">關於我們</li>
<li style="float:left; width:80px ; border-right:1px solid #cfcfcf;line-height:14px; margin-top:14px">網站地圖</li>
<li style="float:left; width:80px ; border-right:1px solid #cfcfcf;line-height:14px; margin-top:14px">幫助</li>
<li style="float:left; width:80px ; border-right:1px solid #cfcfcf;line-height:14px; margin-top:14px">後臺管理</li>
<li style="float:left; width:80px ; border-right:1px solid #cfcfcf;line-height:14px; margin-top:14px">郵件服務</li>
<li style="float:left; width:80px ; border-right:1px solid #cfcfcf;line-height:14px; margin-top:14px">友情鏈接</li>
<li style="float:left; width:80px ; border-right:1px solid #cfcfcf;line-height:14px; margin-top:14px">在線留言</li>
<li style="float:left; width:80px ; border-rightr:1px solid #cfcfcf;line-height:14px; margin-top:14px">聯繫我們</li>
</ul>
</div>
<div style="width:900px; height:47px; float:left; padding-top:10px; line-height:20px">
<p style="text-align:center; line-height:47px margin-top:20px">奔夢向前網站</p>
<p style="text-align:center">2020-04-24</p>
</div>
</body>
</html>
下面是css樣式的代碼
/* CSS Document */
*{
margin:0;
padding:0;
} /* 通用選擇器，清楚標籤默認的內外邊距*/
body{
font-size:12px; /*文字大小的屬性設置 網頁正文中巨大多數都是12px*/
font-family:"宋體"; /*宋體是所有人電腦都有的字體*/
width:900px;
margin:0 auto; /* 以上2行代碼設置佈局的盒子居中對齊*/
}
ul{
list-style:none; /*清楚列表的項目符號類型*/
}
a{
text-decoration:none; /*去掉超級鏈接的下劃線*/
}
#header{ width:900px; height:125px; float:left;}
#nav{ width:900px; height:29px; float:left; background:url(../image/2Nav_bg.jpg); padding-top:11px}
#nav ul{ margin-left:36px; float:left;}
#nav ul li{ float:left; line-height:40px; width:98px; text-align:center; border-right:1px double #075d02; line-height:16px;}
#nav a{ color:#FFF}
#nav a:hover{ color:#F00}
#zhong{ width:900px; height:41px; float:left; line-height:41px}
#zhong span{ color:#04560e; font-weight:900; margin-left:21px; color:#505050; font-size:}
#zhong font{ float:right; color:#505050; font-size:10px}
/*身體*/
#body{ width:690px; height:471px; float:left;}
#left{ width:293px; height:338px; float:left; border:1px solid #dddddd;}
#left img{ margin-top:12px; margin-left:12px}
#span{ color:#5b5b5b; width:251px; height:59px; margin-left:18px; margin-top:12px}
#center{ width:377px; height:338px; float:left; margin-left:11px}
#div{width:355px; height:31px; color:#0F0; line-height:31px; padding-left:20px}
#right{ width:200px; height:471px; float:left; border:1px solid #075d02;}
一起來看效果！
