導航:首頁 > 萬維百科 > 網頁設計cssdiv示例

網頁設計cssdiv示例

 發布時間：2020-09-10 14:12:14

1、求一個網頁製作高手用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>

2、求網頁設計，製作一個網頁DIV+CSS布局的。

你想要做什麼樣的頁面呢？我是網頁美工，說清楚你的要求。我的qq是949411477 ，如果寫頁面可以找我。

3、用div+css設計一個頁面布局

<style>
.head{
width:100%;
height:60px;
}
.main{
width:70%;
height:400px;
float:left;
}
.main{
width:30%;
height:400px;
float:right;
}
.footer{
width:100%;
height:60px;
}
</style>

<div class ="head">這里是head區域</div>
<div class ="main">這里是主要內容區域</div>
<div class="main_left">這里是右側區域</div>
<div class="footer">這里是頁腳區域</div>

4、div+css網頁製作作業

我有大二時做的dreamweaver的網頁作業。有20份作業的源文件。任你挑選。
郵箱我就不單獨發了，為了方便大家下載參考。
我把網頁作業源文件打包上傳到我的百度網盤。可以直接下載，不需要注冊，也不需要積分。
網盤的下載地址，公布於本人的百度空間的文章中。
找不到或者有什麼問題的可以私信我

5、用html+div+css製作田字格網頁布局

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.divL{
float: left;background-color: yellow;width: 120px;height: 120px;
}
.divLT{
margin: 50px;
}
.divLB{
margin: 0px 50px 50px;
}
.divR{
float: right;background-color: yellow;width: 120px;height: 120px;
}
.divRT{
margin: 50px 50px 50px 0px
}
.divRB{
margin: 0px 50px 50px 0px;
}
.divTB{
background-color: #005580;border-color: #000000;width: 550px;height: 50px;
}
.divLR{
width: 80px;height: 390px;background-color: #008000;display: table-cell;
}
</style>
</head>
<body>
<div class="divTB"></div>

<div style="display: table;width: 550px;">

<div class="divLR"></div>

<div class="divL divLT"></div>
<div class="divR divRT"></div>

<div class="divL divLB"></div>
<div class="divR divRB"></div>

<div class="divLR"></div>

</div>

<div class="divTB"></div>
</body>
</html>

寫的可能不太行，不知道滿不滿足你的要求

6、網頁設計 DIV+CSS

肯定要裁剪的，但不說裁剪好往dw里倒，文字還要單獨的div+css定位寫在背景上

定位的時候盡量用div+css定位框架

table用來存數據更合適的

7、如何快速用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不停的布局，不停的定義他的屬性，基本靜態的網頁就是這樣做出來的

8、div css網頁設計實例?

以發送至您的郵箱

9、div+css網頁設計

這是FLASH 輪換廣告，，只是這個做得比較好看，，現在FIASH輪換廣告非常實用，，很多網站都會用到，建議你去網上搜索一下flash輪換廣告的製作視頻，其實非常簡單，代碼用得很少，一看就會！！但是想要到達你給的那種效果，應該要精通flash的高手才行，其實我覺得不需要做得那麼華麗，能實現輪換效果就行了！！！

與網頁設計cssdiv示例相關的知識