制作图标可点击的网址而不会破坏我当前的CSS

时间：2015-03-13 13:36:09

标签： html css image url hyperlink

我正在尝试更新网站上班。无论如何我都不是网络程序员而且我被卡住了。

Boss希望图标和文字可点击。我目前已经知道文本会将用户发送到正确的页面，但是我尝试使用各种教程使我的图像可以点击，但它会抛弃我的布局。

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

感谢。

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;
}

4 个答案:

答案 0 :(得分：2)

为什么不尝试这样的标记：

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

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

然后整个标签容器是可点击的

答案 1 :(得分：0)

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

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

并删除css中的background-image

答案 2 :(得分：0)

这里有一些代码 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;
}

答案 3 :(得分：0)

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

使图像可单独点击

<强> 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>
相关问题
最新问题