ulcss样式,css ul li 漂亮样式

1、如何用CSS设置ul，使其在div中li靠左对齐？ul有默认的左边距。2、和设置ul的标签样式的大小

1、在ul样式中设置文本居左对齐。

ul {

padding:0;

margin:0;

text-align: left;

list-style-type: none;

}

2、标签大小不同，可以用自定义的背景图片代替标签样式。

ul li

{

background-image:url(sqpurple.gif);

background-repeat:no-repeat;

background-position:0px 5px;

padding-left:14px;

}

扩展资料：

控制ul下具体的li:

1、ul li:first-child{ }

第一个li

2、ul li:last-child{ }

最后一个li

3、ul li:nth-child(4){ }

指定第几个,4就是代表第四个li

4、ul li:nth-child(2n+1){background:red;}

匹配第1、第3、第5、…个li

5、ul li:nth-child(odd){background:red;}

奇数的li

6、ul li:nth-child(even){background:red;}

偶数的li

相关问答

Q1: 使用ul标签和css制作导航条

直接上个实例吧：

第一步，打开软件Adobe Dreamweave CS6，创建一个新的HTML。

第二步，在工作区域（body）用标签 ul 和 li 输入导航的内容。

第三，编辑样式CSS。在标签head/head之间写入样式表。，

第四，紧接上一步。由于无线序列具有默认样式，前面的圆点（），所以先写去除默认样式的样式。样式为：ul,li { list-style:none; list-style-type:none; padding:0; margin:0;} /*清除ul,li的默认样式*/

第五，由于默认的无序列表是竖排的，所以需要为其添加浮动，同时编辑宽度和距离等样式。添加样式为：  ul li { float:left; width:80px; height:30px; background:#900; line-height:30px; text-align:center; margin-right:2px; color:#fff;} 效果，

第六，如果需要为导航添加链接（），同时获得鼠标滑过效果，即需要对 "a"为标签编写样式。样式为：   ul li a { display:block; height:30px; text-decoration:none; color:#fff;} ul li a:hover { background:#999;}

最终预览效果。

完整代码：

htmlhead

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

title无标题文档/title

style  ul,li { list-style:none; list-style-type:none; padding:0; margin:0;} /*清除ul,li的默认样式*/  

ul li { float:left;width:100px; height:30px; background:#900; line-height:30px; text-align:center; margin-right:2px; }  

ul li a { display:block; height:30px; text-decoration:none; color:#fff;}  ul li a:hover { background:#999;}

/style/head

body  ul       

lia href="#"导航一/a/li    lia href="#"导航二/a/li    lia href="#"导航三/a/li    lia href="#"导航四/a/li    lia href="#"导航五/a/li    /ul/body/html

Q2: 在css中设置ul样式，li的前面默认会出现黑色圆点，怎样修改圆点的颜色……求解

li自身圆点的颜色是修改不了的，你不想要那个圆点的话，可以通过以下几种方式来解决。

1.将圆点去掉，li{ list-style:none}；然后用color:#ff0000;设置字体的颜色。li./li这里的点就是红色的了，你可以设置为自己喜欢的颜色，如果你要区分点和字的颜色，可以在li里面再嵌入一个标签，像这样：li style="color:#ff0000; font-size:12px;"span style="color:#00ff00; font-size:20px;"./spanlist1/li这样点就是绿色的，字就是红色的了。

2.将圆点去掉，li{ list-style:none}；然后将那个点做成图片，然后嵌入li中。：li style="color:#ff0000; font-size:12pximg src="图片地址"list1/li。

希望对你有用哦，不懂的再hi我