项目不会链接到页面

时间:2015-08-23 08:13:31

标签: html css hyperlink

此列表中的每个项目都不会链接到其他页面。我认为我的标签位于正确的位置,但它似乎没有起作用。

HTML:

<div class="projectswrap">
    <div class="project project1">
      <a href="www.project1.html">
        <div class="project-hover project-hover1">
          <h2 class="item-title">Rebrand: bla bla bla</h2>
          <h3 class="item-cat">Branding, Identity, Typography, Web Design and Print</h3>
        </div>
      </a>
    </div>


    <div class="project project2">
      <a href="www.project2.html">
        <div class="project-hover project-hover2">
          <h2 class="item-title">Gain Theory: Brand and Identity</h2>
          <h3 class="item-cat">Branding, Identity, Web and Print</h3>
        </div>
      </a>
    </div>


    <div class="project project3">
      <a href="www.project3.html">
        <div class="project-hover project-hover3">
          <h2 class="item-title">Information Design</h2>
          <h3 class="item-cat">Typography, Information Design, and Print</h3>
        </div>
      </a>
    </div>


    <div class="project project4">
      <a href="www.project4.html">
        <div class="project-hover project-hover4">
          <h2 class="item-title">YouGov Competition: "I can't beleaf it"</h2>
          <h3 class="item-cat">Information Design, Layout, Print and Format</h3>
        </div>
      </a>
    </div>


    <div class="project project5">
      <a href="www.project5.html">
        <div class="project-hover project-hover5">
          <h2 class="item-title">Embrace's financial handouts</h2>
          <h3 class="item-cat">Layout, Typography and Print</h3>
        </div>
      </a>
    </div>
  </div>

CSS:

.projectswrap {
    margin:0 auto;
    background-color:#f7c8c6;
    position:absolute;
    top:100%;
    width:100%
}

.projectswrap .project {
    width:50%;
    padding-bottom:50%;
    margin:0;
    float:left;
    background:#cceaec;
    position:relative
}

.projectswrap .project .project-hover {
    display:none;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(255,255,255,0.85);
    -webkit-transition:all 5.6s ease;
    -moz-transition:all .6s ease;
    -o-transition:all .6s ease;
    -ms-transition:all .6s ease;
    transition:all .6s ease
}

.projectswrap .project:hover .project-hover {
    display:block
}

.item-title {
    position:absolute;
    top:50%;
    width:100%;
    text-align:center;
    font-size:xx-large;
    font-weight:700
}

.item-cat {
    position:absolute;
    top:50%;
    margin-top:50px;
    width:100%;
    text-align:center;
    font-family:sans-serif;
    font-size:medium;
    font-weight:100
}

理想情况下,当您单击这些项目框中的每一个时,它们应链接到项目页面。

2 个答案:

答案 0 :(得分:2)

在链接

之前添加 http https

例如,www.example.com应该在href属性

中写为http://www.example.com

编辑:www.example.com是一个相对链接。虽然http://www.example.com是指向其他网站的正确链接(绝对链接)

答案 1 :(得分:1)

如果您链接的文件与上面引用的文件位于同一文件夹中,只需删除www:

<a href="project1.html">

如果他们在不同的目录中,请链接到目录:

<a href="another_directory/project2.html">

如果他们位于其他网站,请与http://和完整的域名路径相关联:

<a href="http://www.google.com/project2.html">