UL/LI
如何用CSS制作横向菜单 让ul li横向排列及圆点处理
我们先建立一个无序列表,来建立菜单的结构。代码是:
<ul>
<li><a href="1">首页</a></li>
<li><a href="2">产品介绍</a></li>
<li><a href="3">服务介绍</a></li>
<li><a href="4">技术支持</a></li>
<li><a href="5">立刻购买</a></li>
<li><a href="6">联系我们</a></li>
</ul>
效果是:
首页
产品介绍
服务介绍
技术支持
立刻购买
联系我们
第二步:隐藏li的默认样式,去掉圆点
因为看起来不是很好看,菜单通常都不需要li默认的圆点,我们给UL定义一个样式来消除这些圆点。
当然,为了更好的控制整个菜单,我们把菜单放在一个div里。页面代码变成:
<div class="test"> <ul>
<li><a href="1">首页</a></li>
<li><a href="2">产品介绍</a></li>
<li><a href="3">服务介绍</a></li>
<li><a href="4">技术支持</a></li>
<li><a href="5">立刻购买</a></li>
<li><a href="6">联系我们</a></li>
</ul> </div>
CSS定义为:
.test ul{list-style:none;}
说明:“.test ul”表示我要定义的样式将作用在test的层里的ul标签上。
现在的效果是没有圆点了:
首页
产品介绍
服务介绍
技术支持
立刻购买
联系我们
第三步:关键的浮动
这里是菜单变成横向的关键,我们给li元素加上一个“float:left;”属性,让每个li浮动在前面一个li的左面
。
CSS定义为:
.test li{float:left;}
效果是:
首页产品介绍服务介绍技术支持立刻购买联系我们
看,菜单变横向了。就这么简单!下面需要做的就是优化细节了。
UL/LI的更多相关文章
- ul li设置横排,并除去li前的圆点
效果预览:http://hovertree.com/texiao/css/ 如何用CSS制作横向菜单 让ul li横向排列及圆点处理 我们先建立一个无序列表,来建立菜单的结构.代码是: <ul& ...
- 使用CSS把ul,li制作成表格
查看效果:http://hovertree.com/texiao/css/7.htm 具体实现请看样式部分. 完整代码: <!DOCTYPE html> <html> < ...
- html ul li的学习
DIV+CSS里,我们用得最多的就是ul li来显示数据,如新闻按钮等. <div id="menu"> <ul> <li><a href ...
- ul li 下的元素内容垂直居中
CSS: <style> * {;; } li { list-style: none; } li span { border: 1px solid red; height: 100px; ...
- DIV UL LI
<style type="text/css"> .productDetailTabNav{ width:960px;} .productDetailTabNav ul{ ...
- 怎样去除ul li a标签文字下的下划线
这个主要是text-decoration属性,颜色的话就是普通的了 <style> ul li a{ text-decoration:none; } ul li a { color: ...
- ul li横向排列及圆点处理
如何用CSS制作横向菜单 让ul li横向排列及圆点处理 第一步:建立一个无序列表 我们先建立一个无序列表,来建立菜单的结构.代码是:<ul> <li><a href ...
- Ul li 横排 菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Ul li 竖排 菜单
Ul li 竖排 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
- jQuery图片无缝滚动JS代码ul/li结构
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- hdu5573 二叉树找规律,二进制相关
input T 1<=T<=100 n k 1<=n<=1e9 n<=2^k<=2^60 output 从1走到第k层,下一层的数是上一层的数×2或者×2+1,每 ...
- json处理三部曲之第一曲:利用json-lib-xxx.jar处理json
json-lib-xxx.jar包必需5个依赖包(实测): ezmorph-xxx.jar commons-lang-xxx.jar commons-beanutils-xxx.jar commons ...
- Oracle结构知识学习+部分函数实例
一 Oracle的结构1 实例(instance) 是内存和后台进程的集合, 数据库是数据的物理储存;实例和数据库的关系是一对多的关系;2 多个实例同时驱动一个'数据库'的架构 叫集群(RAC)3 O ...
- webstoem自动编译less文件
去node的主页下载对应版本的nodejs然后安装下载地址:http://nodejs.org/ 根据自己的系统选择合适的版本下载. 安装完成之后打开命令提示符(win+r 输入cmd 回车),分 ...
- OC-之AFNetworking与ASIHTTPRequest对比
一.底层实现 1.AFN的底层实现基于OC的NSURLConnection和NSURLSession 2.ASI的底层实现基于纯C语言的CFNetwork框架 3.因为NSURLConnection和 ...
- zencart低版本由php5.2.17升级PHP5.3环境下错误及解决方案
方法:有错误或者空白先打开错误提示,ftp看cache错误日志 或者 面板查看错误日志,再对比数据库是否正确,可拿脚本看是否能连接 \cp -r backipmysql/nlbarb_007li/ ...
- JavaScript在智能手机上的应用-判断是否为移动浏览器
-------------------- <script type="text/javascript"> var userAgent = navi ...
- JavaScript高级程序设计:第六章
第六章 面向对象的程序设计 一.理解对象 1.属性类型: ECMAScript中有两种属性:数据属性和访问器属性. (1)数据属性: 数据属性包含一个数据值的位置.在这个位置可以读取和写入值.数据属性 ...
- .NET Framework不同组件区别及安装注意事项
发布时间: 2012/7/14 11:52:37 严格细分起来,.NET Framework又有两个不同的组件,.NET Framework可再发行组件包(23MB左右)和.NET Framew ...
- 首次编译TI Android JB-4.2.2-DevKit-4.1.1的时候提示jdk版本不对
http://processors.wiki.ti.com/index.php/TI-Android-JB-4.2.2-DevKit-4.1.1_DeveloperGuide#Configure_An ...