下面是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}
一起来看效果！
