ulcss样式,css ul li 漂亮样式
1、如何用CSS设置ul,使其在div中li靠左对齐?ul有默认的左边距。2、和设置ul的标签样式的大小
1、在ul样式中设置文本居左对齐。
成都创新互联公司主要从事网站设计、成都网站设计、网页设计、企业做网站、公司建网站等业务。立足成都服务肃北,十多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108
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
使用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
在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我
分享标题:ulcss样式,css ul li 漂亮样式
文章地址:http://pwwzsj.com/article/dsscjsd.html