ให้เรตสมาชิก: 2 / 5

ดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

บทที่ 11 CSS3 User Interface
   CSS3 User Interface คือตัวช่วยในการสร้างฟีเจอร์หน้าเว็บไซต์สำหรับประสานงานระหว่างผู้ใช้กับเว็บไซต์
ตัวอย่างเช่น
  1.กล่องข้อความที่สามารถปรับขนาดได้โดยผู้ใช้เว็บไซต์ (CSS3 resizing)  โดยใช้คำสั่ง resize:both; overflow:auto;

 <html>
<head>
<style> 
div
{border:10px dotted red;
padding:100px 1px; 
width:100px;
resize:both;
overflow:auto;}
</style>
</head>
<body>

<div>ทมยันตี เป็นนามปากกาของ คุณหญิงวิมล เจียมเจริญ หรือชื่อโดยกำเนิด วิมล ศิริไพบูลย์ (10 กรกฎาคม พ.ศ. 2480?ปัจจุบัน) เป็นนักประพันธ์นวนิยายจำนวน 100 เรื่อง[ต้องการอ้างอิง] หลายเรื่องได้รับความนิยมในประเทศไทย[ใครกล่าว?] อาทิ คู่กรรม ทวิภพ ค่าของคน อุบัติเหตุ พ่อปลาไหล ซึ่งมีผู้นำไปสร้างเป็นภาพยนตร์และละครโทรทัศน์ในหลายยุคหลายสมัย</div>

</body>
</html>

 ผลลัพธ์คือ

ดูตัวอย่าง CSS3 resizing คลิกที่นี่

คำอธิบาย
-resize:both; ในตัวอย่างนี้ใช้เป็น both คือสามารถหดหรือขยายกล่องข้อความได้ทั้งแนวนอนและแนวตั้ง สามารถใส่เป็น
หากต้องการให้กล่องข้อความหดหรือขยายได้เฉพาะแนนอน ,vertical หากต้องการให้กล่องข้อความหดหรือขยายได้เฉพาะแนวตั้ง

 

-overflow:auto; ใช้เป็นแบบ auto เพื่อให้ครอบคลุมข้อความทั้งหมด

border:10px dotted red;
padding:100px 1px;
width:100px;
 คือรูปแบบเส้นขอบของกล่องข้อความ อ่านเพิ่มเติมที่ บทที่ 2 CSS3 Borders

2.box sizing คือตัวช่วยในการจัดกล่องข้อความ โดยที่เราไม่ต้องมานั่งกะระยะของกล่องข้อความให้พอดีกับข้อความเอง ตัว box sizing จะช่วยคำนวนขนาดที่เหมาะสมของกล่องข้อความให้พอดีกับข้อความของเรา  โดยใช้คำสั่ง box-sizing:border-box; ตัวอย่างเช่น

<html>
<head>
<style> 
div.box
{box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */

width:30%;
border:1em solid red;
float:left;}

</style>
</head>
<body>

<div>
<div>Hello nerd. </div>
<div>Look for the positive in those around you and point them out.Positive attracts positive.  </div>
</div>

</body>
</html>

ผลลัพธ์คือ
คำอธิบาย
  box-sizing:border-box; ในคำสั่งนี้อาจเปลี่ยนจาก border-box ( ให้เริ่มวางพื้นหลังตั้งแต่ ส่วนที่เกิด เส้นขอบ เป็นต้นไป) เป็น  content box
(ให้เริ่มวางพื้นหลังตั้งแต่ส่วนที่ เอาไว้สำหรับใส่เนื้อหาเป็นต้นไป)

 width:30%; คือขนาดความกว้างของกล่องข้อความ
 border:1em solid red; เส้นขอบของกล่องข้อความ ทั้งขนาดและสี
 float:left; ตำแหน่งการวางกล่องข้อความ ในตัวอย่างใช้เป็น left คือวางด้านซ้ายของหน้าเว็บ  อาจเปลี่ยนเป็น right คือวางด้านขวาของหน้าเว็บ


ข้อมูลอ้างอิง

http://www.w3schools.com

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ขอแนะนำโปรแกรมบัญชีออนไลน์
โดย Anonymous อ 21 ต.ค. 2018 11:22 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
0
12
อ 21 ต.ค. 2018 11:22 pm โดย บุคคลทั่วไป
R - mdsoft_sale_product_set - ขายสินค้าเป็น set + POS
โดย thatsawan อ 21 ต.ค. 2018 7:13 pm บอร์ด บุญนำพา - Developer
0
1
อ 21 ต.ค. 2018 7:13 pm โดย thatsawan
Training-ไพธอนและซิลิเนียม
โดย prakon ส 20 ต.ค. 2018 11:13 pm บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
0
3
ส 20 ต.ค. 2018 11:13 pm โดย prakon
Q- สอบถามครับผม ตั้งตั้ง Module pythainlp ไม่ได้
โดย tatiya ส 20 ต.ค. 2018 6:16 pm บอร์ด Programming - C/C++ & java & Python
0
18
ส 20 ต.ค. 2018 6:16 pm โดย tatiya
ทรัพย์สินที่ต้องเสียภาษีการรับมรดก
โดย nice_13 ส 20 ต.ค. 2018 3:13 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
18
ส 20 ต.ค. 2018 3:13 pm โดย nice_13
ทำอย่างไรถึงจะได้ ภ.พ.20
โดย nice_13 ส 20 ต.ค. 2018 2:53 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
19
ส 20 ต.ค. 2018 2:53 pm โดย nice_13
Q - วิธีการสร้าง like เพื่อที่จะส่งค่าไปยังไฟล์ controller ใน phpbb
โดย Ittichai_chupol ส 20 ต.ค. 2018 2:31 pm บอร์ด Programming - PHP
1
25
ส 20 ต.ค. 2018 2:34 pm โดย thatsawan
R - Template thai vi - ทั้ง 3 ขนาด
โดย thatsawan ส 20 ต.ค. 2018 12:15 pm บอร์ด ThaiVI - Developer
0
3
ส 20 ต.ค. 2018 12:15 pm โดย thatsawan
งานประจำวันที่ 20 ตุลาคม 2561
โดย tatiya ส 20 ต.ค. 2018 10:06 am บอร์ด M065 - ตติยะ นาชัย
1
3
ส 20 ต.ค. 2018 9:08 pm โดย tatiya
งานประจำวันที่ 20 ตุลาคม 2561
โดย nice_13 ส 20 ต.ค. 2018 10:00 am บอร์ด M071 - พิชญ์สินี คงจร
1
2
ส 20 ต.ค. 2018 7:20 pm โดย nice_13
งานประจำวันที่ 20 ตุลาคม 2561
โดย Ittichai_chupol ส 20 ต.ค. 2018 9:39 am บอร์ด M070 - อิทธิชัย ชูผล
1
5
ส 20 ต.ค. 2018 7:11 pm โดย Ittichai_chupol
ionic error
โดย Anonymous ส 20 ต.ค. 2018 9:21 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
1
21
ส 20 ต.ค. 2018 10:29 am โดย mindphp
เมื่อ User ถามหางานที่บันทึกไว้จาก IT
โดย tai14 ศ 19 ต.ค. 2018 3:25 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
44
ศ 19 ต.ค. 2018 3:25 pm โดย tai14
โปรเจคทั่วไป VS โปรจคที่มีผลกับโบนัส
โดย tai14 ศ 19 ต.ค. 2018 2:23 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
35
ศ 19 ต.ค. 2018 2:23 pm โดย tai14
งานประจำวันที่ 19 ตุลาคม 2561
โดย prakon ศ 19 ต.ค. 2018 10:03 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
1
12
ศ 19 ต.ค. 2018 7:05 pm โดย prakon
งานประจำวันที่ 19 ตุลาคม 2561
โดย pprn ศ 19 ต.ค. 2018 9:25 am บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
1
17
ศ 19 ต.ค. 2018 6:28 pm โดย pprn
งานประจำวันที่ 19 ตุลาคม 2561
โดย Ittichai_chupol ศ 19 ต.ค. 2018 9:09 am บอร์ด M070 - อิทธิชัย ชูผล
1
6
ศ 19 ต.ค. 2018 6:51 pm โดย Ittichai_chupol
งานประจำวันที่ 19 ตุลาคม 2561
โดย tai14 ศ 19 ต.ค. 2018 9:05 am บอร์ด MT26 - นางสาวอัครยุภา ยงยุทธ
1
4
ศ 19 ต.ค. 2018 6:17 pm โดย tai14
งานประจำวันที่ 19 ตุลาคม 2561
โดย tatiya ศ 19 ต.ค. 2018 9:04 am บอร์ด M065 - ตติยะ นาชัย
1
6
ศ 19 ต.ค. 2018 7:01 pm โดย tatiya
งานประจำวันที่ 19 ตุลาคม 2561
โดย nice_13 ศ 19 ต.ค. 2018 8:58 am บอร์ด M071 - พิชญ์สินี คงจร
1
3
ศ 19 ต.ค. 2018 6:37 pm โดย nice_13