導航:首頁 > 萬維百科 > 網頁設計中divcss

網頁設計中divcss

 發布時間：2020-11-21 01:58:30

1、關於網頁設計中的css

顯示和隱藏是最簡單的方法，你可以將右側的對應的div的高度從0變到你要的高度，和顯示隱藏效果一樣

2、求一個網頁製作高手用div+css做一個網頁布局 急 謝謝！！！！！！！！！！！

<!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=gb2312" />
<title>無標題文檔</title>
<style type="text/css">
#containt{ height:530px; width:400px; margin:0 auto; border:1px solid #000000;}
#top{ height:100px; width:380px; margin-top:7px; margin-left:9px;}
#top_left{ height:100px; width:138px; float:left; border:1px solid #000000; border-right:none;}
#top_right{ height:100px; width:238px; float:left; border:1px solid #000000;}
#content{ height:50px; width:380px; margin-top:5px; margin-left:9px; border:1px solid #000000;}
#bottom{ height:350px; width:380px; margin-top:5px; margin-left:9px;}
#bom_left{ height:350px; width:138px; float:left; border:1px solid #000000;}
#bom_right{ height:350px; width:235px; float:left; border:1px solid #000000; margin-left:3px;}
.b_r_div{ height:100px; width:68px; margin-left:6px; float:left; margin-top:5px; border:1px solid #000000;}
#b_r_bottom{ height:120px; width:225px; margin-left:5px; float:left; margin-top:5px; border:1px solid #000000;}
</style>
</head>
<body>
<div id="containt">
<div id="top">
<div id="top_left"></div>
<div id="top_right"></div>
</div>
<div id="content"></div>
<div id="bottom">
<div id="bom_left"></div>
<div id="bom_right">
<div class="b_r_div"></div>
<div class="b_r_div"></div>
<div class="b_r_div"></div>
<div class="b_r_div"></div>
<div class="b_r_div"></div>
<div class="b_r_div"></div>
<div id="b_r_bottom"></div>
</div>
</div>
</div>
</body>
</html>

3、在Dreamweaver中 怎樣用DIV+CSS來製作網頁

你主要是想問什麼？dreamweaver的操作還是不清楚div+css，或者說你不懂怎麼寫一個頁面，div+css也只是內一個思想，首先如果要寫容一個網頁的話，你根據需要，首先寫出結構，可以一部分一部分的實現，然後用css控制結構的樣式，達到你希望的樣子。
dreamweaver的操作的話，首先創建一個站點，（站點即是一個文件夾）然後根據需要在站點文件夾下創建相應的文件夾，比如存放圖片的文件夾，css樣式的文件夾，網頁的話，一般直接存放在站點文件夾最外面。

建議你問的更詳細點。

4、請問，網頁設計中怎樣用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>

5、網頁設計中為什麼要有css+div？

首先，CSS的極大優勢表現在簡潔的代碼，對於一個大型網站來說，可以節省大量帶寬，而且眾所周知，搜索引擎喜歡清潔的代碼（其真正意義在於，增加了有效關鍵詞占網頁總代碼的比重），因此使用CSS＋DIV的web標准製作的網站具有搜索引擎友好的一定優勢。 其次，CSS+DIV製作的網站使得網站改版相對簡單，很多問題只需要改變CSS而不需要改動程序，從而降低了網站改版的成本。 CSS＋DIV網站設計的問題 盡管CSS+DIV具有一定的優勢，不過現階段CSS+DIV網站建設存在的問題也比較明顯，主要表現在： 第一，對於CSS的高度依賴使得網頁設計變得比較復雜。相對於HTML4.0中的表格布局（table），CSS+DIV盡管不是高不可及，但至少要比表格定位復雜的多，即使對於網站設計高手也很容易出現問題，更不要說初學者了，這在一定程度上影響了XHTML網站設計語言的普及應用。 第二，CSS文件異常將影響整個網站的正常瀏覽。CSS網站製作的設計元素通常放在幾個l外部文件中，這一個或幾個文件有可能相當復雜，甚至比較龐大，如果CSS文件調用出現異常，那麼整個網站將變得慘不忍睹。 第三，對於CSS網站設計的瀏覽器兼容性問題比較突出。基於HTML4.0的網頁設計在IE4.0之後的版本中幾乎不存在瀏覽器兼容性問題，但CSS+DIV設計的網站在IE瀏覽器裡面正常顯示的頁面，到火狐瀏覽器（FireFox ）中卻可能面目全非（這也是為什麼建議網路營銷人員使用火狐瀏覽器的原因所在 ）。CSS+DIV還有待於各個瀏覽器廠商的進一步支持。 第四，CSS+DIV對搜索引擎優化與否取決於網頁設計的專業水平而不是CSS+DIV本身。CSS+DIV網頁設計並不能保證網頁對搜索引擎的優化，甚至不能保證一定比HTML網站有更簡潔的代碼設計，何況搜索引擎對於網頁的收錄和排序顯然不是以是否採用表格和CSS定位來衡量，這就是為什麼很多傳統表格布局製作的網站在搜索結果中的排序靠前，而很多使用CSS及web標准製作的網頁排名依然靠後的原因。因為對於搜索引擎而言，網站結構、內容、相關網站鏈接等因素始終是網站優化最重要的指標。

6、如何快速用css加div做一個簡單網頁

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

2
做好這兩個文件後我們把網頁的基礎代碼寫上去，並使index文件受到main.css的控制，我們右鍵選擇用記事本打開index文件輸入代碼，並在head里寫上<link href="main.css" type="text/css" rel="stylesheet">使它受到main.css控制
<html>
<head>
<title></title>

</head>

<body>
</body>
</html>

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

4
下面我們進行布局一般網頁都是3層一級，所以我們需要div布局了在body裡面寫一般我會先分為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>

5
布局好後我們需要去定義屬性了，這里我只是簡單的定義了一下
*{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}
定義好了我們打開預覽一下看看，圖片是不是居中和分成3塊了。當然，顏色只是為了方便看清楚，可以不寫。

6
其實做網頁就是不斷的畫框，只要知道布局和定義屬性就可以了，下面我們就整個做一下，因為我的有一些是一樣的，可以用class調用，class=baidu這個只是隨便寫的，你愛等於什麼就等於什麼

<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>

7
下面我們再去定義他的屬性，當然我只是簡單的定義一下
*{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;}

8
因為我這個是我截圖相冊的網頁，下面我們就放照片吧，這里我偷個懶，把照片都放在桌面了，所以不用連接照片地址了。

<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>
如果圖片不在同一層目錄，就需要連接到圖片地址

9
這樣一個網頁就做好了，如果需要製作精美的網頁，就需要不斷的進行div布局和css樣式的規定了。
10
下面我來說說網頁製作的定義，網頁的製作只要會使用div不停的布局，不停的定義他的屬性，基本靜態的網頁就是這樣做出來的

7、網頁設計中採用div+css布局，這里的DIV是什麼意思？

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

8、網頁設計採用div+css有什麼好處？

網頁設計採用div+css的好處：
1、div+css有利於搜索引擎爬蟲：一般而言相同網頁頁面html文件table布局位元組大於div+css布局的位元組，所以可以節約搜索引擎爬蟲爬行下載頁面內容時間。
2、重構頁面修改方便（div+css改版方便）：一般DIV+CSS頁面都是html和css文件分開的也就是說一個網頁的內容與表現形式的分離，一般修改小小部分的css文件里css樣式屬性就可以修改真站的樣式版面，如背景顏色、字體顏色、網站寬度等具有table不具備的方便性。
3、div+css頁面增加網頁打開速度：這里是特性決定了他們的性能，因為div+css頁面是div的html和css文件分開的，而瀏覽器打開該網頁的時候是同時下載html和css，所以可以提高網頁打開速度，而table還有個特性就是瀏覽器打開的時候必須是瀏覽器下載以<table>開始,並</table>結束後才顯示該塊的內容，而div的html是邊載入邊將內容呈現到瀏覽器上，div+css網站大大增強用戶體驗作用。大家都知道網頁多等1秒鍾都會降低瀏覽者的等待時間。

9、怎樣做一個含有3個頁面以上的網頁製作，要求裡面有div,css之類的東西。

3個 以上頁面copy 也就是俗稱的企業站，首頁 列表頁 內容頁，估計你就是用來做作業什麼的，在網上找找 企業站模板什麼的資料 看看樣式，然後div布局 首頁展示些圖片列表 導航什麼的，列表頁面就是list列表，有導航 主要是 新聞標題之類的列表，然後 點擊標題 跳轉到文章頁，就是標準的企業站，3個頁面，多的 也就是 列表和文章什麼的樣式不同

、附 兩個以前做的 簡單 列表文章頁

與網頁設計中divcss相關的知識