下面是个简单易学的DIV+CSS 中UL,LI的运用教程,图老师小编详细图解介绍包你轻松学会,喜欢的朋友赶紧get起来吧!
【 tulaoshi.com - Web开发 】
在做导航条或产品目录的样式都差不时习惯用到ul,在做圆角这样的图形我也喜欢,用到他们可以最小化减少DIV的套用。但有几个地方需要在CSS控制,不然会出现左边会出现很大的空边。
(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)下面是登陆窗口的CSS代码,为了避免DIV的嵌套,所以运用了DIV.开始未对ul进行定义,只对ul li进行定义,结果左边空出很大的空隔,看来偷懒是不行的。
#login{
width:217px;
height:150px;
margin:0;
padding:0;
border:#ff0000 solid 1px;
}
#login ul {
list-style:none;
margin:0px;
padding:0px;
}
#login ul li{
margin:0;
padding:0;
}
#login #log_t{
width:217px;
height:36px;
background:url('log_t.jpg') no-repeat;
}
#login #log_m{
width:217px;
height:63px;
background:url('log_m.jpg') no-repeat;
}
#login #log_b{
width:217px;
height:49px;
background:url('log_b.jpg') no-repeat;
}
今天发现ul里最好设置好padding和margin的值,不然IE和FIREFOX默认是有设置的。
(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)来源:http://www.tulaoshi.com/n/20160219/1613820.html
看过《DIV+CSS 中UL,LI的运用》的人还看了以下文章 更多>>