快速做出横向菜单样式----超实用

来源：互联网发布：淘宝客好做吗编辑：程序博客网时间：2024/05/16 14:01

1.ul +li+css模式

第一步：建立一个无序列表

<div class="test">  <ul>              <li><span>首页</span></li>              <li><span>产品介绍<span></li>              <li><span>服务介绍<span></li>              <li><span>技术支持<span></li>              <li><span>立刻购买<span></li>              <li><span>联系我们<span></li>      </ul>  </div>

第二步：隐藏li的默认样式

.test ul{list-style:none;} 现在的效果是没有圆点了：

第三步：关键的浮动

.test li{float:left;}

这里是菜单变成横向的关键，我们给li元素加上一个“float:left;”属性，让每个li浮动在前面一个li的左面。

第四步：调整宽度

在CSS中添加定义width:100px指定一个li的宽度是100px，当然你可以根据你的需要调整数值：

.test li{float:left;width:100px;}

test.html文件

<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>横排菜单导航</title><meta name="description" content=""><meta name="keywords" content=""><style type="text/css">.test ul{list-style: none;}.test li{float: left;width: 100px;background:#CCC;margin-left:3px;line-height:30px;}.test span{display:block; text-align:center;height:30px;}</style></head><body>     <div class="test"> <ul><li><span>首页</span></li><li><span>产品介绍<span></li><li><span>服务介绍<span></li><li><span>技术支持<span></li><li><span>立刻购买<span></li><li><span>联系我们<span></li></ul></div></body></html>

2.div+css模式

主要讲每个菜单div加上float:left样式即可

<meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>横排菜单导航</title><meta name="description" content=""><meta name="keywords" content=""><style type="text/css">.nav {float: left;width: 100px;}</style></head><body>     <div>      <div  class="nav">导航1</div>      <div  class="nav">导航2</div>    <div  class="nav">导航3</div>       </div>  </body></html>

阅读全文

0 0