做前端接近兩個星期了，我感覺最近進步比較大，可能是因爲起點低吧，所有感覺進步比較快，簡單的總結一些我兩週來所遇到的問題以及解決的辦法
印象最深刻的也是第一次遇到這樣的問題：
需求：
做一個收索的文本框，文本框前面放一個放大鏡，然後中間可以輸入文字，但文字不能再放大鏡上，後面跟一個收索確定按鈕，
我的辦法：
三個div全部做浮動，左邊一個放放大鏡的圖片，中間的放一個文本框，右邊的那個放按鈕，
結果：
雖然放大鏡，文本框，收索按鈕在同一水平線上排列着，但由於圖片和文本框的高度不一致，拼接的很難看，還有那個按鈕，上下不對其。
最後解決辦法：
兩個div左浮動一個放文本框，一個放按鈕。對文本框和按鈕設置class樣式讓文本框和按鈕的高度和寬度與對應背景圖片的高度寬度一樣，再吧圖片當做控件的背景上左開始不重複，然後讓文本框的首行縮進2個文字的寬度，屬性爲text-indent:。當然也可以設置文本框的左內補丁5個像素左右（次方法不推薦）
.inputSearchKeyword {
background: url(../img/common/040529/l1_07.jpg) left top no-repeat;
height: 20px;
width: 100px;
border: 1px solid #CCC;
color: #fff;
text-indent: 2em;
}
總結：
以後只要是對文本框按鈕等常用的控件設置樣式這種辦法都可以。
常用的li裏面嵌套a便籤做導航的規則。
1、需求：
做一個豎着的菜單項然後每個子項可以連接到另外一個頁面
總體實現方法：
Li控件裏面嵌套a便籤
需要注意或比較有難點的經驗總結：
有時候比如在超鏈接前面加一個圖標，或者特殊字符比如“>”的東西的時候，千萬不能直接再前面加圖片或者加span便籤然後設置樣式，這樣不便於優化和動態輸出數據時不方便。
正確的方法是：
吧前面想要的圖像或特殊字符，做成圖片，然後坐成li的背景圖片靠右邊對其不重複，然後設置li的5到10個像素的內補丁。
.right3_1menu li {
width: 265px;
background:url(../../images/common/styleli_03.png) left top no-repeat;
padding-left: 15px;
}
2、需求
做一個橫着的菜單項然後每個子項可以連接到另外一個頁面
總體實現方法：
Li控件裏面嵌套a便籤，每個Li左浮動，此種導航多半對會嵌套多從子菜單，也不是覺對的
效果：當你吧鼠標移動到第一項的時候第一項下面的所有的子菜單都會出來，讓後第一項的背景顏色會改變，
一般（或之前的我的想法）實現技術：
通過js腳本來顯示或隱藏第二級子菜單的同是讓該變色的Li控件改變樣式（比如改變背景顏色的同時改變前景文字的顏色）。
總結：
只需要通過js改變二級菜單的顯示和隱藏即可，關於當前項的顏色改變完全可以用超鏈接的 默認狀態和選擇狀態通過樣式實現，具體是將a標籤的display的屬性設置爲block然後高度和寬度和所在的Li的一樣，讓後通過設置 a{}；和a:hover{}來實現
這樣做哦好處：減少了js代碼，用樣式代替效果。
.nav li a {
height: 30px;
line-height: 30px;
padding: 4px 0;
background-color: #e6e6e6;
display: block;
border-bottom:1px solid #d3d3d3;
color: #000;
}
.nav li a:hover{
background-color: #696666;
color:#00f;
}
關於表格的樣式及用法
在佈局中絕對不能用表格佈局
對於一些數據的顯示要求橫豎對齊很規範就用表格來顯示
難點：關於表格的邊框樣式。
1、最簡單的就是表格沒有邊框
cellpadding="0"cellspacing="0" boder=“0”
2、對於表格的每個td之間用一個像素的像素來隔開
實現方法：
首先對錶格cellpadding="0" cellspacing="0"
然後對每個td設置上左邊框爲一個像素，再在設置整個表格(table)的下右邊框爲一個像素
.right2 table {
height: auto;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.right2 table tr td {
text-align: center;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
}
3、對於表格的每個tr之間用一個像素的像素來隔開td之間沒有距離（或者說看不見邊框）
實現方法：
首先對錶格cellpadding="0" cellspacing="0"
然後對每個td設置上下邊框樣式爲一個像素，再在設置整個表格(table)的左右邊框爲一個像素
.right2_2 table {
height: auto;
border-left:1px solid #ccc;
border-right: 1px solid #ccc;
}
.right2_2 table tr td {
text-align: center;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
關於佈局中的一些常用的習慣規則：
關於間距邊框和字的距離：少用內補丁，最好就是居中，水平居中：text-alig：centre、豎直居中line-height的值爲容器的高度，多行是更具具體的情況設置值。少用空格 ；最好不要用，可以用首行縮進text-indent，或者設置字距letter-spacing,
盒子和盒子的距離用外補丁設置佈局中不要用<br/>換行，可以使用空div
樣式上少用，最好不要id選擇器#,多用類選擇器class 因爲id的值還有更大的用處，還有就是id侷限了該div或控件的用處，有時候的佈局或數據時要循環的，次是的id是不能重複的而已class是可以重複的。
昨天遇到一個很不解的問題：是這樣的，總體寬度爲1100px；分爲左邊和右邊兩個div盒子，全部左浮動然後右邊的那個div盒子的寬度固定寬度爲850px，然後裏面又有多個div，第一個盒子的寬度爲750px，第二個盒子的寬度爲100%，在谷歌(Chrome)和火狐(Mozilla Firefox)下看到的都左邊和右邊的兩個大的盒子第在同一水平線上，右邊的多個盒子依次從上到下排列，和正常。但到IE下看到的卻是右邊的那個盒子整體塌陷下去了，無論怎麼樣改變右邊盒子的補丁爲和寬度，還是改變裏面的div都無法再次到同一水平線上，最後在右邊的第一個div（width：750px）和第二個div（width：100%）之間清除了浮動句號了。
疑點：就算右邊的多個div浮動塌陷，也應該不會影響到右邊整體的div塌陷吧，而且在谷歌(Chrome)和火狐(Mozilla Firefox)先都好好的，爲什麼在IE下就塌陷了呢？