CSS樣式如何實現(xiàn)Logo立體盒子效果

我們簡單的將HTML寫成這樣:

我們提供的服務(wù)有：成都網(wǎng)站設(shè)計、做網(wǎng)站、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、綏棱ssl等。為數(shù)千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學管理、有技術(shù)的綏棱網(wǎng)站制作公司

div id="container"

img id="logo" src="logo.png" alt="Lee Munroe" //divCSS樣式可能會是這個樣子的:

body{background:#999;}

#container{

width:960px;

background:#fff;

margin:20px auto;

padding:10px;}下面是一個效果預(yù)覽：

設(shè)置為相對定位，當我們定位logo的時候，我們希望它的位置是相對于容器的，因此使用相對定位：

#container{

width:960px;

background:#fff;

margin:20px auto;

padding:10px;

position:relative;}將它定位到盒子的外面現(xiàn)在你需要做的就僅僅是定位logo，將其水平定位，讓它從容器中突出出來。#logo{position:absolute;

css樣式 div兩個盒子上下疊加如下圖怎么寫?。?/h2>

如果大盒子套小盒子，可以這樣：

div style="position:relative; width:400px; height:300px; background-color:yellow"

div style="position:absolute; bottom:0; left:50px; width:300px; height:150px; background-color:red"/div

/div

如果兩個盒子是獨立的，則可以這樣：

div style="width:400px; height:300px; background-color:yellow"/div

div style="position:relative; top:-150px; left:50px; width:300px; height:150px; background-color:red"2/div

其實有N多種方式實現(xiàn)，上述只是其中的一兩種

div+css如何讓一個div塊不受整體的css樣式控制

1、新建一個html文件，命名為test.html。

2、在test.html文件內(nèi)，使用css對div進行初始化，設(shè)置其內(nèi)外邊距都為0，并讓div浮動向左。

3、在test.html文件內(nèi)，創(chuàng)建一個div，并設(shè)置其class屬性為xx，用于下面定義其css樣式。

4、在test.html文件內(nèi)，使用css設(shè)置類名為xx的div樣式，設(shè)置其寬度、高度都為300px，背景顏色為紅色。

5、在test.html文件內(nèi)，在上面div的內(nèi)部，再創(chuàng)建一個div，并設(shè)置其類名為ss。

6、在test.html文件內(nèi)，使用css設(shè)置類名為ss的div樣式，設(shè)置其高寬為100px，背景顏色為白色，上邊距為100px，左邊距為100px。

css+div美化，會的進

找人教,比較困難,真正的高手都忙著....你可以找個你覺得合你口味的網(wǎng)頁,把里面的文字給改了,

網(wǎng)頁設(shè)計，用div盒子制作網(wǎng)頁，要怎么樣才能把綠色盒子放到紅色盒子下面，把綠色盒子的圖片當做背景來

沒看明白咋回事 ，綠色在紅色 下面 ，這不太簡單了 ，現(xiàn)在給你做個演示 你看看 ， ?你只要做 兩個 div ?, ?css設(shè)置好 長 和高 ? 。圖片做 背景 代碼是?background-image:url("圖片路徑地址/圖片名稱.jpg"); ?下面是 我演示圖片的 代碼 。綠色在紅色下面 。 就說到這里，不滿意，不會做 ？那你等等其他人的回答吧 ? 解決 你這個問題，發(fā)十元紅包 即可。想做就私信我， 其實我覺得你這個問題 沒哪么簡單 ，你可能 描述問題都 沒有描述對 。應(yīng)該你想問的是 ，綠色在紅色的 后面 。而不是下面 。 綠色在 紅色后面，沒有必要的嗎 。紅色做個 圖片背景 ，不也是 一樣的嗎 。何必要搞得哪么復(fù)雜嗎？ ?如果你想讓 div 有層次 那要用 ，定位的方法。如果你夠聰明 看我現(xiàn)在和你說的 你就應(yīng)該 明白了 。

html

head

titlediv測試/title

style?type="text/css"

body{

width:500px;

margin:0?auto;

}

.red{

background:red;

width:500px;

height:180px;

}

.green{

background:green;

width:500px;

height:300px;

}

/style

/head

body

div?class="red"

紅色

/div

div?class="green"

綠色

/div

/body

/html

CSS+DIV寫盒子模型圖

html

head

title/title

style type="text/css"

!--

#div {

background-color:#CCCCCC; /*這是div背景色！可以不要~這里僅便于你區(qū)別*/

margin-top: 20px; /*div離頁面面頂部的距離為20像素*/

margin-left: 50px; /*div離頁面面左端的距離為50像素*/

/*這里若設(shè)置了頂部和左部就不用設(shè)置右和下了~因為2個位置就能把div定位

margin-right: 30px;

margin-bottom: 40px; */

border:#0099FF 10px solid; /*div邊框為10像素*/

padding-top: 20px; /*內(nèi)容與div邊框頂部的距離為20像素！這里“內(nèi)容”的位置=20+10+20的像素*/

padding-left: 90px; /*內(nèi)容與div邊框左邊的距離為90像素！這里“內(nèi)容”的位置=50+10+90的像素*/

padding-right: 30px; /*同上*/

padding-bottom: 50px; /*同上*/

}

--

/style

/head

body

div id="div"此處顯示 id "div" 的內(nèi)容這些內(nèi)容！其實是顯示在div的center里！是個隱藏的框框~需要去理解/div

/body

/html