導航:首頁 > 萬維百科 > 網頁設計div怎麼使用

網頁設計div怎麼使用

發布時間:2021-02-25 19:51:06

1、網頁設計里,怎樣用塊div做網頁,怎樣插入圖片,怎樣調整圖片大小

把圖片放到img中,設置圖片的寬和高屬性,對於div做網頁,div可以把網頁內容結構組織起來,還需要結合css設置每個div的屬性對頁面各部分內容進行排版,需要系統學習div+css網頁布局。

2、網頁設計裡面,<div>到底是干什麼用的

?

3、網頁製作用div怎樣布局?

要如何布局,你可以把DIV想像成一塊一塊,加上height和width,然後在加上背景顏色,就可以看出來回了,然後加上float、position等方答式移動到你想要的位置,就可以了!

網頁總體的布局的方法就是這樣的,如果要在一個塊裡面放置元素,這個可以去學習理解盒模型的知識,希望幫助到你!

4、網頁設計中,怎麼樣用div來控制每一塊的位置?

CSS position 屬性 通過使用 position,我們可以選擇 4 種不同類型的定位,這會影響元素框生成的方式。 position 屬性值的含義: static 元素框正常生成。塊級元素生成一個矩形框,作為文檔流的一部分,行內元素則會創建一個或多個行框,置於其父元素中。 relative 元素框偏移某個距離。元素仍保持其未定位前的形狀,它原本所佔的空間仍保留。 absolute 元素框從文檔流完全刪除,並相對於其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所佔的空間會關閉,就好像元素原來不存在一樣。元素定位後生成一個塊級框,而不論原來它在正常流中生成何種類型的框。 fixed 元素框的表現類似於將 position 設置為 absolute,不過其包含塊是視窗本身。

5、網頁設計 DIV

差不多了  你把圖片自己加上就可以了

  <!DOCTYPE HTML>  
    <html>  
    <head>  
    <style type="text/css"> 
      body{background:#000;font-size:12px;}
 .header_box{width:700px;height:50px;background:#fff;filter:alpha(opacity:50);opacity:0.5;-moz-border-radius:0 0 10px 10px; -webkit-border-radius:0 0 10px 10px;border-radius:0 0 10px 10px;}
     .header_box a,.header_box a i{display:inline-block;*display:inline;*zoom:1;line-height:50px;color:#555}
 .header_box a i{border:1px solid red;float:left;margin-top:15px;margin-right:5px;}
 .header_box .span1{padding-right:20px;}
 .header_box .span2{padding-right:200px;}
 .header_box .span3{padding-right:20px;}
 .header_box .span1 i{width:20px;height:20px;background:url(../images/email.png) no-repeat;}
 .header_box .span2 i{width:20px;height:20px;background:url(../images/phone.png) no-repeat;}
 .header_box .span3 i{width:20px;height:20px;background:url(../images/login.png) no-repeat;}
 .header_box .span4 i{width:20px;height:20px;background:url(../images/account.png) no-repeat;}
   </style>  
    </head>  
<body>
<div class="header_box">
    <a href="#" class="span1"><i></i>[email protected]</a>
    <a href="#" class="span2"><i></i>0423656655</a>
    <a href="#" class="span3"><i></i>Login</a>
    <a href="#" class="span4"><i></i>Create an account</a>
</div>
</body>
</html>

6、請問,網頁設計中怎樣用div+css進行如下圖的分塊,謝謝。

如果有成圖的話,可以考慮PS切圖

手寫的話,代碼就比較多了

<!DOCTYPE html>
<html>
<head>
<title>手寫代碼</title>
<meta charset="utf-8">
<style type="text/css">
*{padding:0;margin: 0;}
.w1260{width: 1260px;margin: 12px auto;margin-top: 0;}
.h-1{border: 1px solid #bbb;height: 120px;}
.h-2{border: 1px solid #bbb;height: 80px;}
.h-3{border: 1px solid #bbb;position: relative;overflow: hidden;}
.h-3 .h3-l{float: left;width: 33%;border-right: 1px solid #bbb;padding:1%;}
.h-3 .h3-l .h3-l1{border: 1px solid #bbb;height: 200px;}
.h-3 .h3-l .h3-l2{border: 1px solid #bbb;height: 200px;margin-top: 12px;}
.h-3 .h3-r{float: right;width: 62.6%;padding: 1%;padding-left: 0;}
.h-3 .h3-r .h3-r1{position: relative;width: 100%;border: 1px solid #bbb;overflow: hidden;}
.h-3 .h3-r .h3-r1 .h3-r1-l{float: left;height: 80px;border-right: 1px solid #bbb;width: 75%}
.h-3 .h3-r .h3-r1 .h3-r1-r{float: right;height: 80px;width: 24%;}
.h-3 .h3-r .h3-r2{position: relative;width: 100%;border: 1px solid #bbb;overflow: hidden;height: 100px;margin-top: 12px;}
.h-3 .h3-r .h3-r3{position: relative;width: 100%;border: 1px solid #bbb;overflow: hidden;margin-top: 12px;}
.h-3 .h3-r .h3-r3 .h3-r3-l{float: left;height: 200px;border-right: 1px solid #bbb;width: 75%}
.h-3 .h3-r .h3-r3 .h3-r3-r{float: right;height: 200px;width: 24%;}
.h-4{border: 1px solid #bbb;height: 80px;}
</style>
</head>
<body>
<div class="h-1 w1260"></div>
<div class="h-2 w1260"></div>
<div class="h-3 w1260">
<div class="h3-l">
<div class="h3-l1"></div>
<div class="h3-l2"></div>
</div>
<div class="h3-r">
<div class="h3-r1">
<div class="h3-r1-l"></div>
<div class="h3-r1-r"></div>
</div>
<div class="h3-r2"></div>
<div class="h3-r3">
<div class="h3-r3-l"></div>
<div class="h3-r3-r"></div>
</div>
</div>
</div>
<div class="h-4 w1260"></div>
</body>
</html>

7、DIV和CSS怎樣應用到網頁設計

樓主這問題除了泛,我找不到神馬其他的形容詞了……
這么說,你可以隨便觀察版任何一個網頁的權源碼,人人網首頁,騰訊新聞首頁,這些都可以。
你會發現有很多<div clss="xxx">各種div嵌套</div>的代碼,如果你說應用,那就是應用了。
怎麼應用?主流的用法是利用浮動float:left,還有position屬性等綜合使用,來達到預想的布局效果。
建議:利用div+css仿製人人網首頁,仿完再對比人家是怎麼寫的,基本你就明白了
或者你也可以參考這個網站:webfans.info,這個div+css的布局也不錯,可以借鑒

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

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

與網頁設計div怎麼使用相關的知識