教程集 > 脚本编程 > javascript > 正文 js网页列表样式

js网页列表样式

发布时间：2023-04-29 编辑：jiaochengji.com

教程集为您提供js网页列表样式等资源，欢迎您收藏本站，我们将为您提供最新的js网页列表样式资源

提示：您可以先修改部分代码再运行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  <title>有序列表分页源码/样式示例</title>  <style type="text/css">  .pagination{  	overflow:hidden;  	margin:0;  	padding:10px 10px 6px 10px;  	border-top:1px solid #f60;  	_zoom:1;  }  .pagination *{  	display:inline;  	float:left;  	margin:0;  	padding:0;  	font-size:12px;  }  .pagination i{  	float:none;  	padding-right:1px;  }  .currentPage b{  	float:none;  	color:#f00;  }  .pagination li{  	list-style:none;  	margin:0 5px;  }  .pagination li li{  	position:relative;  	margin:-2px 0 0;  	font-family: Arial, Helvetica, sans-serif  }  .firstPage a,.previousPage a,.nextPage a,.lastPage a{  	overflow:hidden;  	height:0;  	text-indent:-9999em;  	border-top:8px solid #fff;  	border-bottom:8px solid #fff;  }  .pagination li li a{  	margin:0 1px;  	padding:0 4px;  	border:3px double #fff;  	 border-color:#eee;  	background:#eee;  	color:#06f;  	text-decoration:none;  }  .pagination li li a:hover{  	background:#f60;  	border-color:#fff;  	 border-color:#f60;  	color:#fff;  }  li.firstPage{  	margin-left:40px;  	border-left:3px solid #06f;  }  .firstPage a,.previousPage a{  	border-right:12px solid #06f;  }  .firstPage a:hover,.previousPage a:hover{  	border-right-color: #f60;  }  .nextPage a,.lastPage a{  	border-left:12px solid #06f;  }  .nextPage a:hover,.lastPage a:hover{  	border-left-color:#f60;  }  li.lastPage{  	border-right:3px solid #06f;  }  li li.currentState a{  	position:relative;  	margin:-1px 3px;  	padding:1px 4px;  	border:3px double #fff;  	 border-color:#f60;  	background:#f60;  	color:#fff;  }  li.currentState,.currentState a,.currentState a:hover{  	border-color:#fff #ccc;  	cursor:default;  }  </style>  </head>  <body>  <h1>宝儿作品——有序列表分页源码/样式示例</h1>  <h2>有序列表分页HTML源码：</h2>  <pre><ul class="pagination" title="分页列表"><br />  <li class="totalAnnal">总记录数：<i>3</i></li><br />  <li class="totalPage">总页数：<i>3</i></li><br />  <li class="currentPage">当前页：<b>3</b></li><br />  <li class="firstPage currentState"><a href="javascript:;" title="首页">首页</a></li><br />  <li class="previousPage currentState"><a href="javascript:;" title="前一页">前一页</a></li><br />  <li><br />    <ol><br />      <li><a title="转到第1页" href="javascript:;">1</a></li><br />      <li><a title="转到第2页" href="javascript:;">2</a></li><br />      <li class="currentState" title="当前页"><a href="javascript:;">3</a></li><br />      <li><a title="转到第4页" href="javascript:;">4</a></li><br />      <li><a title="转到第5页" href="javascript:;">5</a></li><br />      <li><a title="转到第6页" href="javascript:;">6</a></li><br />      <li><a title="转到第7页" href="javascript:;">7</a></li><br />      <li><a title="转到第8页" href="javascript:;">8</a></li><br />      <li><a title="转到第9页" href="javascript:;">9</a></li><br />    </ol><br />  </li><br />  <li class="nextPage"><a href="javascript:;" title="后一页">后一页</a></li><br />  <li class="lastPage"><a href="javascript:;" title="尾页">尾页</a></i><br /></ul></pre>  <hr />  <h2>导入样式表：</h2>  <ul class="pagination" title="分页列表">    <li class="totalAnnal">总记录数：<i>3</i></li>    <li class="totalPage">总页数：<i>3</i></li>    <li class="currentPage">当前页：<b>3</b></li>    <li class="firstPage currentState">首页</li>    <li class="previousPage currentState">前一页</li>    <li>      <ol>        <li>1</li>        <li>2</li>        <li class="currentState" title="当前页">3</li>        <li>4</li>        <li>5</li>        <li>6</li>        <li>7</li>        <li>8</li>        <li>9</li>      </ol>    </li>    <li class="nextPage">后一页</li>    <li class="lastPage">尾页</i>  </ul>  </body>  </html>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
CSS样式表:链接好还是嵌入好?
JQuery实现鼠标滑过显示导航下拉列表
 CSS文件是链接还是应该嵌入？
js 3秒后跳转页面实例代码
 爬虫入门的基本原理，如果你连这些都不知道那你可以放弃爬虫了！
网页制作之如何管理好网站的css样式
 chrome浏览器设置网页编码格式的方法
 修改DeDe标签Pagelist分页样式
 网页超级链接
 php和css有什么关联

上一篇：js评分代码下一篇：怎么让div遮住下拉列表

[关闭]

js网页列表样式

最近更新

浏览排行