如何修改列表项li、ul前的圆点小方块 看看怎么用CSS去掉ul li前面的黑色小圆点方法
\u5728css\u4e2d\u8bbe\u7f6eul\u6837\u5f0f\uff0cli\u7684\u524d\u9762\u9ed8\u8ba4\u4f1a\u51fa\u73b0\u9ed1\u8272\u5706\u70b9\uff0c\u600e\u6837\u4fee\u6539\u5706\u70b9\u7684\u989c\u8272\u2026\u2026\u6c42\u89e3li\u81ea\u8eab\u5706\u70b9\u7684\u989c\u8272\u662f\u4fee\u6539\u4e0d\u4e86\u7684\uff0c\u4f60\u4e0d\u60f3\u8981\u90a3\u4e2a\u5706\u70b9\u7684\u8bdd\uff0c\u53ef\u4ee5\u901a\u8fc7\u4ee5\u4e0b\u51e0\u79cd\u65b9\u5f0f\u6765\u89e3\u51b3\u3002
1.\u5c06\u5706\u70b9\u53bb\u6389\uff0cli{ list-style:none}\uff1b\u7136\u540e\u7528color:#ff0000;\u8bbe\u7f6e\u5b57\u4f53\u7684\u989c\u8272\u3002.\u8fd9\u91cc\u7684\u70b9\u5c31\u662f\u7ea2\u8272\u7684\u4e86\uff0c\u4f60\u53ef\u4ee5\u8bbe\u7f6e\u4e3a\u81ea\u5df1\u559c\u6b22\u7684\u989c\u8272\uff0c\u5982\u679c\u4f60\u8981\u533a\u5206\u70b9\u548c\u5b57\u7684\u989c\u8272\uff0c\u53ef\u4ee5\u5728li\u91cc\u9762\u518d\u5d4c\u5165\u4e00\u4e2a\u6807\u7b7e\uff0c\u50cf\u8fd9\u6837\uff1a.list1\u8fd9\u6837\u70b9\u5c31\u662f\u7eff\u8272\u7684\uff0c\u5b57\u5c31\u662f\u7ea2\u8272\u7684\u4e86\u3002
2.\u5c06\u5706\u70b9\u53bb\u6389\uff0cli{ list-style:none}\uff1b\u7136\u540e\u5c06\u90a3\u4e2a\u70b9\u505a\u6210\u56fe\u7247\uff0c\u7136\u540e\u5d4c\u5165li\u4e2d\u3002\uff1alist1\u3002
\u5e0c\u671b\u5bf9\u4f60\u6709\u7528\u54e6\uff0c\u4e0d\u61c2\u7684\u518dhi\u6211
\u5728\u5199\u5177\u4f53\u6837\u5f0f\u7684\u65f6\u5019\u6700\u597d\u628a\u4e00\u8d77\u4e00\u822c\u4e0d\u7528\u7684\u57fa\u7840\u6837\u5f0f\u7ed9\u91cd\u7f6e\u4e86\u3002\u5305\u62ecli\u7684
li{list-style:none;}
在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大写英文字母
在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 /*图片的宽度，若不设置，图标会被文字覆盖*/
}
应 的属性list-style-type 应应 应 应 应应 应 应 ，要把 点改成 心方 解 思路： 决 在HTML 中 有相项的 性可以项置项效果，但在 没 属 CSS 中可以，相项的 性项 属 list-style- type，要把项点改成项心方项，只需要项置list-style-type 的项项 square。 具 步项： 体代项示例：ullilist1lilist2lilist3lilist4/ul技巧：想必大家都注意到，列表项 左项有 大一段距 ，利用前面 项的知项，项置 离 很 离 学 margin-left 性就行了： 属ullilist1lilist2lilist3lilist4/ul外，如果要把小黑点项成自定项项片，可以用 另 list-style-image，用法： list-style-image:url 提示：项于列表项目，项有一个list-style-position 性可以定项，主要用于项置列表项前的 属 符 根据列表文字的排列方式，项项的脚本特性项 号 listStylePosition。可项项的项明 outside 列表项目符 在文本以外，文本不根据项项项项。 号 inside 列表项目符 在文本以 ，文本根据项项项项。 号 内特项提示本例代项 行效果如项 运 2.1.6.9 所示，原本项项心项点的列表符 项在已项项成了项心方项。 号 项 2.1.6.9 自定项列表项前的符 号特项项明list-style-type 性用于项置列表项目前的符 ，项项的脚本特性项 属 号 listStyType，可项项及项明 如表2.1.6.1 所示。list-style-image 性用于项置列表项目前的自定项项片，项项的脚本特性项 属 listStyleImage。如果同项项置list-style-image 和list-style-type，项 list-style-type 性 被忽略 属 将 ， 除非list-style-image 的项项置项 none 或指定的项片不可用，list-style-type 才有作用。list-style- type、list-style-position 和list-style-image 的项合 性项 属 list-style。 表2.1.6.1list-style-type 性的可项项 属可项项项明none 不使用项目符 号 disc 项心项，默项项 circle 空心项 square 项心方项 decimal 阿拉伯 字 数 lower-roman 小 项项项 字 写 数
绛旓細鍒朵綔涓涓綘闇瑕佹樉绀洪鑹茬殑鍦嗙偣銆<style> .item1 ul{list-style:none} .item1 li{padding-left:20px;background:url(鍦嗙偣鍥剧墖鍦板潃)no-repeat} </style> <div class=item1> <ul> <li>杩欎釜鍓嶉潰浼氭樉绀轰綘鍒朵綔鐨勫渾鐐癸紝涔熷彲浠ョ綉涓婃壘杩欐牱鐨勫浘鐗囥</li> <li>paddin-left:20px鏁板煎彲鏍规嵁瑕佹眰杩涜璋冩暣...
绛旓細list-style鍙互瀹氫箟ul銆乷l涓li鐨鏍峰紡锛屽皢list-style璁句负disc鍗冲彲锛屾鍊间负榛樿鍊硷紝濡傛灉娌℃湁缁ф壙鍏崇郴锛岄粯璁ゅ氨浼氭樉绀哄疄蹇冨渾鐐广俵ist-style鐢ㄦ硶濡備笅锛歭ist-style 绠鍐欏睘鎬у湪涓涓０鏄庝腑璁剧疆鎵鏈夌殑鍒楄〃灞炴с傝灞炴ф槸涓涓畝鍐欏睘鎬э紝娑电洊浜嗘墍鏈夊叾浠栧垪琛ㄦ牱寮忓睘鎬с傜敱浜庡畠搴旂敤鍒版墍鏈 display 涓 list-item 鐨勫厓绱狅紝...
绛旓細鍦ㄧ浉鍏崇殑椤甸潰鎵惧埌head閮ㄥ垎鍐欏叆<style type="text/css">list-style:none;</style>锛岀粰li鍔犱笂 list-style-type:none杩欎釜鏍峰紡灏卞彲浠ヤ簡娑堥櫎榛戠偣銆傚叿浣撴楠ゅ涓嬶細1.杩欎釜鏍囩鏈韩鑷甫灞炴锛屽墠闈鏈夊皬鍦嗙偣鏄畠鐨勫疄闄呯殑鏁堟灉锛屽涓嬪浘銆2.鍔犱笂 li{list-style-type:none;} 鏍峰紡涔嬪悗鍦ㄩ〉闈笂鐨勬樉绀烘晥鏋溿
绛旓細浜х敓杩欎釜鍦嗙偣鍙互浠ヤ笅鍘熷洜锛1銆佹槸鐢变簬li鏍囩榛樿鐨勬爣绛 渚嬪锛<li><a href="#">閾炬帴</a></li> 榛樿鎯呭喌涓,li鏍囩浼氭湁涓涓粯璁ょ殑灏忓渾鐐癸紝姝ゆ椂瑕佸幓鎺夎繖涓渾鐐癸紝鍙互鍔犱笂 <style>li{list-style:none}</style> 灏卞彲浠ヤ簡 2銆佸彟涓绉嶅氨鏄綘鍦ㄩ摼鎺ヤ腑鍔犲叆浜嗙浉搴旂殑鑳屾櫙锛屾壘鍒扮浉搴旂殑杩欎釜鑳屾櫙鏍峰紡锛屽幓鎺...
绛旓細鐪嬭繖涓緥瀛愶紝鎴戠敤鏃犲簭鍒楄〃鍐欎簡鍙や唬鍥涘ぇ缇庡コ鐨勫悕瀛楋紝鐪嬬湅娌℃湁鍘婚櫎鍒楄〃鏍峰紡鏃讹紝鏄粈涔堟晥鏋溿<ul> <li>瑗挎柦</li> <li>鐜嬫槶鍚</li> <li>璨傝潐</li> <li>鏉ㄧ帀鐜</li> </ul> 鐜板湪锛屾垜涓嶉渶瑕鍒楄〃鍓嶉潰鐨鐐圭偣锛屽簲璇ュ浣曞幓闄ゅ憿锛熸帴涓嬫潵浠嬬粛鍑犵鍘婚櫎鍒楄〃鍓嶉潰灏忓渾鐐圭殑鏂规硶銆1銆佸湪CSS涓啓涓 list-...
绛旓細鍘绘帀鍒楄〃椤瑰墠鐨灏忓渾鐐癸紝浣犵殑鍐欐硶涓嶆纭紝搴旇鍦╰.css閲岄潰鍐ul{list-style-type:none;}
绛旓細css鎺у埗li鍜ul鐨杈硅窛,鍙互浣跨敤margin灞炴ф潵瀹炵幇鎴栬卲adding灞炴ч兘鍙互锛屽湪璁剧疆width鍜宧eight灞炴ф椂锛岃绠楀ソ鍚勮嚜鐨勮窛绂伙紝鐒跺悗璁剧疆澶氬皯px灏卞彲浠ュ疄鐜帮紝涓嬮潰浠嬬粛浜嗕竴涓嬬畝鍗曠殑鎺у埗鍜屽幓鎺li鍓嶉潰鍦嗙偣鐨勬柟娉 涓銆丆SS鎺у埗ul缂╄繘闂磋窛鐨勬柟娉曪細<style type="text/css"> ul{margin-left:-10px;} </style> <ul> <li...
绛旓細li{list-style:none}鎶婇粯璁ょ殑缁欏幓鎺夛紝鐒跺悗鎶婄潃浜嗚壊鐨勫渾鐐瑰垏鎴愪竴寮犺儗鏅浘鐗囦娇鐢紱 li{background:url(鍥剧偣鍥剧墖璺緞) no-repeat;}
绛旓細鍦╟ss涓彲浠ヤ娇鐢ㄢ渓ist-style-type: none;鈥濆幓鎺ul li鏍囩鍓嶉粯璁ゅ瓨鍦ㄧ殑涓涓皬鐐癸紝鍏垛渓ist-style-type鈥濈敤浜庤缃鍒楄〃椤鏍囪鐨勭被鍨嬨傛湰鏂囨搷浣滅幆澧冿細windows7绯荤粺銆丠TML5&&CSS3鐗堛丏ell G3鐢佃剳銆俢ss鍘绘帀 ul li鏍囩鐨鍓嶇殑鐐 寮鍙戜腑ul li鏍囩鍓嶉粯璁ゅ瓨鍦ㄤ竴涓皬鐐癸紝鍘绘帀榛樿鐐逛娇鐢╨ist-style-type: none;...
绛旓細鍒涘缓Html鍏冪礌 <div class="box"><span>閫氳繃璁剧疆li鍙婂叾瀛愬厓绱爏pan鐨勪笉鍚屾牱寮忓皢li榛樿鐨勯粦鑹叉爣璁鏀涓虹孩鑹诧紝涓旀樉绀鸿緝澶э細</span><br><div class="content"><ul class="test"> <li><span>Glen</span></li> <li><span>Tane</span></li> <li><span>John</span></li> <li><span>...
