CSS列表和一些变化情况

已于 2024-02-21 10:13:50 修改
阅读量566 收藏
点赞数
分类专栏： web前端 文章标签： css css列表 html
于 2015-09-05 14:49:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bcbobo21cn/article/details/48225051
版权

一 基本CSS列表

<html>
<head>
<style type="text/css">
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.none {list-style-type: none}
</style>
</head>


<body>
<ul class="disc">
<li>小兔兔</li>
<li>小猫咪</li>
<li>小狗狗</li>
</ul>

<ul class="circle">
<li><span style="font-family: Arial, Helvetica, sans-serif;">小兔兔</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">小猫咪</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">小狗狗</span></li>
</ul>

<ul class="square">
<li><span style="font-family: Arial, Helvetica, sans-serif;">小兔兔</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">小猫咪</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">小狗狗</span></li>
</ul>


<ul class="none">
<li><span style="font-family: Arial, Helvetica, sans-serif;">小兔兔</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">小猫咪</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">小狗狗</span></li>
</ul>
</body>


</html>

定义列表风格分别为disc、circle、square、none，所显示的不同列表项；

二.

 

<html>
<head>
<style type="text/css">
ul 
{
list-style-image: url('/i/eg_arrow.gif')
}
</style>
</head>

<body>
<ul>
<li>偶是小兔兔</li>
<li>偶是小猫咪</li>
<li>偶是小狗狗</li>
</ul>
</body>

</html>


定义列表风格为list-style-image，并赋值属性为一个图片时所显示的列表项；

三 

<html>
<head>
<style type="text/css">
ul 
{
margin:50px;
}
</style>
</head>

<body>
<ul>
<li style="list-style-image: url('img/tuxiao1.png')">偶是小兔兔</li>
<li style="list-style-image: url('img/maoxiao1.png')">偶是小猫咪</li>
<li style="list-style-image: url('img/gouxiao1.png')">偶是小狗狗</li>
</ul>
</body>

</html>


分别为列表项目赋予不同图标所显示的列表项目；

四 

<html>
<head>
<style type="text/css">
ul{font-size:50px;}
ul.disc {list-style-type: disc;}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.none {list-style-type: none}
</style>
</head>

<body>
<ul class="disc">
<li>小兔兔</li>
<li>小猫咪</li>
<li>小狗狗</li>
</ul>

<ul class="circle">
<li>小兔兔</li>
<li>小猫咪</li>
<li>小狗狗</li>
</ul>

<ul class="square">
<li>小兔兔</li>
<li>小猫咪</li>
<li>小狗狗</li>
</ul>

<ul class="none">
<li>小兔兔</li>
<li>小猫咪</li>
<li>小狗狗</li>
</ul>
</body>

</html>


放大字体之后前面的列表项标记也放大；

五 

<html>
<head>
<style type="text/css">
ul.none {list-style-type: none}
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.decimal {list-style-type: decimal}
ul.decimal-leading-zero {list-style-type: decimal-leading-zero}
ul.lower-roman {list-style-type: lower-roman}
ul.upper-roman {list-style-type: upper-roman}
ul.lower-alpha {list-style-type: lower-alpha}
ul.upper-alpha {list-style-type: upper-alpha}
ul.lower-greek {list-style-type: lower-greek}
ul.lower-latin {list-style-type: lower-latin}
ul.upper-latin {list-style-type: upper-latin}
ul.hebrew {list-style-type: hebrew}
ul.armenian {list-style-type: armenian}
ul.georgian {list-style-type: georgian}
ul.cjk-ideographic {list-style-type: cjk-ideographic}
ul.hiragana {list-style-type: hiragana}
ul.katakana {list-style-type: katakana}
ul.hiragana-iroha {list-style-type: hiragana-iroha}
ul.katakana-iroha {list-style-type: katakana-iroha}
</style>
</head>

<body>
<table border=1 bgcolor=#98FB98>
<tr>
<td>
<ul class="none">
<li>"none" 类型</li>
<li>小兔兔</li>
<li>小猫咪</li>
</ul>
</tb>

<td>
<ul class="disc">
<li>Disc 类型</li>
<li>小兔兔</li>
<li>小猫咪</li>
</ul>
</td>

<td>
<ul class="circle">
<li>Circle 类型</li>
<li>小兔兔</li>
<li>小猫咪</li>
</ul>
</td>

<td>
<ul class="square">
<li>Square 类型</li>
<li>小兔兔</li>
<li>小猫咪</li>
</ul>
</td>

<td>
<ul class="decimal">
<li>Decimal 类型</li>
<li>小兔兔</li>
<li>小猫咪</li>
</ul>
</td>

<td>
<ul class="decimal-leading-zero">
<li>Decimal-leading-zero 类型</li>
<li>小兔兔</li>
<li>小猫咪</li>
</ul>
</td>

<td>
<ul class="lower-roman">
<li>Lower-roman 类型</li>
<li>小兔兔</li>
<li>小猫咪</li>
</ul>
</td>
</tr>

<tr>
<td>
<ul class="upper-roman">
<li>Upper-roman 类型</li>
<li>小兔兔</li>
<li>小猫咪</li>
</ul>
</td>

<td>
<ul class="lower-alpha">
<li>Lower-alpha 类型</li>
<li>小兔兔</li>
<li>小猫咪</li>
</ul>
</td>

<td>
<ul class="upper-alpha">
<li>Upper-alpha 类型</li>
<li>小兔兔</li>
<li>小猫咪</li>
</ul>
</td>

<td>
<ul class="lower-greek">
<li>Lower-greek 类型</li>
<li>小兔兔</li>
<li>小猫咪</li>
</ul>
</td>

<td>
<ul class="lower-latin">
<li>Lower-latin 类型</li>
<li>小兔兔</li>
<li>小猫咪</li>
</ul>
</td>

<td>
<ul class="upper-latin">
<li>Upper-latin 类型</li>
<li>小兔兔</li>
<li>小猫咪</li>
</ul>
</td>

<td>
<ul class="hebrew">
<li>Hebrew 类型</li>
<li>小兔兔</li>
<li>小猫咪</li>
</ul>
</td>

<tr>
<td>
<ul class="armenian">
<li>Armenian 类型</li>
<li>小兔兔</li>
<li>小猫咪</li>
</ul>
</td>

<td>
<ul class="georgian">
<li>Georgian 类型</li>
<li>小兔兔</li>
<li>小猫咪</li>
</ul>
</td>

<td>
<ul class="cjk-ideographic">
<li>Cjk-ideographic 类型</li>
<li>小兔兔</li>
<li>小猫咪</li>
</ul>
</td>

<td>
<ul class="hiragana">
<li>Hiragana 类型</li>
<li>小兔兔</li>
<li>小猫咪</li>
</ul>
</td>

<td>
<ul class="katakana">
<li>Katakana 类型</li>
<li>小兔兔</li>
<li>小猫咪</li>
</ul>
</td>

<td>
<ul class="hiragana-iroha">
<li>Hiragana-iroha 类型</li>
<li>小兔兔</li>
<li>小猫咪</li>
</ul>
</td>

<td>
<ul class="katakana-iroha">
<li>Katakana-iroha 类型</li>
<li>小兔兔</li>
<li>小猫咪</li>
</ul>
</td>

</body>
</html>


所有的列表样式显示；

bcbobo21cn
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HTML/CSS 一个非常漂亮的收藏列表样式
qq_38959715的博客
04-30 2万+
先上效果图: 收藏列表 代码部分一（HTML） <!DOCTYPE html> <html lang="en"> <head > <meta charset="UTF-8"> <title>Title</title> <script type="text/javascrip...
html和css学习心得.doc
12-21
一般网页在高度宽度变化时会有相应的适配方案，当网页扩大缩小时能保证网页内容能不“失真”，在《精通CSS》中看到，如果向让浮动的元素不随着网页大小变化而发生位置的变化，得给浮动的元素一个宽度，这样在网页...
8款设计师常用漂亮的HTML CSS表格样式
大树叶 技术专栏
03-05 3万+
原来的地址： http://www.laozuo.org/2040.html 我们在布局网站的时候以前都可能直接用TABLE设计，如今都更流行使用CSS设计，这样对于网站结构更加友好和轻便。下面老左整理的8款设计师常用漂亮的HTML CSS样式是在国外网站看到的，也有用到自己的网站中，顺带分享到博客中，以便日后使用的时候直接下载，当然有需要的也方便网友朋友使用。 第一、简单的表格
前端必备精美CSS样式，不来瞅瞅吗？
m0_70571756的博客
06-02 6412
我特别喜欢收集前端好看的特效代码，前端好用的网站。今天给大家分享出来，如果觉得有帮助可以点赞收藏支持一下，如果能关注一下就再好不过了ヾ(≧▽≦*)o，之后还会分享许多干货，话不多说，上动图（网站在文章末尾）：目录🍓按钮系列🍇多选框系列🍈开关系列🍅卡片系列HTML: CSS: 更多按钮（文章最后有链接地址)：HTML: CSS: 🍈开关系列 HTML: CSS: HTML: CSS: 以上精美样式来自：零代码 - 精美CSS样式库 (lingdaima.
CSS实现数字滚动变化
bidepanm的博客
09-06 2720
数字滚动变化
css宽度变化动画
qq_49464155的博客
01-07 5460
transition 属性设置元素当过渡效果，四个简写属性为： transition-property transition-duration transition-timing-function transition-delay 注意： 始终指定transition-duration属性，否则持续时间为0，transition不会有任何效果。 默认值： all 0 ease 0 继承： no 版本： CSS3 JavaScript 语法： object.sty
css学习笔记之展开列表图标动画
最新发布
weixin_65808257的博客
04-07 2347
蓝色界面”风格的填充的星图标欢迎下载填充的星矢量图标，“蓝色界面”风格。格式有png、svg、pdf、html代码。可对填充的星图标、符号进行修改、调整大小、修改颜色。今天在这个网站看到了上面类似的效果，然后就想弄一个，然后就有了上面的。
css动画和渐变
Machoul的博客
06-28 4109
通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果,渐变是图片，需要通过来设置:线性渐变，颜色沿着一条直线发生变化 线性渐变的开头，我们可以指定一个渐变的方向 渐变可以同时指定多个颜色，多个颜色默认情况下平均分布,也可以手动指定渐变的分布情况 可以平铺的线性渐变 径向渐变(放射性的效果) css动画 过渡 通过过渡可以指定一个属性发生变化时的切换方式通过过渡可以创建一些非常好的效果，提升用户的体验:指定要执行过渡的属性 :指定过渡效果的持续时间 :
通过CSS控制svg变化
lyd的博客
07-28 3329
本文介绍使用css魔法控制svg变化，要想实现这一点只需要耐心看下去！ svg代码示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, init.
postcss安装和使用
Python老吕的博客
03-29 2715
是一个用 JavaScript 工具和插件转换 CSS 代码的工具PostCSS 本身是一个功能比较单一的工具。它提供了一种方式用 JavaScript 代码来处理 CSS。它负责把 CSS 代码解析成抽象语法树结构（Abstract Syntax Tree，AST），再交由插件来进行处理。
css动画移动，列表向上滚动不留空白
m0_71225230的博客
10-07 1653
1定义一个动画，move是动画名，动画效果：列表向上移动100%（move对应动画名称，花20秒，平稳移动100%，循环动画）列表向上移动会出现空白，只需要复制一份数据拼接上去。2使用动画，在对用标签的css内部写。一张列表，向上滚动的效果。
CSS3下拉列表收缩展开特效
04-25
这种特效通常与JavaScript配合使用，当用户点击菜单按钮时，触发相应的CSS类的添加或删除，改变`transform`属性的值，从而实现下拉列表的显示和隐藏。可以使用事件监听器（如`addEventListener`）来实现这一功能。 ...
JS+CSS实现美化的下拉列表框效果
10-23
总结来说，JS+CSS实现的美化的下拉列表框效果，通过CSS定义了丰富的样式和状态变化，利用JavaScript增加了动态交互功能。这种技术可以提高用户界面的吸引力和可用性，是现代Web开发中的常见实践。对于前端开发者来说...
css按钮杠杠动画变化
11-28
在网页设计中，CSS（Cascading Style ...总之，“css按钮杠杠动画变化”是一个涉及CSS动画、伪元素、选择器和过渡效果的综合实践。理解并掌握这些概念，将有助于你在网页设计中创造出更多富有创意和吸引力的交互元素。
css拟态图标，鼠标移动布局变化
04-07
总的来说，掌握CSS拟态图标和动态布局变化是提升前端开发技能的关键部分，这不仅可以提升界面的美观度，还能增强用户的交互体验。通过不断学习和实践，开发者可以创造出更吸引人且易用的Web应用。在实际项目中，结合...
js调试console.log使用总结图解
热门推荐
bcbobo21cn的专栏
07-02 5万+
一 实例 打印字符串和对象； 可展开对象查看内部情况； 看一下console对象本身的定义情况； 输出对象情况； utag对象所在文件； 输出对象； 二 Console.log 总结 1 如果你js没到一个境界，我就算教你调试bug，破解一些插件之类的，你也根本不知道我在做什么。我的目的只是让你认识控制台，让你入门调试，...
easyui左侧导航菜单右侧载入百度地图项目框架
bcbobo21cn的专栏
04-05 2万+
代码下载 http://pan.baidu.com/s/1cDht7K 一个左侧是导航菜单，右侧是百度地图的应用； 一 左侧菜单 使用jquery easyui框架；网上下的资源；运行后如下； 二 修改菜单 修改后如下；标注，地理要素，数据管理；这些是GIS功能； 三 jquery easyui框架是这么用的； 单击左侧不同菜单；链接到
不同浏览器前端调试查看返回页面的json数据
bcbobo21cn的专栏
03-15 1万+
VS2015；新建一个asp.net 空网站；加入一个简单网页；加入一个一般处理程序； 一般处理程序代码如下； public class Handler2 : IHttpHandler { public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/p...
asp.net控件库FineUI使用入门图解
bcbobo21cn的专栏
04-17 1万+
FineUI是一个基于 jQuery / ExtJS 的 ASP.NET 控件库，其宣传语是： 创建 No JavaScript，No CSS，No UpdatePanel，No ViewState，No WebServices 的网站应用程序 官网首页和空项目模板地址： http://www.fineui.com/ http://fineui.com/bbs/forum.php?mo
html和css生成一个爱心变化代码
05-22
以下是一个简单的 HTML 和 CSS 代码，可以生成一个可爱的爱心变化效果： ```html <!DOCTYPE html> <html> <head> <title>爱心变化</title> <style> .heart { position: relative; margin: 0 auto; width: 100px; height: 100px; transform: rotate(45deg); animation: heartbeat 1s infinite; } .heart:before, .heart:after { content: ""; position: absolute; top: 0; left: 50px; width: 50px; height: 80px; background-color: red; border-radius: 50px 50px 0 0; transform: rotate(-45deg); transform-origin: 0 100%; } .heart:after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; } @keyframes heartbeat { 0% { transform: scale(1); } 50% { transform: scale(0.7); } 100% { transform: scale(1); } } </style> </head> <body> <div class="heart"></div> </body> </html> ``` 这段代码使用了 `:before` 和 `:after` 伪元素来创建一个爱心形状。然后使用 `transform: rotate(45deg)` 将其旋转 45 度，并使用动画让其心跳效果。您可以在此基础上进行更改和调整，以满足您的需求。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值