導航:首頁 > 萬維百科 > 網頁設計div的用法

網頁設計div的用法

發布時間:2020-12-09 20:36:46

1、寫出使用div+css布局製作網頁的步驟。

怎麼說,按照我平時的方法簡單說一下吧
首先創建好整體框架
如:
<body>
<div id="wrapper">
<div id="header"></div><!--頭部-->
<div id="container"></div><!--內容部分-->
<div id="footer"></div><!--頁腳-->
</div>
</body>

接著在這個框架下開始寫入信息,如logo以及導航信息,以及內容,以及頁腳
編寫好後,再編寫css樣式,
創建一個style.css的樣式,在這個樣式表裡面寫入網頁標簽的顏色,大小,背景。。。。。。。
最後測試網站的鏈接是否正常
完成,
希望能幫助你

2、網頁設計中採用div+css布局,這里的DIV是什麼意思?

DIV是層疊樣式表中的定位技術,全稱DIVision,即為劃分。有時可以稱其為圖層。
DIV在編程中又叫做整除,即只得商的整數。 DIV元素是用來為HTML(標准通用標記語言下的一個應用)文檔內大塊(block-level)的內容提供結構和背景的元素。

3、請問標簽<div>在網頁製作中,是起到什麼作用,什麼時候要用到標簽??

<div>的作用是產生一個容器,使得可以對這個容器裡面的所有內容進行操作。

容器也可以理解為網頁上的一塊。

<div>產生的容器會單獨佔一段,需要把不分段時使用<span>建立容器。

4、網頁設計里讓一個div標簽里的文字豎直居中用哪個標簽?

如果是單行文字想垂直居中,只要保證div高和行高保持一致,就可以了。用下面的代碼即可實現:

CSS代碼:

#div-a{
height:60px;
line-height:60px;
}

HTML代碼:

<div id="div-a">
......
</div>

如果是多行文字,上面的垂直居中的方法就不行了,得用變通的方法實現;這里建議使用table方法,在table外面再套上相應的div,

代碼如下:

<table>
<tr><td style="vertical-align:middle;height:300px;background-color:red">
</td></tr>
</table>

多行文字居中還有另外一種方法:

多行內容居中,且容器高度可變,也很簡單,給出一致的 padding-bottom 和 padding-top 就行:

.middle-demo-2
{
padding-top: 24px;
padding-bottom: 24px;
}

5、怎麼可以最簡單的使用div+css製作網頁框架

1、布抄局先把大框架確定,再逐步把襲內部的細節構建出來,從層級關系來看就是由外往內布局;
2、如果你對divcss不是很熟悉,那麼你可以先以圖片作為背景圖片代替
3、如果對布局定位不是很熟練,那麼可以暫時以絕對位置來布局
4、自己不熟悉的情況下,在設計平面頁面的時候就要先考慮到自己是否有能力寫出這個頁面的布局出來,或者說自己寫出來的不出問題;比如圓角、陰影、半透明效果、模塊錯位疊加等等;

其實頁面布局是否簡單只是相對而言的,精通的人和新手的看法肯定不同,從長遠來看,新手還是不要取巧,寫divcss代碼的時候不要怕出錯,不要怕難,碰到了問題就去尋找解決的方法,針對問題然後去解決問題是最好的解決方式,當你不再碰到問題或者很少碰到問題的時候,就說明你已經精通或者離精通不遠了

還有一點要說一下,學習得有一個喜歡的態度,不要當做負擔或者任務來學習,當你對一個東西感興趣的時候你會學習的很快;就好比讀書的時候某些學生某一科的成績一直很好,絕大部分人其實都是感興趣才會學的那麼好

6、網頁設計頁面布局使用div+css是什麼意思,還有怎麼插入圖片,謝謝各位大神

div模型,搭上css樣式
用<img src="圖片地址" alt="顯示不出來的時候的文字" />插入圖片

7、網頁設計的一個問題。使用div+css不能成功布局.div布局設計如圖所示.

給你個大概的思路,因為沒有代碼也不好分析你那裡出問題了
你A沒問題,我們就不管他了
做B的時候你先用一個總的DIV,然後把你的B1 B2 B3都寫在B裡面,記得給浮動,這樣就OK了
下面是代碼
.B{width:980px; height:500px; float:left;}
.B1{width:500px; height:500px; float:left;}

.B2{width:480px; height:250px; float:left;}

.B3{width:480px; height:250px; float:left;}

<div class="B">
<div class="B1"></div>
<div class="B2"></div>
<div class="B3"></div>
</div>

8、考核內容: 首先使用div標記製作這樣的網頁: 然後,按照CSS的設計規則,完成如下要求: (1

<style>
body{
margin:0;
padding:0;
width:800px;
background:#fff;
}
a{
color:red;
}
a:hover{
color:blue;
text-decoration:none;
}
.title{
background:#ccf;
color:white;
}
.title1{
height:70px;
color:#388821;
}
.title2{
background:#99f;
color:white;
}
.left:hover,.right:hover{
width:100px;
background-color:#fafaf0;
text-align:center;
border:1px solid black;
background:white;
}
</style>
<div class="title">
我的網頁
</div>
<div class="title2">
個人資料
</div>
<div class="left">
<a href="#">鏈接a</a>
</div>
<div class="right">
<a href="#">鏈接b</a>
</div>
不知道是不是專你要的效屬果

9、用div怎樣製作網頁特效

啟動dreamweaver cs5,執行文件-新建命令,在彈出的新建文檔對話框選擇html文件,點擊創建按鈕。
網頁中如何使用div展示圖片效果
在標簽<title>無標題文檔</title>中修改名稱為<title>div布局圖片效果</title>。
網頁中如何使用div展示圖片效果
在<title>標簽下方輸入<style>相關的代碼,定義網頁的整體樣式,樣式直接影響著網頁的美觀程度。
網頁中如何使用div展示圖片效果
接著在<body>中輸入div標簽三個,並分別設置他們所屬於的類,最外邊的div設置類為db,中間兩個分別為zpxc1和zpxc,在下方就會看到基本的框架效果。
網頁中如何使用div展示圖片效果
外部的框架設計好之後,接著設計使用div布局圖片,書寫相應的代碼,設置div的尺寸大小和相關屬性,同時設計圖片的相關屬性。
代碼為:
div.pt img{margin:0px; height:220px; width:120px; margin-top:10px; border: 1px solid #333;}
div.pt{float:left; height:240px; width:140px; margin:6px; padding:0px; margin-top:10px; filter:light; background:#333; margin-left:0.8em;}
.pic{ float:right;}
在類為zpxc1的div中建立新的四個div,並設置img的 src屬性值,對圖片進行正確的鏈接。
按f12進行在瀏覽器中進行預覽效果,出現提醒信息「是否將改動保存到」,直接點擊是,找一個合適的位置進行保存。
接著在類為zpxc的div中輸入「作品展示」四個字,再次才看效果,如果不合適可進行再次修改。
如果圖片過多,可以修改類zpxc1和db的高度,反復修改直至合適為止,重復步驟6、7採用同樣的方法建立多個圖片div。
如果對「作品展示」四個字不滿意的話,可以使用圖片進行替換,達到滿意為止,再次按f12進行在瀏覽器中進行查看效果,
執行文件-另存為命令,在彈出的對話框中輸入名稱為「div布局圖片」,找到一個合適的位置進行保存即可。

10、dreamweaver製作網頁中AP div和div如何分配使用?

AP div實際上是附加了復定位的css樣式的div。兩個在本質上是制一樣的,為了方便初學者更好地調整DIV的大小和位置,dreamweaver裡面可以用AP div的方式來進行布局。但是實際上這種布局用div也是可以非常容易地實現的。在css裡面定義一下with和height就可以控制DIV的大小了,使用position可以控制這個div是絕對定位還是相對定位,使用float可以控制div的左右位置,使用margin可以控制它的外邊距,等等。。。相對而言,AP div就不那麼靈活了。
建議你先學一學css相關的知識,對於學習製作網頁還是很有幫助的。

與網頁設計div的用法相關的知識