在HTML中通过jQuery设置列表项符号
在创建列表的时候,可以通过指定type来设置列表项的符号,如下所示:
<body>
<form id="form1" runat="server">
<div>
<%--实心圆--%>
<ul id="ulstyle" type="disc">
<li>jQuery 是一个JavaScript库。 </li>
<li>jQuery 极大简化了JavaScript编程。</li>
<li>jQuery 很容易学习。</li>
</ul> <%--数字--%>
<ul id="ul1" type="decimal">
<li>jQuery 是一个JavaScript库。 </li>
<li>jQuery 极大简化了JavaScript编程。</li>
<li>jQuery 很容易学习。</li>
</ul> <%--数字方块--%>
<ul id="ul2" type="square">
<li>jQuery 是一个JavaScript库。 </li>
<li>jQuery 极大简化了JavaScript编程。</li>
<li>jQuery 很容易学习。</li>
</ul> <%--空心圆--%>
<ul id="ul3" type="circle">
<li>jQuery 是一个JavaScript库。 </li>
<li>jQuery 极大简化了JavaScript编程。</li>
<li>jQuery 很容易学习。</li>
</ul> <%--小写罗马数字--%>
<ul id="ul4" type="lower-roman">
<li>jQuery 是一个JavaScript库。 </li>
<li>jQuery 极大简化了JavaScript编程。</li>
<li>jQuery 很容易学习。</li>
</ul> <%--大写罗马数字--%>
<ul id="ul6" type="upper-roman">
<li>jQuery 是一个JavaScript库。 </li>
<li>jQuery 极大简化了JavaScript编程。</li>
<li>jQuery 很容易学习。</li>
</ul> <%--小写英文--%>
<ul id="ul7" type="lower-alpha">
<li>jQuery 是一个JavaScript库。 </li>
<li>jQuery 极大简化了JavaScript编程。</li>
<li>jQuery 很容易学习。</li>
</ul> <%--大写英文--%>
<ul id="ul8" type="upper-alpha">
<li>jQuery 是一个JavaScript库。 </li>
<li>jQuery 极大简化了JavaScript编程。</li>
<li>jQuery 很容易学习。</li>
</ul> </ul>
</div>
</form>
</body>
效果图:

还有一种就是type="none",即不使用列表符号。
使用自带的符号看起来比较刻板,可以使用jQuery实现自定义的列表符号,并且可以使用图片。
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<style type="text/css">
#ulstyle
{
list-style:none;
}
<%--自定义样式--%>
.list
{
background:url(img/rightrow.jpg) no-repeat;padding-left:20px;
}
</style> <%--jQuery代码--%>
<script type="text/javascript">
$(document).ready(function () {
$("#ulstyle li").each(function () {
$(this).addClass("list");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul id="ulstyle">
<li>jQuery 是一个JavaScript库。 </li>
<li>jQuery 极大简化了JavaScript编程。</li>
<li>jQuery 很容易学习。</li>
</ul>
</div>
</form>
</body>
效果图:
在HTML中通过jQuery设置列表项符号的更多相关文章
- CSS:列表样式(设置列表项的标志图案/位置)
通过CSS 列表属性能够放置.改变列表项标志.或者将图像作为列表项标志. 代码整理自w3school:http://www.w3school.com.cn 效果图: watermark/2/text/ ...
- ASP.NET MVC中为DropDownListFor设置选中项的方法
在MVC中,当涉及到强类型编辑页,如果有select元素,需要根据当前Model的某个属性值,让Select的某项选中.本篇只整理思路,不涉及完整代码. □ 思路 往前台视图传的类型是List< ...
- MVC 中@Html.DropDownListFor() 设置选中项 这么不好使 ? [问题点数:40分,结帖人lkf181]
http://bbs.csdn.net/topics/390867060 由于不知道错误原因在哪 我尽量把代码都贴出来吧:重点是:在 Controller 类里 我给 SelectListItem集合 ...
- CSS中列表项list样式
CSS列表属性 属性 描述 list-style-属性 用于把所有用于列表的属性设置于一个声明中. list-style-image 将图象设置为列表项标志. list-style-position ...
- FreeRTOS列表和列表项
FreeRTOS中的列表和列表项类似于数据结构中的链表和节点: 相关的文件是list.c和list.h两个文件: List_t列表结构体 具体定义如下: /* * Definition of the ...
- @Html.DropDownListFor 绑定列表项
MVC中为 DropDownListFor 绑定列表项, 一种方案从后台加载列表内容,通过ViewData传递到前台页面. View: <div class="editor-label ...
- 跟我学SharePoint 2013视频培训课程—— 审批、拒绝列表项(13)
课程简介 第13天,怎样在SharePoint 2013中审批.拒绝列表项. 视频 SharePoint 2013 交流群 41032413
- 从0开始学FreeRTOS-(列表与列表项)-3
# FreeRTOS列表&列表项的源码解读 第一次看列表与列表项的时候,感觉很像是链表,虽然我自己的链表也不太会,但是就是感觉很像. 在`FreeRTOS`中,列表与列表项使用得非常多 ...
- 从0开始学FreeRTOS-(列表&列表项)-6
# FreeRTOS列表&列表项的源码解读 第一次看列表与列表项的时候,感觉很像是链表,虽然我自己的链表也不太会,但是就是感觉很像. 在FreeRTOS中,列表与列表项使用得非常多,是Free ...
随机推荐
- UITabBarItem编写的时候出现得图片显示异常,和有一些比较忽略的方法总结
我现在学到可分栏控制器,UITabBarController.我总结了它的层次有,UITabBarController控制并且只有以个UITanBat(他是一个UIIView的子类),UITabBar ...
- 机房收费系统之uml图——初版
说起uml图,在我心中最难的当属类图无疑.虽然敲了三层的小例子,但真正让把三层和uml图结合起来,并且还要考虑设计模式的时候,总是让人有一种无从下手的感觉,不过还好,通过这半个多月的思考与探索(竟然用 ...
- [Android 开源项目学习]Android的UITableView(1)
最近由于项目加急,手里有好多看了差不多的开源项目,其中好多是大家经常用到的.图片的缓存BitmapFun(Android的文档中),AfinalMap,下拉刷新PullToRefresh等等 ...
- java开发常用命令
cd /d e:work2,更改至当前工作目录svnup.bat,批量更新所有项目 @echo off for /D %%i in (.\*) do ( echo %%i svn up %%i )ho ...
- Rsync文件同步
Rsync文件同步 本章结构 关于rsync 1.一款增量备份工具,remote sync,远程同步,支持本地复制或者与其他SSH.rsync主机同步,官方网站:http://rsync.samba. ...
- 设置navigationBar上面的item
//创建UIBarButtonItem UIBarButtonItem * rightButton = [[UIBarButtonItem alloc]initWithBarButtonSystemI ...
- java初级开发中的报错问题
1.典例1 错误原因:?useUnicode=true&characterEncoding=UTxF8 纠错:其中的? 是汉语的 2.典例2 纠错原因:数据库没有打开 纠错: 我的电脑-- ...
- 纯JS画点、画线、画圆的方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- WebSocket在ASP.NET MVC4中的简单实现 (该文章转自网络,经尝试并未实现,请大神指点。)
WebSocket 规范的目标是在浏览器中实现和服务器端双向通信.双向通信可以拓展浏览器上的应用类型,例如实时的数据推送.游戏.聊天等.有了WebSocket,我们就可以通过持久的浏览器和服务器的连接 ...
- Android聊天界面刷新消息
今天,我想来分享一下自己初用线程的感受,虽然写法略显粗糙,并没有用线程Thread中核心的Looper,MessageQueue消息队列这些知识,正因为是初学线程,所以就只用最基础的来写了,慢慢学习优 ...