您现在的位置是：网站首页> 编程资料编程资料
css控制列表与导航的制作(水平导航条、垂直翻转的列表、垂直导航栏、内联列表、列表样纯CSS3单页切换导航菜单界面设计的简单实现jQuery和CSS3实现的汉堡包导航菜单打开动画特效源码打造最美CSS多级下拉横向导航菜单代码纯js和CSS3媒体查询制作简单的响应式导航菜单特效源码CSS3+jQuery实现6种移动手机导航菜单UI设计特效源码CSS3实现创意鼠标经过导航菜单特效源码基于CSS制作天蓝色导航菜单 CSS设置列表样式和创建导航菜单实现代码
2021-09-06
1220人已围观
简介 这篇文章主要介绍了css控制列表与导航的制作,包括水平导航条、垂直翻转的列表、垂直导航栏、内联列表、列表样式等制作方法,需要的朋友可以参考下
复制代码
代码如下:- 奇才
- 村村
- 天干
- 才工
- 雪原
1.设置列表符号的样式：list-style-type
none 无符号
disc 实体的小圆点。(默认)
circle 空心的小圆点。
square 实心的小方块。
decimal 1,2,3...
lower-roman i,ii,iii...
upper-roman I,II,III...
lower-alpha a,b,c,d,e...
upper-alpha A,B,C,D,E...
复制代码
代码如下:- 站在岁月的岸边，向自己的过往打个水漂吧……
- 2011我娶你，2012我保护你，2013爱你一生，2014爱你一世！
- 人生就像一场旅行，在乎的不是目的地。而是沿途的"SB"，以及对付"SB"时的心情！
- 臭男人都喜欢骚女人。
- 系好安全带，前方也许有场爱情正等着你。
- 枕着打印机睡，就能打印出一整夜的梦吧？
2.设置列表符号的样式用图片（这种方法很少用）：list-style-image
复制代码
代码如下:- 奇才
- 村村
- 天干
- 才工
- 雪原
3.设置清单项目左右移：list-style-position
inside 清单项目较往右移。
outside 清单项目正常显示(默认的属性)。
4.以背景图片作为项目列表图标：这种方法比较好（常用），可以随意调动
复制代码
代码如下:- 奇才
- 村村
- 天干
- 才工
- 雪原
5.内联列表：
ul和li默认是区块的，查看是否是区块可以加上颜色测试，将列表转换为内联之后项目图标会不见，可以使用浮动或者使用下面的列子来实现
这里的 display 属性是块级值的设置,定义是否要成为块.Inline 是是内联,block 是区块.
复制代码
代码如下:- 奇才
- 村村
- 天干
- 才工
- 雪原
6.背景图片和内联列表：使用这种方法再将li变成内联的时候背景图片仍然还在
复制代码
代码如下:- 奇才
- 村村
- 天干
- 才工
- 雪原
7.垂直导航栏：
复制代码
代码如下:8、创建垂直翻转的列表：
复制代码
代码如下:9.创建水平导航条：
复制代码
代码如下:
相关内容
- css控制边界与边框示例(内边距、外边距使用方法)解决margin 外边距合并问题 详解CSS外边距折叠引发的问题详解css外边距折叠（margin collapsing）详解css边距重叠的几种解决方案简单的CSS叠加外边距示例CSS外边距合并代码css 空白外边距互相叠加的解决方法CSS外边距叠加的问题,CSS教程CSS 外边距(margin)重叠及防止方法
- css盒子模型详解加示例深入理解CSS中的盒子模型CSS盒子模型是什么css盒子模型图解CSS3盒子模型详解CSS3盒子模型详解详解css盒子模型之内边距padding及简写
- css常用浮出层(tip效果)的写法CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
- 常用的网页布局方法单侧固定另一侧适应充满CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
- css3和jquery实现自定义checkbox和radiobox组件利用纯CSS自定义Checkbox和Radio的样式示例代码一款纯css3实现简单的checkbox复选框和radio单选框纯css3实现效果超级炫的checkbox复选框和radio单选框CSS3实例分享--超炫checkbox复选框和radio单选框CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checked
- css3实现垂直下拉动画菜单示例css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果
- css样式无效是怎么回事？有哪些常见原因？CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
- less开发指南LESS 让css也支持变量，运算符，include,嵌套规则等等 less让css具有动态语言的特性LESS 让css也支持变量，运算符，include,嵌套规则CSS less优化学习CSS预处理器:Sass和less进行对比Less里css表达式的写法示例介绍浏览器端如何使用Less
- 设置span宽度高度的方法CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
- css盒子模型图解深入理解CSS中的盒子模型CSS盒子模型是什么css盒子模型详解加示例CSS3盒子模型详解CSS3盒子模型详解详解css盒子模型之内边距padding及简写
