/*全局样式设置 */
body,ul,li,h4,a{margin:0; padding:0;}
ul,li,ol{list-style:none;}
a:link,a:visited{color:#444;text-decoration:none;}
a:hover{color:red;}
img{border:0;}
body{
background:green;
font-size:12px;
color:#444;
font-family:Arial,宋体;
background:#ccc url(../images/bg-body.gif) repeat-x;
}
.box{width:1000px;height:500px; margin:0px auto; }
#red{color:red;}
/*top */
.top{height:27px; line-height:27px;}
.top span{float:left;color:#01c47c}
.top ul{float:right;}
.top li{float:left;}
a{border-right:1px dotted #444;padding:0 8px;}
#noline{border:noline;}
/* logo*/
.logo{height:122px; }
.logo .div1{width:210;height:99px;
float:left; padding-top:23px;}
.logo .div2{ width:400px;height:122px;
float:right;}
.logo .div3{width:360px;height:106px;
float:right; padding-top:16px;}
.logo .div2 h4{color:#0174c7;font-size:28px;
}
.logo .div2 li{width:79px;height:20px;line-height:20px;
color:#f00;font-size:15px;
background:url(../images/li01.png)
no-repeat; padding-left:6px;
float:left;padding-right:5px;}
<!--menu-->
.menu{height:47px; line-height:47px;border:1px solid #f00;}
.menu li{border:1px solid red;float:left;}
.menu a{color:#fff; font-weight:bold;
width:73px; height:31px; display:block;text-align:center;
border:1px solid #f00;padding-top:16px;
}
.menu a:hover{background:url(../images/menu2.gif) no-repeat center
center;}
.menu a1{width:90px; }
.menu a1:hover{background:url(../images/menu1.gif) no-repeat;}
<!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" xml:lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>网页标题</title>
<meta name="keywords" content="关键字列表" />
<meta name="description" content="网页描述" />
<link rel="stylesheet" type="text/css" href="css/css.css" />
<style type="text/css"></style>
<script type="text/javascript"></script>
</head>
<body>
<div class="box">
<!-- top -->
<div class="top">
<span>专业的培训机构<img src="images/hot.gif"></span>
<ul>
<li><a href="#">就业宣言</a></li>
<li><a href="#">报名流程</a></li>
<li><a href="#">免费公开课</a></li>
<li><a href="#" id="red">中国好毕设</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="#" id="noline">技术论坛</a></li>
</ul>
</div>
<!--top over -->
<!--logo-->
<div class="logo">
<div class="div1"><img src="images/logo.gif"></div>
<div class="div3"><img src="images/topword.gif"></div> <div class="div2">
<h4>PHP学院</h4>
<ul>
<li>北京校区</li>
<li>上海校区</li>
<li>广州校区</li>
<li>深圳校区</li>
</ul>
</div>
</div>
<!--menu-->
<div class="menu">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#" class="a1">PHP视频课程</a></li>
<li><a href="#">PHP视频</a></li>
<li><a href="#">PHP视频</a></li>
<li><a href="#">PHP视频</a></li>
<li><a href="#">PHP视频</a></li>
<li><a href="#">PHP视频</a></li>
<li><a href="#">PHP视频</a></li>
<li><a href="#">PHP视频</a></li>
<li><a href="#">PHP视频</a></li>
</ul>
</div>
<!--menu over-->
</div>
</body>
</html>
浙公网安备 33010602011771号