189 8069 5689

cssli的样式,css基本样式

怎样才能用css控制第一个li标签的样式,和其他li的样式不同

css控制第一个li标签的样式,和其他li的样式不同:给第一个li标签添加class或者id,然后编写css代码。

十年的新河网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。成都营销网站建设的优势是能够根据用户设备显示端的尺寸不同,自动调整新河建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。成都创新互联从事“新河网站设计”,“新河网站推广”以来,每个客户项目都认真落实执行。

html:给第一个li元素添加一个class类名为“menu1”。

html:

ul

li class=“menu1”新闻一/li

li新闻二/li

li新闻三/li

/ul

css代码:

li{font-size:14px;} //4px大小的字体

.menu1{font-size:18px;font-weight:bold;} //字体样式:粗体18px字体

效果:

怎样定义《li》标签的css样式呢?

你自己看看它的CSS。学一学。

body,p,dl,dd,table,td,th,input,img,form,div,ul,li{margin:0;padding:0;}

body{max-height:100%;TODO:height:100%;background:#FFFFFF url(../images/chunjie/bg.gif) repeat-x fixed top;background-

attachment:scroll;font-size:14px;margin:auto;font-family:"??ì?";text-align:center;}

img,iframe{border:none;}

ul,li,ol{list-style:none;}

img,input,label,span{vertical-align:middle;}

table{border-collapse:collapse;border-spacing:0;}

a:link,a:visited{text-decoration:none;color:#000;}

a:hover{text-decoration:underline;color:#F00;}

#main{width:990px;margin:0 auto;border-top:0;}

#header{margin-bottom:5px;}

#aside{float:left;width:220px;background:url("../images/line.gif");}

#content{margin-left:-220px;width:765px;float:right;}

.usrbar{height:22px;border:1px solid #DAE9F7;background:#F0F7FF;font-size:13px;line-height:22px;}

.usrbar table{width:100%;color:#666;}

.usrbar td{text-align:left;}

.usrbar a:link,.usrbar a:visited{color:#666;}

#Forecast{margin-left:20px;}

.mail{text-align:left;height:70px;border-bottom:3px solid #7fd479;font-size:12px;}

.mail table{height:100%;}

.mail table tr{line-height:22px;}

.nav{border-top:1px solid #3CB738;padding-top:12px;text-align:left;}

.ns td{font-size:13px;width:55px;border-right:3px solid #FCFFF7;background:#E8ECE8;text-align:center;line-

height:18px;cursor:pointer;}

.ns .clean{background:#FCFFF7;cursor:auto;}

.ns .cur{background:#38B830;font-weight:bold;color:#F8FCF0;}

.ns a:link,.ns a:visited{color:#687070;}

.ns dl{line-height:14px;height:14px;vertical-align:middle;cursor:pointer;border:1px solid #fff;}

.ns dt{float:right;background:url("../images/dropdown.gif");width:14px;height:14px;}

.ns dd{float:left;margin-left:3px;}

.sch{width:100%;border:1px solid #78D470;background:url("../images/line.gif");height:48px;text-align:left;font-size:13px;}

.bottom th input,.sch input{height:1.40em;width:355px;font-size:16px;padding-left:2px;padding-top:3px;}

.bottom th button,.sch button{height:2.3em;width:6.8em;font-size:14px;line-height:2.0em;}

#aside table{margin:8px 0 0 10px;}

#aside th{text-align:left;height:30px;}

#aside th a:link,#aside th a:visited{color:#3DB836;}

#aside td{width:50px;height:31px;text-align:left;}

.hot{width:100%;}

.hot td{width:16.6%;height:30px;}

.middle{font-size:12px;line-height:19px;border-left:2px solid #7BD676;border-right:2px solid #7BD676;}

.middle a:link,.middle a:visited{color:#083C80;}

.sort{height:550px;}

.sort th,.sort td{font-size:13px;height:24px;line-height:24px;*line-height:23.5px;border-bottom:1px solid #FCFFF7;;border-

right:1px solid #FCFFF7;}

.sort th a:link,.sort th a:visited{color:#874604;}

.sort a{margin-left:20px;zoom:1;}

.sort .s_widen a{margin-left:28px;zoom:1;}

.sort .s_big_widen a{margin-left:35px;zoom:1;}

.bottom .pa1 b a,.bottom .pa2 b a,.bottom .pa3 b a{margin:0;}

.sort b a,.sort th a{margin:0;}

.sort th,.sort b{font-style:normal;font-weight:normal;margin:0;}

.bg1{background:#FFF8F0;}

.bg2{background:#F0F7FF;}

.bottom{text-align:left;}

.bottom p{margin-left:20px;line-height:24px;font-size:13px;}

.bottom .pa1 a{margin-right:18.5px;zoom:1;}

.bottom .pa2 a{margin-right:15px;zoom:1;}

.bottom .pa3 a{margin-right:14px;zoom:1;}

.bottom .pa1 b a,.bottom .pa2 b a,.bottom .pa3 b a{margin:0;}

.bottom a:link,.bottom a:visited{color:#205001;}

.bottom table{width:100%;background:#F0F7FF;border-top:1px solid #DAE9F7;line-height:42px;height:42px;padding-

left:40px;padding-top:5px;}

.bottom button{margin-left:10px;vertical-align:middle;}

.bottom th input{width:260px;vertical-align:middle;font-size:16px;padding-left:2px;}

.bottom th{font-weight:normal;padding-left:20px;}

.bottom td{width:77px;color:#205001;}

.bottom td input{margin-bottom:3px;margin-right:3px;}

#footer{font-size:13px;vertical-align:middle;margin:10px 0;line-height:24px;}

#footer img{vertical-align:auto;}

.div_border{border:2px solid #7BD676;}

.clear{clear:both;}

a.f1:link,a.f1:visited{color:#F85050;}

a.f2:link,a.f2:visited{color:#108410;}

a.f3:link,a.f3:visited{color:#FF3D14;}

.bottom a:hover,.sort th a:hover,#aside th a:hover,.usrbar a:hover,.middle a:hover,a.f1:hover,a.f2:hover{color:#f00;}

#hao_mail_options{width:174px;}

#hao_mail_username{width:168px; padding-left:2px}

#hao_more_popup{position:absolute;float:left;z-index:65536;width:58px;border:1px solid #B0BEC7;text-

align:left;background:#fff;margin-top:3px;}

#hao_more_popup li{line-height:20px;}

#hao_more_popup a{color:#000;text-decoration:none;display:block;padding-left:3px;}

#hao_more_popup a:hover{color:#fff;background:#316AC5;}

#hao_my_like,#hao_my_site{display:none;text-align:left;line-height:24px;border:1px solid #DDDDC5;background:#F9F9ED;font-

size:13px;padding-left:10px;}

#hao_my_like a,#hao_my_site a{color:#444;margin-left:10px;}

#sugOut{position:relative;}

#sug{position:absolute;float:left;left:0;top:0;border:1px solid #817F82;display:none;-moz-user-select:none;z-index:1001;}

#sug td{line-height:22px;height:22px;padding-left:3px;font:14px verdana;}

.mo td{background-color:#36c;color:#fff;}

.ml td{border:0 solid #fff;background-color:#fff;color:#000;}

#sug_t a:link,#sug_t a:visited,#sug_t a:hover{text-decoration:none;font-size:14px;color:#000;width:100%;display:block;}

.ft18{font-size:14px;}

css控制ul标签下li样式

在ul标签下li的默认样式为一个实心圆(disc)   可忽略不写

li样式的改变是用 list-style:属性值 来改变的

我们给li设置css,去除默认样式(实心圆)

将li的样式设置为空心圆

将li的样式设置为实心正方形

其他:

decimal   :   CSS1 阿拉伯数字

lower-roman   :   CSS1 小写罗马数字  

upper-roman   :   CSS1 大写罗马数字  

lower-alpha   :   CSS1 小写英文字母  

upper-alpha   :   CSS1 大写英文字母  

armenian   :   CSS2 传统的亚美尼亚数字  

cjk-ideographic   :   CSS2 浅白的表意数字  

georgian   :   CSS2 传统的乔治数字  

lower-greek   :   CSS2 基本的希腊小写字母 

hebrew   :   CSS2 传统的希伯莱数字  

hiragana   :   CSS2 日文平假名字符  

hiragana-iroha   :   CSS2 日文平假名序号  

katakana   :   CSS2 日文片假名字符  

katakana-iroha   :   CSS2 日文片假名序号  

lower-latin   :   CSS2 小写拉丁字母  

upper-latin   :  CSS2 大写拉丁字母 

css样式修改li水平显示

将li的样式设置成以下例子:display:inline;line-height:24px;height:auto;word-break:break-all;word-wrap : break-word ;可以修改一下,到适合你的要求。

CSS li的图片样式

1、css li的图片样式:liimg src="" class="img"/li

2、样式: .img{width:100px; height:100px; background:#f00;}

css样式中的li

表示和当前li同级的所有li标签。不包括父级li和子级li。

另外常用的还有lili:这个表示当前li的子级li标签。


名称栏目:cssli的样式,css基本样式
转载源于:http://cdxtjz.com/article/phiccj.html

其他资讯