ให้เรตสมาชิก: 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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
R- mdsoft_siri_reciept_print (โมดูลปริ้น ใบเสร็จ)
โดย tatiya ส 19 ม.ค. 2019 8:49 pm บอร์ด สิริกิตติรัตน์ - Developer
1
1
ส 19 ม.ค. 2019 8:55 pm โดย tatiya
วิธีการทำ process bar ใน Google Sheets
โดย Chidchanok ส 19 ม.ค. 2019 8:16 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
4
ส 19 ม.ค. 2019 8:16 pm โดย Chidchanok
Q-ไม่สามารถเข้าใช้งาน Open ERP ค่ะ
โดย Chidchanok ส 19 ม.ค. 2019 7:10 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
0
4
ส 19 ม.ค. 2019 7:10 pm โดย Chidchanok
Q-สอบถามค่ะ ไม่สามารถกด validate ใบแจ้งหนี้ได้
โดย Chidchanok ส 19 ม.ค. 2019 6:44 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
0
4
ส 19 ม.ค. 2019 6:44 pm โดย Chidchanok
การทำแผนภูมิใน Google Sheets
โดย Chidchanok ส 19 ม.ค. 2019 5:53 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
5
ส 19 ม.ค. 2019 5:53 pm โดย Chidchanok
การเข้าใช้งาน Google Sheets
โดย Chidchanok ส 19 ม.ค. 2019 5:22 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
6
ส 19 ม.ค. 2019 5:22 pm โดย Chidchanok
การใช้งาน Google Docs ใน Google Apps For Education
โดย ณัฐกฤตา บุญญะฤทธิ์ ส 19 ม.ค. 2019 4:05 pm บอร์ด Share Knowledge
0
15
ส 19 ม.ค. 2019 4:05 pm โดย ณัฐกฤตา บุญญะฤทธิ์
วิธีการสร้าง เมนูใน user ด้วย Extensio phpbb
โดย Ittichai_chupol ส 19 ม.ค. 2019 3:29 pm บอร์ด PHP Knowledge
0
5
ส 19 ม.ค. 2019 3:29 pm โดย Ittichai_chupol
อยากทราบวิธีการดึงข้อมูล รายการกระทู้ที่โปรด ใน phpbb
โดย Ittichai_chupol ส 19 ม.ค. 2019 1:50 pm บอร์ด Programming - PHP
0
7
ส 19 ม.ค. 2019 1:50 pm โดย Ittichai_chupol
ข้อแตกต่างระหว่าง Google Sheet กับ Excel
โดย Chidchanok ส 19 ม.ค. 2019 1:47 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
5
ส 19 ม.ค. 2019 1:47 pm โดย Chidchanok
วิธีการเพิ่มสมาชิก มาเป็น ผู้ดูแลระบบ โดย Admin ใน phpbb
โดย Ittichai_chupol ส 19 ม.ค. 2019 1:46 pm บอร์ด PHP Knowledge
0
3
ส 19 ม.ค. 2019 1:46 pm โดย Ittichai_chupol
การตั้งค่า เปิด - ปิด ส่วนการลงทะเบียนสมัครสมาชิก ใน เว็บบอร์ด phpbb
โดย Ittichai_chupol ส 19 ม.ค. 2019 11:22 am บอร์ด phpBB user Guide Knowledge
0
14
ส 19 ม.ค. 2019 11:22 am โดย Ittichai_chupol
รวบรวมวิธีการใช้งาน Google Sheet
โดย Chidchanok ส 19 ม.ค. 2019 11:11 am บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
12
ส 19 ม.ค. 2019 11:11 am โดย Chidchanok
สอบถามวิธีการดึง File ที่ลบใน Google doc กลับ
โดย ณัฐกฤตา บุญญะฤทธิ์ ส 19 ม.ค. 2019 10:19 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
16
ส 19 ม.ค. 2019 10:48 am โดย Ittichai_chupol
การจัดทำใบสั่งซื้อในโปรแกรม Open ERP
โดย Chidchanok ศ 18 ม.ค. 2019 6:21 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
18
ศ 18 ม.ค. 2019 6:21 pm โดย Chidchanok
การรับใบเสนอราคาในโปรแกรม OpenERP
โดย Chidchanok ศ 18 ม.ค. 2019 5:24 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
16
ศ 18 ม.ค. 2019 5:24 pm โดย Chidchanok
การส่งสินค้าในโปรแกรม Open ERP
โดย Chidchanok ศ 18 ม.ค. 2019 4:49 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
14
ศ 18 ม.ค. 2019 4:49 pm โดย Chidchanok
อยากทราบวิธีการแบ่งข้อมูล ออกเป็นชุดๆ ใน phpbb
โดย Ittichai_chupol ศ 18 ม.ค. 2019 3:40 pm บอร์ด Programming - PHP
0
13
ศ 18 ม.ค. 2019 3:40 pm โดย Ittichai_chupol
การเพิ่มข้อมูลผู้จำหน่ายใน โปรแกรม Open ERP
โดย Chidchanok ศ 18 ม.ค. 2019 3:33 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
19
ศ 18 ม.ค. 2019 3:33 pm โดย Chidchanok
Q-กดปรื้นส์ใบเสนอราคาแต่ไม่สามารถดูได้
โดย Chidchanok ศ 18 ม.ค. 2019 2:57 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
0
4
ศ 18 ม.ค. 2019 2:57 pm โดย Chidchanok