CSS控制列表

最新推荐文章于 2023-02-02 11:03:14 发布
最新推荐文章于 2023-02-02 11:03:14 发布
阅读量9.2w 收藏
点赞数 3
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014646662/article/details/49209955
版权

列表属性

list-style:list-style-type list-style-position list-style-image

列表项目类型

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,...]

 upper-alpha [A,B,C,...]

列表项目位置

list-style-position: inside[列表项目较往右移]

outside[ 列表项目正常显示]

列表项目图片

list-style-image: URL [list-style-image:url(lmk.gif)]

none 不会显示任何图象
周天祥
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 下拉列表
H56780的博客
05-07 4030
共有四点 使用CSS创建一个鼠标移动上去后显示下拉列表的效果。 当鼠标移动到指定元素上时，后出现下拉列表。实例： 实例解释 HTML部分: 我们可以使用任何的HTML元素来打开下拉列表，如：<span>,或a<button>元素。 使用容器元素（如：<div>）来创建下拉列表的内容，并放在任何你想放的位置上。 使用<div>元素来包裹这些元素，并使用CSS来设置下拉内容的样式。 CSS部分：.dropdown类使用position：relative
HTML+CSS+JavaScript基础知识
u010975449的专栏
07-21 7920
第一部分：HTML 一、简介HTML 1、HTML（Hyper Text Mark-up Language超文本标记语言）的缩写（标记：就是用来描述网页内容的一些特定符号）。HTML不是编程语言，而是一种描述性的标记语言，用于描述网页内容的显示方式，比如文字的颜色、大小，这些都是利用html标记来实现的。 2、HTML文档的创建方式： 手工直接编写（例如记事本）
CSS3控制列表样式
dwjdj的博客
01-22 382
list-style-type:none; disc：实心圆 cirle：空心圆 none：不使用项目符号 decimal：阿拉伯数字 square：实心方块...... 用于控制列表项显示符号的类型 一般设置为none，后面我们都是通过设置背景图片的方式添加图标 list-style-image:url();为各个列表项设置项目图标，使外观更好看 但是设置的列表项图标和列表项并没有对齐，所以实际...
CSS列表与表格
Vec_Kun的博客
02-02 1469
要删除此内容，请在 或 中添加。这是因为 table 和 和 元素都有单独的边框。如需控制边框和表格内容之间的间距，请在 和 元素上使用。属性设置 或 中内容的水平对齐方式（左、右或居中）。默认情况下， 元素的内容居中对齐，而 元素的内容左对齐。属性设置 或 中内容的垂直对齐方式（上、下或居中）。默认情况下，表中内容的垂直对齐是居中（ 和 元素都是）。属性是一种简写属性。
css来控制列表,css控制列表的问题
weixin_34792546的博客
08-04 163
标题标题2010-05-01span.title { max-width: 200px; }span.time { padding-left: 10px; }要IE6实现max-width就用expression，但不建议，所以剩下的用JS写吧var spans = document.getElementsById('news').getElementsByTagName('span');var ...
html css 列表框,CSS Lists(列表)
weixin_42322219的博客
06-07 1276
CSS Lists(列表)列表属性用于控制列表项标记的显示。HTML列表的类型HTML中有三种不同类型的列表：无序列表 —项目列表，其中每个列表项目都用项目符号标记。有序列表 —项目列表，其中每个列表项目都标有数字。定义列表 -项目列表，其中包含每个项目的描述。要了解有关列表的更多信息，请查看有关HTML列表的教程。CSS样式列表CSS提供了几种用于样式化最常用的无序列表和有序列表的属性。这些CS...
如何用CSS制作横向菜单?
04-30 476
现在css的完整代码是：.test ul{list-style:none;}.test li{float:left;width:100px;background:#CCC;margin-left:3px;line-height:30px;}.test a{display:block;text-align:center;height:30px;}.test a:link{color:#666;b
css控制列表与导航的制作(水平导航条、垂直翻转的列表、垂直导航栏、内联列表、列表样
09-25
主要介绍了css控制列表与导航的制作,包括水平导航条、垂直翻转的列表、垂直导航栏、内联列表、列表样式等制作方法,需要的朋友可以参考下
CSS数字列表实现方法
12-13
总的来说，CSS数字列表实现方法展示了如何利用CSS的样式控制能力，超越HTML基本元素的限制，创造独特且富有创意的页面布局。这种方法对于提升网页的用户体验和视觉效果非常有用，同时也能提高设计师和开发者在网页...
css 列表菜单的设计
09-25
在这个教程中，我们将探讨如何利用CSS设计一个列表菜单，特别关注如何利用列表的边框样式和背景图像来创建美观的菜单项。 首先，我们来看HTML的基础结构，通常使用无序列表`<ul>`来创建菜单。每个菜单项被包含在`...
css 控制列表布局
qq_48228724的博客
06-04 145
li{ width: 18.7%; margin-right: 1.33%; padding: 20px 20px 20px; border-radius: 15px; margin-bottom: 20px; position: relative; transition: all 0.3s; background-color:#fff; @media screen and (max-width: 1
HTML/用CSS控制列表格式
GAG2723的博客
12-26 248
无聊耍耍 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #one{ width:200px; ...
CSS设置列表样式
成长日记的博客
06-26 2469
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
[Web前端技术教学]CSS列表样式范例练习-无序列表-2
格码老师教编程
11-21 934
无标题文档 <!-- li { height: 40px; width: 320px; background-image: url(BgPic/bg24.png); background-position: 0 -346px; line-height: 40px; padding-top: 0px; padding-right: 0px; padding-b
CSS设置列表
山楂的博客
12-16 483
所有CSS设置列表属性： 属性 描述 list-style-image 设置照片为列表项标志 list-style-position 设置列表中列表项标志的位置 list-style-type 设置列表项标志的类型 1、list-style-image属性常见的值： 值 描述 URL（’ '） 图片路径 none 默认，没有图片 2、list-...
（10）CSS控制列表样式
mxd
04-25 870
HTML中使用ul与li
CSS选择符类型
热门推荐
周天祥的博客
10-17 10万+
1、类型选择符： 就是HTML文档中的元素[作用于html标记] 如：p{属性:值} 2、类选择符：可以自己定义样式，应用于一个或多个网页元素，类在网页中可以出现多次，用于定义重复的样式。类以英文“.”开头，后面的名字自己定义，类定义后还需要在网页中加入class=类名称，加以调用。 如： .warning {属性:值} ……  3、ID选择符：与类基本相似，只是以英文“#”开头，
CSS 颜色单位
周天祥的博客
10-17 9万+
十六进制 用3个十六进制数 如： color:#ff0000 用3个十六进制数 如：color：#fcf 颜色名称 如： color:red 三原色单位 如： rgb(255,0,0) 一般最常用的是十六进制，三原色单位的原理【红（ r ） , 绿（ g ） , 蓝 (b) 】混合而成。
CSS 长度单位
周天祥的博客
10-17 9万+
em 相对于当前对象内文本的字体尺寸，为默认大小的倍数 px 像素（Pixel）推荐使用 绝对长度单位 说明---基本上用不到 in 英寸 cm 厘米 mm 毫米 pt 点（Point）
给我一个各种类型列表及CSS控制列表属性、超链接、锚点链接、超链接相关的CSS伪类的网页代码
最新发布
05-24
以下是一个简单的例子，展示了各种类型列表及CSS控制列表属性、超链接、锚点链接、超链接相关的CSS伪类的网页代码： ```html <!DOCTYPE html> <html> <head> <title>List and Link Example</title> <style> ul { list-style-type: none; margin: 0; padding: 0; } li { padding: 10px; border-bottom: 1px solid #ccc; } a:link, a:visited { color: blue; text-decoration: none; } a:hover, a:active { color: red; text-decoration: underline; } .anchor-link { margin-top: -50px; padding-top: 50px; display: block; position: absolute; } </style> </head> <body> <h1>List and Link Example</h1> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> <p><a href="#anchor">Jump to Anchor Link</a></p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam venenatis, odio ac dapibus facilisis, elit leo hendrerit arcu, a suscipit diam diam sed dolor. Sed eget lectus eros. Donec vel ex tincidunt, suscipit enim vitae, bibendum urna. Cras in mauris euismod, congue nibh ac, consectetur lorem. Proin nec viverra augue. Aliquam lobortis, nibh in vehicula lacinia, enim diam imperdiet ipsum, ac rhoncus orci quam eget purus. Donec euismod ante nec enim malesuada, at feugiat dolor posuere. Pellentesque ac quam molestie, pharetra ante eu, hendrerit augue.</p> <a name="anchor" class="anchor-link"></a> <h2>Anchor Link Example</h2> <p>Ut in risus sagittis, pretium quam vel, suscipit augue. Nullam quis venenatis nunc. Fusce accumsan tincidunt dapibus. Sed iaculis, velit eget gravida lobortis, dui turpis vestibulum purus, eget venenatis felis quam eget magna.</p> </body> </html> ``` 这个例子包括一个无序列表、超链接、锚点链接以及相关的CSS样式。其中，`list-style-type`属性控制列表符号的样式，`margin`和`padding`属性控制列表项的内外边距，`a:link`和`a:visited`控制未访问和已访问链接的颜色和文本修饰，`a:hover`和`a:active`控制鼠标悬停和点击链接时的颜色和文本修饰，`class="anchor-link"`和`<a name="anchor">`用于创建锚点链接。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值