1.文档流
将窗体自上而下分成一行行， 并在每行中按从左至右的顺序排放元素，即为文档流。 每个非浮动块级元素都独占一行， 浮动元素则按规定浮在行的一端。 若当前行容不下， 则另起新行再浮动。 内联元素也不会独占一行。 几乎所有元素(包括块级，内联和列表元素）均可生成子行， 用于摆放子元素。 有三种情况将使得元素脱离文档流而存在，分别是浮动，绝对定位， 固定定位。 浮动元素不占任何正常文档流空间，而浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。 基于文档流， 我们可以很容易理解以下的定位模式： 相对定位， 即相对于元素在文档流中位置进行偏移。 但保留原占位。 绝对定位， 即完全脱离文档流， 相对于position属性非static值的最近父级元素进行偏移。 固定定位， 即完全脱离文档流， 相对于视区进行偏移。 几个问题 作为三大基本元素之一的内联元素。 它跟块级元素的主要区别在哪？ 内联元素是什么意思呢？什么是块级别元素？ 《CSS权威指南》中文字显示：任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式，这里的“行布局”的意思就是说其表现形式始终以行进行显示。比如，我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复，每一行下方都会有一条黑色的细线。如果是块级元素那么所显示的的黑线只会在块的下方出现。 p、h1、或div等元素常常称为块级元素，这些元素显示为一块内容；Strong。span等元素称为行内元素，它们的内容显示在行中，即“行内框”。（可以使用display=block将行内元素转换成块元素，display=none表示生成的元素根本没有框，也既不显示元素，不占用文档中的空间） 行内就是在一行内的元素，只能放在行内；块级元素，就是一个四方块，可以放在页面上任何地方。 说白了，行内元素就好像一个单词；块级元素就好像一个段落，如果不另加定义的话，它将独立一行出现。 一般的 块级元素诸如段落<p>、标 题<h1><h2>...、列表。<ul><ol><li> 、表格<table>、表单<form>、DIV<div>和BODY<body>等元素。而内联元素则如: 表单元素<input>、超级链接<a>、图像<img>、<span> ........ 块级无素的显著特点是：每个块级元素都是从一个新行开始显示，而且其后的无素也需另起一行进行显示。 <span>在CSS定义中属于一个行内元素，而<div>是块级元素。 用容器这一词会更容易形象理解它们的存在与用途，行内元素相当一个小容器，而<div>相当于一个大容器，大容器当然可以放一个小容器了。<span>就是小容器，这样一说你也许会在脑海中有一个初步的印象了吧，如果我们想在大容器中装一些清水。但我也想在里装一些墨水怎么 办？很简单，我们把小容器拿出来装上墨水然后放入大容器里的清水中不就成了吗。 块元素（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这样的属性，让他也有每次都从新行开始的属性。 可变元素的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别，一旦上下文关系确定了他的类别，他就要遵循块元素或者内联元素的规则限制。大致的元素分类见全文。
2.display的属性
display 属性规定元素应该生成的框的类型。
| none | 此元素不会被显示。 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
| inline-block | 行内块元素。（CSS2.1 新增的值） |
3.Margin是什么
CSS 边距属性定义元素周围的空间。通过使用单独的属性，可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。——W3School
边界，元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。——CSS权威指南
我们可以很清楚的了解到margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
Margin的特性
margin始终是透明的。margin通过使用单独的属性，可以对上、右、下、左的外边距进行设置。即：margin-top、margin-right、margin-bottom、margin-left。
外边距的 margin-width 的值类型有：auto | length | percentage。也可以使用简写的外边距属性同时改变所有的外边距：margin: top right bottom left;(eg: margin:10px 20px 30px 40px) 记忆方式是元素周围正上方顺时针“上右下左”记忆。
并且规范还提供了省略的数值写法，基本如下：
如果margin只有一个值，表示上右下左的margin同为这个值。例如：margin:10px; 就等于 margin:10px 10px 10px 10px;
如果 margin 只有两个值，第一个值表示上下margin值，第二个值为左右margin的值。例如：margin:10px 20px; 就等于 margin:10px 20px 10px 20px;
如果margin有三个值，第一个值表示上margin值，第二个值表示左右margin的值，第三个值表示下margin的值。例如：margin:10px 20px 30px; 就等于 margin:10px 20px 30px 20px;
如果margin有四个值，那这四个值分别对应上右下左这四个margin值。例如：margin:10px 20px 30px 40px;
在实际应用中，个人不推荐使用三个值的margin，一是容易记错，二是不容易日后修改，一开始如果写成margin:10px 20px 30px;日后需求改动为上10px，右30px，下30px，左20px，你不得不还是得把这个margin拆开为margin:10px 30px 30px 20px;费力且不讨好，不如一开始就老老实实的写成margin:10px 20px 30px 20px;来的实在，不要为了现在节省俩个字节而让日后再次开发的成本上升。
垂直外边距合并问题
别被上面这个名词给吓倒了，简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。你可以查看W3Shool CSS外边距合并了解这个基本知识。
实际工作中，垂直外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距，这个问题发生的原因是根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。
再说了白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己“领导”(父元素，祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin防止它越级，假传圣旨，把自己的margin当领导的margin执行。
对于垂直外边距合并的解决方案上面已经解释了，为父元素例子中的middle元素增加一个border-top或者padding-top即可解决这个问题。
一般说来这个问题解释到这里，大多数文章就不会再深入下去了，但作为一名实战开发者，最求的是知其然知其所以然，原本使用margin-top就是为了与父元素隔开距离，而按照你这么一个解法，其实是一种“修复”，为了“弥补修复”这个父子垂直外边距合并这个CSS规范“Bug”，而强制在父元素上使用border-top和padding-top，不舒服，也不容易记住，下次再发生这样的情况还是会忘记这条准则，而且在页面设计稿里如果不需要border-top加个上边框，这么一加反而画蛇添足，为以后修改留下隐患。
用Margin还是用Padding
何时应当使用margin：需要在border外侧添加空白时。空白处不需要背景（色）时。上下相连的两个盒子之间的空白，需要相互抵消时。如15px + 20px的margin，将得到20px的空白。
何时应当时用padding：需要在border内测添加空白时。空白处需要背景（色）时。上下相连的两个盒子之间的空白，希望等于两者之和时。如15px + 20px的padding，将得到35px的空白。
个人认为：margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”。
margin在块元素、内联元素中的区别
HTML（这里说的是html标准，而不是xhtml）里分两种基本元素，即block和inline。顾名思义，block元素就是以”块”表现的元素（block-like elements），inline元素即是以”行”表现的元素（character level elements and text strings）。二者表现的主要差别在于，在页面文档中block元素另起一行开始，并独占一行。inline元素则同其他inline元素共处一行。
block元素（块元素）大致有：P|H1|H2|H3|H4|H5|H6|UL|OL|PRE| DL | DIV | NOSCRIPT | BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS(随着html5标准的推进，一些元素将被废除，而一些新的元素将被引入)注意的是并非所有的block元素的默认display属性都是block，像table这种display:table的元素也是block元素。
inline元素（内联元素）大致有：#PCDATA（即文本）| TT | I | B | BIG | SMALL|EM | STRONG | DFN | CODE |SAMP | KBD | VAR | CITE | ABBR | ACRONYM|A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO|INPUT | SELECT | TEXTAREA | LABEL | BUTTON
其中有类特殊的元素：如img|input|select|textarea|button|label等，他们被称为可置换元素（Replaced element）。他们区别一般inline元素（相对而言，称non-replaced element）是：这些元素拥有内在尺寸(intrinsic dimensions),他们可以设置width/height属性。他们的性质同设置了display:inline-block的元素一致。
或许有朋友对非置换元素（non-replaced element）有点疑惑，稍微帮助大家理解一下。非置换元素，W3C 中没有给出明确的定义，但我们从字面可以理解到，非置换元素对应着置换元素（replaced element），也就是说我们搞懂了置换元素的含义，就懂了非置换元素。置换元素，W3C中给出了定义：“An element that is outside the scope of the CSS formatter, such as an image, embedded document, or applet”
从定义中我们可以理解到，置换元素（replaced element）主要是指 img, input, textarea, select, object 等这类默认就有 CSS 格式化外表范围的元素。进而可知，非置换元素（non-replaced element）就是除了 img, input, textarea, select, object 等置换元素以外的元素。
margin在块级元素下，他的性能可以完全体现，上下左右任你设定。且记住块级元素的margin的参照基准是前一个元素即相对于自身之前的元素有margin距离。如果元素是第一个元素，则就是相对于父元素的margin距离（但第一个元素相对于父元素margin-top而父元素又没有设定padding-top/border-top的话要需要印证上面的垂直外边距合并的知识）
margin也能用于内联元素，这是规范所允许的，但是margin-top和margin-bottom对内联元素（对行）的高度没有影响，并且由于边界效果(margin效果)是透明的，他也没有任何的视觉影响。
这是因为边界应用于内联元素时不改变元素的行高度，如果你要改变内联元素的行高即类似文本的行间距，那么你只能使用这三个属性：line-height，fong-size，vertical-align。请记住，这个影响内联元素高度的是line-height而不是height，因为内联元素是一行行的，定一个height的话，那这到底是整段inline元素的高呢？还是inline元素一行的高呢？这都说不准，所以统一都给每行定一个高，只能是line-height了。
margin-top/margin-bottom对内联元素没有多大实际效果，不过margin-left/margin-right还是能够对内联元素产生影响的。应用margin:10px 20px 30px 40px;，左边这个css如果写在inline元素上，他的效果大致是，上下无效果，左边离他相邻元素或者文本距离为40px，右边离他相邻元素或者文本距离为20px。你可以自行尝试一番。
最后在内联元素中还有上文我们提到的非可置换inline元素（non-replaced element），这些个元素img|input|select|textarea|button|label虽然是内联元素，但margin依旧可以影响到他的上下左右！
总结下来margin 属性可以应用于几乎所有的元素，除了表格显示类型（不包括 table-caption, table and inline-table）的元素，而且垂直外边距对非置换内联元素（non-replaced inline element）不起作用。
负margin技术及其应用
在margin所有的实际应用中，负margin技术是我学习css路上最重要一课之一，许多高级应用和页面上的疑难杂症都可以用负margin技术来实现。margin技术是那么的有用，限于篇幅我又不想草草了事，所以我决定专门为他写一篇文章，详细的说明他的效果、原理、及其应用。在此之前你可以先阅读怿飞写的由浅入深漫谈margin属性这篇文章，大致了解“margin参考线”的概念，之后再来查看负margin技术及其应用这篇文章。
4.overflow 属性规定如何处理如何处理不符合元素框的内容。
用法如下：Object.style.overflow=visible|hidden|scroll|auto。 参数介绍： visible：内容不会被修剪，会呈现在元素框之外。 hidden：内容会被修剪，但是浏览器不会显示供查看内容的滚动条。 scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto：由浏览器决定如何显示。如果需要，则显示滚动条。 本例使用 overflow 来显示溢出元素框的内容： 01 <html> 02 <head> 03 <style type="text/css"> 04 div { border:thin solid green; width:100px; height:100px; } 05 </style> 06 <script type="text/javascript"> 07 function hideOverflow() 08 { 09 document.getElementById("div1").style.overflow="hidden"; 10 } 11 </script> 12 </head> 13 <body> 14 <div id="div1"> 15 This is some text. This is some text. This is some text. 16 This is some text. This is some text. This is some text. 17 This is some text. This is some text. This is some text. 18 </div> 19 <br /> 20 <input type="button" onclick="hideOverflow()" 21 value="Hide overflow" /> 22 </body> 23 </html> 相信大家都碰到过一种情况：没有给父级div指定高度。希望他通过子级div的高度变化而自动适应。看似很简单，但日常应用中往往对子级div有更多要求，比如多重子级div、子级div左（右）浮动等等。这时就会碰到一种比较郁闷的情况：父级div无法随着子级div的高度增加而增加，发生”脱层”的现象。这种时候就需要用到”overflow: hidden;”这个属性了。表面意思来看他的作用是隐藏div层，而当我们给父级div应用这个属性的时候会发现它神奇的变得自适应了。 对于table来说，假如table-layout属性设置为fixed，则td对象支持带有默认值为hidden的overflow属性。如果设为hidden，scroll或者auto，那么超出td尺寸的内容将被剪切。如果设为visible，将导致额外的文本溢出到右边或左边（视direction属性设置而定）的单元格。 overflow:hidden---这样超出部分会自动隐藏，这样做不好的地方是就是这部分的信息显示不完全，比如图片只显示了一部分，但是页面布局不会乱。要注意的是，使用overflow的时候，一定要定义width，百分比或者具体值都可以。（在用ul和li做图片列表排列的时候，也可以用这个，这样避免一些大尺寸图搞乱布局，也可以解决浏览器窗口缩小时，li元素自动回行排列出错的问题）。用overflow:auto，还可以在页面里模仿出IFRAME的效果。
5.float浮动属性
| 当前元素分类(float:left) | 下一个紧邻元素分类(不含float) | 结论 |
| 块级元素(a) | 块级元素(b) | b会填充a遗留下来的空间，a会和b发生重叠，a的图层在上面。 |
| 内联元素(b) | b会紧跟在a的后面。并根据自身内联元素的特点，是否换行。 | |
| 内联元素(a) | 块级元素(b) | b不会跟随a的移动。 |
| 内联元素(b) | b会紧跟在a的后面。并根据自身内联元素的特点，是否换行。 |
6.display:inline、block、inline-block的区别
display:block就是将元素显示为块级元素. block元素的特点是： 总是在新行上开始； 高度，行高以及顶和底边距都可控制； 宽度缺省是它的容器的100%，除非设定一个宽度 <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。 display:inline就是将元素显示为行内元素. inline元素的特点是： 和其他元素都在一行上； 高，行高及顶和底边距不可改变； 宽度就是它的文字或图片的宽度，不可改变。 <span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。 inline和block可以控制一个元素的行宽高等特性，需要切换的情况如下： 让一个inline元素从新行开始； 让块元素和其他元素保持在一行上； 控制inline元素的宽度（对导航条特别有用）； 控制inline元素的高度； 无须设定宽度即可为一个块元素设定与文字同宽的背景色。 display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。 inline-block的元素特点： 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性) 并不是所有浏览器都支持此属性，目前支持的浏览器有：Opera、Safari在IE中对内联元素使用display:inline-block，IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表症。从上面的这个分析，也不难理解为什么IE下，对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触发了layout，而它本就是行布局，所以触发后，块元素依然还是行布局，而不会如Opera中块元素呈递为内联对象。 IE下块元素如何实现display:inline-block的效果？ 有两种方法： 1、先使用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（两个display要先后放在两个CSS声明中才有效果，这是IE的一个经典bug，如果先定义了display:inline-block，然后再将display设回inline或block，layout不会消失）。代码如下（...为省略的其他属性内容）： div {display:inline-block;...} div {display:inline;} 2、直接让块元素设置为内联对象呈递（设置属性display:inline），然后触发块元素的layout（如：zoom:1等）。代码如下： div {display:inline; zoom:1;...} 以下用个例子来说明三者的区别和用 <!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>display:inline、block、inline-block的区别</title> </head> <style> div,span{background-color:green;margin:5px;border:1px solid #333;padding:5px;height:52px;color:#fff;} .b{display:block;} .i{display:inline;} div.ib{display:inline-block;} div.ib{display:inline;} a.ib{display:inline-block;} a.ib{display:block;} span.v{padding:0;margin:0;border:0;vertical-align:middle;height:100%} </style> <body> <div>div display:block</div> <div class="i">div display:inline</div> <div class="ib">div display:inline-block</div> <span>span display:inline</span> <span class="b">span display:block</span> <span><a class="ib">a display:block</a></span><br /> <div><span class="v"></span>vertical-align:middle</div> </body> </html>
7.div中的内容超出div本身的宽度时
可以在div的css样式中加
word-wrap:break-word;
word-break:break-all;
overflow: hidden;/*这个参数根据需要来决定要不要*/
8.DIV设置浮动后无法撑开外部DIV的解决办法
那如何解决这个浮动了之后无法把容器撑开的局面呢？解决的方法这里介绍2仲。
第一种：在浮动结束的容器后面加上这段代码
<div style=”clear:both;”></div>
意思是清除浮动。
第二种：在外层DIV，也就是这里的DIV1的CSS里面加入以下CSS代码
overflow: auto;
这2种方法都可以实现DIV2把DIV1撑开。不过这里建议大家使用第一种方法，要养成一个习惯，在浮动应用完后消除浮动，这样后面的DIV就不会继承这个浮动（就像在编程的时候，在打开数据库，操作完后，要养成个习惯在后面把数据库关闭）。也就是说浮动这个东西会被继承，除非消除这个浮动，才不会让后面接着的DIV受到继承。其实不仅是DIV，其他的像P等其他的容器都会有继承的效应，大家要养成一个习惯记得要消除浮动。
9.静态网页的练习
<!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=utf-8" /> <title>无标题文档</title> <script src="jingtai.js" type="text/javascript"></script> <link href="jingtailianxi.css" type="text/css" rel="stylesheet"/> </head> <body> <!--1导航栏--> <div id="daohang"> <div id="dh_left"> <div style="float:left;">LOGO</div> <ul class="ul1"> <li class="li1 li11">网站首页</li> <li class="li1">公司介绍</li> <li class="li1">新闻中心</li> <li class="li1">工程案例</li> </ul> </div> <div id="dh_right"> <ul class="ul1"> <li class="li1">网站首页</li> <li class="li1">公司介绍</li> <li class="li1">新闻中心</li> <li class="li1">工程案例</li> </ul> </div> </div> <!--2大图--> <div id="datu"> <img src="image/datu.png"/> </div> <!--3内容--> <div id="neirong"> <!--1内容黑条--> <div id="nr1"><h2>内容</h2></div> <!--2左部分--> <div id="left"> <!--1位置--> <div>主页-主页-主页</div> <!--2.left_kuang--> <div id="left_kuang">框ALL</div> <!--3.下拉选择和分页信息--> <div> <div id="xiala"> 下拉：<select> <option>1111</option> <option>2222</option> <option>3333</option> </select> </div> <div id="fenye"> 1234567 </div> <div style="clear:both;"></div><!--清流--> </div> <!--4.显示内容--> <div class="nr2"> <div class="img">图片</div> <div class="wenben">文本介绍</div> </div> <div style="clear:both;"></div><!--清流--> <div class="nr2"> <div class="img">图片</div> <div class="wenben">文本介绍</div> </div> <div style="clear:both;"></div><!--清流--> <div class="nr2"> <div class="img">图片</div> <div class="wenben">文本介绍</div> </div> <div style="clear:both;"></div><!--清流--> <div class="nr2"> <div class="img">图片</div> <div class="wenben">文本介绍</div> </div> <div style="clear:both;"></div><!--清流--> <div class="nr2"> <div class="img">图片</div> <div class="wenben">文本介绍</div> </div> <div style="clear:both;"></div><!--清流--> <div class="nr2"> <div class="img">图片</div> <div class="wenben">文本介绍</div> </div> <div style="clear:both;"></div><!--清流--> </div> <!--3右部分--> <div id="right"> <!-- 1.图--> <div id="img1"> <img src="image/right.png"/> </div> <!-- 2.框--> <div id="right_kuang"> 框ALL </div> <!-- 3.右侧内容--> <div id="right_neirong"> <!--静态页面时，不用加code主键值，当改动态页面时，循环输出这些li时，给每个主键值，然后根据主键值，通过ajax调数据，显示在浮动层--> <div code="n001" class="ddd">11111111</div> <div code="n002" class="ddd">2222222</div> <div class="ddd">3333333</div> <div class="ddd">4444444</div> <div class="ddd">5555555</div> <div id="kuang"> <div id="jiantou"></div> <div>djk</div> <div id="nr"><p>djlsakjdslk</p></div> </div> </div> </div> <div style="clear:both;"></div><!--清流--> </div> <!--4友情链接--> <div id="xiabu"> 友情链接：1111111111111111111111 </div> </body> </html>
@charset "utf-8"; /* CSS Document */ *{ margin:0px auto; padding:0px;} #daohang { width:1366px; border:1px solid red; } #dh_left { width:500px; float:left; border:1px solid red; } #dh_right { float:right; border:1px solid red; } .ul1{ list-style:none; height: 27px; text-align: center; vertical-align: middle; line-height: 27px; } .li1{ float:left; padding:0px 10px ; border-left: 1px solid #CCCCCC; } .li11{border-left: 0px;} #datu{ width:1366px; border:1px solid red; } #neirong{ width:1366px; border:1px solid red; margin-top:10px; } #nr1{ width:1366px; background-color:#000; color:white; } #left_kuang{ width:900px; border:1px solid red; } #xiala{ float:left; } #fenye{ float:right; } #left{ width:900px; border:1px solid red; float:left; margin:10px 0px 10px 10px; } .nr2{ width:900px; border:1px solid red; } .img{ float:left; } .wenben{ float:right; } #right{ width:406px; border:1px solid red; float:right; margin:10px 10px 10px 10px; } #right_kuang{ border:1px solid red; } .ddd{ margin-top:10px; margin-left:10px;} #kuang{width: 200px; height: 100px; border: 1px solid #CCCCCC; background-color: white; word-wrap:break-word; /*让文本换行*/ word-break:break-all; display: none; position:fixed; } #jiantou{ width: 10px; height: 10px; border: 1px solid #CCCCCC; border-style: none none solid solid; left: -101px; top: 10px; position: relative; transform: rotate(45deg);/*箭头45度处理*/ -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); background-color: white; } #xiabu{ width:1366px; border:1px solid red; margin-top:10px; }
// JavaScript Document window.onload=function() { var attr=document.getElementsByClassName("ddd"); var kuang=document.getElementById("kuang"); for(var i=0;i<attr.length;i++) { attr[i].onmouseover=function(ev) { var ev=ev||event; kuang.style.display="block"; kuang.style.left=(ev.clientX+20)+"px"; kuang.style.top=(ev.clientY-10)+"px"; /*下面是改动态页面时，往浮动层中添加内容*/ /*var code = this.getAttribute("code"); $.ajax({ url:"", data:{}, type:"POST", dataType:"TEXT", success: function(data){ $("#nr").html(data); } });*/ } attr[i].onmouseout=function(ev) { var ev=ev||event; kuang.style.display="none"; } attr[i].onmousemove=function(ev) { var ev=ev||event; kuang.style.display="block"; kuang.style.left=(ev.clientX+20)+"px"; kuang.style.top=(ev.clientY-10)+"px"; } } }
10.jquery实现鼠标跟随事件
<script type="text/javascript"> $(function(){ $("tr:even").addClass("tr_color"); $("#tb a").mouseover(function(e){ var toolTip = "<div id='tooltip' width='100px' height='12px' style='position:absolute;border:solid #aaa 1px;background-color:#F9F9F9'>" + $(this).html() + "</div>"; $("body").append(toolTip); $("#tooltip").css({ "top" :e.pageY + "px", "left" :e.pageX + "px" }); $("#tb a").mouseout(function(){ $("#tooltip").remove(); }); $("#tb a").mousemove(function(e){ $("#tooltip").css({ "top" :(e.pageY+5) + "px", "left" :(e.pageX+2) + "px" }); }); //alert("Y:" + e.pageY + "X:" + e.pageX); }); }); </script>
11.后台管理系统界面
主页面代码
<?php session_start(); if(isset($_SESSION["uid"])) { }else { header("location:login.php"); } ?> <!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=utf-8" /> <title>后台管理中心</title> <script src="../gongju/jquery-1.11.2.min.js" type="text/javascript"></script> <script src="../js/index.js" type="text/javascript"></script> <link href="../css/index.css" type="text/css" rel="stylesheet"/> <link href="../css/xianshi.css" type="text/css" rel="stylesheet"/> </head> <body> <div id="head"> <div id="logo">平湖市水务投资（集团）有限公司</div> <div id="sjxs"></div> <div id="shijian"> <div><img src="../image/shijian.png"/></div> </div> <div id="tuichu"> <div><img src="../image/未标题-1.png"/></div> <div>退出</div> </div> <div id="shouye"> <div><img src="../image/shouye.png"/></div> <div>首页</div> </div> </div> <div id="zhong"> <div id="left"> <div id="dlyh"> <div id="uid"></div> <div id="juese"></div> </div> <div id="gn_zt">功能列表</div> </div> <div id="right"> <div id="right_nr"> <div id="kuang"> <div id="logo"><img src="../qiantai/image/logo.png"/></div> <div id="gsming"><img src="../qiantai/image/gsming.png"/></div> <div style="clear:both;"></div> <div id="htgl"><img src="../image/houtaiguanli.png"/></div> </div> </div> </div> </div> <div style="clear:both;"></div> </body> </html> <script> /*显示时间代码*/ function showTime() { var curTime = new Date(); $("#sjxs").html(curTime.toLocaleString()); setTimeout("showTime()", 1000); } $(function(){ showTime(); }) </script>
css样式表
*{margin: 0px auto; padding:0px; -webkit-tap-highlight-color:rgba(0,0,0,0); font-family:"微软雅黑";}
body{
background-position: center 0;
background-repeat: no-repeat;
background-attachment:fixed;
background-size: cover;
background-image:url(../image/login-bg-1.jpg);
}
#head{border-bottom: 0px solid #33AECC;height:80px; background-image:url(../image/headerkuang.png);100%;}
#logo{margin-left: 10px; margin-top:15px;color:#fff;line-height:45px;font-size:20px; float:left; font-weight:bold}
#zhong{100%; height:500px; background-color:#CCC;}
#left{ float:left; 200px; background-image:url(../image/left_bj.png); display:block; height:500px;}
#gn_zt{height:39px; line-height:39px; vertical-align:middle; text-align:center;font-size: 18px;color:#CCC;}
.gn_lb{ color:#FFF; font-size:14px;height:39px;line-height:39px;padding-left:10px;border-bottom: 1px solid #FFF; vertical-align:middle; text-align:center; cursor:pointer;}
#right{ float:left;800px;overflow:hidden; text-align:center;}
a:hover{text-decoration:none;}
#sjxs{ float:right; margin-right:100px; margin-top:15px;150px; height:60px; color:#FFF; text-align:center;}
#shijian{ float:right; margin-top:15px;60px; height:60px; color:#FFF; text-align:center; line-height:60px; vertical-align:middle;}
#tuichu{ float:right; margin-right:80px; margin-top:10px; border:2px solid #CCC;60px; height:55px; color:#FFF; text-align:center; padding-top:5px; cursor:pointer;border-radius: 8px;box-shadow: #666 0px 0px 10px;}
#shouye{ float:right; margin-right:20px; margin-top:10px; border:2px solid #CCC;60px; height:60px; color:#FFF; text-align:center; cursor:pointer;border-radius: 8px;box-shadow: #666 0px 0px 10px;}
#dlyh{ 100px; height:100px;border-radius:50px; border:2px solid #CCC; box-shadow: #666 0px 0px 10px; background-color:#00a5a5; margin-top:10px; color:#FFF; text-align:center; font-weight:bold;}
#uid{ margin-top:15px;}
#juese{margin-top:10px;}
#hang{ background-color:#00a5a5;}
#xinxi{ margin-top:10px;}
#kuang{ 600px; height:400px; margin-top:100px;}
#logo{
float:left;
margin-left:40px;
}
#gsming{
float:left;
margin-left:22px;
margin-top:30px;
}
#htgl{
margin-left:100px;
margin-top:30px;}
js控制代码
$(document).ready(function(e) { $.ajax({ url:"../chuli/gn_chuli.php", async:false, data:{type:0}, type:"POST", dataType:"TEXT", success: function(data) { var str=""; data=data.substring(0,data.length-1); var aa=data.split("|"); for(var i=0;i<aa.length;i++) { str=str+"<a href="index.php?bs="+aa[i]+""><div class='gn_lb'>"+aa[i]+"</div></a>"; } $("#left").append(str); /* jquery控制鼠标移入移出事件*/ /*$(".gn_lb").hover(function() { $(this).css("background-color","red"); }, function() { $(this).css("background-color","#f2f2f2"); });*/ } }) $.ajax({ url:"../chuli/gn_chuli.php", async:false, data:{type:1}, type:"POST", dataType:"TEXT", success: function(data) { var xx=data.split("|"); $("#uid").html(xx[0]); $("#juese").html(xx[1]); } }) $("#tuichu").click(function(){ window.location.href="./login.php"; }); $("#shouye").click(function(){ window.location.href="../qiantai/main.php"; }); });
功能处理界面
<?php session_start(); include("../gongju/DBDA.class.php"); $db=new DBDA(); $type=$_POST["type"]; switch($type) { case 0: $uid = $_SESSION["uid"]; $sjuese="select juese_id from userinjuese where user_id='{$uid}'"; $ajuese = $db->Query($sjuese); $attr = array(); foreach($ajuese as $v) { $sgn = "select rules_id from juesewithrules where juese_id='{$v[0]}'"; $agn = $db->Query($sgn); $attr = array_merge($attr,$agn); } $attr = array_unique($attr,SORT_REGULAR); $arr=""; foreach($attr as $v) { $sname = "select name from rules where code='{$v[0]}'"; $name = $db->StrQuery($sname); $arr=$arr.$name."|"; } echo $arr; break; case 1: $uid = $_SESSION["uid"]; $sql1="select name from users where uid='{$uid}'"; $xm=$db->StrQuery($sql1); $sql2="select juese_id from userinjuese where user_id='{$uid}'"; $js_id=$db->StrQuery($sql2); $sql3="select name from juese where code='{$js_id}'"; $juese=$db->StrQuery($sql3); echo $xm."|".$juese; break; }
例子：对添加文章的操作，（包括上传头像预览）
主页面代码
<?php session_start(); if(isset($_SESSION["uid"])) { }else { header("location:login.php"); } ?> <!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=utf-8" /> <title>后台管理中心</title> <script src="../gongju/jquery-1.11.2.min.js" type="text/javascript"></script> <script src="../gongju/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript"></script> <script src="../js/index.js" type="text/javascript"></script> <link href="../gongju/bootstrap-3.3.7-dist/css/bootstrap.min.css" type="text/css" rel="stylesheet"/> <link href="../css/index.css" type="text/css" rel="stylesheet"/> <link href="../css/addwenzhang.css" type="text/css" rel="stylesheet"/> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <!--引入时间选择器--> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <link href="../gongju/summernote-master/dist/summernote.css" type="text/css" rel="stylesheet"/> <!--引入文本编辑器js、css--> <script src="../gongju/summernote-master/dist/summernote.min.js" type="text/javascript"></script> <script src="../gongju/tishikuang/js/qikoo.js" type="text/javascript"></script> <link href="../gongju/tishikuang/main.css" type="text/css" rel="stylesheet"/> </head> <body> <div id="head"> <div id="logo">平湖市水务投资（集团）有限公司</div> <div id="tuichu"> <div><img src="../image/未标题-1.png"/></div> <div>退出</div> </div> <div id="shouye"> <div><img src="../image/shouye.png"/></div> <div>首页</div> </div> </div> <div id="zhong"> <div id="left"> <div id="dlyh"> <div id="uid"></div> <div id="juese"></div> </div> <div id="gn_zt">功能列表</div> </div> <div id="right1"> <div id="add_wz"> <div id="wz_left"> <form> <div id="addlm"><select class="form-control" id="ylm"></select><select class="form-control" id="zlm"></select></div> <div>标题: <input type="text" class="form-control" placeholder="文本输入" id="title"></div> <div>摘要:<textarea class="form-control" rows="3" id="zhaiyao"></textarea></div> <div id="summernote"></div> <div><button type="button" class="btn btn-success fabiao">发表文章</button><button class="btn btn-warning" id="resetBtn">重置</button> </div> </form> </div> <div id="wz_right"> <div id="add_pic"> <!--图片预览功能--> <form id="sc" action="../chuli/tupianchuli.php" method="post" enctype="multipart/form-data" target="shangchuan"> <input type="hidden" name="tp" value="" id="tp" /> <div id="yl"> <input type="file" name="file" id="file" onchange="document.getElementById('sc').submit()" /> </div> </form> <iframe style="display:none" name="shangchuan" id="shangchuan"> </iframe> <script type="text/javascript"> //回调函数,调用该方法传一个文件路径，该变背景图 function showimg(url) { var div = document.getElementById("yl"); div.style.backgroundImage = "url("+url+")"; document.getElementById("tp").value = url; } </script> <!-- --------------------------> </div> <div id="add_wztime">发布时间:<input type="text" id="datepicker"></div> </div> </div> </div> </div> </body> </html> <script src="../js/addwenzhang.js" type="text/javascript"></script> <script> $(document).ready(function() { $('#summernote').summernote(); /*初始化文本编辑器*/ $(function() { /*初始化时间选择器*/ $( "#datepicker" ).datepicker(); }); $("#resetBtn").click(function(){ $("#title").val(""); $("#zhaiyao").val(""); $("#summernote").val(""); }); $(".fabiao").click(function(){ var ylm=$("#ylm").val(); /*取栏目,判断有没有子栏目，如果没有，取一级栏目的代号，有的话取取子栏目的代号*/ var zlm=$("#zlm").val(); var lm_code=""; if(zlm=="无子栏目") { lm_code=ylm; }else { lm_code=zlm; } var tle=$("#title").val(); /*取标题*/ var zy=$("#zhaiyao").val(); /*取要闻*/ /*取到summernote文本编辑器中的数据，因为数据是带有html标签的，要先把其转换为text形式*/ var wznr=$('#summernote').summernote('code'); var lujing=$("#tp").val(); /*根据上面的showing回调函数中赋给tp的属性，取到图片的路径*/ var sj=$("#datepicker").val(); qikoo.dialog.confirm('确认添加？',function(){ $.ajax({ url:"../chuli/addwzchuli.php", data:{type:1,lm_code:lm_code,tle:tle,zy:zy,wznr:wznr,sj:sj,lujing:lujing}, type:"POST", dataType:"TEXT", success: function(data) { if(data=="ok") { alert("发表成功，等待审核"); }else if(data=="no") { alert("标题内容不能有空"); }else { alert("请选择发布时间"); } } }) },function(){ }); }) /*显示时间代码*/ function showTime() { var curTime = new Date(); $("#sjxs").html(curTime.toLocaleString()); setTimeout("showTime()", 1000); } $(function(){ showTime(); }) }); </script>
css代码：
#right1{ 800px; float:left; position:relative}
#add_wz{ margin-top:50px; margin-left:50px;}
#wz_left{ float:left; 500px;}
#wz_right{ float:right;}
#add_pic{ border:1px solid #CCC; padding:10px 10px; 170px; height:170px;}
#yl{ 150px; height:150px; background-image:url(../image/upload-pic.png); background-size:150px 150px;}
#file{ 150px; height:150px; float:left; opacity:0;} /*设置透明，当点击图像时，即点击了上传文件文本框*/
#summernote{ margin-top:30px;}
#add_wztime{ margin-top:50px;}
a{text-decoration:none;}
js代码
// JavaScript Document $(document).ready(function(e) { $(".gn_lb").eq(0).css("background-color","#00a5a5"); var str="<select id='ylm'></select><select id='zlm'></select>"; $("#addlm").html(str); fillylm(); fillzlm(); $("#ylm").change(function(){ fillzlm(); }); /*-----------------------------方法-----------------------------------------------*/ function fillylm() /* 填充一级栏目的方法*/ { var lm_pcode="lm0"; $.ajax({ async:false, url:"../chuli/addwzchuli.php", data:{lm_pcode:lm_pcode,type:0}, type:"POST", dataType:"text", success:function(data){ var hang=data.split("|"); var str=""; for(var i=0;i<hang.length;i++) { var lie=hang[i].split("^"); str=str+"<option value='"+lie[1]+"'>"+lie[2]+"</option>"; } $("#ylm").html(str); } }); } function fillzlm() /*填充子栏目的方法*/ { var lm_pcode=$("#ylm").val(); //代号取上一级的value值 $.ajax({ async:false, //为了下边的区能执行，这里要设置为同步 url:"../chuli/addwzchuli.php", data:{lm_pcode:lm_pcode,type:0}, type:"POST", dataType:"text", success: function(data) { if(data=="") { $("#zlm").html("<option>无子栏目</option>"); }else { var hang=data.split("|"); var str=""; for(var i=0;i<hang.length;i++) { var lie=hang[i].split("^"); str=str+"<option value='"+lie[1]+"'>"+lie[2]+"</option>"; } $("#zlm").html(str); } } }); } });
例子：对人员的操作
<div id="head"> <div id="logo">平湖市水务投资（集团）有限公司</div> <div id="sjxs"></div> <div id="shijian"> <div><img src="../image/shijian.png"/></div> </div> <div id="tuichu"> <div><img src="../image/未标题-1.png"/></div> <div>退出</div> </div> <div id="shouye"> <div><img src="../image/shouye.png"/></div> <div>首页</div> </div> </div> <div id="zhong"> <div id="left"> <div id="dlyh"> <div id="uid"></div> <div id="juese"></div> </div> <div id="gn_zt">功能列表</div> </div> <div id="right"> <div id="right_nr"> <div id="guanli"> <div id="yh_xinxi"> 请选择人员： <select id="user"> </select> </div> <div id="js_xinxi"> 请选择角色： </div> <div id="bm_xinxi"> 请选择部门： </div> <br /> <input type="button" value="保存" id="save" /> </div> </div> </div> </div> <div style="clear:both;"></div>
// JavaScript Document $(document).ready(function(e) { $(".gn_lb").eq(3).css("background-color","#00a5a5"); $.ajax({ /* 添加人员*/ url:"../chuli/uidxinxichuli.php", async:false, data:{type:0}, type:"POST", dataType:"TEXT", success: function(data) { var str=""; var hang=data.split("|"); for(var i=0;i<hang.length;i++) { var lie=hang[i].split("^"); str=str+"<option value='"+lie[1]+"'>"+lie[3]+"</option>"; } $("#user").append(str); } }) $.ajax({ /* 添加角色*/ url:"../chuli/uidxinxichuli.php", async:false, data:{type:1}, type:"POST", dataType:"TEXT", success: function(data) { var str=""; var hang=data.split("|"); for(var i=0;i<hang.length;i++) { var lie=hang[i].split("^"); if(lie[1]=="管理员") { str=str+"<input class='ck' type='checkbox' disabled='disabled' value='"+lie[0]+"' />"+lie[1]+""; }else { str=str+"<input class='ck' type='checkbox' value='"+lie[0]+"' />"+lie[1]+""; } } $("#js_xinxi").html(str); XuanZhong(); } }) $.ajax({ /* 添加部门*/ url:"../chuli/uidxinxichuli.php", async:false, data:{type:4}, type:"POST", dataType:"TEXT", success: function(data) { var str=""; var hang=data.split("|"); for(var i=0;i<hang.length;i++) { var lie=hang[i].split("^"); str=str+"<input class='ck1' type='checkbox' value='"+lie[0]+"' />"+lie[1]+""; } $("#bm_xinxi").html(str); XuanZhong1(); } }) /* 下拉表单变化时，显示人员的相应角色*/ $("#user").change(function(){ XuanZhong(); XuanZhong1(); }) /*点击保存，修改用户的权限*/ $("#save").click(function(){ var uid = $("#user").val(); var ck = $(".ck"); var ck1=$(".ck1"); var str = ""; var str1=""; for(var i=0;i<ck.length;i++) { if(ck.eq(i).prop("checked")) { str = str+ck.eq(i).val()+"|"; } } for(var i=0;i<ck1.length;i++) { if(ck1.eq(i).prop("checked")) { str1 = str1+ck1.eq(i).val()+"|"; } } str = str.substr(0,str.length-1); str1 = str1.substr(0,str1.length-1); qikoo.dialog.confirm('确定保存？',function(){ $.ajax({ url:"../chuli/uidxinxichuli.php", data:{uid:uid,js:str,bm:str1,type:3}, type:"POST", dataType:"TEXT", success: function(data){ if(data.trim()=="OK") { alert("保存成功！"); history.go(0); } } }); },function(){ }); }) function XuanZhong() { var uid = $("#user").val(); $.ajax({ url:"../chuli/uidxinxichuli.php", data:{uid:uid,type:2}, type:"POST", dataType:"TEXT", success: function(data){ var sz = data.split("|"); var ck = $(".ck"); ck.prop("checked",false); for(var i=0;i<ck.length;i++) { var zhi = ck.eq(i).val(); if(sz.indexOf(zhi)>=0) { ck.eq(i).prop("checked",true); } } } }); } function XuanZhong1() { var uid = $("#user").val(); $.ajax({ url:"../chuli/uidxinxichuli.php", data:{uid:uid,type:5}, type:"POST", dataType:"TEXT", success: function(data){ var sz1 = data.split("|"); var ck1 = $(".ck1"); ck1.prop("checked",false); for(var i=0;i<ck1.length;i++) { var zhi1 = ck1.eq(i).val(); if(sz1.indexOf(zhi1)>=0) { ck1.eq(i).prop("checked",true); } } } }); } });
13.
<!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=utf-8" /> <script src="gongju/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script> <script src="gongju/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" type="text/css" href="gongju/bootstrap-3.3.7-dist/css/bootstrap.min.css"/> <title>无标题文档</title> <style type="text/css"> .dsh{ color: red; } .sh{ color: green; } .wzd{ text-align: center; color: red; } </style> </head> <body> <div class="aa" bs="li1"> 111 </div> <div class="aa" bs="li2"> 222 </div> <div class="aa" bs="li3"> 333 </div> <div class="aa" bs="li4"> 444 </div> <table border="1" cellspacing="0" cellpadding="0" style=" 100%;"> <thead><tr><th>标题</th><th>内容</th><th>审核状态</th><th>操作</th></tr></thead> <tbody> </tbody> </table> <input type="text" id="cx1"/><input type="button" id="cx2" value="查询" /> <input type="button" id="add" value="添加文章" /> <div id="fynr"> </div> </body> </html> <script type="text/javascript"> $(document).ready(function(){ /*1.查询栏目下的文章*/ var page = 1; //当前页 var li=" 1=1 "; var cx1=""; bb(); LoadXinXi(); /*点击栏目*/ $(".aa").click(function(){ page=1; $("#cx1").val(""); /*点击栏目时，先清空input里边的值*/ var bs=$(this).attr("bs"); li="wz_li='"+bs+"'"; bb(); LoadXinXi(); }) /*点击查询*/ $("#cx2").click(function(){ page=1; bb(); LoadXinXi(); }) function bb() { var cx1=$("#cx1").val(); $.ajax({ type:"post", url:"shiz_chuli.php", async:false, data:{li:li,cx1:cx1,page:page,type:0}, dataType:"TEXT", success:function(data) { if(data=="") { $("tbody").html("<tr><td colspan='4' class='wzd'>未相关找到数据!</td></tr>"); }else { var hang=data.split("|"); var str=""; var str1=""; for(var i=0;i<hang.length;i++) { var lie=hang[i].split("^"); if(lie[3]=="0") { str1="<span class='dsh'>待审核</span>"; }else { str1="<span class='sh'>已审核</span>"; } str=str+"<tr><td>"+lie[0]+"</td><td>"+lie[1]+"</td><td class='sh' bs1='"+lie[2]+"' bs2='"+lie[0]+"'>"+str1+"</td><td>删除 修改 查看详情</td></tr>"; } $("tbody").html(str); $(".sh").click(function(){ var bs2=$(this).attr("bs2"); if(confirm("确定审核吗？")) { $.ajax({ type:"post", url:"shiz_chuli.php", async:false, data:{bs2:bs2,type:1}, dataType:"TEXT", success:function(data) { if(data=="ok") { var biao=$(this).attr("bs1"); /*审核通过的，加载页面时，要加载当前栏目下的*/ var li="wz_li='"+biao+"'"; bb(); } } }); } }) } } }); } function LoadXinXi() { var str6 = ""; var minys = 1; var maxys = 1; var cx1=$("#cx1").val(); //查总页数 $.ajax({ async:false, url:"zys.php", data:{cx1:cx1,li:li}, type:"POST", dataType:"TEXT", success: function(d){ maxys = d; } }); str6 += "<span>总共："+maxys+"页</span> "; str6 += "<span id='prev'>上一页</span>"; for(var i=page-2;i<page+3;i++) { if(i>=minys && i<=maxys) { if(i==page) { str6 += "<span class='dangqian' bs='"+i+"'>"+i+"</span> "; } else { str6 += "<span class='list' bs='"+i+"'>"+i+"</span> "; } } } str6 += "<span id='next'>下一页</span>"; $("#fynr").html(str6); //给上一页添加点击事件 $("#prev").click(function(){ page = page-1; if(page<1) { page=1; } bb(); //加载数据 LoadXinXi(); //加载分页信息 }) //给下一页加点击事件 $("#next").click(function(){ page = page+1; if(page>maxys) { page=maxys; } bb(); //加载数据 LoadXinXi(); //加载分页信息 }) //给中间的列表加事件 $(".list").click(function(){ page = parseInt($(this).attr("bs")); bb(); //加载数据 LoadXinXi(); //加载分页信息 }) } }) /*2.添加文章*/ $("#add").click(function(){ alert("111"); }) </script>
<?php include("./DBDA.class.php"); $db=new DBDA(); $type=$_POST["type"]; switch($type) { case 0: $page = $_POST["page"]; $num = 2; $tiao = ($page-1)*$num; $li=$_POST["li"]; $cx1=$_POST["cx1"]; $sql="select * from wz where {$li} and wz_t like '%{$cx1}%' limit {$tiao},{$num}"; $arr=$db->StrQuery($sql); echo $arr; break; case 1: $bs2=$_POST["bs2"]; $sql1="update wz set bs='1' where wz_t='{$bs2}'"; if($db->Query($sql1,0)) { echo "ok"; } break; } ?>
<?php include("./DBDA.class.php"); $db = new DBDA(); $cx1 = $_POST["cx1"]; $li=$_POST["li"]; $num = 2; $sql = "select count(*) from wz where {$li} and wz_t like '%{$cx1}%'"; $zts = $db->StrQuery($sql); echo ceil($zts/$num);
function LoadXinXi() { var str6 = ""; var minys = 1; var maxys = 1; var cx1=$("#cx1").val(); //查总页数 $.ajax({ async:false, url:"zys.php", data:{cx1:cx1,li:li}, type:"POST", dataType:"TEXT", success: function(d){ maxys = d; } }); /* str6 += "<span>总共："+maxys+"页</span> "; str6 += "<span id='prev'>上一页</span>";*/ str6+="<div class='ff' id='shou'><<</div>"; str6+="<div class='ff' id='prev'><</div>"; for(var i=page-2;i<page+3;i++) { if(i>=minys && i<=maxys) { if(i==page) { /*str6 += "<span class='dangqian' bs='"+i+"'>"+i+"</span> ";*/ str6+="<div class='ff' id='dangqian'><input type='text' id='lili' value='"+i+"'/></div>"; } /*else { str6 += "<span class='list' bs='"+i+"'>"+i+"</span> "; }*/ } } /* str6+="<div class='ff'><input type='text' id='lili' /></div>";*/ /*str6 += "<span id='next'>下一页</span>";*/ str6+="<div class='ff'>of</div><div class='ff'>"+maxys+"</div>"; str6+="<div class='ff' id='next'>></div>"; str6+="<div class='ff' id='wei'>>></div>"; $("#fynr").html(str6); //给上一页添加点击事件 $("#prev").click(function(){ page = page-1; if(page<1) { page=1; } bb(); //加载数据 LoadXinXi(); //加载分页信息 }) //给下一页加点击事件 $("#next").click(function(){ page = page+1; if(page>maxys) { page=maxys; } bb(); //加载数据 LoadXinXi(); //加载分页信息 }) //给中间的列表加事件 /*$(".list").click(function(){ page = parseInt($(this).attr("bs")); bb(); //加载数据 LoadXinXi(); //加载分页信息 })*/ /*文本输入框中键盘抬起事件*/ $("#lili").keyup(function(){ var lili=$("#lili").val(); page=lili; bb(); //加载数据 LoadXinXi(); //加载分页信息 }) /*给tou加点击事件*/ $("#shou").click(function(){ page=1; bb(); //加载数据 LoadXinXi(); //加载分页信息 }) /*给wei加点击事件*/ $("#wei").click(function(){ page=maxys; bb(); //加载数据 LoadXinXi(); //加载分页信息 }) }