html - 在不破坏我当前 CSS 的情况下制作图标可点击的 url

Question

我正在尝试更新工作中的网站。我无论如何都不是网络程序员，我被困住了。

老板希望图标和文本可以点击。我目前知道文本会将用户发送到正确的页面，但我尝试使用各种教程使我的图像可点击，但它使我的布局偏离了方向。

我是否应该只删除文本超链接并让它们的图像只能点击然后尝试修复布局？

谢谢。

JSFiddle

HTML

<!-- StartServiceIconTable -->
<div class="networkicon">
    <div class="boxaroundservicestext">
        <p class="services"><a href="network.html">Network Integration and Management</p></a>

    </div>
</div>
<div class="paperlessicon">
    <div class="boxaroundservicestext">
        <p class="services"><a href="paperless.html">Paperless Office</p></a>

    </div>
</div>
<div class="webdesignicon">
    <div class="boxaroundservicestext">
        <p class="services"><a href="website.html">Website Design</p></a>

    </div>
</div>
<div class="securityicon">
    <div class="boxaroundservicestext">
        <p class="services"><a href="security.html">Security Solutions</p></a>

    </div>
</div>
<div class="disastericon">
    <div class="boxaroundservicestext">
        <p class="services"><a href="disaster.html">Disaster Recovery</p></a>

    </div>
</div>
<div class="surveillanceicon">
    <div class="boxaroundservicestext">
        <p class="services"><a href="surveillance.html">Surveillance Camera Systems</p></a>

    </div>
</div>
<div class="cloudicon">
    <div class="boxaroundservicestext">
        <p class="services"><a href="backup.html">Cloud/Local Backup</p></a>

    </div>
</div>

CSS

.networkicon {
    height: 85px;
    width: 200px;
    float: left;
    margin-left: 40px;
    background-image: url("http://i.imgur.com/pxOZ3BO.png");
    background-repeat: no-repeat;
}
.networkicon:hover {
    background-image: url("http://i.imgur.com/q9AYH52.png");
}
.paperlessicon {
    height:85px;
    width:200px;
    float:left;
    margin-left:80px;
    background-image:url("http://i.imgur.com/d2pyph4.png");
    background-repeat:no-repeat;
}
.paperlessicon:hover {
    background-image: url("http://i.imgur.com/p8aSg7g.png");
}
.webdesignicon {
    height: 85px;
    width: 200px;
    float: left;
    margin-left: 40px;
    background-image: url("http://i.imgur.com/rgmqeM6.png");
    background-repeat: no-repeat;
}
.webdesignicon:hover {
    background-image: url("http://i.imgur.com/9Lqv2xE.png");
}
.securityicon {
    height:85px;
    width:200px;
    float:left;
    margin-left:80px;
    background-image:url("http://i.imgur.com/KVdCBHR.png");
    background-repeat:no-repeat;
}
.securityicon:hover {
    background-image: url("http://i.imgur.com/2YEL0Ff.png");
}
.disastericon {
    height: 85px;
    width: 200px;
    float: left;
    margin-left: 40px;
    background-image: url("http://i.imgur.com/fxpEZgv.png");
    background-repeat: no-repeat;
}
.disastericon:hover {
    background-image: url("http://i.imgur.com/ZLrcbA5.png");
}
.surveillanceicon {
    height:85px;
    width:200px;
    float:left;
    margin-left:80px;
    background-image:url("http://i.imgur.com/PClaFkQ.png");
    background-repeat:no-repeat;
}
.surveillanceicon:hover {
    background-image: url("http://i.imgur.com/ZCe0oEs.png");
}
.cloudicon {
    height: 85px;
    width: 200px;
    float: left;
    margin-left: 40px;
    background-image: url("http://i.imgur.com/2ft1RiY.png");
    background-repeat: no-repeat;
}
.cloudicon:hover {
    background-image: url("http://i.imgur.com/f0RvsBV.png");
}
.boxaroundservicestext {
    height: 85px;
    padding-left: 90px;
    #padding-top: 28px;
    /*This is for IE*/
    line-height: 80px;
    text-align: center;
}
p.services {
    font: arial;
    font-size: 13px !important;
    color: black !important;
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}
p.services a {
    font:arial;
    color: #333366;
}
p.services a:hover {
    font:arial;
    color: #FF7600;
}

Answer 1

你为什么不试试这样的标记:

<a href="paperless.html">
    <div class="paperlessicon">
        <div class="boxaroundservicestext">
            <p class="services">Paperless Office</p>

        </div>
    </div>
</a>

那么整个a标签容器都是可点击的