UL、LI 无序列表实现纯CSS网站导航菜单

2024-09-05 12:20:29

字体：大中小

来源：转载

供稿：网友

三行的纯CSS网站导航栏菜单，改改风格，让大家感到新鲜一点，其它主要还是使用了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=utf-8" /><title>多行的导航栏</title><style type="text/css">* { margin:0; padding:0; }body { font:12px/180% Verdana, Geneva, sans-serif; }li { list-style:none; }a { text-decoration:none; color:#999; }a:hover { color:#900; text-decoration:underline; }.nav_sub { width:700px; margin:0 auto; height:1%; overflow:hidden; margin-bottom:10px; background:#EDEEEF; }.title_nav_sub { display:block; padding:3px 20px; text-align:center; background:#48862F; color:#fff; float:left; }.nav_sub ul { float:left; }.nav_sub ul li { display:inline; }.nav_sub ul a { float:left; padding:3px 20px; }.more { float:right; }</style></head><body><div class="nav_sub"><span class="title_nav_sub">源码</span>  <ul>    <li>ASP</li>    <li>PHP</li>    <li>JSP</li>    <li>DELPHI</li>    <li>VS</li>    <li>AJAX</li>    <li>JQUERY</li>  </ul>  更多>> </div><div class="nav_sub"><span class="title_nav_sub">特效</span>  <ul>    <li>导航菜单类</li>    <li>CSS布局类</li>    <li>表单及按钮</li>    <li>图片切换</li>    <li>鼠标特效</li>  </ul>  更多>> </div><div class="nav_sub"><span class="title_nav_sub">文章</span>  <ul>    <li>ASP教程</li>    <li>站长资讯</li>    <li>PHP技术</li>    <li>SEO</li>    <li>其它</li>  </ul>  更多>> </div></body></html>

上一篇：CSS+Js遮罩效果的TAB及焦点图片切换

下一篇：线条型css滑动门

学习交流

如何查找有故障的配件

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

热门图片

猜你喜欢的新闻

猜你喜欢的关注