javascript - 這種樣式該怎么書寫
問題描述
這種重復小點 大點 的樣式該怎么寫呢，圓圈的個數是由右邊組件的高度和個數來決定的
問題解答
回答1：最好有案例地址。從圖片的角度考慮：可能使用的是border-image,或者使用的背景圖(可能有個父容器放背景圖，里面有個子容器放內容)，隨著子容器被撐高，父容器背景圖片顯示面積隨之增大。如果是代碼實現：先制作幾個圓，根據js動態加圓的p
回答2：小點用邊框，dotted，大的當前圓圈用右邊一行的背景圖做。
回答3：這是一種時間線的功能有相應的插件戳
回答4：其實主要原理就是利用了css的 border-radius 屬性，一個塊元素（比如p）把這個屬性設置為50%，那么就顯示成了一個圓形。
至于空心的圓形，利用了border屬性，設置了邊框，邊框顏色和背景顏色不同。
以下代碼的實際效果可以在線看
Html<html><head> <title>This is a demo</title></head><body> <p class=’leftline’> <p class=’dot smalldot’></p> <p class=’dot smalldot’></p> <p class=’dot activedot’></p> <p class=’dot smalldot’></p> <p class=’dot smalldot’></p> <p class=’dot smalldot’></p> <p class=’dot smalldot’></p> <p class=’dot smalldot’></p> <p class=’dot smalldot’></p> <p class=’dot bigdot’></p> <p class=’dot smalldot’></p> <p class=’dot smalldot’></p> </p></body> </html>CSS
.leftline { width: 30px; height: 300px; padding: 5px 0;}.dot { margin: 10px auto; border-radius: 50%;}.smalldot { width: 4px; height: 4px; background: #aaaaaa;}.bigdot { width: 10px; height: 10px; border: 4px solid #AAAAAA; background: #FFF;}.activedot { width: 30px; height: 30px; background: #117577;}最終效果圖
相關文章：
1. javascript - jquery怎么給select option一個點擊時觸發的事件,如圖 如果選擇自定義觸發一個時間？2. java - android代碼重構：如何把app設置里的頭像UI做成通用的？3. 想找個php大神仿個網站。4. javascript - 怎樣限制同一個瀏覽器不能登錄兩個賬號5. java - 新手做一個安卓視頻播放器，想實現一個進度條，按鈕那種在視頻下方懸浮的功能，不知道思路！6. css3 - Typecho 后臺部分表單按鈕在 Chrome 下出現靈異動畫問題，求解決7. javascript - angular和jquery都用到了$符號，一起用會不會沖突？8. nginx配置server模塊的問題9. 如何將行內塊元素的內容垂直水平兩個方向居中？10. mysql優化 - 關于mysql分區
網公網安備