Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,038

HOME > PHP > PHP Forum > อยากทราบวิธีการออกแบบหน้าเว็บโดยใช้ div มือใหม่อยากใช้ div


อยากทราบวิธีการออกแบบหน้าเว็บโดยใช้ div มือใหม่อยากใช้ div

 
Topic : 056519



โพสกระทู้ ( 482 )
บทความ ( 1 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์



คือว่าผมเคยใช้แต่ table ออกแบบ ผมอยากลองศึกษาโดยการใช้ div บ้างแต่ยังไม่รู้จะทำอย่างไง ลองเขียนแล้วมันยังมั่วๆ อยู่เลย
ผมอยากทำตามแบบด้านล่าง ไม่รู้ว่าจะเริ่มเขียนอย่างไงดี


หน้าเวป



Tag : PHP, HTML/CSS
Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2011-02-24 19:27:58 By : babyprogrammer View : 7787 Reply : 6
 

 

No. 1



โพสกระทู้ ( 1,242 )
บทความ ( 13 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook

Layout
<!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=utf-8" />
<title>Layout</title>
<style>
	body {
		width: 960px;
		border: 1px solid #000;
	}
	
	body, #menu, #banner, #body, #footer {
		margin: 0 auto;
	}
	
	#logo {
		margin: 10px 0 0 10px;
		border: 1px solid #F00;
		height: 60px;
		width:150px;
	}
	#menu {
		margin-top: 10px;
		border: 1px solid #F00;
		height: 30px;
		width:940px;
	}
	#banner {
		margin-top: 10px;
		border: 1px solid #F00;
		height: 120px;
		width:940px;
	}
	#body {
		margin-top: 10px;
		border: 1px solid #F00;
		width:940px;
		
	}
	#footer {
		margin: 10px auto;
		margin-bottom: 0px;
		height: 40px;
		border-top: 1px solid #000;
		width:960px;
	}
</style>
</head>

<body>
<div id="logo">logo</div>
<div id="menu">menu</div>
<div id="banner">banner</div>
<div id="body">body</div>
<div id="footer">footer</div>
</body>
</html>

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-02-24 21:19:01 By : Nautilus
 

 

No. 2

Guest


Code
<div id="contrain"> ส่วนนี้ #contrain { width: ความกว้างpx; ความสูงจะตั้งเป็นออโต้ height:auto }

<div id="top">#top ในที่นี้ผม หมายถึง ส่วนบนของเว็บ จะรวม เนวิกชั่น กับแบนเน่อ รวมอยุ่ในส่วนบน เราก้อ อาจจะกำหนด ความกว้าง กับสูงแบบ ตายตัว ได้

<div id="navigation">#navigation ก้อกำหนด ความ กว้างกับสูงเช่นเดียวกัน แล้วแต่ว่า ขนาดปุ่ม ต้องการจะให้ สูงเท่าไหร่
<div class= "menu">ปุ่ม1 </div> <div class= "menu">ปุ่ม2</div> <div class= "menu">ปุ่ม3 </div> <div class= "menu">ปุ่ม4 </div> .menu ส่วนนี้กำหนด ขนาด ของ ปุ่มเมนูว่าจะให้ กว้างเท่าไร่หสูงเท่าไรห่
</div><!--navigation-->


<div id="banner">">#bannerก้อกำหนด ความ กว้างกับสูง
</div><!--banner-->

</div><!--top-->






<div id="detail">#detail ก้อกำหนด ความ กว้างกับสูง



</div>


<div id="footer'> #footerก้อกำหนด ความ กว้างกับสูง

</div><!--footer-->



</div><!--contrain-->


ผมคงแนะนำได้เท่านี้ คุณต้องลอง ไปศึกษา css ออีกที นึง ว่าในการเขียน css มีคำสั่งไรมั่ง
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-02-24 21:34:31 By : คนเดิม
 

 

No. 3

Guest


กำหนดค่า pixel เป็น div ให้เป็นชิ้นๆเท่าที่จำเป็น อย่าคิดว่าทำซับซ้อนแล้วจะดี
คนที่จัดเป็นหมวดหมู่ จะแก้ไขอะไรก็ง่าย..
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-02-24 23:11:15 By : :P
 

 

No. 4



โพสกระทู้ ( 482 )
บทความ ( 1 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์


ขอบคุณสำหรับทุกคำแนะนำครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-02-25 09:05:41 By : babyprogrammer
 

 

No. 5

Guest


วอมืมือม
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-09-14 13:19:17 By : นนนนนนนน
 

 

No. 6

Guest


ภาพประกอบ

ถ้าจะทำตามนี้ ต้องทำโครงยังไงบ้างค่ะ ช่วยหน่อยได่มั้ยค่ะ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2013-05-01 14:22:25 By : ^^
 

   

ค้นหาข้อมูล
   
 

แสดงความคิดเห็น
Re : อยากทราบวิธีการออกแบบหน้าเว็บโดยใช้ div มือใหม่อยากใช้ div
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
 Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)





ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2025 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่