css中li定义

html-css010

css中li定义,第1张

抱歉 说错了

无序列表中的子标签 结构为

<ul>

<li></li>

</ul>

作用:基本用途不用说了。在现今的网页设计中为了确保网页的良好结构,我们一般用li来组织网页的导航按钮,不提倡简单的将一堆a放在一起。

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

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

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

attachment:scrollfont-size:14pxmargin:autofont-family:"??ì?"text-align:center}

img,iframe{border:none}

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

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

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

a:link,a:visited{text-decoration:nonecolor:#000}

a:hover{text-decoration:underlinecolor:#F00}

#main{width:990pxmargin:0 autoborder-top:0}

#header{margin-bottom:5px}

#aside{float:leftwidth:220pxbackground:url("../images/line.gif")}

#content{margin-left:-220pxwidth:765pxfloat:right}

.usrbar{height:22pxborder:1px solid #DAE9F7background:#F0F7FFfont-size:13pxline-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:leftheight:70pxborder-bottom:3px solid #7fd479font-size:12px}

.mail table{height:100%}

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

.nav{border-top:1px solid #3CB738padding-top:12pxtext-align:left}

.ns td{font-size:13pxwidth:55pxborder-right:3px solid #FCFFF7background:#E8ECE8text-align:centerline-

height:18pxcursor:pointer}

.ns .clean{background:#FCFFF7cursor:auto}

.ns .cur{background:#38B830font-weight:boldcolor:#F8FCF0}

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

.ns dl{line-height:14pxheight:14pxvertical-align:middlecursor:pointerborder:1px solid #fff}

.ns dt{float:rightbackground:url("../images/dropdown.gif")width:14pxheight:14px}

.ns dd{float:leftmargin-left:3px}

.sch{width:100%border:1px solid #78D470background:url("../images/line.gif")height:48pxtext-align:leftfont-size:13px}

.bottom th input,.sch input{height:1.40emwidth:355pxfont-size:16pxpadding-left:2pxpadding-top:3px}

.bottom th button,.sch button{height:2.3emwidth:6.8emfont-size:14pxline-height:2.0em}

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

#aside th{text-align:leftheight:30px}

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

#aside td{width:50pxheight:31pxtext-align:left}

.hot{width:100%}

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

.middle{font-size:12pxline-height:19pxborder-left:2px solid #7BD676border-right:2px solid #7BD676}

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

.sort{height:550px}

.sort th,.sort td{font-size:13pxheight:24pxline-height:24px*line-height:23.5pxborder-bottom:1px solid #FCFFF7border-

right:1px solid #FCFFF7}

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

.sort a{margin-left:20pxzoom:1}

.sort .s_widen a{margin-left:28pxzoom:1}

.sort .s_big_widen a{margin-left:35pxzoom: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:normalfont-weight:normalmargin:0}

.bg1{background:#FFF8F0}

.bg2{background:#F0F7FF}

.bottom{text-align:left}

.bottom p{margin-left:20pxline-height:24pxfont-size:13px}

.bottom .pa1 a{margin-right:18.5pxzoom:1}

.bottom .pa2 a{margin-right:15pxzoom:1}

.bottom .pa3 a{margin-right:14pxzoom: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:#F0F7FFborder-top:1px solid #DAE9F7line-height:42pxheight:42pxpadding-

left:40pxpadding-top:5px}

.bottom button{margin-left:10pxvertical-align:middle}

.bottom th input{width:260pxvertical-align:middlefont-size:16pxpadding-left:2px}

.bottom th{font-weight:normalpadding-left:20px}

.bottom td{width:77pxcolor:#205001}

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

#footer{font-size:13pxvertical-align:middlemargin:10px 0line-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:168pxpadding-left:2px}

#hao_more_popup{position:absolutefloat:leftz-index:65536width:58pxborder:1px solid #B0BEC7text-

align:leftbackground:#fffmargin-top:3px}

#hao_more_popup li{line-height:20px}

#hao_more_popup a{color:#000text-decoration:nonedisplay:blockpadding-left:3px}

#hao_more_popup a:hover{color:#fffbackground:#316AC5}

#hao_my_like,#hao_my_site{display:nonetext-align:leftline-height:24pxborder:1px solid #DDDDC5background:#F9F9EDfont-

size:13pxpadding-left:10px}

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

#sugOut{position:relative}

#sug{position:absolutefloat:leftleft:0top:0border:1px solid #817F82display:none-moz-user-select:nonez-index:1001}

#sug td{line-height:22pxheight:22pxpadding-left:3pxfont:14px verdana}

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

.ml td{border:0 solid #fffbackground-color:#fffcolor:#000}

#sug_t a:link,#sug_t a:visited,#sug_t a:hover{text-decoration:nonefont-size:14pxcolor:#000width:100%display:block}

.ft18{font-size:14px}

不用height属性

稍稍计算一下,对于单行的li,文字高度假设是12px,那么上下的边距就是4px,所以

li { font-size:12pxpadding: 4px 10px 4px 10px}

这样,当文字多余一行的时候就会自动加高而且保持边距

如果觉得多行文字显得拥挤的话,使用line-height来控制:

li { font-size:12pxline-height:14pxpadding 3px 10px 3px 10px}

这样就好多了