HTML+CSS有关问题

长沙磊哥 发布于 2015/10/30 09:45
阅读 318
收藏 1
<!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>
                    &nbsp;&nbsp;
                    <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;
}

我这里需要在鼠标移过的时候网站首页之类字样的背景变成暗红 但现在显示的效果却不是那样。然后我要下面的长线断开,而不是连一起。应该怎么做呢?

加载中
0
f
fisan

按照你目前添加的样式,你可这样写:

.a a{text-decoration:none;background:#fff;display:block;width:自己写px;height:自己写px;}.a a:hover{background:#f00;}

按照上面的方式,自己调一下 display:block; 是为了让 <a>标签变为实体

0
f
fisan
如果要让 li 的背景变红,我经常在里面加上:onmouseover / onmouseout  或 onmousemove,用js来控制
0
长沙磊哥
我还想请教个问题 请问webstorm如何加载字体呢 我要加载微软亚黑的字体
返回顶部
顶部