Q
點在引導和CSS
-1
A
回答
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;
}
相關問題
- 1. 引導CSS和CSS的jqGrid
- 2. 引導和CSS「變換
- 3. yii2中的Css和引導
- 4. 使用引導CSS和自定義CSS
- 5. 引導CSS列
- 6. 使用引導程序和CSS的響應點擊區域
- 7. 錨點鼠標指針不能使用CSS和引導
- 8. 正確的CSS在引導
- 9. 命名引導引導和基礎CSS框架
- 10. 嵌套CSS - 引導/導軌
- 11. CSS引導多popovers
- 12. CSS /引導容器
- 13. 引導CSS填充
- 14. twitter引導表css
- 15. 覆寫引導CSS
- 16. 動態複選框CSS和引導
- 17. 引導CSS位置和github頁
- 18. css先導元素和:焦點
- 19. css和checkall複選框不工作在數據表和引導
- 20. CSS和導航
- 21. 導軌和CSS
- 22. 自定義CSS不重寫引導CSS
- 23. Twitter的引導CSS頂欄HTML/CSS
- 24. 外部CSS文件不與引導CSS
- 25. 覆蓋Twitter的引導CSS
- 26. 引導進度條CSS Issuse
- 27. CSS Twitter引導表格
- 28. CSS引導重寫方法
- 29. 定製引導4個CSS
- 30. 引導Clockpicker CSS中的web2py
請更詳細地解釋你正在嘗試做的。你想讓它看起來完全一樣嗎?你真的需要用Bootstrap來做嗎? –
是的,但我不能嘗試使。。等 – Famous
使用
- ...
等;並設置背景顏色,半徑和/或圖像。 –