在链接中添加`div`是否正确？

时间：2019-01-31 07:52:54

标签： html css hyperlink

在链接中添加div是否正确？ 我的网站上有一些图标，当我将鼠标悬停在图标上时，它们会通过引导程序略微增加尺寸。图标在两个格内。我希望单击该图标时，除了它们的大小增加之外，还可以将我带到网站的另一个页面。我向您展示了div之一：

<section class="ulockd-service-three">
  <div class="container">
    <div class="col-xs-6 col-sm-4 col-md-2">
      <div class="ulockd-srvc-column-two one text-center">
        <div class="ulockd-srvc-details-two">
          <div class="ulockd-srv-icon-two"><span class="flaticon work"> 
          </span>
          </div>
          <h5>Safety Work</h5>
       </div>
    </div>
   </div>
  </div>
</section>

我尝试了几种放置链接的方法，最后我找到了一种将我重定向到所需页面的方法，但是我不知道这是否是最正确的方法，我认为这不合适，看起来不美观。

链接的工作方式如下：

<section class="ulockd-service-three">
  <div class="container">
    <div class="col-xs-6 col-sm-4 col-md-2">
      <div class="ulockd-srvc-column-two one text-center">
        <div class="ulockd-srvc-details-two">
          <a href="about.html"><div class="ulockd-srv-icon-two">
            <span class="flaticon-work"> </span>
          </div></a>
          <h5>Safety Work</h5>
       </div>
    </div>
   </div>
  </div>
</section>

我想说的是，如果在允许范围之内，请考虑所有因素，包括Google是否喜欢。 您能告诉我在不破坏放大效果的情况下向图标添加链接的正确方法吗？

谢谢

我编辑问题： 我添加CSS，以便您可以提供帮助，我希望添加必要的内容。 我搜索了可能会影响span

的内容

我编辑问题： 我添加CSS和代码段 我想知道链接的放置方式是否正确，如果语法正确，请在链接标记内添加div。

我展示了一段代码，

我不知道如何正确添加“ FLATICON” CDN，因此您看不到该图标，如果可以解决该问题，我将不胜感激。

.ulockd-srvc-column-two:hover .ulockd-srv-icon-two span {
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
}

.ulockd-fservice-box .db-overlayer span {
  border: 3px solid #fff;
  bottom: 10px;
  color: #fff;
  font-size: 48px;
  line-height: 1.2em;
  padding: 0 10px;
  position: absolute;
  right: 10px;
}
.ulockd-fservice-box.style2 span {
  border: 1px solid #fff;
  padding: 10px 15px;
  position: absolute;
}

.time_circles{position:relative;width:100%;height:100%}.time_circles > div{position:absolute;text-align:center}.time_circles > div > h4{margin:0;padding:0;text-align:center;text-transform:uppercase;font-family:'Century Gothic',Arial}.time_circles > div > span{display:block;width:100%;text-align:center;font-family:'Century Gothic',Arial;font-size:300%;margin-top:.4em;font-weight:700}

.ulockd-srv-icon {
  padding: 10px;
}
.ulockd-srvc-column .ulockd-srv-icon {
  color: #fff;
  display: inline;
  font-size: 36px;
  line-height: 1.2em;
  margin-top: 9px;
  padding: 8px 13px;
  position: relative;
}
.ulockd-srv-icon {
  padding: 10px;
}
.ulockd-srvc-column .ulockd-srv-icon {
  color: #fff;
  display: inline;
  font-size: 36px;
  line-height: 1.2em;
  margin-top: 9px;
  padding: 8px 13px;
  position: relative;
}
.ulockd-srvc-column .srv-icon {
  font-size: 60px;
  line-height: 1.2em;
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -ms-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
.ulockd-srvc-column:hover  .srv-icon{
  transform: scale(1.4);
  -webkit-transform: scale(1.4);
  -moz-transform: scale(1.4);
  -o-transform: scale(1.4);
  -ms-transform: scale(1.4);
}
.ulockd-ap-srv-icon {
  background-color: #393939;
  padding: 10px;
}
.ulockd-ap-srvc-column{
  margin-bottom: 45px;
  position: relative;
}
.ulockd-ap-srvc-column .ulockd-ap-srv-icon {
  color: #fff;
  float: left;
  font-size: 36px;
  margin-top: 9px;
  position: relative;
}  
.ulockd-ap-srv-icon::before {
  background-color: #393939;
  border-left: 4px solid #fff;
  border-right: 10px solid #393939;
  content: "";
  height: 100%;
  left: -33%;
  position: absolute;
  top: 0;
  transform: skewX(9deg);
  -webkit-transform: skewX(9deg);
  -moz-transform: skewX(9deg);
  -o-transform: skewX(9deg);
  -ms-transform: skewX(9deg);
  width: 44%;
}
.ulockd-srv-icon-two {
  padding: 10px;
}
.ulockd-srvc-column-two {
  padding: 10px;
  position: inherit;
  margin-top: -200px;
  z-index: 999;
}
.ulockd-srvc-column-two.one {
  margin-top: 0;
}
.ulockd-srvc-column-two:hover {
  cursor: pointer;
}
.ulockd-srvc-column-two:hover .ulockd-srv-icon-two span {
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
}
.ulockd-srvc-column-two .ulockd-srv-icon-two {
  color: #fff;
  font-size: 60px;
  line-height: 1.3em;
  position: relative;
  -webkit-transition: all 0.2s ease-in-out 0s;
  -moz-transition: all 0.2s ease-in-out 0s;
  -ms-transition: all 0.2s ease-in-out 0s;
  -o-transition: all 0.2s ease-in-out 0s;
  transition: all 0.2s ease-in-out 0s;
}
.ulockd-srv-icon-two{
  padding-bottom: 0;
}
.ulockd-srvc-details-two {
  padding-top: 0;
}
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="shortcut icon" href="http://sstatic.net/so/favicon.ico">
</head>
<body>

<!--THIS IS THE NATURAL WAY OF THE DIV-->

       <section class="ulockd-service-two parallax" data-stellar-background-ratio="0.3">
		<div class="container">
			<div class="row">
      
      <div class="col-xxs-12 col-xs-6 col-sm-6 col-md-4">
					<div class="ulockd-srvc-column three text-center ulockd-mrgn650">
						<div class="srv-icon text-thm1"><span class="flaticon-farm-2"></span></div>
						<div class="srvc-details">
							<h3>Excellent Services</h3>
							<p>Consectetur adipisicing elit. Fugiat perspiciatis necessitatibus beatae debitis repudiandae illo nihil commodi consequuntur ipsum iusto.</p>
						</div>
					</div>
				</div>
      </div>
    </div>
   </section>
      
       <!--AND THIS IS THE ONLY WAY I GOT TO ADD THE LINK WHEN WE CLICK THE ICON, SO THAT IT WORKS WITHOUT BREAKING THE STYLES OF THIS. And the one that I need to know if the syntax is correct-->
       
              <section class="ulockd-service-two parallax" data-stellar-background-ratio="0.3">
		<div class="container">
			<div class="row">
      
      <div class="col-xxs-12 col-xs-6 col-sm-6 col-md-4">
					<div class="ulockd-srvc-column three text-center ulockd-mrgn650">
          <!--this line is the one that I modify-->
						<a href="about.html"><div class="srv-icon text-thm1"><span class="flaticon-farm-2"></span></div></a>
						<div class="srvc-details">
							<h3>Excellent Services</h3>
							<p>Consectetur adipisicing elit. Fugiat perspiciatis necessitatibus beatae debitis repudiandae illo nihil commodi consequuntur ipsum iusto.</p>
						</div>
					</div>
				</div>
      </div>
    </div>
   </section>
   
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

1 个答案:

答案 0 :(得分：0)

您应该直接删除div操作范围，或者可能会更好

<section class="ulockd-service-three">
  <div class="container">
    <div class="col-xs-6 col-sm-4 col-md-2">
      <div class="ulockd-srvc-column-two one text-center">
        <div class="ulockd-srvc-details-two">
          <a href="about.html"><span class="flaticon-work"> </span></a>
          <h5>Safety Work</h5>
       </div>
    </div>
   </div>
  </div>
</section>
相关问题
最新问题