以下是HTML代碼。
<!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/bawei.css"/>
<body>
<div id="header">
<img src="../img/ba_03.jpg" />
<ul>
<li><a href="#">網站首頁</a></li>
<li><a href="#">加入我們</a></li>
<li><a href="#">聯繫我們</a></li>
<li><a href="#">English</a></li>
</ul>
</div>
<div id="image">
<img src="../img/ba_06.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>
</ul>
</div>
<div id="body">
<div id="left">
<div id="shang">
<span><h3>最新消息</h3></span><font><h3>News</h3></font>
<a href="#"><h4>更多>></h4></a>
</div>
<ul>
<li><a href="#" class="q">奔夢向前爲夢想前行</a> <span class="span">2019 3-6</span></li>
<li><a href="#" class="q">奔夢向前爲夢想前行</a> <span class="span"> 2019 3-6</span></li>
<li><a href="#" class="q">奔夢向前爲夢想前行</a> <span class="span">2019 3-6</span></li>
<li><a href="#" class="q">奔夢向前爲夢想前行</a> <span class="span">2019 3-6</span></li>
</ul>
</div>
<div id="center">
<div id="shang">
<span><h3>集團簡介</h3></span><font><h3>introduction</h3></font>
<a href="#"><h4>更多>></h4></a>
</div>
<img src="../img/ba_27.jpg" />
<div id="a">奔夢向前爲夢想前行_奔夢向前爲夢想前行_奔夢向前爲夢想前行</div>
</div>
<div id="right">
<div id="shang">
<span><h3>集團簡介</h3></span><font><h3>introduction</h3></font>
<a href="#"><h4>更多>></h4></a>
</div>
<img src="../img/ba1_27.jpg" style="margin-left:20px; "/>
<img src="../img/ba_33.jpg" />
<img src="../img/ba_30.jpg" />
<img src="../img/ba_133.jpg" />
<ul>
<li>軟件工程</li>
<li>網絡工程</li>
<li>網絡設計</li>
<li>java開發</li>
</ul>
</div>
</div>
<div id="bottom">
<p>Copyright@2020奔夢向前</p>
<p>總校地址:北京市_聯繫方式QQ:2011983198</p>
</div>
</body>
</html>
下面是CSS代碼複製即可。
/* CSS Document */
*{
margin:0;
padding:0;
} /* 通用選擇器，清楚標籤默認的內外邊距*/
body{
font-size:12px; /*文字大小的屬性設置 網頁正文中巨大多數都是12px*/
font-family:"宋體"; /*宋體是所有人電腦都有的字體*/
width:1003px;
margin:0 auto; /* 以上2行代碼設置佈局的盒子居中對齊*/
}
ul{
list-style:none; /*清楚列表的項目符號類型*/
}
a{
text-decoration:none; /*去掉超級鏈接的下劃線*/
}
/*頭*/
#header{ width:1003px; height:99px;}
#header img{ margin-left:6px; margin-top:13px; float:left}
#header ul{ float:right; margin-right:26px; margin-top:75px}
#header ul li{ float:left; margin-right:15px; color:#999999}
#header a{ color:#999999}
#header a:hover{ color: red}
/*大圖*/
#image{ width:1003px; height:205px; border:1x solid red; float:left}
/*導航*/
#nav{ width:1003px; height:36px; float:left}
#nav a{ color:#FFF}
#nav a:hover{ color:red}
#nav ul{ background:url(../img/ba_08.jpg); width:1003px; height:36px; }
#nav ul li{ background:url(../img/ba_08.jpg); float:left; line-height:36px;padding-left:112px}
/*身體*/
#body{ width:1003px; height:184px; float:left;}
#left{ width:323px; height:184px; float:left; margin-left:19px;}
#shang span{ color:#0d519c; margin-top:25px; margin-left:2px; float:left; margin-right:3px}
#shang font{ color:#8f8f8f; margin-top:27px; float:left; margin-left:2px}
#shang a{ color:#fab206; float:right; margin-top:37px; margin-right:6px}
#shang a:hover{ color:red}
#left ul{ float:left; margin-left:25px; margin-top:17px}
#left ul li{ line-height:24px; background:url(../img/LI.jpg) no-repeat left center; padding-left:6px; width:290px; float:left}
.q{ color:#000}
.q:hover{ color:red}
.span{ float:right; margin-right:2px}
#shang{ width:305px; height:51px; float:left; margin-left:19px;}
#center{ width:323px; height:184px; float:left; margin-left:19px; }
#center img{ margin-top:5px; margin-left:20px; float:left}
#a{ float:left; padding-left:10px; padding-top:10px; width:220px}
#right{ width:310px; height:184px; float:left;}
#right img{ margin-top:18px }
#right ul{ margin-left:7px}
#right ul li{ float:left; margin-left:25px; color:#646464}
/*底部*/
#bottom{ width:1003px; height:64px; background:#f6f6f6; float:left}
#bottom p{ color:#737373; text-align:center; line-height:25px}
一起來看效果！
