<html>
<head lang="en">
<meta charset="UTF-8">
<title>HTML+CSS实战</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="header">
<div class="top">
<div class="wp">
<div class="z">
<span>
<a href="">设为首页</a>
</span>
<span>
<a href="">收藏本站</a>
</span>
</div>
<div class="y">
<span>2015年10月29日</span>
<span class="mr_0">多云18℃/28℃</span>
</div>
</div>
</div>
<div class="wp">
<div class="logos">
<div class="log z">
<h1><a href="index.html"><img src="images/logo.jpg" alt="HTML+CSS实战"></a></h1>
</div>
<div class="dianhua y">
<span>客服热线：400-000-000</span>
</div>
<div class="sousuo y ">
<form action="index.html" method="get">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="s_z z"></td>
<td class="s_c z">
<input type="text" name="text" id="s_c_txt"/>
</td>
<td class="s_y z">
<button type="submit" name="submit"></button>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
<div class="nav">
<div class="wp">
<ul>
<li class="a">
<a href="index.html">网站首页</a>
<a href="index.html">公司简介</a>
<a href="index.html">业务描述</a>
<a href="index.html" >服务范围</a>
<a href="index.html">产品中心</a>
<a href="index.html">人才管理</a>
<a href="index.html">在线留言</a>
<a href="index.html">联系我们</a>
</li>
</ul>
</div>
</div>
</div>
<div class="center">
<div class="wp">
<div class="ad">
<img src="images/ad.jpg">
</div>
<div class="jianjie z">
<div class="tit">
<img src="images/jianjie.jpg" alt="">
<span><a href="">More</a></span>
</div>
</div>
<div class="xinwen z">
<div class="tit">
<img src="images/xinwen.jpg" alt="">
<span><a href="">More</a></span>
</div>
</div>
<div class="chanpin z">
<div class="tit">
<img src="images/chanpin.jpg" alt="">
<span><a href="">More</a></span>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="footer_top"></div>
<div class="footer_bottom"></div>
</div>
</body>
</html>
/*通用样式*/
*{margin: 0;padding: 0;}
body{font-family: "mirosoft yahei", vendana, sans-serif, "simsun"}
.wp{width:960px;margin: 0 auto;}
.z{float: left;}
.y{float: right;}
.cl{clear: both;}
.mr_0{margin: 0}
img{border: none}
.top{
width:100%;
height:24px;
line-height: 24px;
background: #303030;
color: #d8d8d8;
}
.top a{
color: #d8d8d8;
text-decoration: none;
}
.top a:hover{
color: #f60;
}
.top span{
margin-right: 15px;
}
.top span.mr_0{
margin: 0;
}
/*LOGOS*/
.logos{
height: 59px;
margin:15px 0;
}
/*搜索*/
.sousuo{
width: 350px;
height: 41px;
margin-top: 8px;
}
.sousuo td{
height: 41px;
}
.s_z{
width: 6px;
background: url("../images/s_z.jpg") no-repeat;
}
.s_c{
width: 240px;
background: url("../images/s_c.jpg") repeat-x;
}
.s_y{
width: 78px;
background: url("../images/s_r.jpg") no-repeat;
}
.s_c input{
width: 200px;
height: 35px;
line-height: 35px;
border: none;
margin-top: 2px;
}
.s_y button{
width: 78px;
height: 41px;
background: none;
border: 0;
cursor: pointer;
}
.dianhua{
height: 59px;
line-height: 59px;
margin-left: 15px;
}
.dianhua span{
font-size: 26px;
color: darkred;
}
/*导航*/
.nav{
height: 39px;
width: 100%;
background: url("../images/nav_bg.jpg") repeat-x;
}
.nav li{
list-style: none;
float: left;
line-height: 39px;
padding: 0 10px;
}
.nav li.a,.nav li:hover{
background: url("../images/nav_hover.jpg") repeat-x;
}
.nav a{
color: #fff;
font-size: 16px;
text-decoration: none;
margin-left: 28px;
}
/*center*/
.ad{
margin-bottom: 10px;
}
.tit{
padding-bottom: 8px;
border-bottom: 1px solid darkred;
position: relative;
}
.tit span{
position: absolute;
right: 0;
bottom: 0;
}
.tit a{
color: darkred;
text-decoration: none;
}
.jianjie{
width: 540px;
height: 300px;
}
.xinwen{
width: 400px;
height: 300px;
}
.chanpin{
width: 100%;
height: 300px;
}
我这里需要在鼠标移过的时候网站首页之类字样的背景变成暗红 但现在显示的效果却不是那样。然后我要下面的长线断开，而不是连一起。应该怎么做呢？
WebStorm