超级酷黑色网站导航菜单

2024-09-05 12:19:28

字体：大中小

来源：转载

供稿：网友

仿新浪网的一款黑色背景的网站导航菜单，采用DL、DL表格布局的风格，也可借机研究一下DD、DL是如何使用的，个人建议，最好是将DD、DL换为LI结构，这样更习惯一些，更多人会很容易接受。

<!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>黑色菜单</title><style type="text/css">body{ font-size:12px; background:#000; color:#fff;}.nav{ float:left; width:100%; text-align:center;}.nav *{ margin:0; padding:0; list-style:none;}.nav ul{ width:100%; overflow:hidden;}.nav li{ float:left; width:14.2%; margin:1px 0 1px -1px; border-left:solid 1px #f0f0f0;}.nav li dl{ overflow:hidden;} /* http://www.codefans.net */.nav li dt,.nav li dd{ float:left; width:33%; margin:5px 0 5px -1px; line-height:14px; border-left: dotted 1px #eee;}.nav li dt{ font-weight:bold;}a:link,a:visited{ color:#fff; text-decoration:none}a:hover{ color:#f60; text-decoration: none;}</style></head><body><div class="nav"><ul>    <li>        <dl>            <dt>新闻</dt>            <dd>军事</dd>            <dd>社会</dd>            <dd>财经</dd>            <dt> 股票</dt>            <dd>基金</dd>            <dd>科技</dd>            <dd>手机</dd>            <dd>数码</dd>         </dl>     </li>     <li>         <dl>            <dt>体育</dt>            <dd>NBA</dd>            <dd>彩票</dd>            <dd>娱乐</dd>            <dt>明星</dt>            <dd>音乐</dd>            <dd>汽车</dd>            <dd>购车</dd>            <dd>搜车</dd>         </dl>     </li>     <li>         <dl>            <dd>博客</dd>            <dd>草根</dd>            <dd>热文</dd>            <dd>视频</dd>            <dd>播客</dd>            <dd>大片</dd>            <dd>房产</dd>            <dd>家居</dd>            <dd>健康</dd>         </dl>     </li>     <li>         <dl>            <dd>读书</dd>            <dd>教育</dd>            <dd>出国</dd>            <dd>女性</dd>            <dd>星座</dd>            <dd>育儿</dd>            <dd>乐库</dd>            <dd>尚品</dd>            <dd>宠物</dd>         </dl>     </li>     <li>         <dl>            <dd>空间</dd>            <dd>邮箱</dd>            <dd>UC</dd>            <dd>论坛</dd>            <dd>圈子</dd>            <dd>相册</dd>            <dd>交友</dd>            <dd>游戏</dd>            <dd>UT</dd>         </dl>     </li>     <li>         <dl>            <dd>城市</dd>            <dd>广东</dd>            <dd>上海</dd>            <dd>生活</dd>            <dd>旅游</dd>            <dd>商城</dd>            <dd>短信</dd>            <dd>彩信</dd>            <dd>高尔夫</dd>         </dl>     </li>     <li>         <dl>            <dd>杂志</dd>            <dd>导航</dd>            <dd>分类</dd>            <dd>天气</dd>            <dd>爱问</dd>            <dd>音悦汇</dd>            <dd>公益</dd>            <dd>爱答</dd>        </dl>     </li>   </ul></div></body></html>

上一篇：蓝色经典CSS导航菜单

下一篇：CSS竖排选项卡Tab

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注