2017-03-20 54 views
-1

我不知道如何使點在CSS (看圖片)點在引導和CSS

enter image description here

</br> . </br> . </br> .... 
+1

請更詳細地解釋你正在嘗試做的。你想讓它看起來完全一樣嗎?你真的需要用Bootstrap來做嗎? –

+0

是的,但我不能嘗試使。

等 – Famous

+0

使用

  • ...
等;並設置背景顏色,半徑和/或圖像。 –

回答

0

好了,我還是不知道你想要什麼,什麼你要求,但看看這個,看看是否有幫助:

.container { 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 
    
 

 
.dot { 
 
    font-size: 3em; 
 
    line-height: .25em; 
 
} 
 

 
.dot.one { color: #000 } 
 
.dot.two { color: #555 } 
 
.dot.three { color: #999 } 
 
.dot.four { color: #CCC }
<div class="container"> 
 
<div class="dot one">.</div> 
 
<div class="dot two">.</div> 
 
<div class="dot three">.</div> 
 
<div class="dot four">.</div> 
 
</div>

4

這既不是Bootstrap的情況,也不是CSS或甚至HTML。你需要的是SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 42" width="6px" height="42px"> 
    <circle cx="3" cy="3" r="3" fill="white" fill-opacity="1.0"/> 
    <circle cx="3" cy="15" r="3" fill="white" fill-opacity="0.8333"/> 
    <circle cx="3" cy="27" r="3" fill="white" fill-opacity="0.6667"/> 
    <circle cx="3" cy="39" r="3" fill="white" fill-opacity="0.5"/> 
</svg> 

您可以通過<img>元素把它嵌入或代替<br> S和點的直接粘貼。

1

有很多方法可以實現這一點,但這些點看起來像li子彈,所以創建一個空列表li可能是最簡單的方法。您可以使用opacity來實現淡化效果。

li:nth-child(1) { 
 
    opacity:1; 
 
} 
 
li:nth-child(2) { 
 
    opacity:.75; 
 
} 
 
li:nth-child(3) { 
 
    opacity:.5; 
 
} 
 
li:nth-child(4) { 
 
    opacity:.25; 
 
}
<ul> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
</ul>

+0

聰明,但似乎有點哈克 –

0

你的意思是像這樣的CSS? https://jsfiddle.net/t9hmxz0z/

HTML(遠離美麗的,但它能夠完成任務)

<div> 
<span></span> 
<span></span> 
<span></span> 
<span></span> 
</div> 

CSS

div { 
    width: 8px; 
    margin: 0px auto; 
} 

span { 
    display: block; 
    width: 8px; 
    height: 8px; 
    border-radius: 8px; 
    background-color: gray; 
    margin-bottom: 8px; 
} 

span:nth-child(1) { 
    background-color: #888; 
} 

span:nth-child(2) { 
    background-color: #666; 
} 

span:nth-child(3) { 
    background-color: #444; 
} 

span:nth-child(4) { 
    background-color: #222; 
} 

span { 
    last-child: margin-bottom: 0px; 
} 
0

HTML和CSS只有...

有點 「哈克」,但我想我會對這個有一些樂趣。

https://jsfiddle.net/etmargallo/vvn5zxn1/5/

HTML:

<div> 
    <span></span> 
</div> 

CSS

body { 
    background: black; 
} 

div { 
    display: block; 
    position: relative; 
    width: 5px; 
    height: 300px; 
    border-left: 5px dotted white; 
} 

div > span { 
    display: block; 
    z-index: 1; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: -5px; 
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAABkCAYAAABOx/oaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE3NUFEMDFBMERBRDExRTdCMzA1RTYyQ0YwNjYwNUQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE3NUFEMDFCMERBRDExRTdCMzA1RTYyQ0YwNjYwNUQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTc1QUQwMTgwREFEMTFFN0IzMDVFNjJDRjA2NjA1RDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTc1QUQwMTkwREFEMTFFN0IzMDVFNjJDRjA2NjA1RDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7MhZfpAAAASUlEQVR42mJhYGBgZkADLEDMhE2QkQYqmQbUTOIFmQefmcz0UkkL7XQzc/g5iW6CLCPY7yM5fdKtZBjYUnFgzRzYio+CqhwgwACJpAKLf74nxAAAAABJRU5ErkJggg==); 
    background-size: cover; 
}