javascript - 這種樣式該怎么書(shū)寫(xiě)
問(wèn)題描述
這種重復(fù)小點(diǎn) 大點(diǎn) 的樣式該怎么寫(xiě)呢，圓圈的個(gè)數(shù)是由右邊組件的高度和個(gè)數(shù)來(lái)決定的
問(wèn)題解答
回答1：最好有案例地址。從圖片的角度考慮：可能使用的是border-image,或者使用的背景圖(可能有個(gè)父容器放背景圖，里面有個(gè)子容器放內(nèi)容)，隨著子容器被撐高，父容器背景圖片顯示面積隨之增大。如果是代碼實(shí)現(xiàn)：先制作幾個(gè)圓，根據(jù)js動(dòng)態(tài)加圓的p
回答2：小點(diǎn)用邊框，dotted，大的當(dāng)前圓圈用右邊一行的背景圖做。
回答3：這是一種時(shí)間線的功能有相應(yīng)的插件戳
回答4：其實(shí)主要原理就是利用了css的 border-radius 屬性，一個(gè)塊元素（比如p）把這個(gè)屬性設(shè)置為50%，那么就顯示成了一個(gè)圓形。
至于空心的圓形，利用了border屬性，設(shè)置了邊框，邊框顏色和背景顏色不同。
以下代碼的實(shí)際效果可以在線看
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;}最終效果圖
相關(guān)文章：
1. 如何解決Centos下Docker服務(wù)啟動(dòng)無(wú)響應(yīng)，且輸入docker命令無(wú)響應(yīng)？2. 我在centos容器里安裝docker，也就是在容器里安裝容器，報(bào)錯(cuò)了？3. 微信小程序session無(wú)法緩存的問(wèn)題4. 怎么用 css3實(shí)現(xiàn)波浪底紋效果？5. vue.js - 關(guān)于Vue-cli項(xiàng)目在VPS中用Nginx部署完請(qǐng)求頁(yè)面app.js找不到提示404錯(cuò)誤。6. docker 17.03 怎么配置 registry mirror ?7. html - 這種錯(cuò)位的時(shí)間軸怎么布局，然后用css實(shí)現(xiàn)？8. 基于Nginx的Wordpress安裝失敗?9. css3 - 何時(shí)需要 flex-basis: 100% ？10. mysqld無(wú)法關(guān)閉
網(wǎng)公網(wǎng)安備