『壹』 前端開發應該知道的幾個CSS網頁表單布局技巧
1、絕對定位
在絕大過程中,想確定一個元素在網站當中的固定位置,絕對定位是實現這個方式的解決辦法。在網頁當中,絕對定位可精確的控制元素在網頁當中的位置,我們可使用頂部、底部、左側和右側,附上一個像素值來控制元素所在的位置。
position:absolute;top:50px;right:50px
上面的CSS設置一個元素的位置從瀏覽器的頂部和右邊保持50px。你也可以在div內使用絕對定位。
2、覆蓋所有樣式
寫CSS的時候都應該知道,當你想給一個元素添加一個新的CSS樣式,但這個樣式之前已經被定義過了。此時我們可以採用!important來定義。
例如,如果我想在我的網站的特定部分的H3標題是紅色而不是黃色,可以使用下面的CSS:
.section h3 {color:red !important; }
3、居中
居中分很多情況,一般會分成文本居中和DIV的內容居中。
文本居中
文本居中使用text-align:center; 。如果想讓文本在左右兩側,可以使用左側或右側。
DIV內容
DIV內容居中跟文本居中不一樣。CSS可以這樣定義:
#div1 { display: block; margin: auto; width: anything under 100% }
把寬度設置為「100%以下」的原因是因為如果它是100%寬度,那麼如果是全寬度,並且不需要居中。最好有一個固定的寬度,如60%或550像素等。
4、垂直對齊(對於一行文本)
要使菜單的高度和文本的行高一致,可以這么設置:
.nav li{line-height:50px; height:50px;}
5、懸停效果
這適用於按鈕,文本鏈接,網站的部分,圖標等等。如果你想做一個懸停效果,可以試試:
.entry h2{font-size:36px; color:#000; font-weight:800;} .entry h2:hover{color:#ffeb3b;}
這個功能可以讓你的h2標簽的顏色從黑色變成黃色。
6、懸停效果過渡
對於懸停效果,如使用菜單或網站上的圖像,我們肯定不希望顏色快速貼近結果,所以我們可以通過使用時間變化來達到過渡的效果。
.entry h2:hover{color:#ffeb3b; transition: all 0.5s ease;}
這就使得樣式上的改變,可以是從黑色變黃色的過渡時間是0.5秒,而不是立即變成黃色。這使得懸停效果更加和諧而不會顯得太突兀。
7、a標簽的狀態
我們在遇到a標簽的時候,一定要給a標簽做樣式定義,否則特別容易造成用戶在使用上的困惑。通過樣式可以讓用戶知道這個鏈接是否被點擊過,更利於用戶體驗。
a:link {color: blue; } a:visited {color: red; }
8、輕松調整圖像大小以適應
說到這個樣式,我之前不知道可以通過以下方式達到圖片的自適應效果。作為一個新手,我相信這個效果肯定有很多人都想做,當然,我提供的方法也只是其中的一種:
img {max-width:100%;height:auto;}
這個樣式意味著最大的圖像可能是100%,並根據圖像寬度自動計算高度。在某些情況下,您可能還必須指定寬度為100%。
9、父級元素和子元素
如果ni不希望選擇任意的後代元素,而是希望縮小范圍,只選擇某個元素的子元素,請使用子元素選擇器:
h1 > strong {color:red;}
特殊情況下你可能會想定義第N個子元素的樣式,這樣就可以用到下面這個樣式:li:nth-child(n)
具體的使用方法可以去w3school上看。
10、將CSS應用於多個類或選擇器
如果你想要在所有圖片,博客部分和側邊欄上添加相同的邊框。你不必寫出相同的CSS樣式重復3次。只需列出這些項目,用逗號分隔:
.blog,img,.sidebar {border: 1px solid #000;}
『貳』 css怎麼調整div的位置
可以使用css中的position來對div進行定位來改變div的位置,position屬性值的含義:
static:元素框正常生成。塊級元素生成一個矩形框,作為文檔流的一部分,行內元素則會創建一個或多個行框,置於其父元素中。
relative:元素框偏移某個距離。元素仍保持其未定位前的形狀,它原本所佔的空間仍保留。
absolute:元素框從文檔流完全刪除,並相對於其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所佔的空間會關閉,就好像元素原來不存在一樣。元素定位後生成一個塊級框,而不論原來它在正常流中生成何種類型的框。
fixed:元素框的表現類似於將position設置為absolute,不過其包含塊是視窗本身。
提示:相對定位實際上被看作普通流定位模型的一部分,因為元素的位置相對於它在普通流中的位置。
『叄』 CSS如何怎麼設置div邊框顏色寬度和高度
1.首先,您需要創建一個div,對div進行添加一個class。我們利用CSS通過class來設置div的邊框。
『肆』 div+css如何左對齊
1、div左對齊條件與方法只需要對要靠左對齊(局左)的div樣式加float:left即可,這里新建一個html文件,創建一個div容器並給它一個class屬性,容器裡面是兩個div,一個靠左對齊,一個靠右,以示區別:
『伍』 div css布局技巧
DIV CSS網站布局的八個小技巧:
1.若有疑問立即檢測。
在出錯時若能對原始代碼做簡單檢測可以省去很多頭痛問題。W3C對於XHTML與CSS都有檢測工具可用。請注重,在文件開頭的錯誤,可能因為不當的結構等因素造成更多錯誤;我們建議先修正一些最明顯的錯誤之後重新檢測,這樣也許會讓錯誤數量爆減。
2.使用浮動功能時記得適當清除指令。
浮動是個危險的功能,未必會產生所期望的結果。假如碰到浮動元素延伸到外圍容器的邊框或者其他不正常情況,先確定的做法是正確的。
3.邊界重合時利用padding或border來避免。
可能會為了一點不應該出現的空間而焦頭爛額,或者需要一點點空間時,怎樣都擠不出來。假如有用到margin,那麼很輕易產生邊界的重合。
4.DIV CSS網站布局時嘗試避免同時對元素指定padding/border以及高度或寬度。
Windows版IE經常導致width與height的計算問題。有些方法可以解決此問題,但假如母元素需要指定高度與寬度時,最好能夠在母元素之內的子元素套用margin,或者當子元素需要指定高度與寬度時,在母元素套用padding以達效果。
5.DIV CSS網站布局時不要依靠min-width/min-height。
Windows版IE並不支援兩種語法。但是在某種程度下,windows版IE可以達到相當於min-width/min-height的效果,所以只要對IE做點過濾功能,即可達到想要的結果。
6.若有疑問,先減少百分比。
有時候某些錯誤會使50%50%成為100.1%,使網頁出現問題。這時請嘗試將這些值改為49%,甚至49.9%。
7.記住「TRBL」寫法。
DIV CSS網站布局中border,margin與padding的簡寫語法有特定順序,從上方開始順時針方向轉動:top,right,bottom,left.所以margin:01px3px5px;的結果是上方無邊界,右邊1像素,以此類推。記住「TRBL」,就不會弄錯次序了。
8.只要不是零的值,都要指定單位。
CSS需要對每個font,margin等各種值指定單位。
『陸』 css樣式中如何調整div順序
設置z-index的值,Z值小的在Z值相對的大的下面。可以對不同層設置不同的背景顏色,然後部分重疊,通過設置Z值可以調整某一個層的順序。
『柒』 CSS+DIV網頁製作的一般思路和過程是什麼樣的呢
一切以設計稿為主,我們前端開發的目標是為了把jpg或者png的設計稿圖片還原成為html靜態網頁,動態的部分交給程序員處理。之所以使用DIV的布局只是為了把頁面的結構與樣式(CSS)進行分離。你使用table布局可以達到同樣效果,但是後期維護就會相對困難了。
過程就是根據客戶需求在PS或者FW繪制設計稿,客戶通過之後,開始切圖,最終變成html的網頁就ok了。
最終要求的結果就是html與設計稿的圖片保持一致。
『捌』 網頁設計,DIV+CSS的前端設計中如何做到這樣能隨內容增減而自動控制氣泡邊框大小的
這個就是切圖的問題了。氣泡切成三部分,上 中 下 重點:中間的就切一像素的長條,寫css時候 寫成自動高度 平鋪就可以了。
『玖』 CSS如何怎麼設置div邊框顏色寬度和高度
CSS設置div邊框顏色寬度和高度步驟如下:
1、新建一個html文件,創建一個類名為wrap的div。
(9)divcss前端設計怎麼調整擴展閱讀:
css border屬性:
border 簡寫屬性在一個聲明設置所有的邊框屬性。
可以按順序設置如下屬性:
border-width,border-style,border-color
如果不設置其中的某個值,也不會出問題,比如 border:solid #ff0000; 也是允許的。
『拾』 如何用css設置div與div之間的間距呢
需要准備的材料分別有:電腦、瀏覽器、html編輯器。
1、首先,打開html編輯器,新建html文件,例如:index.html。