STU网页设计

使用CSS单独设置不同li标签样式的方法

更新时间:2020-04-14   文章分类:网页技术课堂

在制作网页设计时,有时候怎需要用css控制第一个li标签 或者 某个的样式,和其他li的样式不同,可以参考以下方法。

单独设置第几个LI的样式,实例:
.contact-sub {
	display: inline-block;
	width: 30%;
	margin-bottom: 35px;
	position: relative;
	line-height: 26px;
	padding-left: 40px;
	padding-right: 15px;
	vertical-align: top
}
.contact-sub:nth-child(2n) {
	width: 70%
}


偶数个和奇数个li标签单独设置样式,实例:
.center_top_right ul li:nth-child(odd){   //奇数
    list-style: none;
    width: 90px;
    height: 70px;
    float: right;
}
.center_top_right ul li:nth-child(even){   //偶数
    list-style: none;
    width: 10px;
    height: 70px;
    color: #666;  
    float: right;
}

STU网页公众号

STU网页设计专注于DW网页设计制作,学生网页设计作业,简单网页模板下载,HTML静态网页成品,网页设计代做,网站作品定制,网页毕业设计制作,学生dreamweaver网页成品...

qq code back_top

微信扫码咨询