对静态页面的一些理解
生活随笔
收集整理的這篇文章主要介紹了
对静态页面的一些理解
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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"?！癴orm"這個塊元素比較特殊，它只能用來容納其他塊元素。如果沒有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這樣的屬性，讓他也有每次都從新行開始的屬性。可變元素的基本概念就是他需要根據上下文關系確定該元素是塊元素或者內聯元素?？勺冊剡€是屬于上述兩種元素類別，一旦上下文關系確定了他的類別，他就要遵循塊元素或者內聯元素的規則限制。大致的元素分類見全文。 View Code?
?
2.display的屬性
display 屬性規定元素應該生成的框的類型。
| none | 此元素不會被顯示。 |
| block | 此元素將顯示為塊級元素，此元素前后會帶有換行符。 |
| inline | 默認。此元素會被顯示為內聯元素，元素前后沒有換行符。 |
| inline-block | 行內塊元素。（CSS2.1 新增的值） |
3.Margin是什么
CSS 邊距屬性定義元素周圍的空間。通過使用單獨的屬性，可以對上、右、下、左的外邊距進行設置。也可以使用簡寫的外邊距屬性同時改變所有的外邊距?！猈3School邊界，元素周圍生成額外的空白區?！翱瞻讌^”通常是指其他元素不能出現且父元素背景可見的區域?！狢SS權威指南我們可以很清楚的了解到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外側添加空白時?？瞻滋幉恍枰尘?#xff08;色）時。上下相連的兩個盒子之間的空白，需要相互抵消時。如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技術及其應用這篇文章。 View Code4.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的效果。 View Code5.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> View Code?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> View Code @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;} View Code // 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";}}} View Code?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> View Code?11.后臺管理系統界面
?
?
主頁面代碼
<?phpsession_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> View Codecss樣式表
*{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);width:100%;} #logo{margin-left: 10px; margin-top:15px;color:#fff;line-height:45px;font-size:20px; float:left; font-weight:bold} #zhong{width:100%; height:500px; background-color:#CCC;} #left{ float:left; width: 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;width:800px;overflow:hidden; text-align:center;} a:hover{text-decoration:none;} #sjxs{ float:right; margin-right:100px; margin-top:15px;width:150px; height:60px; color:#FFF; text-align:center;} #shijian{ float:right; margin-top:15px;width: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;width: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;width:60px; height:60px; color:#FFF; text-align:center; cursor:pointer;border-radius: 8px;box-shadow: #666 0px 0px 10px;} #dlyh{ width: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{ width: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;} View Codejs控制代碼
$(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";}); }); View Code功能處理界面
<?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;} View Code?例子：對添加文章的操作，（包括上傳頭像預覽）
主頁面代碼
<?phpsession_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> View Codecss代碼：
#right1{ width:800px; float:left; position:relative} #add_wz{ margin-top:50px; margin-left:50px;} #wz_left{ float:left; width:500px;} #wz_right{ float:right;} #add_pic{ border:1px solid #CCC; padding:10px 10px; width:170px; height:170px;} #yl{ width:150px; height:150px; background-image:url(../image/upload-pic.png); background-size:150px 150px;} #file{ width:150px; height:150px; float:left; opacity:0;} /*設置透明，當點擊圖像時，即點擊了上傳文件文本框*/ #summernote{ margin-top:30px;} #add_wztime{ margin-top:50px;}a{text-decoration:none;} View Codejs代碼
// 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);}}});}}); View Code例子：對人員的操作
<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> View Code // 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);}}}});}}); View Code?
?
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="width: 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> View Code <?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; }?> View Code <?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); View Code?
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(); //加載分頁信息})} View Code?
轉載于:https://www.cnblogs.com/xingyue1988/p/6496864.html
總結
以上是生活随笔為你收集整理的对静态页面的一些理解的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 简单android拨号器的实现
- 下一篇： SPOJ 7258 SUBLEX （SA