怎样定义《li》标签的css样式呢?
我初次学习网页制作,对css可能还不太熟悉,我看到hao123等这样的网站大多使用css样式定位网页元素,但我鼓捣了半天还是搞不懂www.hao123.com的css文件...
我初次学习网页制作,对css可能还不太熟悉,我看到hao123等这样的网站大多使用css样式定位网页元素,但我鼓捣了半天还是搞不懂www.hao123.com的css文件是怎样的,我把www.hao123.com的网页复制粘贴到DW中试图编写css文件可就是不行,哪位高手可以编写一些并赠送给小弟呢?感谢万分
展开
5个回答
展开全部
你自己看看它的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;}
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;}
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
写一个就帮不上忙了,写码简一个简单的例子给你把
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>test</title>
<style type="text/css">
.dd{list-style:none;}
.dd li{float:left;padding:5px;margin:7px;}
</style>
</head>
<body>
<ul class="dd">
<li><a href="#">ddd</a><行亮/li>
<li><a href="#">ddd</a></li>
<li><a href="#">ddd</a></li>
<li><a href="#">ddd</a></li>
<li><a href="#">ddd</a></li>
<li><a href="#">ddd</a></li>
<li><a href="迟带裤#">ddd</a></li>
</ul>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>test</title>
<style type="text/css">
.dd{list-style:none;}
.dd li{float:left;padding:5px;margin:7px;}
</style>
</head>
<body>
<ul class="dd">
<li><a href="#">ddd</a><行亮/li>
<li><a href="#">ddd</a></li>
<li><a href="#">ddd</a></li>
<li><a href="#">ddd</a></li>
<li><a href="#">ddd</a></li>
<li><a href="#">ddd</a></li>
<li><a href="迟带裤#">ddd</a></li>
</ul>
</body>
</html>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
li的语言就是表示有序列表的意思,粗橡所以li一般用来表示列表内容,css可以针对具体标签进行定义,所以要做得好你还掘或是得详细了解html常用的标判凳伍签的具体语义
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
<title>hao123--我的上网主页</title>
<link href="css/hao123.css?v=201002231102" rel="stylesheet"中碧 type="text/css" />
从HAO123上截的卖耐举,这是个导入CSS样式,而不是直接亩陪写的,
<link href="css/hao123.css?v=201002231102" rel="stylesheet"中碧 type="text/css" />
从HAO123上截的卖耐举,这是个导入CSS样式,而不是直接亩陪写的,
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
我觉举姿胡得li不太好用,用div也一样的,比li好册枣用多了,因为li本正拦身带有一些属性,比如样式,div而单纯得多。
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询