使图标可点击 url 而不会破坏我当前的 CSS

Question

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

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

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

谢谢。

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>

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

Answer 2

如果您希望图标可点击并用作链接，请执行以下操作：

<a href="www.myfile.html"><img src="rainbow.gif"></a>

并删除 css

中的背景图像

Answer 3

这是一些代码FIDDLE:

HTML:

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

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

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

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

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

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

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

    </div>
</a>

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 4

研究下面的示例并将其用作参考。

使图像单独可点击

HTML

<a href="#"> <!-- Your image goes here --> </a>

CSS

   a img { /* Refers to the image used as a link */
    /* Enter Styles Properties and values here */

    }

a  { /* Refers to the link. Image, text or whatever */

    /* Enter Styles Properties and values here */

    }

使文本单独可点击

HTML

<a href="#"> I'm a text link </a>

CSS

a  {
/* Enter Styles Properties and values here */

}

使文本和图像都可点击

HTML

<a href="#"> <!-- your image --> I'm a text link  </a>

使图标可点击 url 而不会破坏我当前的 CSS

Making icons clickable url without breaking my current CSS

html

css

url

image

hyperlink