<!DOCTYPE html>
<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; }
我这里需要在鼠标移过的时候网站首页之类字样的背景变成暗红 但现在显示的效果却不是那样。然后我要下面的长线断开，而不是连一起。应该怎么做呢？
写回答
按照你目前添加的样式，你可这样写：
.a a{text-decoration:none;background:#fff;display:block;width:自己写px;height:自己写px;}.a a:hover{background:#f00;}
按照上面的方式，自己调一下 display:block; 是为了让 <a>标签变为实体 ######如果要让 li 的背景变红，我经常在里面加上：onmouseover / onmouseout 或 onmousemove，用js来控制######我还想请教个问题 请问webstorm如何加载字体呢 我要加载微软亚黑的字体
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
