加入html中圖片和描述時的問題

-1

我已經通過html，css3和js爲我的網頁創建了時間線。加入html中圖片和描述時的問題

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

誰能幫我給創建虛線是加入兩個圖像和描述的想法？

在此先感謝。

來源

2015-02-23 sona

沒有，StackOverflow的是Q＆A論壇。這不關乎人們爲你寫代碼。 – Jonathan 2015-02-23 12:12:30

如果你想知道如何繪製虛線這裏是它的代碼。

<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>

來源

2015-02-23 12:22:39

事情是，如何使用這個虛線加入我的形象和描述..？ – sona 2015-02-23 12:24:51

實際上它有點亂，當我們試圖用CSS做這些樣的東西。不過我認爲這是你可能要找的Demo。我剛剛向您展示了快速演示，但您必須添加跨瀏覽器支持。

CSS & HTML

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; 
 
}

<div class="leftcont"> 
 
\t \t 
 
\t <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> 
 
\t <span id="linel"></span> 
 
</div> 
 
<div class="timeline"> 
 
\t <div class="circle">2006</div> 
 
</div/> 
 
<div class="rightcont"> 
 
\t <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> 
 
\t <span id="liner"></span> \t 
 
</div/>

來源

2015-02-23 13:30:40 divy3993

實際上你的演示不能正常工作...... @ divy3993 – sona 2015-02-24 03:53:10

那麼它的作品「甚至在我的Internet Explorer」中，所以我不知道這個演示有什麼問題，但仍然可以使用border：1px虛線#color， CSS的屬性。這是我在上面的Demo中試圖解釋的。 – divy3993 2015-02-24 04:31:07

我知道，如何在垂直或水平方向創建虛線......我想知道如何與圖像和描述完全一致。 – sona 2015-02-24 04:35:03

加入html中圖片和描述時的問題

回答

相關問題