css+div 纵向列表

<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>3.1纵向列表</title> <link href="3.1.css" mce_href="3.1.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="menue"> <ul> <li><a href="#" mce_href="#">首页</a></li> <li><a href="#" mce_href="#">网页版式布局</a></li> <li><a href="#" mce_href="#">div+css教程</a></li> <li><a href="#" mce_href="#">div+css实例</a></li> <li><a href="#" mce_href="#">常用代码</a></li> <li><a href="#" mce_href="#">站长杂谈</a></li> <li><a href="#" mce_href="#">技术文档</a></li> <li><a href="#" mce_href="#">资源下载</a></li> <li><a href="#" mce_href="#">图片素材</a></li> </ul> </div> </body> </html>

css文件

#menue ul { margin: 0px; padding: 0px; list-style: none; } body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 1.5; } #menue { border: 1px solid #669900; width: 100px; } #menue ul li { line-height: 26px; background: #eee; padding: 0px 8px; height: 26px; border-bottom: 1px solid #ccc; } a { color: #000000; text-decoration: none; } a:hover { color: #FF0000; }

最终效果:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值