怎么用div布局加css樣式做網(wǎng)頁(yè)

這是很大的問題，建議購(gòu)買DIV+CSS相關(guān)的書籍仔細(xì)學(xué)習(xí)，這里只能給出一個(gè)例子，僅供參考，希望能幫助到你：

創(chuàng)新互聯(lián)，專注為中小企業(yè)提供官網(wǎng)建設(shè)、營(yíng)銷型網(wǎng)站制作、響應(yīng)式網(wǎng)站設(shè)計(jì)、展示型網(wǎng)站制作、網(wǎng)站設(shè)計(jì)等服務(wù)，幫助中小企業(yè)通過網(wǎng)站體現(xiàn)價(jià)值、有效益。幫助企業(yè)快速建站、解決網(wǎng)站建設(shè)與網(wǎng)站營(yíng)銷推廣問題。

在桌面建立一個(gè)index.htm的文件和main.css的文件，當(dāng)然你也可以不用main.css的文件，但是為了方便操作，還是建一個(gè)吧。只要把記事本另存為就可以了。

做好這兩個(gè)文件后我們把網(wǎng)頁(yè)的基礎(chǔ)代碼寫上去，并使index文件受到main.css的控制，我們右鍵選擇用記事本打開index文件輸入代碼，并在head里寫上link href="main.css" type="text/css" rel="stylesheet"使它受到main.css控制

html

head

title/title

/head

body

/body

/html

下面我們?nèi)ain.css寫一些屬性看看是不是能控制index文件。我希望整個(gè)頁(yè)面是粉色的，看上去溫馨，我在main.css里寫上*{background:#FF66FF}看看。我們打開index文件看看是不是在瀏覽器上是不是粉色的。在瀏覽器上是粉色的，表示已經(jīng)受到css樣式表的控制了。

下面我們進(jìn)行布局一般網(wǎng)頁(yè)都是3層一級(jí)，所以我們需要div布局了在body里面寫一般我會(huì)先分為3層

html

head

title/title

link href="main.css" type="text/css" rel="stylesheet"

/head

body

div id="top"

div id="top1"/div

div id="top2"/div

div id="top3"/div

/div

/body

/html

布局好后我們需要去定義屬性了，這里我只是簡(jiǎn)單的定義了一下

*{background:#FF33FF}

#top{background:#FFFF99; height:1000px; width:800px; margin-left:auto; margin-right:auto}

#top1{background:#66FFFF; height:50px; width:800px;}

#top2{background:#FF00CC; height:400px; width:800px}

#top3{background:#FF9933; height:550px; width:800px}

定義好了我們打開預(yù)覽一下看看，圖片是不是居中和分成3塊了。當(dāng)然，顏色只是為了方便看清楚，可以不寫。

其實(shí)做網(wǎng)頁(yè)就是不斷的畫框，只要知道布局和定義屬性就可以了，下面我們就整個(gè)做一下，因?yàn)槲业挠幸恍┦且粯拥?，可以用class調(diào)用，class=baidu這個(gè)只是隨便寫的，你愛等于什么就等于什么

html

head

title/title

link href="main.css" type="text/css" rel="stylesheet"

/head

body

div id="top"

div id="top1"這里都是我截圖的照片/div

div id="top2"

div class="baidu"/div

div class="baidu"/div

/div

div id="top3"

div class="baidujingyan"/div

div class="baidujingyan"/div

/div

/div

/body

/html

下面我們?cè)偃ザx他的屬性，當(dāng)然我只是簡(jiǎn)單的定義一下

*{background:#FF33FF}

#top{background:#FFFF99; height:1000px; width:800px; margin-left:auto; margin-right:auto}

#top1{background:#66FFFF; height:50px; width:800px; text-align:center; line-height:50px; font-size:30px}

#top2{background:#FF00CC; height:400px; width:800px}

#top3{background:#FF9933; height:550px; width:800px}

.baidu{background:#FF6666; height:380px; width:380px; float:left; margin:10px}

.baidujingyan{background:#FFCC00; height:530px; width:380px; float:left; margin:10px;}

因?yàn)槲疫@個(gè)是我截圖相冊(cè)的網(wǎng)頁(yè)，下面我們就放照片吧，這里我偷個(gè)懶，把照片都放在桌面了，所以不用連接照片地址了。

html

head

title/title

link href="main.css" type="text/css" rel="stylesheet"

/head

body

div id="top"

div id="top1"這里都是我老婆的照片/div

div id="top2"

div class="baidu"img src="QQ圖片20141212090452.jpg"/div

div class="baidu"img src="QQ圖片20141212090346.jpg"/div

/div

div id="top3"

div class="baidujingyan"img src="QQ圖片20141212090224.jpg"/div

div class="baidujingyan"img src="QQ圖片20141212090255.jpg"/div

/div

/div

/body

/html

如果圖片不在同一層目錄，就需要連接到圖片地址

這樣一個(gè)網(wǎng)頁(yè)就做好了，如果需要制作精美的網(wǎng)頁(yè)，就需要不斷的進(jìn)行div布局和css樣式的規(guī)定了。

下面我來(lái)說說網(wǎng)頁(yè)制作的定義，網(wǎng)頁(yè)的制作只要會(huì)使用div不停的布局，不停的定義他的屬性，基本靜態(tài)的網(wǎng)頁(yè)就是這樣做出來(lái)的

如何用DIV+CSS進(jìn)行網(wǎng)頁(yè)樣式布局

一、選擇“div標(biāo)簽”命令

打開dreamweaver，新建網(wǎng)頁(yè)并保存為“die.html”，選擇【插入】【布局對(duì)象】【div標(biāo)簽】命令，打開“div標(biāo)簽”對(duì)話框。

二、輸入div標(biāo)簽名稱

1、在“ID”列表框中選擇“top”

2、單擊“新建css規(guī)則”按鈕準(zhǔn)備進(jìn)行css規(guī)則定義

三、新建css規(guī)則

在打開的對(duì)話框中保持默認(rèn)設(shè)置，單擊“確定”按鈕進(jìn)行css規(guī)則新建。

四、設(shè)置屬性

1、在“分類”列表框中選擇“方框”選項(xiàng)。

2、在窗口右側(cè)進(jìn)行css規(guī)則定義，其中margin值的設(shè)置非常重要，“l(fā)eft”及“right”為auto，則可讓div頁(yè)面水平居中。

3、單擊“確定”按鈕。

五、創(chuàng)建div按鈕

返回“插入div標(biāo)簽”，單對(duì)話框，單擊“確定”按鈕，完成div標(biāo)簽的插入

六、查看創(chuàng)建的div

將鼠標(biāo)光標(biāo)定位在div，即可想編輯普通網(wǎng)頁(yè)一樣完成文本的編輯及圖像等內(nèi)容的添加。

在css中深粉色的代碼是什么

html

head

meta?charset="utf-8"

/head

body

P?style="color:#ea68a2;"在css中深粉色的代碼是什么/P

/body

/html

以上代碼效果：

#后面加上PS取深紅色的顏色值

css怎么讓粉色只出現(xiàn)在段落1的背景色上，而不是整行的背景色上

只能在里面加一個(gè)寬度不設(shè)置的div然后設(shè)置背景色，

在無(wú)寬的div中寫字

CSS修改字體顏色問題

文字有給鏈接（a標(biāo)簽）嗎？

沒有的話就這樣試試

.one{

color:#000;}

.one

.two

span{

color:red}

div

class="one"

p

class="two"

span文字顏色/span

/p

/div

CSS里有pink這個(gè)顏色屬性嗎？

pink就是粉紅色咯，比如下面的div底色就是pink：

div?style="width:100px;?height:100px;?background-color:pink"/div

用顏色值來(lái)表示就是：

div?style="width:100px;?height:100px;?background-color:#FFC0CB"/div

用RGB值來(lái)表示就是：

div?style="width:100px;?height:100px;?background-color:rgb(255,192,203)"/div