JavaScript

為什麼設定的margin-top不不起作用，margin-top不起作用為什麼設定的margin-top不不起作用:建議:儘可能的手寫代碼，可以有效提高學習效率和深度。大家知道可以通過margin-top屬性設定對象的上外邊距，但是有時候設定了此屬性之後，並沒有起任何作用。多種原因造成的，其中一個就有由外邊距合并造成的，下面再介紹一種。先看一段代碼執行個體:<!DOCTYPE html><html><head><meta charset=" utf-8"

HTML語義化標籤，html語義標籤 總所周知，現在的網頁是由HTML、CSS、JS三大元素組成，而HTML是其中最重要的部分，是整個網頁的骨架，CSS和js在骨架的基礎上進行相應的修飾，使得網頁成為一個有血有肉，可以動的“人”。如果HTML設計不合理，則類似一個骨骼不健全的人，即使外表再怎麼修飾，也掩蓋不了他明顯的缺陷。   

css:Media

CSS的base檔案常用代碼，cssbase代碼article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,button,input,select,textarea{font:12px/1.5

Day_11.給新人follow代碼想到的，day_11follow這兩天讓新人（剛畢業，此前未接觸前端）切了個頁面，發現了一些問題，聯想到自己初入前端的時候因為沒人帶不可避免的也走了很多彎路，所以藉著跟他講解的機會，在這裡把新人切頁面中常見的問題和不好的習慣列舉一下。首先上psd：首先來分析一下頁面上最直觀的問題：下面再來看一下代碼：id名稱不規範，把導航寫成了banner，把banner寫成了header，很多人會覺得不以為然，只要我寫的樣式和標籤一一對應不就行了嗎？這麼寫，首先別人看上去就

CSS樣式的物件導向思想（一），css物件導向  今天來談一談CSS樣式的物件導向寫法。顧名思義，物件導向是進階語言具備的特性，主要是為了程式高可複用，解決模組之間的耦合關係，那麼像CSS這樣的指令碼語言是否也可以使用物件導向的思想，來提高代碼的可維護性和可擴充性呢？答案是肯定的，運用物件導向的思想來編寫CSS代碼，可以極大提高前台代碼的效率。      目前常用的一種CSS程式碼群組織方法是：base.css +

如何利用背景圖片製作漂亮的按鈕，利用背景圖片按鈕如何利用背景圖片製作漂亮的按鈕:建議:儘可能的手寫代碼，可以有效提高學習效率和深度。按鈕的應用可以說在網站中無處不在，不過預設的按鈕並不美觀，如果使用圖片作為按鈕的背景能夠極大的提高按鈕的美觀度，下面就簡單介紹一下如何使用背景圖片製作漂亮的按鈕，並且當滑鼠放在按鈕傷上或者離開時候會切換不同的背景圖片。代碼執行個體如下:<!DOCTYPE html><html><head><meta charset="

如何使用CSS實現細線表格效果，css實現細線表格如何使用CSS實現細線表格效果:建議:儘可能的手寫代碼，可以有效提高學習效率和深度。雖然在使用布局的時候不提倡使用table，但是table並非是一個不能使用的元素，只要和CSS配合使用得當，還是具有相當的威力，並且在特地的情況使用table比使用div更有優勢，例如在製作表格，但是表格內建的邊框比較醜陋，下面介紹一下如何使用CSS實現細線表格效果。代碼執行個體如下:<!DOCTYPE

CSS字元編碼引起亂碼，css字元亂碼亂碼引起的CSS失效原理：由於一個中文是兩個字元組成，在編碼不一致的情況下會引發字元的“重新”組合，（半個漢字的編碼字元與後面的字元組合產生新的“文字”）引發原本的結束符合“變異”，從而導致找不到結束符號，使得後面的CSS就會失效。小技巧1：CSS中出現的亂碼都是由於CSS字元編碼與頁面的字元編碼不一致所引起的，因此最直接的方法就是使字元編碼一致。將CSS指定編碼類別型，例：@chars

如何利用CSS設定文字的陰影製作效果，利用css文字陰影如何利用CSS設定文字的陰影製作效果:建議:儘可能的手寫代碼，可以有效提高學習效率和深度。有時候需要給文字加上陰影，下面就結合執行個體簡單介紹一下如何給文字加上陰影製作效果。先看一段代碼執行個體:<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author"

使用CSS如何?截取標題並用省略符號表示超出部分，css省略符號使用CSS如何?截取標題並用省略符號表示超出部分:建議:儘可能的手寫代碼，可以有效提高學習效率和深度。眾多的網站都有這樣的效果，當新聞標題過長的時候，一般都會截取一部分，並且會在末尾使用省略符號（...）表示被截取掉的部分。這樣的效果當然也可以由背景程式員來完成，當然前台人員利用CSS也可以實現此效果，可以省卻很多後台代碼，有著不小的有點。下面簡單介紹一下如何?此種效果。代碼執行個體如下:<!DOCTYPE html>&

前端--嘗試以新角度深入理解CSS盒模型(1)，深入理解cssCSS樣式規則的學習是很繁瑣和枯燥的，因為它不像物理、數學或者其他程式設計語言一樣有一些基本概念、有一些基本公理或者規則，其他所有的表現都是概念在這些公裡或者規則之下的邏輯遊戲，CSS是有一些基本概念，但它沒有說給你幾條規則然後所有的表現都是在這些規則之下的任意自由組合，你要推測一個樣式聲明塊的在頁面中具體是怎樣表現的，你幾乎靠非常少邏輯推理去推測出來，絕大多數是你知道並記住了這種寫法的聲名塊是具有怎樣的表現的。之所以為這樣也是因為樣

前端學習入門，學習入門 ================================學習階段==========================1、通讀w3school的HTML、XHTML、HTML5、CSS、CSS3、TCP/IP、Javascript、AJAX教程，其中的執行個體至少寫一遍！    做到對html、css、js有個大概的瞭解2、反覆閱讀經典書籍，並且實現書中的每一個例子。書籍清單如下：   

display:table-cell的用法簡介，displaytable-celldisplay:table-cell的用法簡介:建議:儘可能的手寫代碼，可以有效提高學習效率和深度。display屬性的使用相當頻繁，比如display:block或者display:inline等，但是對於display:table-cell可能比較陌生，因為此屬性在特定的情況下會發揮很大的作用，下面就簡單介紹它的作用，先看一段代碼執行個體: <!DOCTYPE html><html&

html代碼編寫過程中的幾個警惕點，html代碼　　本文想說的警惕點與瀏覽器安全色無關，主要是幾個本人在項目中遇到的幾個小問題的總結，問題雖小，但是卻有時很困擾人，在此記錄一下，如果後期有此類問題會持續添加到這裡。 1.內聯標籤之間的空格 　　正常情況下書寫html代碼的時候都有換行、縮排等習慣，比如 <head> <meta charset="utf-8"> <style> html,body, div, dl,

HTML元素大小和位置相對於誰的問題，html元素大小誰的一、如果元素的position屬性值為absolute，那麼此時分為兩種情況：1. 父級（包括直接父級和間接父級）元素中沒有定義position屬性（即預設屬性static），那麼該元素會參照頁面，以頁面為基準進行定位，top, left等屬性會參照頁面。如果該元素的width和height屬性是百分數的話，那麼這兩個屬性也是參照頁面的寬度和高度。<!doctype html><html><head>&

IE8中虛擬元素動態作用樣式不重繪bug記錄，ie8前陣子對公司架構的前端最佳化中，使用了字型表徵圖（iconfont）來做模組的表徵圖集，供使用者進行配置選擇。字型表徵圖的有非常好的靈活性和複用性，可以像處理文字一樣通過font-size進行大小設定、通過color來直接配色，如果系統整體設計是比較扁平化的，瀏覽器安全色要求IE8+，並且在系統中需要一套表徵圖集的話，選擇字型表徵圖來替代傳統的png表徵圖應該說是一個非常有性價比的方案。具體字型表徵圖的製作和使用，有一個非常棒的服務網站：www

css-position，position值描述absolute產生絕對位置的元素，相對於 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。(簡單情況下相對於瀏覽器視窗)fixed產生絕對位置的元素，相對於瀏覽器視窗進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom"

color屬性是否具有繼承性，color屬性繼承性color屬性是否具有繼承性:建議:儘可能的手寫代碼，可以有效提高學習效率和深度。這個問題應該比較簡單，但是還是注意一下，否則可能造成顏色的混亂。先看一段代碼執行個體:<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/"

IE9父容器overflow:auto時，子容器狀態更改導致捲軸下出現額外空間的問題探討，ie9overflow　　IE的每次跟新都會有一些奇葩的bug，我們默默承受了。　　這個問題在項目中出現困擾了我近一個星期，這裡記錄一下。看下面執行個體 <style> .panel{ width: 200px; overflow: auto; background-color: #f00; } .inner{