For a lot of people use Div to do the site, always use, but in the display of the effect there will always be a small black spot, this makes a lot of people headache, but can not find the source, others we may use the following methods to clear.
1. Write code in CSS. Find the relevant CSS, write List-sytle:none under. Li and. UL; of course, some of them write list-style-type:none, which is especially common in some CMS.
2, find the Head section on the relevant page to write the following code
<style type= "Text/css" >
List-style:none;
</style>
3, add List-style within Li,ul. such as <ul style= "List-style-type:none><li><a herf=" http://blog.csdn.net/business122 "> My blog </a> </li></ul> Of course this is a lot of trouble.
The simplest is the first, through the CSS to control, of course, it will have a good effect.
These methods are set by setting List-style:none, some will use List-style-type, let's take a look at its properties.
None do not use bullets
Disc solid circle, default value
Circle Hollow Circle
Square Solid Square
Decimal Arabic Numerals
Lower-roman Lowercase Roman Numerals
Upper-roman Capital Roman Numerals
Lower-alpha lowercase English alphabet
Upper-alpha Capital English alphabet
These can be substituted for none above, and what you want will have a corresponding correspondence.
A). Using CSS formatting list characters: UL li{
List-style-type:none;
}
B). If you want to replace the list symbol with an image, then: UL li{
List-style-type:none;
List-style-image:url (images/icon.gif);
}
C). To align Left, you can use the following code: ul{
List-style-type:none;
margin:0px;
}
D). If you want to add a background color to the list, you can use the following code: ul{
List-style-type:none;
margin:0px;
}
UL li{
Background: #CCC;
}
E). If you want to add a mouseover background color effect to the list, you can use the following code: ul{list-style-type:none; margin:0px;}
UL Li a{display:block; width:100%; background: #ccc;}
UL Li a:hover{background: #999;} Description: Display:block; this line must be added in order to block the display!
F). The elements in Li are arranged horizontally, the key float:left:ul{
List-style-type:none;
width:100%;
}
<li class= "alt" ><span><span> for a lot of people use Div to do the website, always use, but in front of the display effect will always have a small black spot, this makes many people headache, but can not find the source, Other we can use the following methods to clear. </span></span></li><li class= "" ><span><span class= "value" >1</span><span> write code in CSS. Find the relevant CSS, write List-sytle:</span><span class= "value" under: Li and. UL >none</span><span>; of course some of them will write like this. </span><span class= "keyword" >list-style-type</span><span>:</span><span class= " Value >none</span><span>, This notation is most common in some CMS, especially. </span></span></li><li class= "alt" ><span><span class= "value >2</span><span>, locate the head section on the related page and write the following code </span></span></li> <li class= "" ><span><style type=<span class= "string" > "Text/css" </span>< Span>> </span></span></li><li class= "alt" ><span><span class= "keyword" >list-style</span><span>:</span><span class= "value" >none</span> <span>; </span></span></li><li class= "" ><span></style > </span></li><li class= "alt" ><span><span class= "value" >3 </span><span> add List-style to Li,ul. such as <ul style=</span><span class= "string" > "list-style-type:none><li><a& nbsp;herf= "</span><span>http://blog.csdn.net/business</span><span class=" value ">122< /span><span> "> My blog </a></li>< /ul> of course this is a lot of trouble. </span></span></li><li class= "" ><span> The simplest is the first kind, controlled by CSS, This will certainly have a good effect. </span></li><li class= "Alt" ><span> these methods are set by <span class= "keyword ">list-style</span><span>:</span><span class=" value "≫none</span><span> to set, some will use List-style-type, let's take a look at its properties. </span></ Span></li><li class= "" ><span><span class= "value" >none</span><span> not using bullets </span></span></li><li class= "alt" ><span><span class= "value ">disc</span><span> solid Circle, default value </span></span></li><li class= "" ><span><span class= "value" >circle</span><span> Hollow Circle </span> </span></li><li class= "alt" ><span><span class= "value" >square</span><span > Solid block </span></span></li><li class= "" ><span><span class= " Value ">decimal</span><span> Arabic numerals </span></span></li><li class= "alt" ><span><span class= "value" >lower-roman</span><span> lowercase roman numerals &nBsp;</span></span></li><li class= "" ><span><span class= "value" >upper-roman </span><span> Capital Roman numerals </span></span></li><li class= "alt" > <span><span class= "value" >lower-alpha</span><span> lowercase English letter </span ></span></li><li class= "" ><span><span class= "value" >upper-alpha</span> <span> uppercase English alphabet </span></span></li><li class= "alt" ><span> These can be substituted for the above <span class= "value" >none</span><span>, and what you want will have a corresponding counterpart. </span></span></li><li class= "" ><span> </span></li><li class= "alt" ><span> A). Use CSS format list break: ul li{ </span></li><li class= "" ><span ><span class= "keyword" >list-style-type</span><span>:</span><span class= "Value" >none</span><span>; </span></span></ Li><li class= "alt" ><span>} </span></li><li class= "" ><span >B). If you want to change the list character to an image, then: ul li{ </span></li><li class= "alt" ><span><span class= "keyword" >list-style-type</span><span>:</span><span class = "Value" >none</span><span>; </span></span></li><li class = "" ><span><span class= "keyword" >list-style-image</span><span>: </span ><span class= "Value" >url</span><span> (Images/</span><span class= "value" >icon </span><span>.gif); </span></span></li><li class= "Alt" > <span>} </span></li><li class= "" ><span>c). To align Left, you can use the following code:& nbsp;ul{ </span></li><li class= "alt" ><span><span class= "keyword" > List-style-type</span><span>:</span><span class= "Value" >none</span><span>; </span></span></li><li class= "" ><span><span class= "keyword" >margin</span><span>:</span><span class= "Value" >0px</span><span>;& Nbsp; </span></span></li><li class= "alt" ><span>} < /span></li><li class= "" ><span>d). If you want to add a background color to the list, you can use the following code: ul{ </ Span></li><li class= "alt" ><span><span class= "keyword" >list-style-type</span> <span>: </span><span class= "Value" >none</span><span>;   ; </span></span></li><li class= "" ><span><span class= "keyword" >margin</span ><sPan>:</span><span class= "Value" >0px</span><span>; </span> </span></li><li class= "alt" ><span>} </span></li><li Class= "" ><span>ul li{ </span></li><li class= "alt" >< Span><span class= "keyword" >background</span><span>:</span><span class= "value" ># Ccc</span><span>; </span></span></li><li class= "" >< Span>} </span></li><li class= "alt" ><span>e). If you want to add the mouseover background color effect to the list, you can use the following code: ul{ <span class= "keyword" >list-style-type</span> <span>: </span><span class= "Value" >none</span><span>; </span ><span class= "keyword" >margin</span><span>:</span><span class= "value" >0px</ Span><span>;&nbsP;} </span></span></li><li class= "" ><span>ul li  ; A{ <span class= "keyword" >display</span><span>:</span><span class= "value" >block</span><span>; </span><span class= "keyword" >width</span>< Span>: </span><span class= "Value" >100%</span><span>; </span> <span class= "keyword" >background</span><span>:</span><span class= "value" > #ccc </ span><span>; } </span></span></li><li class= "alt" ><span>ul li& Nbsp;a:hover{ <span class= "keyword" >background</span><span>:</span><span class= "Value" > #999 </span><span>; } Description: </span><span class= "keyword" >display</span><span>:</span><span class= "value" >block</span><span>; This line must be added, so as to block display! </span></span></li><li class= "" ><span> </span></li><li class= "alt" ><span>f). The elements in Li are arranged horizontally, the key Float:left: ul{ </span></li><li class= "" ><span ><span class= "keyword" >list-style-type</span><span>:</span><span class= "value" > None</span><span>; </span></span></li><li class= "Alt" > <span><span class= "keyword" >width</span><span>:</span><span class= "value" > 100%</span><span>; </span></span></li><li class= "" >< Span>} </span></li>
2016/4/17 removal of UL ol pre-Mark List-style:none List-style-type:none