用css網(wǎng)站布局之十步實(shí)錄!(二)_DIV+CSS實(shí)例
教程Tag:暫無(wú)Tag,歡迎添加,賺取U幣!
第二步:創(chuàng)建html模板及文件目錄等
1.創(chuàng)建html模板。
代碼如下:
將其保存為index.html,并創(chuàng)建文件夾css,images,網(wǎng)站結(jié)構(gòu)如下:
2.創(chuàng)建網(wǎng)站的大框:
建立一個(gè)寬760px的盒子,它將包含網(wǎng)站的所有元素。
在html文件的<body>和</body>之間寫(xiě)入
創(chuàng)建css文件,命名為master.css,保存在/css/文件夾下。寫(xiě)入:
控制html的id為page-container的盒子的寬為760px,背景為紅色。
現(xiàn)在為了讓盒子居中,寫(xiě)入margin: auto;,使css文件為:
現(xiàn)在你可以看到盒子和瀏覽器的頂端有8px寬的空隙。這是由于瀏覽器的默認(rèn)的填充和邊界造成的。消除這個(gè)空隙,就需要在css文件中寫(xiě)入:
1.創(chuàng)建html模板。
代碼如下:
示例代碼 [m.dounai2.com]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>CompanyName - PageName</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Description" />
<meta name="keywords" content="Keywords" />
<meta name="author" content="Enlighten Designs" />
<style type="text/css" media="all">@import "css/master.css";</style>
</head>
<body>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>CompanyName - PageName</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Description" />
<meta name="keywords" content="Keywords" />
<meta name="author" content="Enlighten Designs" />
<style type="text/css" media="all">@import "css/master.css";</style>
</head>
<body>
</body>
</html>
將其保存為index.html,并創(chuàng)建文件夾css,images,網(wǎng)站結(jié)構(gòu)如下:
2.創(chuàng)建網(wǎng)站的大框:
建立一個(gè)寬760px的盒子,它將包含網(wǎng)站的所有元素。
在html文件的<body>和</body>之間寫(xiě)入
示例代碼 [m.dounai2.com]
<div id="page-container">
Hello world.
</div>
Hello world.
</div>
創(chuàng)建css文件,命名為master.css,保存在/css/文件夾下。寫(xiě)入:
示例代碼 [m.dounai2.com]
#page-container {
width: 760px;
background: red;
}
width: 760px;
background: red;
}
控制html的id為page-container的盒子的寬為760px,背景為紅色。
現(xiàn)在為了讓盒子居中,寫(xiě)入margin: auto;,使css文件為:
示例代碼 [m.dounai2.com]
#page-container {
width: 760px;
margin: auto;
background: red;
}
width: 760px;
margin: auto;
background: red;
}
現(xiàn)在你可以看到盒子和瀏覽器的頂端有8px寬的空隙。這是由于瀏覽器的默認(rèn)的填充和邊界造成的。消除這個(gè)空隙,就需要在css文件中寫(xiě)入:
示例代碼 [m.dounai2.com]
html, body {
margin: 0;
padding: 0;
}
margin: 0;
padding: 0;
}
相關(guān)DIV+CSS實(shí)例:
- 固定div容器的寬高,圖片居中(圖片不限制大小)
- 用css制作有滾動(dòng)條的居中彈出框
- 鼠標(biāo)指住(hover)變色的按鈕演示demo
- 10個(gè)很酷的涂鴉風(fēng)格國(guó)外網(wǎng)店設(shè)計(jì)展示
- jquery模擬瀏覽器滾動(dòng)條效果
- 仿谷歌google的搜索框下拉提示列表效果
- JS顯示網(wǎng)頁(yè)最后更新時(shí)間
- CSS技巧:text-indent隱藏文字(以圖換字)
- CSS實(shí)例:三列自適應(yīng)等高且中列寬度自適應(yīng)
- DivCSS布局實(shí)例:很實(shí)用的圖文混排CSS列表-富有語(yǔ)義
- DivCSS實(shí)例:CSS菜單Flash效果用圖片模擬實(shí)現(xiàn)
- DivCSS布局實(shí)例用dldtdd來(lái)制作列表
DIV+CSS實(shí)例Rss訂閱Div+Css教程搜索
DIV+CSS實(shí)例推薦
- CSS布局中常用的CSS圖像置換、圖片替代的方法舉例
- 一個(gè)無(wú)序列表UL鼠標(biāo)激活顯示背景色的實(shí)例
- DIVCSS布局實(shí)例:各種2欄3欄布局實(shí)例(附下載)
- DIV CSS布局入門(mén)示例(五)border和clear
- 用css制作有滾動(dòng)條的居中彈出框
- DIVCSS布局實(shí)例:DIV CSS新聞列表制作
- 用背景圖片實(shí)現(xiàn)CSS柱狀圖表一例
- DivCSS布局實(shí)例:很實(shí)用的圖文混排CSS列表-富有語(yǔ)義
- 使用fieldset、label標(biāo)簽制作form表單
- CSS滑動(dòng)式條狀圖表如何實(shí)現(xiàn)?
猜你也喜歡看這些
- CSS+JS控制圖片展示效果
- WEB2.0標(biāo)準(zhǔn)教程:第一天選擇什么樣的DOCTYPE
- CSS文檔流,塊級(jí)元素和內(nèi)聯(lián)元素
- 鼠標(biāo)經(jīng)過(guò)時(shí)可以切換CSS嗎?如何實(shí)現(xiàn)?
- CSS實(shí)戰(zhàn)經(jīng)驗(yàn):保持CSS文件整潔與樣式統(tǒng)一
- 不用float實(shí)現(xiàn)div模塊居中布局
- border與list縮寫(xiě)的時(shí)候應(yīng)該注意什么?
- 如何避免容器被長(zhǎng)單詞撐開(kāi)?
- li列表項(xiàng)標(biāo)簽中插入圖片浮動(dòng)出現(xiàn)的一種奇怪現(xiàn)象
- 超漂亮的選框checkbox效果用圖片模擬實(shí)現(xiàn)
- 相關(guān)鏈接:
- 教程說(shuō)明:
DIV+CSS實(shí)例-用css網(wǎng)站布局之十步實(shí)錄!(二)。