html - 在多个 div 中放置图像，顶部带有 CSS 文本和链接。不知道如何复制 div 以在具有不同 css 值的页面上放置多个

Question

我对这些东西很陌生，所以不确定该主题标题是否有意义。基本上我的问题/问题是这样的:

我已将此代码笔用作基础并根据我的要求调整了 css/html:http://codepen.io/Hornebom/pen/pgioy

我使用的 Html 是(必须先删除链接才能让我发帖):

<div class="box">
  <div class="head">
    <span class="caption">
      <p><a href="#">Facecare</a>
      <a href="#">Body &amp; Massage Oils</a>
      <a href="#">Bath &amp; Shower</a>
      <a href="#">Soaps</a>
      <a href="#">Mosquito Repellent</a>
      <a href="#">Skin Healing Oil</a></p>
    </span>
  </div>
  <img src="#">
</div>

CSS 是:

.box, .box:before, .head, .caption  {display:block;}
.box:before, .head, .caption  {position:absolute;}
.box {
  position:relative;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  width:500px;
  height:255px;
  margin:5rem auto;
  padding-left:0px;
  overflow:hidden;
  background: none;
  -webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
  -ms-transition: all 0.7s;
  -o-transition: all 0.7s;
  transition: all 0.7s;
}
.box:before  {
  content:'Skincare'; text-transform: uppercase; text-shadow: 1px 1px 1px #000; font-size: 40px!important; font-family: Vollkorn ; font-weight: 400 ; serif!important;  
  color:#fff ;
  top:13px;
  right:13px;
  padding:23px 17px;
  background: none;
  font-size:22px;
  text-transform:uppercase;
  -webkit-transition: all 0.5s;
  -moz-transition:    all 0.5s;
  -ms-transition:     all 0.5s;
  -o-transition:      all 0.5s;
  transition:         all 0.5s;
}
.box:hover  {
  padding-left:0px;
}
.box:hover:before  {right:-300px;}
.head {
  height:100%;
  width:650px;
  top:0px;
  left:-250px;
  margin:0px;
  padding-left:20px;
  background:transparent;
  -webkit-transition: all 0.45s;
  -moz-transition:    all 0.45s;
  -ms-transition:     all 0.45s;
  -o-transition:      all 0.45s;
  transition:         all 0.45s;
}
.head:hover  {
  left:0px;
}
.caption {
  background: none;
  padding:10px
}

.caption a {
  margin-top:0px;
  color:#fff;
  font-size: 23px!important; 
  font-family: Vollkorn ; 
  font-weight: 400 ; serif!important; 
  line-height: 35px; 
  text-shadow: 1px 1px 1px #000;
  text-decoration:none;
  padding-left:0px; 
  -webkit-transition: all 0.3s;
  -moz-transition:    all 0.3s;
  -ms-transition:     all 0.3s;
  -o-transition:      all 0.3s;
  transition:         all 0.3s;
}

.caption a:hover {padding-left:7px;}

我在页面上排列了其中的 4 个，遗憾的是我无法附上图片，因为声誉点数不足，但如果您想实际查看它:www.placemarkdigital.com/hali - password = passwordisnow

我已经能够在 html 中更改链接和背景图像，但我仍然不知道如何更改右上角的主框标题以及链接滑入之前的原始位置其中一些较长的链接文本当前出现在悬停之前。我尝试复制 css 并更改框、标题和标题部分的类，然后还更改每个部分的 html，但它破坏了代码。

任何想法/建议都会很棒!

非常感谢， 大卫

Answer 1

首先，我建议尽可能不要使用 CSS 来输入内容(例如使用 content:'Skincare';)。搜索引擎蜘蛛不太可能选择它，因为它们是各个部分的主要标题，所以您不希望这样。

也就是说 - CSS 中的 content:'Skincare' 是在您的 css 第 176 行中设置护肤品标题的内容。您需要为每个 .box 提供一个单独的标识符。您可以为每个 class=".box .boxtl", class=".box .boxtr"添加一个不同的类，然后为每个类专门设置内容。

.box.boxtl{content:'Title 1'; .... }
.box.boxtr{content:'Title 2'; .... }

..等等

如果可能的话，我会重新考虑您的做法 - 您正在使用 CSS 更改内容，应该真正将内容保留在 HTML 中，将设计保留在 CSS 中。

你可以在没有所有::before 东西的情况下产生类似的过渡。

CSS

.con{float: left; width: 1000px;}
.box,.caption{display: block; }
.box{
        position: relative;
        border: 1px solid red;
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        box-sizing:border-box;
        width: 500px;
        height: 200px;
        padding-left: 0px;
        overflow: hidden;
    }

.boxone{
background: url(https://www.google.co.uk/logos/doodles/2015/81st-anniversary-of-the-loch-ness-monsters-most-famous-photograph-4847834381680640-hp.gif) 0 0 no-repeat;}
.boxtwo{background: url(https://lh3.googleusercontent.com/nUQMxjCAhdPEJcpmEd9CwfO1q8NC0fkpR-HfKIB0RGKXOCwT9qd6w6LuhG5mOor8iXtSZ67xxMLplNwLl5EjeV3P1x8BfHW7ePdIfE0) 0 0 no-repeat;}

.box .info{
        float: left;
        width: 750px; margin-left: -250px;
        -webkit-transition: all 0.7s; -moz-transition: all 0.7s; -ms-transition: all 0.7s; -o-transition: all 0.7s;
        transition: all 0.7s;
    }

    .box .info h2{float: right; width: 50%; text-align: right; padding-right: 10px;}
    .box .info ul{float: left; width: 50%;}
    .box .info ul{list-style-type: none;}
    .box .info ul li{list-style-type: none;}

    .box:hover .info{margin-left: 0; }

HTML

<div class="con">

    <div class="box boxone">
        <div class="info">
            <h2><a href="#">Title One</a></h2>
            <ul>
                <li><a href="#">Body &amp; Massage Oils</a></li>
                <li><a href="#">Bath &amp; Shower</a></li>
                <li><a href="#">Soaps</a></li>
                <li><a href="#">Mosquito Repellent</a></li>
                <li><a href="#">Skin Healing Oil</a></p></li>
            </ul>
        </div>
    </div>

    <div class="box boxtwo">
        <div class="info">
            <h2><a href="#">Another Title</a></h2>
            <ul>
                <li><a href="#">Apple</a></li>
                <li><a href="#">Banana</a></li>
                <li><a href="#">Oranges</a></li>
                <li><a href="#">Pears</a></li>
                <li><a href="#">Kiwis</a></p></li>
            </ul>
        </div>
    </div>

</div>

`