資源描述:
《十天學(xué)會divcss系列-第02天》由會員上傳分享,免費在線閱讀,更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。
1、第二天一列布局今天我們開始學(xué)習(xí)《十天學(xué)會web標準(div+css)》的一列布局,包含以下幾種形式:·一列固定寬度·一列固定寬度居中·一列自適應(yīng)寬度·一列自適應(yīng)寬度居中·一列二至多塊布局前一節(jié)我們回顧了xhtml基礎(chǔ)和css基礎(chǔ)部分,今天我們正式開始使用網(wǎng)頁制作軟件——adobe公司出品的dreamweaver來開始網(wǎng)頁設(shè)計之旅。相信之前您已經(jīng)用過這個軟件了,具體怎么使用我就不講了。為了照顧部分朋友,今天課程的css部分我們是以可視化生成方式,不過建議大家能手寫的盡量還是手寫,這樣有助于提高效率。一、一列固定寬度我們先看
2、一下一列固定寬度,首先要新建一個頁面:注意:這里的文檔類型是過渡型,目前我們采用這種寬松驗證方式。接下來在頁面中插入一個div標簽,我們可以點擊工具欄的“插入DIV標簽”按鈕,在打開的對話框中ID項給這個div命一下名,我們給它起個名叫l(wèi)ayout(名稱根據(jù)自己需要命名)。插入div后,在右側(cè)的css樣式面板中,定義id為layout的樣式,確定后在打開的css編輯對話框的方框選項中設(shè)計寬度500,高度300。為了看清楚起見,我們把這個div設(shè)置個背景色,這樣就能預(yù)覽出大小和位置了。這里選擇高級,然后在選擇器中填寫:#l
3、ayout,如果是選中div后,再點擊添加,它會自動添加上。因為是定義ID,所以前面需要加#,后面會有id和class的詳細講解我們預(yù)覽一下,看看在IE中的顯示效果,一列固定寬度就這樣做成了,簡單吧!CSS代碼及在IE中顯示如下:#layout{height:300px;width:400px;background:#99FFcc;}4、ww.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">#layout{height:300px;width:400px;background:#99FFcc;}5、id="layout">此處顯示id"layout"的內(nèi)容