怎么设置显示分页的当前页

 更新时间:2016年9月20日 19:06  点击:1895

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单封装 分页效果</title>
<style type="text/css" media="all">
/* <![CDATA[ */
body{margin:50px}
ul{border-top:solid 1px #ddd; margin:0; padding:0 0 0 20px; list-style:none; background:#f4f4f4}
ul li{float:left}
ul li a{display:block; width:30px; height:30px;  border:solid 1px #f4f4f4; text-align:center; line-height:30px}
ul li a.on{position:relative; margin:-1px 0 0; border:solid 1px #ddd; border-top-color:#fff; color:#f00; background:#fff}
.clear:after{content:"."; display:block; height:0; clear:both; visibility:hidden}.clear{display:inline-block}.clear{display:block}
/* ]]> */
</style>
</head>
<body>
<ul id="test" class="clear">
<li><a href="javascript:;" class="on">1</a></li>
<li><a href="javascript:;">2</a></li>
<li><a href="javascript:;">3</a></li>
<li><a href="javascript:;">4</a></li>
<li><a href="javascript:;">5</a></li>
<li><a href="javascript:;">6</a></li>
<li><a href="javascript:;">7</a></li>
<li><a href="javascript:;">8</a></li>
<li><a href="javascript:;">9</a></li>
</ul>
<script type="text/javascript">
// <![CDTAT[
// by MacJi
function f(c){
 this.container = document.getElementById(c);
 this.li = this.container.getElementsByTagName('a');
 var _this = this;
 
 this.init = function (){
  for(var i = 0; i < _this.li.length; i++)_this.li[i].onclick = function(){_this.setOn(this);return this.blur()};
 }
 
 this.setOn = function(o){
  for(var i = 0; i < _this.li.length; i++) _this.li[i].className = '';
  o.className = 'on';
 }
}
var page = new f('test');
page.init();
// ]]>
</script>
</body>
</html>

关于SPAN和DIV的总结性报告!!!

SPAN 和 DIV 的区别在于

1。div是块级 span是内嵌式
2。DIV有结构的意义 SPAN没有
3。DIV包含的对象前后都有换行,SPAN没有

共性
他们都是容器元素,都是用来包含其他同类型的元素的,
最重要的是:
***************************
他们都是为CSS而专门而成立的
***************************

补充:
块元素(block element)一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊,它只能用来容纳其他块元素。

如果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排。而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。需要指出的是,table标签也是块元素的一种,table based layout和css based layout从一般使用者(不包括视力障碍者、盲人等)的角度来看这两种布局,除了页面载入速度的差别外,没有其他的差别。但是如果普通使用者不经意点了查看页面源代码按钮后,两者所表现出来的差异就非常大了。基于良好重构理念设计的css布局页面源码,至少也能让没有web开发经验的普通使用者把内容快速的读懂。从这个角度来说,css layout code应该有更好的美学体验吧。

你能够把块容器元素div想象成一个个box,或者如果你玩过剪贴文载的话,那就更加容易理解了。我们先把需要的文章从各种报纸、杂志总剪 下来。每块剪下来的内容就是一个block。然后我们把这些纸块按照自己的排版意图,用胶水重新贴到一张空白的新纸上。这样就形成了你自己独特的文摘快报 了。作为一种技术的延伸,网页布局设计也遵循了同样的模式。.


内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素,常见内联元素 “a”。

块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后,块元素和内联元素的这种属性差异就不成为差异了。比如,我们完全可以把内联元素cite加上display:block这样的属性,让他也有每次都从新行开始的属性。


可变元素的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别,一旦上下文关系确定了他的类别,他就要遵循块元素或者内联元素的规则限制。

 

1.加入收藏,设为首页:

<a href="javascript:window.external.AddFavorite('http://www.bydragon.com','百龙设计工作室')">加入收藏</a>

<a
href="#"
onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http:
//www.bydragon.com');">设为首页</a>


2.2秒后关闭当前页:
<script language="JavaScript">
<!--
  setTimeout('window.close();',2000);
-->
</script>


3.IE地址栏前换成自己的图标:
在首页<head></head>之间加上如下代码
<link rel="Shortcut Icon" href="favicon.ico">

4.在收藏夹中显示出你的图标:
在首页<head></head>之间加上如下代码
<link rel="Bookmark" href="favicon.ico">

5.改变滚动条颜色:
在首页<head></head>之间加上如下代码
<style>
body{
scrollbar-face-color:147faf; scrollbar-shadow-color:147faf;
scrollbar-highlight-color:147faf; scrollbar-3dlight-color:ffffff;
scrollbar-darkshadow-color:ffffff; scrollbar-track-color:ffffff;
scrollbar-arrow-color:ffffff;}
</style>

scrollbar-face-color表示滚动条面的颜色
scrollbar-shadow-color表示滚动条右斜面的颜色
scrollbar-highlight-color表示滚动条左斜面的颜色
scrollbar-3dlight-color表示滚动条上边和左边边沿的颜色
scrollbar-darkshadow-color表示滚动下边和右边边沿的颜色
scrollbar-track-color表示滚动条底板的颜色
scrollbar-arrow-color表示滚动条两端箭头的颜色

6.鼠标移到单元格颜色改变:
<table width=200><tr>
<td
bgcolor="#738278" style="cursor:hand"
onMouseOver="this.style.backgroundColor='red'"
onMouseOut="this.style.background='#738278'">移

XHTML 的模块化

  为什么要模块化设计XHTML呢?XHTML虽然简单,但是它的内容很多,包括了一个网络设计师需要的绝大多数功能。XHTML一方面内容繁多复杂,但是从另一个角度来看它却是非常简单的。为了将XHTML分割成小的模块,W3C已经建立起了小型的已经定义好了的一系列XHTML元素,他们独立的能被与其他XML标准合并成的大型的更复杂的程序的简单设备所使用。


  通过XHTML模型,程序设计师能够做如下的事情:


  1.选择那些能够被使用XHTML构建块标准的设备所支持的元素。

  2.在遵循XHTML标准的同时使用XML可以对XHTML扩展。

 

  3.简单化的XHTML可以应用于像掌上电脑、移动电话、电视和家用电器等设备。

  4.通过加入心的XML功能(像声音、多媒体的)将XHTML延续到复杂程序的设计上。

  5.像XHTML基本(XHTML对于移动设备的一个子集)那样来定义XHTML的轮廓。

 

模块名 描述
Applet Module * applet元素.
Base Module 定义基本元素.
Basic Forms Module 定义基本的表单元素
Basic Tables Module 定义基本的表格元素
Bi-directional Text Module 定义 bdo 元素.
Client Image Map Module 定义浏览器的 image map 元素.
Edit Module Defines the editing elements del and ins.
Forms Module Defines all elements used in forms.
Frames Module 定义框架集元素
Hypertext Module 定义 a 元素.
Iframe Module 定义 iframe 元素.
Image Module 定义 img 元素.
Intrinsic Events Module 定义事件改变属性元素
Legacy Module Defines deprecated* elements and attributes.
Link Module 定义link 元素.
List Module 定义 list 元素 ol, li, ul, dd, dt, dl.
Metainformation Module 定义 meta 元素.
Name Identification Module Defines the deprecated* name attribute.
Object Module 定义object 和param 元素.
Presentation Module 定义表现元素如 b 和 i.
Scripting Module 定义 script and noscript 元素.
Server Image Map Module 定义 server side image map 元素.
Structure Module 定义结构 html, head, title and body.
Style Attribute Module 定义 style 属性.
Style Sheet Module 定义style 元素.
Tables Module 定义表内应用的元素.
Target Module 定义 target 属性.
Text Module 定义 text container 元素如: p and h1.

如何转换现有的结构为XHTML

  我们选择什么样的DOCTYPE?理想情况当然是严格的DTD,但对于我们大多数刚接触web标准的设计师来说,过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站,使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性,也比较容易通过W3C的代码校验。

  我们从现在的HTML转换为XHTML注意以下几点:


  一、在每个页面的首部都加上文档类型的说明。如:

 

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

  当然可以选择其他类型的。

 

  二、标记和name 要都用小写。

  我们可以自己编写一个替换程序,将你的HTML文档中的所有的标记都换为小写字母,还有name属性也要变为小写。

  三、所有的属性值都要用引号引起来。

 

  四、单独的标签,如: <hr> , <br> and <img>,都要在后面加/来结束。在这里不建议使用诸如:<img>和</img>形式的方式,直接在其后面加/就可以了,如<br />。

 

  五、我们打开W3C DTD 的官方网站:http://validator.w3.org/check/referer,验证时一般错误可能会出现在你的标签嵌套里。也可以用官方网站提供的转换工具tidy来实现转换:http://www.w3.org/People/Raggett/tidy/,我不建议大家直接来使用该工具来验证,因为我们毕竟是新学XHTML我们还是自己转换,这样我们可以熟悉XHTML啊,再者说我们还要学习tidy工具的使用,那样也是比较麻烦的。

  六、我们直接打开下面的页面可以直接输入网址来验证我们的程序了:http:///js/standard.htm

 

[!--infotagslink--]

相关文章

  • php KindEditor文章内分页的实例方法

    我们这里介绍php与KindEditor编辑器使用时如何利用KindEditor编辑器的分页功能实现文章内容分页,KindEditor编辑器在我们点击分页时会插入代码,我们只要以它为分切符,就...2016-11-25
  • 自己动手写的jquery分页控件(非常简单实用)

    最近接了一个项目,其中有需求要用到jquery分页控件,上网也找到了需要分页控件,各种写法各种用法,都是很复杂,最终决定自己动手写一个jquery分页控件,全当是练练手了。写的不好,还请见谅,本分页控件在chrome测试过,其他的兼容性...2015-10-30
  • jquery实现的伪分页效果代码

    本文实例讲述了jquery实现的伪分页效果代码。分享给大家供大家参考,具体如下:这里介绍的jquery伪分页效果,在火狐下表现完美,IE全系列下有些问题,引入了jQuery1.7.2插件,代码里有丰富的注释,相信对学习jQuery有不小的帮助,期...2015-10-30
  • vue.js 表格分页ajax 异步加载数据

    Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
  • Android设置TextView竖着显示实例

    TextView默认是横着显示了,今天我们一起来看看Android设置TextView竖着显示如何来实现吧,今天我们就一起来看看操作细节,具体的如下所示。 在开发Android程序的时候,...2016-10-02
  • Springboot如何使用mybatis实现拦截SQL分页

    这篇文章主要介绍了Springboot使用mybatis实现拦截SQL分页,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-06-19
  • PHP 一个完整的分页类(附源码)

    在php中要实现分页比起asp中要简单很多了,我们核心就是直接获取当前页面然后判断每页多少再到数据库中利用limit就可以实现分页查询了,下面我来详细介绍分页类实现程序...2016-11-25
  • jquery实现的伪分页效果代码

    本文实例讲述了jquery实现的伪分页效果代码。分享给大家供大家参考,具体如下:这里介绍的jquery伪分页效果,在火狐下表现完美,IE全系列下有些问题,引入了jQuery1.7.2插件,代码里有丰富的注释,相信对学习jQuery有不小的帮助,期...2015-10-30
  • AngularJS实现分页显示数据库信息

    这篇文章主要为大家详细介绍了AngularJS实现分页显示数据库信息效果的相关资料,感兴趣的小伙伴们可以参考一下...2016-07-06
  • 基于jquery实现表格无刷新分页

    这篇文章主要介绍了基于jquery实现表格无刷新分页,功能实现了前端排序功能,增加了前端搜索功能,感兴趣的小伙伴们可以参考一下...2016-01-08
  • vue实现页面打印自动分页的两种方法

    这篇文章主要为大家详细介绍了vue实现页面打印自动分页的两种方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-29
  • vue.js表格分页示例

    这篇文章主要为大家详细介绍了vue.js表格分页示例,ajax异步加载数据...2016-10-20
  • C# DataTable分页处理实例代码

    有时候我们从数据库获取的数据量太大,而我们不需要一次性显示那么多的时候,我们就要对数据进行分页处理了,让每页显示不同的数据。...2020-06-25
  • Windows Server 2008 R2远程设置选项灰色解决方法

    最近公司环境有几天Windows Server 2008R2的服务器因为没有激活导致过期后都不能远程,连接显示器后发现远程设置的地方为灰色了...2016-01-27
  • vivo x9怎么设置默认输入法?vivo x9设置默认输入法教程

    本篇文章介绍了vivo x9如何设置默认输入法的方法,手机小白们快来了解一下吧。 问:vivo x9怎么设置默认输入法?答:其实设置默认输入法很容易,首先点击应用程序,然后点设...2017-01-22
  • c# 获得当前绝对路径的方法(超简单)

    下面小编就为大家分享一篇c# 获得当前绝对路径的方法(超简单),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-06-25
  • 原生js实现分页效果

    这篇文章主要为大家详细介绍了原生js实现分页效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-09-24
  • Python优化列表接口进行分页示例实现

    最近,在做测试开发平台的时候,需要对测试用例的列表进行后端分页,在实际去写代码和测试的过程中,发现这里面还是有些细节的,故想复盘一下...2021-09-29
  • laypage分页控件使用实例详解

    这篇文章主要为大家详细分享了laypage分页控件使用实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-05-20
  • Windows 2016 服务器安全设置

    最近公司的网站升级Windows 2016服务器,选择安装了最新版的Windows 2016,以前使用Windows服务器还是Windows 2003系统,发现变化还是挺多的,依次记录下来以备后面查阅...2020-10-05