Question

我一直试图在我的网站上找到一些虚线我开始理解这个想法，但我遇到了另一个问题...... 我正在制作另一条虚线，这次是在文字和图像之间。这个有点不同。

我也遇到问题，有时由于宽度变化，图像会出现在线下：当我更新我的网站时等等。

如何在此处制作，以便我可以将虚线的宽度更改为h2的总宽度？
我希望虚线不要打扰任何东西，只是顺利通过它。

这是我正在使用的代码，我需要将其保留在基本原则中：

      <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
      <script type="text/javascript">
      $(document).ready(function(){

      $('.serviceDesc').hide();
      $('.serviceName:first').addClass('active').next().show(); 

      $('.serviceName').click(function(){
      if( $(this).next().is(':hidden') ) { 
      $('.serviceName').removeClass('active').next().slideUp(); 
      $(this).toggleClass('active').next().slideDown(); 
      }
      return false; 
      });

      });
      </script>
      <style>
      #servicesContainer {
          width: 485px;
          height: 400px;
          margin: 0 auto;
          margin-top: 20px;
      }
      h2.serviceName {
          margin: 0;
          margin-bottom: 5px;
          margin-top: 5px;
          background-image: url(http://i.imgur.com/IcnZl.png);
          background-position: right top;
          background-repeat:no-repeat;
          height: 29px;
          line-height: 24px;
          width: 480px;
          font-size: 18px;
          font-weight: bold;
          float: left;
          color:#000;
      }
      h2.serviceName a {
          color: #000;
          text-decoration: none;
          display: block;
      }
      h2.active {
          background-position: right bottom;
      }
      .serviceDesc {
          margin: 0 0 10px;
          padding: 0;
          overflow: hidden;
          width: 480px;
          clear: both;
      }
      .serviceDesc .block {
      }
      .serviceDesc .block p {
          color: #413f44;
          margin: 0;
          font-size:18px;
      }
      </style>

      <div id="servicesContainer">
        <h2 class="serviceName"><a href="#">Text...............................................................................</a></h2>
        <div class="serviceDesc">
          <div class="block">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. </p>
          </div>
        </div>
        <h2 class="serviceName"><a href="#">Text...............................................................................</a></h2>
        <div class="serviceDesc">
          <div class="block">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
          </div>
        </div>
        <h2 class="serviceName"><a href="#">Text...............................................................................</a></h2>
        <div class="serviceDesc">
          <div class="block">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.<br />
              <br />
            </p>
          </div>
        </div>
        <h2 class="serviceName"><a href="#">Text...............................................................................</a></h2>
        <div class="serviceDesc">
          <div class="block">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
          </div>
        </div>
        <h2 class="serviceName"><a href="#">Text...............................................................................</a></h2>
        <div class="serviceDesc">
          <div class="block">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. </p>
          </div>
        </div>
        <h2 class="serviceName"><a href="#">Text...............................................................................<br />
          </a></h2>
        <div class="serviceDesc">
          <div class="block">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. </p>
          </div>
        </div>
        <h2 class="serviceName"><a href="#">Text...............................................................................</a></h2>
        <div class="serviceDesc">
          <div class="block">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
          </div>
        </div>
        <h2 class="serviceName"><a href="#">Text...............................................................................</a></h2>
        <div class="serviceDesc">
          <div class="block">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
          </div>
        </div>
      </div>

http://jsfiddle.net/K7MHK/

Answer 1

与phone/email question一样，这也是一样的想法。您可以在元素上使用背景图像来创建虚线。由于您已获得<h2>的背景信息，请将其添加到<a>：

h2.serviceName a {
    background: url(dots.gif) repeat-x bottom left;
    /* Other CSS styles */
}

这是an example。作为奖励，它意味着您也可以摆脱所有硬编码点。

更新：如果您想阻止单词后面的点，请添加一个包含文本背景颜色的<span>元素：

<强> HTML

<h2>
    <a href="">
        <span>Juicy text</span>
    </a>
</h2>

<强> CSS

a span {
    background-color: #fff;
}

这样可以防止<a>的虚线背景显示。

Answer 2

Example

h2.serviceName {
    margin: 0;
    margin-bottom: 5px;
    margin-top: 5px;
    position: relative;
    height: 29px;
    line-height: 24px;
    width: 480px;
    font-size: 18px;
    font-weight: bold;
    float: left;
    color:#000;
    overflow: hidden;
    }
h2.serviceName a {
    color: #000;
    text-decoration: none;
    display: block;
}

h2.serviceName a:after {
    content : "";
    border-bottom: 2px dotted #000;
    position: absolute;
    width: 100%;
    height: 15px;
    z-index: -1;
}
h2.serviceName a:before {
    content : "";
    background-image: url(http://i.imgur.com/IcnZl.png);
    width: 30px;
    height: 29px;
    float: right;
}

有点hacky，你仍然可以看到右边的点......但它让你更好地了解CSS3的力量

h2跨度之间的虚线

2 个答案: