[Web][HTML]2.認識<div></div>標籤

  • 104
  • 0
  • Web
  • 2022-03-12

文、意如

<div></div>標籤是一個空的盒子,可以用來放置文字、圖片、等等資料

首先準備好切好的網頁圖片檔,參考上一篇[web]1.使用photoshop切UI圖

接下來要實作將header,main,footer中的圖片放置在<div></div>中

步驟一:建立3個<div></div>,並幫取名子id=""

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<style>

</style>

</head>

<body>
<div id="header"> id "header" 的內容放在這裡</div>
<div id="main"> id "main" 的內容放在這裡</div>
<div id="footer"> id "footer" 的內容放在這裡</div>
</body>
</html>

步驟二:

設定CSS樣式

用來設定距離margin 上下左右

	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
<style>

body {
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
</style>

步驟三:

先放入header圖片及footer文字

<body>
<div id="header"><img src="images/top.jpg" width="770" height="80"></div>
<div id="main"> id "main" 的內容放在這裡</div>
<div id="footer">會員說明│ 購物說明 │ 付款方式 │ 物流及運費方式 │ 退貨換貨方式 │ 隱私權保護政策 │ 著作權聲明 │ 合作提案<br />
  地 址:台北市大安區大安路100段100巷100號0        TEL:(02)1999-1999       	FAX:(02)1999-1999<br />
HAPPY購物有限公司版權所有© 2009 HAPPY  SHOPPING. All Rights Reserved.      您是第102945訪客   本日瀏覽人數22     目前線上6人數</div>
</body>

設定header的<div>盒子大小,並置中

 

置中語法

margin-right: auto;
margin-left: auto;

置中前記得設定div盒子的寬、高

#header {
	height: 80px;
	width: 770px;
	margin-right: auto;
	margin-left: auto;
}

設定main,背景圖、寬、置中

#main {
background-image: url(images/main.gif);
width: 770px;
margin-right: auto;
margin-left: auto;
}

設定footer,

font-size: 文字大小;
color: 文字顏色;
background-image: url(背景圖片路徑);
height: 寬;
width: 高;
margin-right: auto;  標籤置中
margin-left: auto;   標籤置中
padding-top: 10px;   標籤與文字之間的距離
text-align: center;  文字置中
#footer {
font-size: 12px;
color: #666;
background-image: url(images/footer.jpg);
height: 60px;
width: 770px;
margin-right: auto;
margin-left: auto;
padding-top: 10px;
text-align: center;
}

步驟四:在main的盒子中,另外再加上四個盒子分別取名id為main1~main4,也在css區塊增加這四個樣式

<style type="text/css">

#main1 {
}
#main2 {
}
#main3 {
}
#main4 {
}
#footer {
	font-size: 12px;
	color: #666;
	background-image: url(images/footer.jpg);
	height: 60px;
	width: 770px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 10px;
	text-align: center;
}
-->
</style></head>

<body>
<div id="header"><img src="images/top.jpg" width="770" height="80" /></div>
<div id="main">
  <div id="main1">id "main1" 的內容放在這裡</div>
  <div id="main2">id "main2" 的內容放在這裡</div>
  <div id="main3">id "main3" 的內容放在這裡</div>
  <div id="main4">id "main4" 的內容放在這裡</div>
</div>
<div id="footer">會員說明│ 購物說明 │ 付款方式 │ 物流及運費方式 │ 退貨換貨方式 │ 隱私權保護政策 │ 著作權聲明 │ 合作提案<br />
  地 址:台北市大安區大安路100段100巷100號0        TEL:(02)1999-1999       	FAX:(02)1999-1999<br />
HAPPY購物有限公司版權所有© 2009 HAPPY  SHOPPING. All Rights Reserved.      您是第102945訪客   本日瀏覽人數22     目前線上6人數</div>
</body>
</html>

 

設定main1、main4的CSS先把上下底圖放上去

#main1 {
	background-image: url(images/main1.gif);
	height: 23px;
}
#main2 {
}
#main3 {
}
#main4 {
	background-image: url(images/main4.gif);
	height: 23px;
}

接下來把main1,main4 div中的文字刪除掉

<div id="main">
 <div id="main1"></div>
 <div id="main2">id "main2" 的內容放在這裡</div>
 <div id="main3">id "main3" 的內容放在這裡</div>
 <div id="main4"></div>
</div>

效果如下:

設定main2浮動靠左,main3浮動靠右

並設定div的寬度

#main3 {
float: right;
width: 560px;
}
#main4 {
background-image: url(images/main4.gif);
height: 23px;
}

放上main2、main3的圖片

<div id="main">
 <div id="main1"></div>
 <div id="main2"><img src="images/main2.jpg" width="210" height="420" /></div>
 <div id="main3"><img src="images/main3.jpg" width="560" height="420" /></div>
 <div id="main4"></div>
</div>

 

放上圖片後,發現footer跑掉了。

因為main有浮動視窗,整個下方的footer也被影響了,所以只需要在main4的css中設定

clear: both;

用來清除float

#main4 {
background-image: url(images/main4.gif);
height: 23px;
clear: both;
}

footer恢復正常

 

 

完整程式碼:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<style type="text/css">
body {
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
#header {
	height: 80px;
	width: 770px;
	margin-right: auto;
	margin-left: auto;
}
#main {
	background-image: url(images/main.gif);
	width: 770px;
	margin-right: auto;
	margin-left: auto;
}
#main1 {
	background-image: url(images/main1.gif);
	height: 23px;
}
#main2 {
	float: left;
	width: 210px;
}
#main3 {
	float: right;
	width: 560px;
}
#main4 {
	background-image: url(images/main4.gif);
	height: 23px;
	clear: both;
	
}
#footer {
	font-size: 12px;
	color: #666;
	background-image: url(images/footer.jpg);
	height: 60px;
	width: 770px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 10px;
	text-align: center;
}
-->
</style></head>

<body>
<div id="header"><img src="images/top.jpg" width="770" height="80" /></div>
<div id="main">
  <div id="main1"></div>
  <div id="main2"><img src="images/main2.jpg" width="210" height="420" /></div>
  <div id="main3"><img src="images/main3.jpg" width="560" height="420" /></div>
  <div id="main4"></div>
</div>
<div id="footer">會員說明│ 購物說明 │ 付款方式 │ 物流及運費方式 │ 退貨換貨方式 │ 隱私權保護政策 │ 著作權聲明 │ 合作提案<br />
  地 址:台北市大安區大安路100段100巷100號0        TEL:(02)1999-1999       	FAX:(02)1999-1999<br />
HAPPY購物有限公司版權所有© 2009 HAPPY  SHOPPING. All Rights Reserved.      您是第102945訪客   本日瀏覽人數22     目前線上6人數</div>
</body>
</html>

 

YiruAtStudio - 關於我 - 意如