超COOL的LIST样式

最新推荐文章于 2024-01-22 14:43:20 发布
最新推荐文章于 2024-01-22 14:43:20 发布
阅读量568 收藏
点赞数
分类专栏： javascript 文章标签： list url class border web开发 div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qiaolunihao/article/details/1866344
版权
<html>
<head>
<title>！超COOL的LIST的菜单样式</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
<!--BODY,td
 {
 font-family:verdana;
 cursor:default;
 font-size:12px;
 }

a{font-size:12px; color:#006699; line-height:160%; text-decoration:none }
a:link{font-size:12px; color:#006699; line-height:160%; text-decoration:none }
a:active{font-size:12px;color:#990000; line-height:160%;}
a:hover{font-size:12px; color:#3366ff; line-height:160%; text-decoration:none}
 /*定义链接效果，不要太复杂，以免和SPAN的样式混扰，*/

LI
 {
 list-style-type:square;
 /*list-style-image:url("http://www.51js.com/faq.gif"); */
 margin:0px;
 padding:0px;
 height:15px;
 /*定义了列表的行高，注意不要设置太高，以免列表和符号脱节，*/
 }

LI IMG
 {
 cursor:hand;
 margin:0px;
 padding:0px;
 }

LI SPAN
 {
 color:black;
 cursor:hand;
 text-decoration:none;
 /*定义列表中文字及鼠标指针的样式*/

 border:1px solid #F1F1F1;
 /*定义了SPAN的边框及颜色。*/

 margin:0px;
 padding-left:1px;
 padding-right:0px;
 padding-top:0px;
 padding-bottom:0px;
 position:relative;
 /*以上定义列表SPAN之间的间距。*/

 top:0px;
 left:-1px;/*定义了列表与符号之间的间距。*/
 }

.liOver
 {
 background-color:#dddddd;
 border:1px solid #000000;
 }
.liout
 {
 background-color:#f1f1f1;
 border:1px solid #f1f1f1;
 }
LI SPAN.lidown
 {
 background-color:#00ff00;
 border:1px solid #999999;
 }
-->
</style>
</head>

<body bgcolor="#f1f1f1">
<table width="510" border="1" cellpadding="5" cellspacing="0" bordercolorlight="#999999" bordercolordark="#FFFFFF" align="center">
 <tr bgcolor="#CCCCFF">
 <td width="575">
 <div align="center"><font color="#000000">超COOL的LIST样式</font></div>
 </td>
 </tr>
 <tr>
 <td width="575">
 <p>    以下效果只用到两张小图片作为列表符号，没有用到表格，都是用样式表进行定义，可定义的参数为：</p>
 <blockquote>
 <p> LI的符号样式；<br>
 链接的样式；<br>
 SPAN的样式； </p>
 <p>如果能够进行很好的配色及背景搭配，就可以做出非常好的效果。</p>
 </blockquote>
 <ul>
 <li style="list-style-image: url('http://www.51js.com/images/multipage.gif'); " onMouseOver="this.style.listStyleImage='url(http://www.51js.com/n.gif)'" onMouseOut="this.style.listStyleImage='url(http://www.51js.com/images/multipage.gif)'">
 <span onMouseOver="this.className = 'liOver'" onMouseOut="this.className='liout'" onMousedown="this.className='lidown'" class="liout">
 <a href="#">不但改变了列表符号，而且改变了链接效果，还改变了SPAN的样式！COOL！</a> </span> </li>
 <li style="list-style-image: url('http://www.51js.com/images/multipage.gif'); " onMouseOver="this.style.listStyleImage='url(http://www.51js.com/n.gif)'" onMouseOut="this.style.listStyleImage='url(http://www.51js.com/images/multipage.gif)'">
 <span onMouseOver="this.className = 'liOver'" onMouseOut="this.className='liout'" onMousedown="this.className='lidown'" class="liout">
 <a href="#">不但改变了列表符号，而且改变了链接效果，还改变了SPAN的样式！COOL！</a> </span> </li>
 <li style="list-style-image: url('http://www.51js.com/images/multipage.gif'); " onMouseOver="this.style.listStyleImage='url(http://www.51js.com/n.gif)'" onMouseOut="this.style.listStyleImage='url(http://www.51js.com/images/multipage.gif)'">
 <span onMouseOver="this.className = 'liOver'" onMouseOut="this.className='liout'" onMousedown="this.className='lidown'" class="liout">
 <a href="#">不但改变了列表符号，而且改变了链接效果，还改变了SPAN的样式！COOL！</a> </span> </li>
 <li style="list-style-image: url('http://www.51js.com/images/multipage.gif'); " onMouseOver="this.style.listStyleImage='url(http://www.51js.com/n.gif)'" onMouseOut="this.style.listStyleImage='url(http://www.51js.com/images/multipage.gif)'">
 <span onMouseOver="this.className = 'liOver'" onMouseOut="this.className='liout'" onMousedown="this.className='lidown'" class="liout">
 <a href="#">不但改变了列表符号，而且改变了链接效果，还改变了SPAN的样式！COOL！</a> </span> </li>
 <li style="list-style-image: url('http://www.51js.com/images/multipage.gif'); " onMouseOver="this.style.listStyleImage='url(http://www.51js.com/n.gif)'" onMouseOut="this.style.listStyleImage='url(http://www.51js.com/images/multipage.gif)'">
 <span onMouseOver="this.className = 'liOver'" onMouseOut="this.className='liout'" onMousedown="this.className='lidown'" class="liout">
 <a href="#">不但改变了列表符号，而且改变了链接效果，还改变了SPAN的样式！COOL！</a> </span> </li>
 <li style="list-style-image: url('http://www.51js.com/images/multipage.gif'); " onMouseOver="this.style.listStyleImage='url(http://www.51js.com/n.gif)'" onMouseOut="this.style.listStyleImage='url(http://www.51js.com/images/multipage.gif)'">
 <span onMouseOver="this.className = 'liOver'" onMouseOut="this.className='liout'" onMousedown="this.className='lidown'" class="liout">
 <a href="#">不但改变了列表符号，而且改变了链接效果，还改变了SPAN的样式！COOL！</a> </span> </li>
 <li style="list-style-image: url('http://www.51js.com/images/multipage.gif'); " onMouseOver="this.style.listStyleImage='url(http://www.51js.com/n.gif)'" onMouseOut="this.style.listStyleImage='url(http://www.51js.com/images/multipage.gif)'">
 <span onMouseOver="this.className = 'liOver'" onMouseOut="this.className='liout'" onMousedown="this.className='lidown'" class="liout">
 <a href="#">不但改变了列表符号，而且改变了链接效果，还改变了SPAN的样式！COOL！</a> </span> </li>
 <li style="list-style-image: url('http://www.51js.com/images/multipage.gif'); " onMouseOver="this.style.listStyleImage='url(http://www.51js.com/n.gif)'" onMouseOut="this.style.listStyleImage='url(http://www.51js.com/images/multipage.gif)'">
 <span onMouseOver="this.className = 'liOver'" onMouseOut="this.className='liout'" onMousedown="this.className='lidown'" class="liout">
 <a href="#">不但改变了列表符号，而且改变了链接效果，还改变了SPAN的样式！COOL！</a> </span> </li>
 <li style="list-style-image: url('http://www.51js.com/images/multipage.gif'); " onMouseOver="this.style.listStyleImage='url(http://www.51js.com/n.gif)'" onMouseOut="this.style.listStyleImage='url(http://www.51js.com/images/multipage.gif)'">
 <span onMouseOver="this.className = 'liOver'" onMouseOut="this.className='liout'" onMousedown="this.className='lidown'" class="liout">
 <a href="#">不但改变了列表符号，而且改变了链接效果，还改变了SPAN的样式！COOL！</a> </span> </li>
 </ul>
 </td>
 </tr>
 <tr bgcolor="#CCCCFF">
 <td width="575">
 <div align="right">FROM：<a href="http://www.alixixi.com">阿里西西WEB开发(alixixi.com)</a> </div>
 </td>
 </tr>
</table>
</body>
</html>
<a href="http://www.alixixi.com/Dev/HTML/jsrun/">欢迎访问阿里西西网页特效集</a>
qiaolunihao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
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...
表白女神炫酷相册.zip
05-10
例如，可以使用CSS选择器选择特定元素，如`.cool-gallery`来定义相册区域的样式，并通过`background-image`属性设置背景图片，`transition`属性添加动画效果，增强用户体验。 3. **JavaScript (JS)**：JS是一种强大...
关于Alist网盘点美化
最新发布
2301_81547508的博客
01-22 1655
关于Alist网盘点美化
超COOL的LIST样式(转)
congjukun0600的博客
08-15 142
超COOL的LIST样式(转)[@more@]  { font-family:verdana; cursor:default; font-size:12px; } a...
好看的css table列表样式
07-19
好看的css table列表样式
CSS list-style样式集锦
张营的技术博客
03-10 3427
大家在写网页的时候，免不了写ul  li,并且很多人不喜欢自带的li样式，所以一般会将li的样式设置为none,但是在有的时候，我们需要对一类资源进行编号，如新闻列表，博客列表，商品列表等等，并且有的需要进行阿拉伯编号，有的需要字母编号，这时候如果自己手写的话就麻烦了。没错，不要忘记list-style这个属性，它的功能还是蛮强大的哦，请看：  list-style 定义:用于在一个声
list-style
fly
04-14 2964
列表样式主要是设置ul或ol前面的那个“列表符”的特性，包括： list-style-type： 用于设置列表样式的类型，比如原点(disc)，圆圈(circle)，阿拉伯数字(decimal)，罗马数字，英文字母。 有了这个属性，对ul和ol来说，就没有差别了！ list-style-image 用于设置列列表前面的小图标（图像），也就是说，用一个图片来代替上面的列表符。 如果设置了这项...
List样式进阶——图片环绕、分栏多列布局
Joyce的前端日常
10-16 659
前言 好几个月没有更新了，也侧面反应工作太忙。最近被各种List的样式折磨得不轻。看似样式简单，但是在实现时也遇到不少问题。这篇小文记录一下，也提供给遇到相似问题的同学。 List图片环绕 如图，实现这样一个效果： List环绕在图片周围 List的点始终和段落对齐，且在内容的外部 实现demo: https://jsfiddle.net/doyk9hx1/1/ <div class...
hist__how__control.zip_Cool_list control_tin5nn_其他小程序
09-20
本文将基于"hist__how__control.zip_Cool_list control_tin5nn_其他小程序"这个压缩包，深入探讨如何利用C++编程语言来创建和控制一个酷炫的列表控件。我们将关注以下核心知识点： 1. **列表控件(List Control)**：...
npp.7.3.bin.zip_things
09-23
描述 "NICE STUFF FOR YOU to do cool things with. Its verry important and this wil do all" 强调了这个压缩包中的内容对于用户来说非常有用，可以完成很多酷炫的功能，且非常重要，暗示Notepad++的强大功能和...
5种简单实用的css列表样式实例
01-31
谁不希望有一个好看而又干净的列表？这篇文章中我们给出几个实用的例子，你可以把他们直接用到自己的工作中。我们从一个带有动画效果的垂直列表开始，接着是一个图文混排的例子，然后是一个只有图片的list例子跟一个水平菜单的例子，最后是一个以放大数字开头的列表。对于初学者而言这里可以学到很多东西，对于熟手，直接拿来用就是了。第一个例子的样式看起平淡无奇，不过喜欢简约风格的人也许会感兴趣，这类似于印刷字体风格，简结的同时也不失灵动的特点（当鼠标滑上去的时候）。注：个人喜欢这里的第二个图文混排的例子，但是发现老外更喜欢第一个，也许这就是文化差异吧。。。这里是源码demo地址：CodePen先看效果图：
弹窗美化代码
08-20
弹窗美化代码，使弹出窗口的效果美化，更友好
jQuery+CSS3网页表单元素美化代码
06-10
jQuery+CSS3网页表单元素美化代码是一款在原生HTML表单的基础上进行美化，并使用jQuery来制作label动画效果，通常用于美化联系方式表单。
animation实现炫酷弹出选项
05-21
在网页和应用开发中，CSS（层叠样式表）和JavaScript经常被用来实现各种动画效果，包括平滑的过渡、动态效果以及复杂的交互。 对于"炫酷弹出选项"，我们可以想象一个用户触发某个操作后，一组选项以引人注目的方式...
VC实现炫眩qq界面的模拟(附源码)
03-10
界面换肤 美化 异形窗口 vista 样式 透明窗体 自绘控件 vc vb delphi 编程 源码 代码 例子 磨沙 半透明 开发包 免费 破解 button dialog frame XP 下载 自绘按钮 菜单 标题栏 滚动条 listctrl treeview listview ...
list-style-type:定义列表样式
wis2007的专栏
01-13 4184
扩展：list-style-type:定义列表样式 disc: 点 circle: 圆圈 square: 正方形 decimal: 数字，例如1，2，3，，….，11，12，13 decimal-leading-zero: 十进制数，不足两位的补齐前导0，例如: 01, 02, 03, …, 98, 99 lower-roman: 小写罗马文字，例如: i, ii, iii, iv, v
android listView 美化
hyshucom
07-12 433
android listView 是android开发经常用到的控件。 如果进行美化，好好利用可以做出更加美观的列表下面介绍几个特别的属性： 第一个是stackFromBottom属性，这只该属性之后你做好的列表就会显示你列表的最下面，值为true和false android:stackFromBottom="true" 第二个是transciptMode属性，需要用ListView...
推荐一款支持多种存储的程序AList(附上个人站点)
05-12 1040
一个支持多种存储的文件列表程序，使用 Gin 和 Solidjs。
Android ListView重要美化属性
挂板：
03-28 1036
1.去滑动到顶点和底边时的黑色阴影 android:fadingEdge="none" 2.去拖动时默认黑色底色 android:cacheColorHint=“#00000000” 3.去选中时的黄色底色 android:listSelector="#00000000" 4.去除滚动条 android:scrollbars="none" 与 setVerticalS
cool-admin
07-27
cool-admin是一个基于Midway.js和Cool-Core的后台管理系统框架。根据引用\[1\]，在cool-admin中，可以通过新建控制器来实现接口的测试和调试。控制器可以放在应用端或后台(admin)端，但为了方便浏览器打开接口测试，建议将控制器放在应用端。具体路径为src/modules/member/controller/app/user.ts。 根据引用\[2\]，在cool-admin中，可以使用快捷键"con"来一键搭建控制器的结构。在控制器中，可以定义各种自定义接口。同时，cool-admin会自动创建数据库表格，无需手动创建。具体的数据库配置可以在配置文件中进行设置。根据引用\[3\]，可以在配置文件中设置数据库的连接信息，包括数据库类型、主机、端口、数据库名称等。在cool-admin中，默认使用的是MySQL数据库，但也可以配置使用MongoDB数据库。 总结起来，cool-admin是一个基于Midway.js和Cool-Core的后台管理系统框架，可以通过新建控制器来实现接口的测试和调试。控制器可以放在应用端或后台端，建议放在应用端以方便浏览器打开接口测试。cool-admin会自动创建数据库表格，无需手动创建。具体的数据库配置可以在配置文件中进行设置，包括数据库类型、主机、端口、数据库名称等。默认情况下，cool-admin使用的是MySQL数据库，但也可以配置使用MongoDB数据库。 #### 引用[.reference_title] - *1* *3* [cool-admin框架后端使用-node版本，配置多数据源](https://blog.csdn.net/u014617119/article/details/126801483)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [cool-admin框架使用](https://blog.csdn.net/asd577007722/article/details/115541717)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值