cssdiv初級教程(參考版)
2024-08-25 15:27本頁面
【正文】 源文件可以再下一節(jié)中再次下載。通常我們會看到一些網(wǎng)頁在載入時，由于圖片太大，導(dǎo)致布局被撐開，直到頁面下載完成才恢復(fù)正常，通過添加overflow:hidden 就可以解決這個問題。 height:200px 保存預(yù)覽效果，可以發(fā)現(xiàn)這兩個層完美的浮動，在達到了我們布局的要 求，而兩個層的實際寬度應(yīng)該160+2(border)+570+2=734px，已經(jīng)超出了父層的寬度，由于 clear 的原因，這兩個層才不會出現(xiàn)錯位的情況，這樣可以使我們布局的頁面不會因為內(nèi)容太長（例如圖片）而導(dǎo)致錯位。 /*浮動居右 */ clear:right。 textalign:left。 /*不允許左側(cè)存在浮動 */ overflow:hidden。 /*文字左對齊 */ float:left。 /*居中 */ } sidebar { width:160px。 程序代碼 div id=pagebody!頁面主體 div id=sidebar!側(cè)邊欄 /div div id=mainbody!主體內(nèi)容 /div /div 以上是頁面主體部分，我們在 中添加以下樣式： 程序代碼 pagebody { width:730px。 另一 個要說明的就是 clear:both，表示清除左、右所有的浮動，在接下來的布局中我們還會用這個屬性： clear:left/right。 /*設(shè)定高度 */ borderbottom:5px solid EFEFEF。 /*設(shè)定層的寬度 */ margin:auto。 程序代碼 div id=banner/div 以上代碼便可以實現(xiàn)設(shè)計草圖中的 banner，在 中加入以下樣式： 程序代碼 banner { background:url() 0 30px norepeat。color:666} menu ul li a:hover{} 這個也不多說了，沒什么好說的了，最后的效果如下： 四、頁面制作 (1)用好 border 和 clear 這一節(jié)里面，主要就是想告訴大家如何使用好 border 和 clear 這兩個 屬性。lineheight:28px 大家可以去參閱一下手冊，我就不多講了。display:block。 不過，菜單選項的文字卻在頂部，我們再修改成以下代碼： 程序代碼 menu ul li {float:left。height:28px。margin:0 10px} 這時，位置已經(jīng)確定了，可是構(gòu)思圖中，菜單選項之間還有一條豎線，怎么辦呢？ 別忘了，我們早就已經(jīng)留好了一個 空的 li class=menuDiv/li，要想加入豎線就使用它了。margin:0px。margin:0 10px} margin:0 10px 的作用就是讓列表內(nèi) 容之間產(chǎn)生一個 20 像素的距離 (左： 10px，右： 10px)，預(yù)覽的效果如下： 現(xiàn)在，雛形已經(jīng)出來了，我們再來固定菜單的位置，把代碼改成如下： 程序代碼 menu {padding:20px 20px 0 0} /*利用 padding:20px 20px 0 0 來固定菜單位置 */ menu ul {float:right。margin:0px。} 這里的 float:left 的左右是讓內(nèi)容都在同一行顯示，因此使用了浮動屬性 (float)。 margin:0px，這一句是刪除 UL的縮進，這樣做可以使所有的列表內(nèi)容都不縮進。margin:0px。} menu ul li {float:left。 按照上面的介紹，我們先在 中寫入以下代碼： 程序代碼 menu ul {liststyle:none。 另外， HTML 中的一切元素都是可以定義的，例如 table、 tr、 td、 th、 form、 img、 input...等等，如果你要在 CSS 中設(shè)置它們，則直接寫入元素的名稱加上一對大括號 {}就可以了。 還有一點需要大家一定要分清楚的，當在 HTML 中定義為 id=divID時，在 CSS 對應(yīng)的設(shè)置語法則是 divID{} ，如果在 HTML 中定義為 class=divID時，則在 CSS 中對應(yīng)的設(shè)置語法是 .divID。 這一節(jié)我將告訴大家如何用列表 li來制作菜單。
醫(yī)療健康相關(guān)推薦
鄂ICP備17016276號-1