对静态页面的一些理解
生活随笔
收集整理的這篇文章主要介紹了
对静态页面的一些理解
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1.文檔流
?
將窗體自上而下分成一行行， 并在每行中按從左至右的順序排放元素，即為文檔流。每個(gè)非浮動(dòng)塊級(jí)元素都獨(dú)占一行， 浮動(dòng)元素則按規(guī)定浮在行的一端。 若當(dāng)前行容不下， 則另起新行再浮動(dòng)。內(nèi)聯(lián)元素也不會(huì)獨(dú)占一行。 幾乎所有元素(包括塊級(jí)，內(nèi)聯(lián)和列表元素）均可生成子行， 用于擺放子元素。有三種情況將使得元素脫離文檔流而存在，分別是浮動(dòng)，絕對(duì)定位， 固定定位。浮動(dòng)元素不占任何正常文檔流空間，而浮動(dòng)元素的定位還是基于正常的文檔流，然后從文檔流中抽出并盡可能遠(yuǎn)的移動(dòng)至左側(cè)或者右側(cè)。文字內(nèi)容會(huì)圍繞在浮動(dòng)元素周?chē)．?dāng)一個(gè)元素從正常文檔流中抽出后，仍然在文檔流中的其他元素將忽略該元素并填補(bǔ)他原先的空間。基于文檔流， 我們可以很容易理解以下的定位模式：相對(duì)定位， 即相對(duì)于元素在文檔流中位置進(jìn)行偏移。 但保留原占位。絕對(duì)定位， 即完全脫離文檔流， 相對(duì)于position屬性非static值的最近父級(jí)元素進(jìn)行偏移。固定定位， 即完全脫離文檔流， 相對(duì)于視區(qū)進(jìn)行偏移。幾個(gè)問(wèn)題作為三大基本元素之一的內(nèi)聯(lián)元素。 它跟塊級(jí)元素的主要區(qū)別在哪？ 內(nèi)聯(lián)元素是什么意思呢？什么是塊級(jí)別元素？ 《CSS權(quán)威指南》中文字顯示：任何不是塊級(jí)元素的可見(jiàn)元素都是內(nèi)聯(lián)元素。其表現(xiàn)的特性是“行布局”形式，這里的“行布局”的意思就是說(shuō)其表現(xiàn)形式始終以行進(jìn)行顯示。比如，我們?cè)O(shè)定一個(gè)內(nèi)聯(lián)元素border-bottom:1px solid #000;時(shí)其表現(xiàn)是以每行進(jìn)行重復(fù)，每一行下方都會(huì)有一條黑色的細(xì)線(xiàn)。如果是塊級(jí)元素那么所顯示的的黑線(xiàn)只會(huì)在塊的下方出現(xiàn)。p、h1、或div等元素常常稱(chēng)為塊級(jí)元素，這些元素顯示為一塊內(nèi)容；Strong。span等元素稱(chēng)為行內(nèi)元素，它們的內(nèi)容顯示在行中，即“行內(nèi)框”。（可以使用display=block將行內(nèi)元素轉(zhuǎn)換成塊元素，display=none表示生成的元素根本沒(méi)有框，也既不顯示元素，不占用文檔中的空間）行內(nèi)就是在一行內(nèi)的元素，只能放在行內(nèi)；塊級(jí)元素，就是一個(gè)四方塊，可以放在頁(yè)面上任何地方。 說(shuō)白了，行內(nèi)元素就好像一個(gè)單詞；塊級(jí)元素就好像一個(gè)段落，如果不另加定義的話(huà)，它將獨(dú)立一行出現(xiàn)。 一般的 塊級(jí)元素諸如段落<p>、標(biāo) 題<h1><h2>...、列表。<ul><ol><li> 、表格<table>、表單<form>、DIV<div>和BODY<body>等元素。而內(nèi)聯(lián)元素則如: 表單元素<input>、超級(jí)鏈接<a>、圖像<img>、<span> ........ 塊級(jí)無(wú)素的顯著特點(diǎn)是：每個(gè)塊級(jí)元素都是從一個(gè)新行開(kāi)始顯示，而且其后的無(wú)素也需另起一行進(jìn)行顯示。 <span>在CSS定義中屬于一個(gè)行內(nèi)元素，而<div>是塊級(jí)元素。用容器這一詞會(huì)更容易形象理解它們的存在與用途，行內(nèi)元素相當(dāng)一個(gè)小容器，而<div>相當(dāng)于一個(gè)大容器，大容器當(dāng)然可以放一個(gè)小容器了。<span>就是小容器，這樣一說(shuō)你也許會(huì)在腦海中有一個(gè)初步的印象了吧，如果我們想在大容器中裝一些清水。但我也想在里裝一些墨水怎么 辦？很簡(jiǎn)單，我們把小容器拿出來(lái)裝上墨水然后放入大容器里的清水中不就成了嗎。塊元素（block element）一般是其他元素的容器元素塊元素一般都從新行開(kāi)始，它可以容納內(nèi)聯(lián)元素和其他塊元素。常見(jiàn)塊元素是段落標(biāo)簽'P"。“form"這個(gè)塊元素比較特殊，它只能用來(lái)容納其他塊元素。如果沒(méi)有css的作用，塊元素會(huì)順序以每次另起一行的方式一直往下排。而有了css以后，我們可以改變這種html的默認(rèn)布局模式，把塊元素?cái)[放到你想要 的位置上去。而不是每次都愚蠢的另起一行。需要指出的是，table標(biāo)簽也是塊元素的一種，table based layout和css based layout從一般使用者（不包括視力障礙者、盲人等）的角度來(lái)看這兩種布局，除了頁(yè)面載入速度的差別外，沒(méi)有其他的差別。但是如果普通使用者不經(jīng)意點(diǎn)了 查看頁(yè)面源代碼按鈕后，兩者所表現(xiàn)出來(lái)的差異就非常大了。基于良好重構(gòu)理念設(shè)計(jì)的css布局頁(yè)面源碼，至少也能讓沒(méi)有web開(kāi)發(fā)經(jīng)驗(yàn)的普通使用者把內(nèi)容快速的讀懂。從這個(gè)角度來(lái)說(shuō)，css layout code應(yīng)該有更好的美學(xué)體驗(yàn)吧。你能夠把塊容器元素div想象成一個(gè)個(gè)box，或者如果你玩過(guò)剪貼文載的話(huà)，那就更加容易理解了。我們先把需要的文章從各種報(bào)紙、雜志總剪 下來(lái)。每塊剪下來(lái)的內(nèi)容就是一個(gè)block。然后我們把這些紙塊按照自己的排版意圖，用膠水重新貼到一張空白的新紙上。這樣就形成了你自己獨(dú)特的文摘快報(bào)了。作為一種技術(shù)的延伸，網(wǎng)頁(yè)布局設(shè)計(jì)也遵循了同樣的模式。內(nèi)聯(lián)元素（inline element）一般都是基于語(yǔ)義級(jí)（semantic）的基本元素。內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素，常見(jiàn)內(nèi)聯(lián)元素 “a”。塊元素（block element）和內(nèi)聯(lián)元素（inline element）都是html規(guī)范中的概念。塊元素和內(nèi)聯(lián)元素的基本差異是塊元素一般都從新行開(kāi)始。而當(dāng)加入了css控制以后，塊元素和內(nèi)聯(lián)元素的這種屬 性差異就不成為差異了。比如，我們完全可以把內(nèi)聯(lián)元素cite加上display:block這樣的屬性，讓他也有每次都從新行開(kāi)始的屬性。可變?cè)氐幕靖拍罹褪撬枰鶕?jù)上下文關(guān)系確定該元素是塊元素或者內(nèi)聯(lián)元素。可變?cè)剡€是屬于上述兩種元素類(lèi)別，一旦上下文關(guān)系確定了他的類(lèi)別，他就要遵循塊元素或者內(nèi)聯(lián)元素的規(guī)則限制。大致的元素分類(lèi)見(jiàn)全文。 View Code?
?
2.display的屬性
display 屬性規(guī)定元素應(yīng)該生成的框的類(lèi)型。
| none | 此元素不會(huì)被顯示。 |
| block | 此元素將顯示為塊級(jí)元素，此元素前后會(huì)帶有換行符。 |
| inline | 默認(rèn)。此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒(méi)有換行符。 |
| inline-block | 行內(nèi)塊元素。（CSS2.1 新增的值） |
3.Margin是什么
CSS 邊距屬性定義元素周?chē)目臻g。通過(guò)使用單獨(dú)的屬性，可以對(duì)上、右、下、左的外邊距進(jìn)行設(shè)置。也可以使用簡(jiǎn)寫(xiě)的外邊距屬性同時(shí)改變所有的外邊距。——W3School邊界，元素周?chē)深~外的空白區(qū)。“空白區(qū)”通常是指其他元素不能出現(xiàn)且父元素背景可見(jiàn)的區(qū)域。——CSS權(quán)威指南我們可以很清楚的了解到margin的最基本用途就是控制元素周?chē)臻g的間隔，從視覺(jué)角度上達(dá)到相互隔開(kāi)的目的。Margin的特性margin始終是透明的。margin通過(guò)使用單獨(dú)的屬性，可以對(duì)上、右、下、左的外邊距進(jìn)行設(shè)置。即：margin-top、margin-right、margin-bottom、margin-left。外邊距的 margin-width 的值類(lèi)型有：auto | length | percentage。也可以使用簡(jiǎn)寫(xiě)的外邊距屬性同時(shí)改變所有的外邊距：margin: top right bottom left;(eg: margin:10px 20px 30px 40px) 記憶方式是元素周?chē)戏巾槙r(shí)針“上右下左”記憶。并且規(guī)范還提供了省略的數(shù)值寫(xiě)法，基本如下：如果margin只有一個(gè)值，表示上右下左的margin同為這個(gè)值。例如：margin:10px; 就等于 margin:10px 10px 10px 10px; 如果 margin 只有兩個(gè)值，第一個(gè)值表示上下margin值，第二個(gè)值為左右margin的值。例如：margin:10px 20px; 就等于 margin:10px 20px 10px 20px; 如果margin有三個(gè)值，第一個(gè)值表示上margin值，第二個(gè)值表示左右margin的值，第三個(gè)值表示下margin的值。例如：margin:10px 20px 30px; 就等于 margin:10px 20px 30px 20px; 如果margin有四個(gè)值，那這四個(gè)值分別對(duì)應(yīng)上右下左這四個(gè)margin值。例如：margin:10px 20px 30px 40px; 在實(shí)際應(yīng)用中，個(gè)人不推薦使用三個(gè)值的margin，一是容易記錯(cuò)，二是不容易日后修改，一開(kāi)始如果寫(xiě)成margin:10px 20px 30px;日后需求改動(dòng)為上10px，右30px，下30px，左20px，你不得不還是得把這個(gè)margin拆開(kāi)為margin:10px 30px 30px 20px;費(fèi)力且不討好，不如一開(kāi)始就老老實(shí)實(shí)的寫(xiě)成margin:10px 20px 30px 20px;來(lái)的實(shí)在，不要為了現(xiàn)在節(jié)省倆個(gè)字節(jié)而讓日后再次開(kāi)發(fā)的成本上升。垂直外邊距合并問(wèn)題別被上面這個(gè)名詞給嚇倒了，簡(jiǎn)單地說(shuō)，外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。你可以查看W3Shool CSS外邊距合并了解這個(gè)基本知識(shí)。實(shí)際工作中，垂直外邊距合并問(wèn)題常見(jiàn)于第一個(gè)子元素的margin-top會(huì)頂開(kāi)父元素與父元素相鄰元素的間距，這個(gè)問(wèn)題發(fā)生的原因是根據(jù)規(guī)范，一個(gè)盒子如果沒(méi)有上補(bǔ)白(padding-top)和上邊框(border-top)，那么這個(gè)盒子的上邊距會(huì)和其內(nèi)部文檔流中的第一個(gè)子元素的上邊距重疊。再說(shuō)了白點(diǎn)就是：父元素的第一個(gè)子元素的上邊距margin-top如果碰不到有效的border或者padding.就會(huì)不斷一層一層的找自己“領(lǐng)導(dǎo)”(父元素，祖先元素)的麻煩。只要給領(lǐng)導(dǎo)設(shè)置個(gè)有效的 border或者padding就可以有效的管制這個(gè)目無(wú)領(lǐng)導(dǎo)的margin防止它越級(jí)，假傳圣旨，把自己的margin當(dāng)領(lǐng)導(dǎo)的margin執(zhí)行。對(duì)于垂直外邊距合并的解決方案上面已經(jīng)解釋了，為父元素例子中的middle元素增加一個(gè)border-top或者padding-top即可解決這個(gè)問(wèn)題。一般說(shuō)來(lái)這個(gè)問(wèn)題解釋到這里，大多數(shù)文章就不會(huì)再深入下去了，但作為一名實(shí)戰(zhàn)開(kāi)發(fā)者，最求的是知其然知其所以然，原本使用margin-top就是為了與父元素隔開(kāi)距離，而按照你這么一個(gè)解法，其實(shí)是一種“修復(fù)”，為了“彌補(bǔ)修復(fù)”這個(gè)父子垂直外邊距合并這個(gè)CSS規(guī)范“Bug”，而強(qiáng)制在父元素上使用border-top和padding-top，不舒服，也不容易記住，下次再發(fā)生這樣的情況還是會(huì)忘記這條準(zhǔn)則，而且在頁(yè)面設(shè)計(jì)稿里如果不需要border-top加個(gè)上邊框，這么一加反而畫(huà)蛇添足，為以后修改留下隱患。用Margin還是用Padding何時(shí)應(yīng)當(dāng)使用margin：需要在border外側(cè)添加空白時(shí)。空白處不需要背景（色）時(shí)。上下相連的兩個(gè)盒子之間的空白，需要相互抵消時(shí)。如15px + 20px的margin，將得到20px的空白。何時(shí)應(yīng)當(dāng)時(shí)用padding：需要在border內(nèi)測(cè)添加空白時(shí)。空白處需要背景（色）時(shí)。上下相連的兩個(gè)盒子之間的空白，希望等于兩者之和時(shí)。如15px + 20px的padding，將得到35px的空白。個(gè)人認(rèn)為：margin是用來(lái)隔開(kāi)元素與元素的間距；padding是用來(lái)隔開(kāi)元素與內(nèi)容的間隔。margin用于布局分開(kāi)元素使元素與元素互不相干；padding用于元素與內(nèi)容之間的間隔，讓內(nèi)容（文字）與（包裹）元素之間有一段“呼吸距離”。margin在塊元素、內(nèi)聯(lián)元素中的區(qū)別HTML（這里說(shuō)的是html標(biāo)準(zhǔn)，而不是xhtml）里分兩種基本元素，即block和inline。顧名思義，block元素就是以”塊”表現(xiàn)的元素（block-like elements），inline元素即是以”行”表現(xiàn)的元素（character level elements and text strings）。二者表現(xiàn)的主要差別在于，在頁(yè)面文檔中block元素另起一行開(kāi)始，并獨(dú)占一行。inline元素則同其他inline元素共處一行。block元素（塊元素）大致有：P|H1|H2|H3|H4|H5|H6|UL|OL|PRE| DL | DIV | NOSCRIPT | BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS(隨著html5標(biāo)準(zhǔn)的推進(jìn)，一些元素將被廢除，而一些新的元素將被引入)注意的是并非所有的block元素的默認(rèn)display屬性都是block，像table這種display:table的元素也是block元素。inline元素（內(nèi)聯(lián)元素）大致有：#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其中有類(lèi)特殊的元素：如img|input|select|textarea|button|label等，他們被稱(chēng)為可置換元素（Replaced element）。他們區(qū)別一般inline元素（相對(duì)而言，稱(chēng)non-replaced element）是：這些元素?fù)碛袃?nèi)在尺寸(intrinsic dimensions),他們可以設(shè)置width/height屬性。他們的性質(zhì)同設(shè)置了display:inline-block的元素一致。或許有朋友對(duì)非置換元素（non-replaced element）有點(diǎn)疑惑，稍微幫助大家理解一下。非置換元素，W3C 中沒(méi)有給出明確的定義，但我們從字面可以理解到，非置換元素對(duì)應(yīng)著置換元素（replaced element），也就是說(shuō)我們搞懂了置換元素的含義，就懂了非置換元素。置換元素，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 等這類(lèi)默認(rèn)就有 CSS 格式化外表范圍的元素。進(jìn)而可知，非置換元素（non-replaced element）就是除了 img, input, textarea, select, object 等置換元素以外的元素。margin在塊級(jí)元素下，他的性能可以完全體現(xiàn)，上下左右任你設(shè)定。且記住塊級(jí)元素的margin的參照基準(zhǔn)是前一個(gè)元素即相對(duì)于自身之前的元素有margin距離。如果元素是第一個(gè)元素，則就是相對(duì)于父元素的margin距離（但第一個(gè)元素相對(duì)于父元素margin-top而父元素又沒(méi)有設(shè)定padding-top/border-top的話(huà)要需要印證上面的垂直外邊距合并的知識(shí)）margin也能用于內(nèi)聯(lián)元素，這是規(guī)范所允許的，但是margin-top和margin-bottom對(duì)內(nèi)聯(lián)元素（對(duì)行）的高度沒(méi)有影響，并且由于邊界效果(margin效果)是透明的，他也沒(méi)有任何的視覺(jué)影響。這是因?yàn)檫吔鐟?yīng)用于內(nèi)聯(lián)元素時(shí)不改變?cè)氐男懈叨?#xff0c;如果你要改變內(nèi)聯(lián)元素的行高即類(lèi)似文本的行間距，那么你只能使用這三個(gè)屬性：line-height，fong-size，vertical-align。請(qǐng)記住，這個(gè)影響內(nèi)聯(lián)元素高度的是line-height而不是height，因?yàn)閮?nèi)聯(lián)元素是一行行的，定一個(gè)height的話(huà)，那這到底是整段inline元素的高呢？還是inline元素一行的高呢？這都說(shuō)不準(zhǔn)，所以統(tǒng)一都給每行定一個(gè)高，只能是line-height了。margin-top/margin-bottom對(duì)內(nèi)聯(lián)元素沒(méi)有多大實(shí)際效果，不過(guò)margin-left/margin-right還是能夠?qū)?nèi)聯(lián)元素產(chǎn)生影響的。應(yīng)用margin:10px 20px 30px 40px;，左邊這個(gè)css如果寫(xiě)在inline元素上，他的效果大致是，上下無(wú)效果，左邊離他相鄰元素或者文本距離為40px，右邊離他相鄰元素或者文本距離為20px。你可以自行嘗試一番。最后在內(nèi)聯(lián)元素中還有上文我們提到的非可置換inline元素（non-replaced element），這些個(gè)元素img|input|select|textarea|button|label雖然是內(nèi)聯(lián)元素，但margin依舊可以影響到他的上下左右！總結(jié)下來(lái)margin 屬性可以應(yīng)用于幾乎所有的元素，除了表格顯示類(lèi)型（不包括 table-caption, table and inline-table）的元素，而且垂直外邊距對(duì)非置換內(nèi)聯(lián)元素（non-replaced inline element）不起作用。負(fù)margin技術(shù)及其應(yīng)用在margin所有的實(shí)際應(yīng)用中，負(fù)margin技術(shù)是我學(xué)習(xí)css路上最重要一課之一，許多高級(jí)應(yīng)用和頁(yè)面上的疑難雜癥都可以用負(fù)margin技術(shù)來(lái)實(shí)現(xiàn)。margin技術(shù)是那么的有用，限于篇幅我又不想草草了事，所以我決定專(zhuān)門(mén)為他寫(xiě)一篇文章，詳細(xì)的說(shuō)明他的效果、原理、及其應(yīng)用。在此之前你可以先閱讀懌飛寫(xiě)的由淺入深漫談margin屬性這篇文章，大致了解“margin參考線(xiàn)”的概念，之后再來(lái)查看負(fù)margin技術(shù)及其應(yīng)用這篇文章。 View Code4.overflow 屬性規(guī)定如何處理如何處理不符合元素框的內(nèi)容。
用法如下：Object.style.overflow=visible|hidden|scroll|auto。參數(shù)介紹：visible：內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。 hidden：內(nèi)容會(huì)被修剪，但是瀏覽器不會(huì)顯示供查看內(nèi)容的滾動(dòng)條。 scroll：內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。 auto：由瀏覽器決定如何顯示。如果需要，則顯示滾動(dòng)條。 本例使用 overflow 來(lái)顯示溢出元素框的內(nèi)容：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> 相信大家都碰到過(guò)一種情況：沒(méi)有給父級(jí)div指定高度。希望他通過(guò)子級(jí)div的高度變化而自動(dòng)適應(yīng)。看似很簡(jiǎn)單，但日常應(yīng)用中往往對(duì)子級(jí)div有更多要求，比如多重子級(jí)div、子級(jí)div左（右）浮動(dòng)等等。這時(shí)就會(huì)碰到一種比較郁悶的情況：父級(jí)div無(wú)法隨著子級(jí)div的高度增加而增加，發(fā)生”脫層”的現(xiàn)象。這種時(shí)候就需要用到”overflow: hidden;”這個(gè)屬性了。表面意思來(lái)看他的作用是隱藏div層，而當(dāng)我們給父級(jí)div應(yīng)用這個(gè)屬性的時(shí)候會(huì)發(fā)現(xiàn)它神奇的變得自適應(yīng)了。對(duì)于table來(lái)說(shuō)，假如table-layout屬性設(shè)置為fixed，則td對(duì)象支持帶有默認(rèn)值為hidden的overflow屬性。如果設(shè)為hidden，scroll或者auto，那么超出td尺寸的內(nèi)容將被剪切。如果設(shè)為visible，將導(dǎo)致額外的文本溢出到右邊或左邊（視direction屬性設(shè)置而定）的單元格。overflow:hidden---這樣超出部分會(huì)自動(dòng)隱藏，這樣做不好的地方是就是這部分的信息顯示不完全，比如圖片只顯示了一部分，但是頁(yè)面布局不會(huì)亂。要注意的是，使用overflow的時(shí)候，一定要定義width，百分比或者具體值都可以。（在用ul和li做圖片列表排列的時(shí)候，也可以用這個(gè)，這樣避免一些大尺寸圖搞亂布局，也可以解決瀏覽器窗口縮小時(shí)，li元素自動(dòng)回行排列出錯(cuò)的問(wèn)題）。用overflow:auto，還可以在頁(yè)面里模仿出IFRAME的效果。 View Code5.float浮動(dòng)屬性
| 當(dāng)前元素分類(lèi)(float:left) | 下一個(gè)緊鄰元素分類(lèi)(不含float) | 結(jié)論 |
| 塊級(jí)元素(a) | 塊級(jí)元素(b) | b會(huì)填充a遺留下來(lái)的空間，a會(huì)和b發(fā)生重疊，a的圖層在上面。 |
| 內(nèi)聯(lián)元素(b) | b會(huì)緊跟在a的后面。并根據(jù)自身內(nèi)聯(lián)元素的特點(diǎn)，是否換行。 | |
| 內(nèi)聯(lián)元素(a) | 塊級(jí)元素(b) | b不會(huì)跟隨a的移動(dòng)。 |
| 內(nèi)聯(lián)元素(b) | b會(huì)緊跟在a的后面。并根據(jù)自身內(nèi)聯(lián)元素的特點(diǎn)，是否換行。 |
6.display:inline、block、inline-block的區(qū)別
display:block就是將元素顯示為塊級(jí)元素.block元素的特點(diǎn)是：總是在新行上開(kāi)始；高度，行高以及頂和底邊距都可控制；寬度缺省是它的容器的100%，除非設(shè)定一個(gè)寬度<div>, <p>, <h1>, <form>, <ul> 和 <li>是塊元素的例子。display:inline就是將元素顯示為行內(nèi)元素.inline元素的特點(diǎn)是： 和其他元素都在一行上；高，行高及頂和底邊距不可改變；寬度就是它的文字或圖片的寬度，不可改變。<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。inline和block可以控制一個(gè)元素的行寬高等特性，需要切換的情況如下：讓一個(gè)inline元素從新行開(kāi)始；讓塊元素和其他元素保持在一行上；控制inline元素的寬度（對(duì)導(dǎo)航條特別有用）；控制inline元素的高度；無(wú)須設(shè)定寬度即可為一個(gè)塊元素設(shè)定與文字同寬的背景色。display:inline-block將對(duì)象呈遞為內(nèi)聯(lián)對(duì)象，但是對(duì)象的內(nèi)容作為塊對(duì)象呈遞。旁邊的內(nèi)聯(lián)對(duì)象會(huì)被呈遞在同一行內(nèi)，允許空格。inline-block的元素特點(diǎn)：將對(duì)象呈遞為內(nèi)聯(lián)對(duì)象，但是對(duì)象的內(nèi)容作為塊對(duì)象呈遞。旁邊的內(nèi)聯(lián)對(duì)象會(huì)被呈遞在同一行內(nèi)，允許空格。(準(zhǔn)確地說(shuō)，應(yīng)用此特性的元素呈現(xiàn)為內(nèi)聯(lián)對(duì)象，周?chē)乇３衷谕恍?#xff0c;但可以設(shè)置寬度和高度地塊元素的屬性)并不是所有瀏覽器都支持此屬性，目前支持的瀏覽器有：Opera、Safari在IE中對(duì)內(nèi)聯(lián)元素使用display:inline-block，IE是不識(shí)別的，但使用display:inline-block在IE下會(huì)觸發(fā)layout，從而使內(nèi)聯(lián)元素?fù)碛辛薲isplay:inline-block屬性的表癥。從上面的這個(gè)分析，也不難理解為什么IE下，對(duì)塊元素設(shè)置display:inline-block屬性無(wú)法實(shí)現(xiàn)inline-block的效果。這時(shí)塊元素僅僅是被display:inline-block觸發(fā)了layout，而它本就是行布局，所以觸發(fā)后，塊元素依然還是行布局，而不會(huì)如Opera中塊元素呈遞為內(nèi)聯(lián)對(duì)象。IE下塊元素如何實(shí)現(xiàn)display:inline-block的效果？有兩種方法：1、先使用display:inline-block屬性觸發(fā)塊元素，然后再定義display:inline，讓塊元素呈遞為內(nèi)聯(lián)對(duì)象（兩個(gè)display要先后放在兩個(gè)CSS聲明中才有效果，這是IE的一個(gè)經(jīng)典bug，如果先定義了display:inline-block，然后再將display設(shè)回inline或block，layout不會(huì)消失）。代碼如下（...為省略的其他屬性?xún)?nèi)容）：div {display:inline-block;...} div {display:inline;}2、直接讓塊元素設(shè)置為內(nèi)聯(lián)對(duì)象呈遞（設(shè)置屬性display:inline），然后觸發(fā)塊元素的layout（如：zoom:1等）。代碼如下：div {display:inline; zoom:1;...}以下用個(gè)例子來(lái)說(shuō)明三者的區(qū)別和用 <!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的區(qū)別</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中的內(nèi)容超出div本身的寬度時(shí)
可以在div的css樣式中加
word-wrap:break-word; word-break:break-all; overflow: hidden;/*這個(gè)參數(shù)根據(jù)需要來(lái)決定要不要*/?8.DIV設(shè)置浮動(dòng)后無(wú)法撐開(kāi)外部DIV的解決辦法
那如何解決這個(gè)浮動(dòng)了之后無(wú)法把容器撐開(kāi)的局面呢？解決的方法這里介紹2仲。
第一種：在浮動(dòng)結(jié)束的容器后面加上這段代碼
<div style=”clear:both;”></div>
意思是清除浮動(dòng)。
第二種：在外層DIV，也就是這里的DIV1的CSS里面加入以下CSS代碼
overflow: auto;
這2種方法都可以實(shí)現(xiàn)DIV2把DIV1撐開(kāi)。不過(guò)這里建議大家使用第一種方法，要養(yǎng)成一個(gè)習(xí)慣，在浮動(dòng)應(yīng)用完后消除浮動(dòng)，這樣后面的DIV就不會(huì)繼承這個(gè)浮動(dòng)（就像在編程的時(shí)候，在打開(kāi)數(shù)據(jù)庫(kù)，操作完后，要養(yǎng)成個(gè)習(xí)慣在后面把數(shù)據(jù)庫(kù)關(guān)閉）。也就是說(shuō)浮動(dòng)這個(gè)東西會(huì)被繼承，除非消除這個(gè)浮動(dòng)，才不會(huì)讓后面接著的DIV受到繼承。其實(shí)不僅是DIV，其他的像P等其他的容器都會(huì)有繼承的效應(yīng)，大家要養(yǎng)成一個(gè)習(xí)慣記得要消除浮動(dòng)。
9.靜態(tài)網(wǎng)頁(yè)的練習(xí)
<!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>無(wú)標(biāo)題文檔</title> <script src="jingtai.js" type="text/javascript"></script> <link href="jingtailianxi.css" type="text/css" rel="stylesheet"/> </head><body><!--1導(dǎo)航欄--><div id="daohang"><div id="dh_left"><div style="float:left;">LOGO</div><ul class="ul1"><li class="li1 li11">網(wǎng)站首頁(yè)</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">網(wǎng)站首頁(yè)</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內(nèi)容--><div id="neirong"><!--1內(nèi)容黑條--><div id="nr1"><h2>內(nèi)容</h2></div><!--2左部分--><div id="left"><!--1位置--><div>主頁(yè)-主頁(yè)-主頁(yè)</div><!--2.left_kuang--><div id="left_kuang">框ALL</div><!--3.下拉選擇和分頁(yè)信息--><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.顯示內(nèi)容--><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.右側(cè)內(nèi)容--><div id="right_neirong"><!--靜態(tài)頁(yè)面時(shí)，不用加code主鍵值，當(dāng)改動(dòng)態(tài)頁(yè)面時(shí)，循環(huán)輸出這些li時(shí)，給每個(gè)主鍵值，然后根據(jù)主鍵值，通過(guò)ajax調(diào)數(shù)據(jù)，顯示在浮動(dòng)層--><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";/*下面是改動(dòng)態(tài)頁(yè)面時(shí)，往浮動(dòng)層中添加內(nèi)容*//*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實(shí)現(xiàn)鼠標(biāo)跟隨事件
<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.后臺(tái)管理系統(tǒng)界面
?
?
主頁(yè)面代碼
<?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>后臺(tái)管理中心</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">平湖市水務(wù)投資（集團(tuán)）有限公司</div><div id="sjxs"></div><div id="shijian"><div><img src="../image/shijian.png"/></div></div><div id="tuichu"><div><img src="../image/未標(biāo)題-1.png"/></div><div>退出</div></div><div id="shouye"><div><img src="../image/shouye.png"/></div><div>首頁(yè)</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> /*顯示時(shí)間代碼*/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控制鼠標(biāo)移入移出事件*//*$(".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?例子：對(duì)添加文章的操作，（包括上傳頭像預(yù)覽）
主頁(yè)面代碼
<?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>后臺(tái)管理中心</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"> <!--引入時(shí)間選擇器--><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">平湖市水務(wù)投資（集團(tuán)）有限公司</div><div id="tuichu"><div><img src="../image/未標(biāo)題-1.png"/></div><div>退出</div></div><div id="shouye"><div><img src="../image/shouye.png"/></div><div>首頁(yè)</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>標(biāo)題: <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">發(fā)表文章</button><button class="btn btn-warning" id="resetBtn">重置</button> </div></form></div><div id="wz_right"><div id="add_pic"><!--圖片預(yù)覽功能--><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">//回調(diào)函數(shù),調(diào)用該方法傳一個(gè)文件路徑，該變背景圖function showimg(url){var div = document.getElementById("yl");div.style.backgroundImage = "url("+url+")";document.getElementById("tp").value = url;}</script><!-- --------------------------></div><div id="add_wztime">發(fā)布時(shí)間:<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() { /*初始化時(shí)間選擇器*/$( "#datepicker" ).datepicker();});$("#resetBtn").click(function(){$("#title").val(""); $("#zhaiyao").val("");$("#summernote").val(""); }); $(".fabiao").click(function(){var ylm=$("#ylm").val(); /*取欄目,判斷有沒(méi)有子欄目，如果沒(méi)有，取一級(jí)欄目的代號(hào)，有的話(huà)取取子欄目的代號(hào)*/var zlm=$("#zlm").val();var lm_code="";if(zlm=="無(wú)子欄目"){lm_code=ylm;}else{lm_code=zlm;}var tle=$("#title").val(); /*取標(biāo)題*/var zy=$("#zhaiyao").val(); /*取要聞*//*取到summernote文本編輯器中的數(shù)據(jù)，因?yàn)閿?shù)據(jù)是帶有html標(biāo)簽的，要先把其轉(zhuǎn)換為text形式*/var wznr=$('#summernote').summernote('code');var lujing=$("#tp").val(); /*根據(jù)上面的showing回調(diào)函數(shù)中賦給tp的屬性，取到圖片的路徑*/var sj=$("#datepicker").val();qikoo.dialog.confirm('確認(rèn)添加？',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("發(fā)表成功，等待審核");}else if(data=="no"){alert("標(biāo)題內(nèi)容不能有空");}else{alert("請(qǐng)選擇發(fā)布時(shí)間");}}})},function(){}); })/*顯示時(shí)間代碼*/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;} /*設(shè)置透明，當(dāng)點(diǎn)擊圖像時(shí)，即點(diǎn)擊了上傳文件文本框*/ #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() /* 填充一級(jí)欄目的方法*/{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(); //代號(hào)取上一級(jí)的value值$.ajax({async:false, //為了下邊的區(qū)能執(zhí)行，這里要設(shè)置為同步url:"../chuli/addwzchuli.php",data:{lm_pcode:lm_pcode,type:0},type:"POST",dataType:"text",success: function(data){if(data==""){$("#zlm").html("<option>無(wú)子欄目</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例子：對(duì)人員的操作
<div id="head"><div id="logo">平湖市水務(wù)投資（集團(tuán)）有限公司</div><div id="sjxs"></div><div id="shijian"><div><img src="../image/shijian.png"/></div></div><div id="tuichu"><div><img src="../image/未標(biāo)題-1.png"/></div><div>退出</div></div><div id="shouye"><div><img src="../image/shouye.png"/></div><div>首頁(yè)</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">請(qǐng)選擇人員：<select id="user"></select></div><div id="js_xinxi">請(qǐng)選擇角色：</div><div id="bm_xinxi">請(qǐng)選擇部門(mén)：</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({ /* 添加部門(mén)*/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();}})/* 下拉表單變化時(shí)，顯示人員的相應(yīng)角色*/$("#user").change(function(){XuanZhong();XuanZhong1();})/*點(diǎn)擊保存，修改用戶(hù)的權(quán)限*/$("#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>無(wú)標(biāo)題文檔</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>標(biāo)題</th><th>內(nèi)容</th><th>審核狀態(tài)</th><th>操作</th></tr></thead><tbody></tbody></table><input type="text" id="cx1"/><input type="button" id="cx2" value="查詢(xún)" /><input type="button" id="add" value="添加文章" /><div id="fynr"></div> </body> </html> <script type="text/javascript"> $(document).ready(function(){/*1.查詢(xún)欄目下的文章*/var page = 1; //當(dāng)前頁(yè)var li=" 1=1 ";var cx1="";bb();LoadXinXi();/*點(diǎn)擊欄目*/$(".aa").click(function(){page=1;$("#cx1").val(""); /*點(diǎn)擊欄目時(shí)，先清空input里邊的值*/var bs=$(this).attr("bs");li="wz_li='"+bs+"'";bb();LoadXinXi();})/*點(diǎn)擊查詢(xún)*/$("#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'>未相關(guān)找到數(shù)據(jù)!</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"); /*審核通過(guò)的，加載頁(yè)面時(shí)，要加載當(dāng)前欄目下的*/var li="wz_li='"+biao+"'";bb();}}});}})}}});}function LoadXinXi(){var str6 = "";var minys = 1;var maxys = 1;var cx1=$("#cx1").val();//查總頁(yè)數(shù) $.ajax({async:false,url:"zys.php",data:{cx1:cx1,li:li},type:"POST",dataType:"TEXT",success: function(d){maxys = d;}});str6 += "<span>總共："+maxys+"頁(yè)</span> ";str6 += "<span id='prev'>上一頁(yè)</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'>下一頁(yè)</span>"; $("#fynr").html(str6);//給上一頁(yè)添加點(diǎn)擊事件 $("#prev").click(function(){page = page-1;if(page<1){page=1;}bb(); //加載數(shù)據(jù) LoadXinXi(); //加載分頁(yè)信息 })//給下一頁(yè)加點(diǎn)擊事件 $("#next").click(function(){page = page+1;if(page>maxys){page=maxys;}bb(); //加載數(shù)據(jù) LoadXinXi(); //加載分頁(yè)信息 })//給中間的列表加事件 $(".list").click(function(){page = parseInt($(this).attr("bs"));bb(); //加載數(shù)據(jù) LoadXinXi(); //加載分頁(yè)信息 })}})/*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();//查總頁(yè)數(shù)$.ajax({async:false,url:"zys.php",data:{cx1:cx1,li:li},type:"POST",dataType:"TEXT",success: function(d){maxys = d;}});/* str6 += "<span>總共："+maxys+"頁(yè)</span> ";str6 += "<span id='prev'>上一頁(yè)</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'>下一頁(yè)</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);//給上一頁(yè)添加點(diǎn)擊事件$("#prev").click(function(){page = page-1;if(page<1){page=1;}bb(); //加載數(shù)據(jù)LoadXinXi(); //加載分頁(yè)信息})//給下一頁(yè)加點(diǎn)擊事件$("#next").click(function(){page = page+1;if(page>maxys){page=maxys;}bb(); //加載數(shù)據(jù)LoadXinXi(); //加載分頁(yè)信息})//給中間的列表加事件/*$(".list").click(function(){page = parseInt($(this).attr("bs"));bb(); //加載數(shù)據(jù)LoadXinXi(); //加載分頁(yè)信息})*//*文本輸入框中鍵盤(pán)抬起事件*/$("#lili").keyup(function(){var lili=$("#lili").val();page=lili;bb(); //加載數(shù)據(jù)LoadXinXi(); //加載分頁(yè)信息})/*給tou加點(diǎn)擊事件*/$("#shou").click(function(){page=1;bb(); //加載數(shù)據(jù)LoadXinXi(); //加載分頁(yè)信息})/*給wei加點(diǎn)擊事件*/$("#wei").click(function(){page=maxys;bb(); //加載數(shù)據(jù)LoadXinXi(); //加載分頁(yè)信息})} View Code?
轉(zhuǎn)載于:https://www.cnblogs.com/xingyue1988/p/6496864.html
總結(jié)
以上是生活随笔為你收集整理的对静态页面的一些理解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 简单android拨号器的实现
- 下一篇： SPOJ 7258 SUBLEX （SA