當前位置:首頁 » 網上購物 » css中ul前的圓點怎樣修改顏色
擴展閱讀
華為一體機2021新款怎樣 2024-11-18 12:15:37

css中ul前的圓點怎樣修改顏色

發布時間: 2022-06-27 23:10:11

『壹』 各位大俠CSS中list-style-type屬性前面小圓圈的顏色可以設置嗎系統默認是黑色的我想搞成紅的應怎麼設置

list-style的顏色可以自己根據需要設置,方法是給<ul>標簽加上color屬性值,這樣就會改變list-style 的顏色,並且不會影響文字的顏色:
例如:
html代碼為:<ul> <li><a href="#" title="百家合符">百家合符</li></ul>
css樣式代碼:ul {padding-left:15px;color:#d1c098;}
li {height:20px;line-height:20px;list-style:square;}
大小可以通過給<ul>標簽加font-size改變,不過存在兼容性問題(ie6不支持)
詳情可查考:http://blog.sina.com.cn/s/blog_6540a3c50100j3qi.html

『貳』 ul li標簽里的黑色圓點怎麼改成綠色

li{list-style:none}把默認的給去掉,然後把著了色的圓點切成一張背景圖片使用; li{background:url(圖點圖片路徑) no-repeat;}

『叄』 如何修改列表項li、ul前的圓點小方塊

解決思路:
在HTML中沒有相應的屬性可以設置該效果,但在CSS中可以,相應的屬性為list-style-type,要把圓點改成實心方塊,只需要設置list-style-type的值為square。
具體步驟:
代碼示例:

<ul style="list-style-type:square">
<li>list1
<li>list2
<li>list3
<li>list4
</ul>
技巧:想必大家都注意到,列表項離左邊有很大一段距離,利用前面學過的知識,設置margin-left屬性就行了:
<ul style="list-style-type:square;margin-left:12px">
<li>list1
<li>list2
<li>list3
<li>list4
</ul>
另外,如果要把小黑點換成自定義圖片,可以用list-style-image,用法:
list-style-image:url(demo.gif)
提示:對於列表項目,還有一個list-style-position屬性可以定義,主要用於設置列表項前的符號根據列表文字的排列方式,對應的腳本特性為listStylePosition。可選值的說明如下:
outside 列表項目符號在文本以外,文本不根據標記對齊。
inside 列表項目符號在文本以內,文本根據標記對齊。

可選值說明
none不使用項目符號
disc實心圓,默認值
circle空心圓
square實心方塊
decimal阿拉伯數字
lower-roman小寫羅馬數字
upper-roman大寫羅馬數字
lower-alpha小寫英文字母
upper-alpha大寫英文字母

『肆』 請問這個label選項前面的小圓點該怎麼用css設置成藍色啊(它本來是灰色的)

<div>
<p style="font-size:18px;margin-top:30px;color:rgba(0,0,0,0.44)">約嗎?</p>
<label class="demo--label">
<input class="demo--radio" type="radio" name="demo-radio">
<span class="demo--radioInput"></span>約
</label>
<label class="demo--label">
<input class="demo--radio" type="radio" name="demo-radio">
<span class="demo--radioInput"></span>不約,叔叔我們不約
</label>
</div>
.demo--label{margin:20px 20px 0 0;display:inline-block}
.demo--radio{display:none}
.demo--radioInput{background-color:#fff;border:1px solid rgba(0,0,0,0.15);border-radius:100%;display:inline-block;height:16px;margin-right:10px;margin-top:-1px;vertical-align:middle;width:16px;line-height:1}
.demo--radio:checked + .demo--radioInput:after{background-color:#57ad68;border-radius:100%;content:"";display:inline-block;height:12px;margin:2px;width:12px}
.demo--checkbox.demo--radioInput,.demo--radio:checked + .demo--checkbox.demo--radioInput:after{border-radius:0}

『伍』 在div+css中 咋么讓ul的那個圓黑點變色 變成方的

我建議你自己手動添加個方塊,這樣便於以後的更新維護。
先把list-style參數寫成none,然後li下邊寫兩個span 一個左浮動 另個順延,然後第一個里邊可以放方塊兒,第二個放文字,這樣以後想把方塊變成別的圖形,你就可以重新在第一個span里插入別的圖型。不知道我的回答你滿意不?

『陸』 css 中的li 裡面默認的黑色點如何換成紅色的,然後圓圈變大

上述樣式一般通過取消默認的list標記,然後以圖片的形式實現;但是,也可以直接設置li的樣式實現,思路是在li標簽下嵌套span標簽,然後將li的樣式設置為紅色,字型大小較大,而span為正常的樣式。下面給出後者的實例演示:

  1. 創建Html元素

    <divclass="box">
    <span>通過設置li及其子元素span的不同樣式將li默認的黑色標記改為紅色,且顯示較大:</span><br>
    <divclass="content">
    <ulclass="test">
    <li><span>Glen</span></li>
    <li><span>Tane</span></li>
    <li><span>John</span></li>
    <li><span>Ralph</span></li>
    </ul>
    </div>
    <divclass="content">
    <ul>
    <li>Glen</li>
    <li>Tane</li>
    <li>John</li>
    <li>Ralph</li>
    </ul>
    </div>
    </div>
  2. 設置css樣式

    div.box{width:300px;padding:20px;margin:20px;border:4pxdashed#ccc;}
    div.box>span{color:#999;font-style:italic;}
    div.content{width:250px;margin:10px0;padding:20px;border:2pxsolid#ff6666;}
    li{margin:5px0;}
    ul.testli{color:red;font-size:30px;}
    ul.testlispan{display:inline-block;color:black;font-size:16px;}
  3. 觀察對比效果

『柒』 如何修改列表項"li,ul"前的圓點小方塊

在HTML中沒有相應的屬性可以設置該效果,但在CSS中可以,

1,將圓點變成小方塊:相應的屬性為list-style-type,要把圓點改成實心方塊,只需要設置list-style-type的值為square。

eg:ul li {

list-style-type: square;

}

2,將小圓點換成自定義圖片:

eg:ul li{
list-style-type: none; /*先去掉黑點*/
background: url(http://***.gif)no-repeat center left; /*鏈接圖片地址*/
padding-left: 20px /*圖片的寬度,若不設置,圖標會被文字覆蓋*/
}

『捌』 看看怎麼用CSS去掉ul li前面的黑色小圓點方法

望採納!

ul,li,ol{

list-style:none;

}