欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Div+CSS 布局入門教程之二 構(gòu)建網(wǎng)站

  發(fā)布時間：2009-12-21 02:26:21   作者：佚名   我要評論
規(guī)劃網(wǎng)站，本教程將以圖示為例構(gòu)建網(wǎng)站，需要的朋友可以參考下，其實多看一些你喜歡的網(wǎng)站布局，能學(xué)到很多東西。
首先需要規(guī)劃網(wǎng)站，本教程將以下圖為例構(gòu)建網(wǎng)站。

其基本布局見下圖：


主要由五個部分構(gòu)成：
1.Main Navigation 導(dǎo)航條，具有按鈕特效。 Width: 760px Height: 50px
2.Header 網(wǎng)站頭部圖標(biāo)，包含網(wǎng)站的logo和站名。 Width: 760px Height: 150px
3.Content 網(wǎng)站的主要內(nèi)容。 Width: 480px Height: Changes depending on content
4.Sidebar 邊框，一些附加信息。 Width: 280px Height: Changes depending on
5.Footer 網(wǎng)站底欄，包含版權(quán)信息等。 Width: 760px Height: 66px



第二步：創(chuàng)建html模板及文件目錄等

1.創(chuàng)建html模板。代碼如下：

<!--Example Source Code-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>Div+Css</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)站的大框：
建立一個寬760px的盒子，它將包含網(wǎng)站的所有元素。
在html文件的和之間寫入

<!--Example Source Code-->
<div id="page-container">
Hello world.
</div>

創(chuàng)建css文件，命名為master.css,保存在/css/文件夾下。寫入：

/*Example Source Code*/
#page-container {
width: 760px;
background: red;
}

控制html的id為page-container的盒子的寬為760px，背景為紅色。

現(xiàn)在為了讓盒子居中，寫入margin: auto;，使css文件為：

/*Example Source Code*/
#page-container {
width: 760px;
margin: auto;
background: red;
}

現(xiàn)在你可以看到盒子和瀏覽器的頂端有8px寬的空隙。這是由于瀏覽器的默認(rèn)的填充和邊界造成的。消除這個空隙，就需要在css文件中寫入：

/*Example Source Code*/
* {
margin: 0;
padding: 0;
}




第三步：將網(wǎng)站分為五個div，網(wǎng)頁基本布局的基礎(chǔ)：

1.將“第一步”提到的五個部分都放入盒子中，在html文件中寫入：

<!--Example Source Code-->
<div id="page-container">
<div id="main-nav">Main Nav</div> 
<div id="header">Header</div> 
<div id="sidebar-a">Sidebar A</div> 
<div id="content">Content</div> 
<div id="footer">Footer</div>
</div>

 

2.為了將五個部分區(qū)分開來，我們將這五個部分用不同的背景顏色標(biāo)示出來，在css文件寫入：

/*Example Source Code*/
#main-nav {
background: red;
height: 50px;
}
#header {
background: blue;
height: 150px;
}
#sidebar-a {
background: darkgreen;
}
#content {
background: green;
}
#footer {
background: orange;
height: 66px;
}

 

表現(xiàn)如下：





第四步：網(wǎng)頁布局與div浮動等

1.浮動：首先讓邊框浮動到主要內(nèi)容的右邊。用css控制浮動。

 

/*Example Source Code*/
#sidebar-a {
float: right;
width: 280px;
background: darkgreen;
}

 

表現(xiàn)如下：


2.往主要內(nèi)容的盒子中寫入一些文字。在html文件中寫入：

 

<!--Example Source Code-->
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. 
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus 
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. 
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, 
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
</div>

 



但是你可以看到主要內(nèi)容的盒子占據(jù)了整個page-container的寬度，我們需要將#content的右邊界設(shè)為280px。以使其不和邊框發(fā)生沖突。css代碼如下：

 

/*Example Source Code*/
#content {
margin-right: 280px;
background: green;
}

 

同時往邊框里寫入一些文字。在html文件中寫入：

<!--Example Source Code-->
<div id="sidebar-a">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. 
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. 
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus 
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. 
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, 
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
</div>

 

表現(xiàn)如下：


這也不是我們想要的，網(wǎng)站的底框跑到邊框的下邊去了。這是由于我們將邊框向右浮動，由于是浮動，所以可以理解為它位于整個盒子之上的另一層。因此，底框和內(nèi)容盒子對齊了。
因此我們往css中寫入：

 

/*Example Source Code*/
#footer {
clear: both;
background: orange;
height: 66px;
}

 

表現(xiàn)如下：

相關(guān)文章

  • css九宮格布局的五種方法

    本文主要介紹了css九宮格布局的五種方法，內(nèi)容包括grid布局、flex布局、table布局、float浮動定位、inline-block+letter-spacing屬性這五種方法的實現(xiàn)，感興趣的可以了解下
    2023-09-18

  • CSS實現(xiàn)元素水平垂直居中的幾種方法

    在Web開發(fā)中，經(jīng)常會遇到需要將元素水平和垂直居中的情況,今天，將為大家分享幾種CSS方法，讓你的元素輕松居中，讓頁面更美觀吸引人，感興趣的小伙伴可以自己動手試一試
    2023-09-08

  • css實現(xiàn)元素居中的6種方法

    相信大家在面試的時候也會經(jīng)常碰到css實現(xiàn)元素居中的方法，下面我介紹6種方法給大家，歡迎大家評論區(qū)交流
    2023-09-07

  • flex布局中使用flex-wrap實現(xiàn)換行的項目實踐

    最近需要做個換行的布局，本文主要介紹了flex布局中使用flex-wrap實現(xiàn)換行的項目實踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需
    2022-06-16

  • CSS布局之浮動(float)和定位(position)屬性的區(qū)別

    今天看到有朋友留言問浮動和定位有什么區(qū)別，如何使用？今天找了篇文章，講的比較通俗易懂，供大家參考
    2021-09-23

  • css實現(xiàn)元素居中的N種方法

    這篇文章主要介紹了css實現(xiàn)元素居中的N種方法,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-02-02

  • div水平布局兩邊對齊的三種實現(xiàn)方法

    這篇文章主要介紹了div水平布局兩邊對齊的三種實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起
    2021-01-21

  • waterfall瀑布流布局+動態(tài)渲染的實現(xiàn)

    這篇文章主要介紹了waterfall瀑布流布局+動態(tài)渲染的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起
    2021-01-19

  • 頁面中有間隔的方格布局如何完美實現(xiàn)方法

    這篇文章主要介紹了頁面中有間隔的方格布局如何完美實現(xiàn)方法。文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來
    2020-11-27

  • css實現(xiàn)六種自適應(yīng)兩欄布局方式

    這篇文章主要介紹了css實現(xiàn)六種自適應(yīng)兩欄布局方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)
    2020-10-28

最新評論