Question

我已经使用html，css3和js为我的网页创建了时间线。

HTML：

  <div class="cntl-state">
      <div class="cntl-content">
        <h4>Title 4</h4>
        <p>India’s Saina Nehwal won the Australian Badminton Open Super Series title at the State Sports Centre in Sydney on 29 June, 2014. Saina began the match in aggressive fashion as she raced into a 12-8 lead in the first game against Spain’s Carolina Marin in the final.</p>
      </div>
      <div class="cntl-image"><img src="img/timelinesn-12.jpg" alt="tm12"></div>
      <div class="cntl-icon cntl-center">2014</div>
    </div>
</div>

css：

    .cntl-center {
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
}

.cntl-bar {
    position: absolute;
    width: 10px;
    top: 0;
    bottom: 0;
    background-color: #ccc;
    box-shadow: inset 0px 0px 7px -2px #000;
}

.cntl-bar-fill {
    background-color: #66cc00;
    position: absolute;
    left:0;
    right:0;
    top:0;
    height:0;

}

.cntl-state {
    position: relative;
    width:100%;
    min-height: 200px;
    margin-bottom: 50px;
}

.cntl-state::after {
    display:block;
    content: ' ';
    clear:both;
}

.cntl-icon {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    background-color: #003300;
    border: solid 3px #009900;
    box-shadow: 0px 0px 19px -9px #000;
    position: absolute;
    top: 0;
    text-align: center;
    line-height: 100px;
    font-size: 40px;
    color: #fff;
}

.cntl-content {
    width: 30%;
    padding: 2%;
    background-color: rgba(238, 238, 238, 0.25);
    border-radius: 8px;
    border-bottom: solid 3px #009900;
    float:left;
    opacity:0;
    position:relative;
    margin-left:-40%;
}

.cntl-state:nth-child(2n+2) .cntl-content {
    float:right;
    margin-right:-40%;
}

.cntl-image {
    opacity:0;
    width: 40%;
    padding: 2%;
}

.cntl-state:nth-child(2n+1) .cntl-image {
    float:right;
}

.cntl-content h4 {
    font-size:20px;
    font-weight: normal;
    margin-bottom: 10px;
}


/*
animations
*/
.cntl-bar-fill,.cntl-content,.cntl-image {
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    transition: all 500ms ease;
}

.cntl-state:nth-child(2n+2).cntl-animate .cntl-content {
    margin-right:6%;
}

.cntl-animate .cntl-content {
    opacity:1;
    margin-left:6%;
}

.cntl-animate .cntl-image {
    opacity:1;
}

我也使用过js文件，我试图创建jsfiddle，但无法获取。

现在我的页面显示为http://s30.postimg.org/54dkm4qoh/Untitled_2.png

我需要这个虚线，用于联合图像和描述。

http://s30.postimg.org/k522y658x/Untitled_1.png

任何人都可以帮我创建创建加入图像和描述的虚线的想法吗？

提前致谢。

Answer 1

如果您想知道如何绘制虚线，请输入代码。

    <head>
        <title></title>
        <style id="TempStyle"></style>
    </head>
    <body>
    <hr style="height: 0;margin:50px;width: 200px;border-width: 5px;border-color: black;border-style: dotted;"><!-- horizontal line -->
    <hr style="height: 200px;margin:50px;width: 0px;border-width: 5px;border-color: black;border-style: dotted;"><!-- vertical line -->
    </body>
    <script src="script.js"></script>
</html>

Answer 2

当我们尝试使用CSS来做这些事时，实际上它有点乱。我仍然认为这是你可能正在寻找的Demo。我刚刚向您展示了快速演示，但您必须添加跨浏览器支持。

CSS ＆amp;的 HTML

＆＃13;
＆＃13;
html, body { height: 100%; position:relative; } body{ color:#fff; overflow:hidden; } .leftcont { position:absolute; margin-left:0%; display:block; width:47%; height:100%; background:#333; } .timeline { position:absolute; margin-left:47%; display:block; width:6%; height:100%; background:#ddd; } .rightcont { position:absolute; margin-left:53%; display:block; width:48%; height:100%; background:#333; } .content1 { padding:20px; display:block; height:150px; width:200px; float:right; margin-right:10%; margin-top:10%; background:#ddd; color:black; } .content2 { padding:20px; display:block; height:150px; width:200px; float:left; margin-left:10%; margin-top:10%; background:#ddd; color:black; } .circle { display:block; height:60px; width:60px; margin-top:100%; border-radius:50%; background:#000; padding:15px 15px; text-align:center; font-size:22px; } #linel { position:relative; float:right; right:-44%; top:17%; display:block; width:70px; height:0.1px; border:2px dashed green; } #liner { position:relative; float:left; left:-43%; top:17%; display:block; width:65px; height:0.1px; border:2px dashed green; }
＆＃13;
<div class="leftcont"> <div class="content1">India's Saina Nehwal won the Australian Badminton Open Super Series title at the State Sports Centre in Sydney on 29 June, 2014.</div> <span id="linel"></span> </div> <div class="timeline"> <div class="circle">2006</div> </div/> <div class="rightcont"> <div class="content2">India's Saina Nehwal won the Australian Badminton Open Super Series title at the State Sports Centre in Sydney on 29 June, 2014.</div> <span id="liner"></span> </div/>
＆＃13;
＆＃13;
＆＃13;

在html中加入图像和描述的问题

2 个答案: