css样式设置

1.如何消去a标签的下划线：设置样式text-decoration：none；

<a href="http://www.nenu.edu.cn/main.htm" class="g">首页</a>

a{
	text-decoration: none;/*消去a标签的下划线*/
	color: #000;
}

2.如何设置鼠标滑过a标签时，字体的颜色和下划线重现：a：hover{color：red；text-decoretion：underline；}

<a href="http://www.nenu.edu.cn/main.htm" class="g">首页</a>

a:hover{
	color: red;
	text-decoration: underline;
}

3.如何使ul-li中li标签水平放置：（1）使li标签变成内联块状元素（2）使用float：left；

li{
	display: inline-block;
}

li{
    float:left;
}

(个人更偏向于第一种用法)

4.如何选中ul下li的奇数行和偶数行：

<style> 
#Ulist li:nth-of-type(odd){ margin-left: 20px;}/*奇数行*/  
#Ulist li:nth-of-type(even){margin-left: 10px;}/*偶数行*/  
<style> 
   
<ul id="Ulist"> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
<li>5</li> 
<li>6</li> 
</ul> 

5.如何消去li标签前面的点：list-style: none;

li{
    list-style: none;
}

6.如何消去水平li标签的间距：

若将li标签设置为水平排列，当你为背景设置颜色时，会发生如下问题：

空隙会占用距离，导致原本设置好的宽度加上被占用的空间发生溢出，右边的块被挤到下一行，使布局变得混乱。

解决办法：

首先设置ul标签内的font-size为0，然后设置li标签内的font-size来覆盖，如下：

ul{
	font-size: 0;
	padding: 0;
}

li{
	list-style: none;
	height: 50px;
	padding: 0;
	margin: 0;
	line-height: 50px;/*设置文字垂直居中*/
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 15px;
}

效果如下：

若只设置了ul而不设置li，则会显示以下画面：