`
desert3
  • 浏览: 2160550 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

css属性 list-style 纵向菜单、横向菜单

    博客分类:
  • Html
 
阅读更多
参考:ul li css 做横向菜单

菜单制作步骤:
  • 1,建立一个无序列表
  • 2,隐藏li的默认样式(因为看起来不是很好看,菜单通常都不需要li默认的圆点,我们给UL定义一个样式来消除这些圆点。) .test ul {list-style: none outside none;}
  • 3,关键的浮动(此时默认显示的是纵向菜单,如果要变成横向菜单,那么必须给li增加浮动属性 .test li{float:left;})
  • 4,调整宽度(菜单都挤在一起不好看怎么办?我们来调节li的宽度。) .test li{float:left;width:100px;}
  • 5,设置基本链接效果 .test a:link{color:#666;background:#CCC;text-decoration:none;} .test a:visited{color:#666;text-decoration:underline;} .test a:hover{color:#FFF; font-weight:bold;text-decoration:underline;background:#F00;}
  • 6,将链接以块级元素显示(菜单链接的背景色为什么没有填满整个li的宽度?恩,解决的方法很简单,在a的样式定义中增加display:block,使链接以块级元素显示) .test a{display:block;text-align:center;height:30px;} .test li{float:left;width:100px;background:#CCC;margin-left:3px;line-height:30px;}


list-style属性:在一个声明中设置所有的列表(无序列表ul、有序列表ol)属性
该属性是一个简写属性,涵盖了所有其他列表样式属性。由于它应用到所有 display 为 list-item 的元素,所以在普通的 HTML 和 XHTML 中只能用于 li 元素,不过实际上它可以应用到任何元素,并由 list-item 元素继承。
可以按顺序设置如下属性:
  • list-style-type
  • list-style-position
  • list-style-image

可以不设置其中的某个值,比如 "list-style:circle inside;" 也是允许的。未设置的属性会使用其默认值。

可能值:
  • list-style-type 设置列表项标记的类型。参阅:list-style-type 中可能的值。
  • list-style-position 设置在何处放置列表项标记。参阅:list-style-position 中可能的值。
  • list-style-image 使用图像来替换列表项的标记。参阅:list-style-image 中可能的值。
  • inherit 规定应该从父元素继承 list-style 属性的值。


list-style-type属性:设置列表项标记的类型。
可能值:
  • none 无标记。
  • disc 默认。标记是实心圆。
  • circle 标记是空心圆。
  • square 标记是实心方块。
  • decimal 标记是数字。
  • …参考http://www.w3school.com.cn/css/pr_list-style-type.asp


list-style-position 属性:设置在何处放置列表项标记。
该属性用于声明列表标志相对于列表项内容的位置。外部 (outside) 标志会放在离列表项边框边界一定距离处,不过这距离在 CSS 中未定义。内部 (inside) 标志处理为好像它们是插入在列表项内容最前面的行内元素一样。
可能值:
  • outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。
  • inside 列表项目标记放置在文本以内,且环绕文本根据标记对齐。
  • inherit 规定应该从父元素继承 list-style-position 属性的值。


list-style-image 属性使用图像来替换列表项的标记。
这个属性指定作为一个有序或无序列表项标志的图像。图像相对于列表项内容的放置位置通常使用 list-style-position 属性控制。
可能值:
  • none 默认。无图形被显示。
  • URL 图像的路径。
  • inherit 规定应该从父元素继承 list-style-image 属性的值。
分享到:
评论

相关推荐

    jquery横向纵向菜单

    list-style: none; padding: 0; margin: 0; } #menu li { float: left; } #menu li a { display: block; padding: 10px; text-decoration: none; color: #333; border-right: 1px solid #ccc; } ``` 3. **...

    JQuery横向纵向导航菜单

    list-style: none; margin: 0; padding: 0; } #menu li { position: relative; } .submenu { display: none; } #menu li:hover .submenu { display: block; } ``` 3. **jQuery动画**: - 利用jQuery...

    CSS属性速查表

    - **list-style**: 在一个声明中设置所有列表属性。 - **list-style-image**: 将图像设置为列表项标记。 - **list-style-position**: 设置列表项标记的位置,如在文本之外或内部。 - **list-style-type**: 设置列表...

    CSS之列表样式与链接样式——每天一遍小知识

    列表样式类型——list-style-type1.介绍2. 列表图像和位置—— List Image and Position3.列表样式(快速标记)——list-style二.样式表——Styling the Tables1.表属性——Tables Properties2.标题设置——caption-...

    CSS+DIV实现的纵向垂直滑动门效果

    - **list-style-type**: 设置列表项符号为无。 - **float**: 使用浮动使菜单项横向排列。 - **display**: 设置为 `block`,确保元素占据整行。 - **#menulia**: 定义了菜单项链接的样式。 - **text-...

    JS仿FLASH横向、纵向导航菜单

    list-style-type: none; margin: 0; padding: 0; } #horizontalMenu li, #verticalMenu li { display: inline-block; /* 横向布局 */ } #verticalMenu li { display: block; /* 纵向布局 */ } ``` 三、...

    JQuery实战&横向纵向菜单

    - 可以通过设置`list-style: none;`来清除`<ul>`和`<li>`前面的小圆点。 - Opera浏览器比较特殊,其`<li>`的标识符样式与其他浏览器有所不同,需要特别注意。 - **清除子菜单的缩进**:为了使子菜单能够整洁地...

    漂亮的CSS二级竖向导航菜单

    list-style-type: none; margin: 0; padding: 0; } .nav li { position: relative; /* 使子元素相对于父元素定位 */ } .nav a { display: block; padding: 10px; text-decoration: none; color: #333; } ...

    JavaScript实现的3级横向导航菜单源码

    本篇将详细介绍如何使用JavaScript实现一个三级横向导航菜单。 首先,我们需要理解基本的HTML结构。一个简单的导航菜单通常由`<ul>`(无序列表)和`<li>`(列表项)元素组成。对于多级菜单,我们可以嵌套`<ul>`和`...

    css样式大全精华版.docx

    list-style-image: url('bullet.png'); ``` #### 七、定位属性 (Position Properties) **1. 定位模式** (`position`) - `absolute`:绝对定位 - `relative`:相对定位 - `static`:静态定位 - 示例: ```...

    div+css属性.pdf

    1. `list-style-type`:设定列表项的标记类型,如 `disc`(实心圆点),`decimal`(数字)。 2. `list-style-position`:设置标记的位置,`outside`(外部)或 `inside`(内部)。 3. `list-style-image`:使用图像...

    CSS标签大全divcss.pdf

    6. 列表属性(List-style): - `list-style-type`:设定列表项的符号,如圆点、数字、罗马数字等。 - `list-style-position`:控制列表符号的位置,如outside(外部)或inside(内部)。 - `list-style-image`:...

    Jquery实现纵向横向菜单

    总结起来,实现纵向横向菜单的关键在于理解jQuery的选择器、事件和动画方法,以及结合CSS来控制布局和样式。通过这样的组合,我们可以创建出富有动态效果、用户体验良好的交互式菜单。在实际项目中,可以根据需求...

    gridview固定表头 横向滚动 纵向固定

    为了实现GridView固定表头横向滚动纵向固定的功能,需要设置GridView的属性,例如Width、Style、ForeColor、GridLines等。 GridView控件的代码如下: ``` <asp:GridView ID="gv_List" runat="server" Width="100%" ...

    div+css属性.docx

    1. `list-style-type`设置列表项符号,包括`disc`(圆点),`circle`(圆圈),`square`(方块),`decimal`(数字)等。 2. `list-style-position`决定列表样式的位置,`outside`或`inside`。 3. `list-style-image`使用...

    CSS参考手册

    1. **list-style**: 在一条声明中设置所有列表样式属性。 2. **list-style-type**: 定义列表项标记的类型,如圆点、数字等。 3. **list-style-position**: 控制列表项标记的位置,如在列表项文本之外还是之内。 4. *...

    ul li做横向导航

    list-style: none; padding: 0; margin: 0; } ``` 2. **设置浮动**:让每个`<li>` 元素在一行内水平排列,我们可以使用浮动(float)属性。 ```css .horizontal-nav li { float: left; } ``` 3. **设置链接样式*...

    CSS常用代码.pdf

    - `list-style-position`:控制列表项标记的位置,如`outside`(外部)和`inside`(内部)。 理解并熟练运用这些CSS属性,可以实现丰富的网页设计效果。在实践中,不断尝试和学习新的CSS特性,如响应式设计、过渡...

Global site tag (gtag.js) - Google Analytics