เพิ่มบทความใหม่
การจัดข้อความ ชิดขวาเมื่อแสดงหน้าจอ PC และซิดซ้าย เมื่อแสดงหน้าจอมือถือ
.input-label {
text-align: right;
line-height: 1.2;
}
@media only screen and (max-width : 992px) {
.input-label {
text-align: left;
}
}
PC
Mobile
ตัดข้อความมากกว่า 3 บรรทัด พร้อมใส่จุดไข่ปลา
//วิธีใช้: div class="text-descript line-clamp"
.text-descript {
width: 100%;
margin: 0 0 0...
การสลับสีตาราง HTML ด้วย CSS
CSS เปลี่ยนพื้นหลังของตาราง เพียงคำสั่งเดียวก็ออกมาสวยดังภาพ โดยไม่ต้องเขียน Javascript ให้ยุ่งยาก
ภาพตัวอย่าง:
วิธีแรก: นำ Code นี้ไปวางในแท็ก <style type="text/css">วางโค็ด</style>
tbody tr:nth-child(odd) {
background-color: #ccc;
}
วิธีที่สอง: ใช้คำสั่งของ Bootstrap ดาวโหลดที่: http://getbootstrap.com/
วิธีใช้:
<table css"table table-striped">...</table>...
คำค้น:
css
จัดช่อง input ให้ดูสวยงามด้วย CSS
จัดช่อง input ให้ดูสวยงามด้วย CSS
เพียงนำโค็ดด้านล่างไปวางในแท็ก style
<style type="text/css">
select {
font-family: 'Droid Sans Thai', Arial, sans-serif;
font-size: 14px;
height: 28px;
border: 1px solid #909090;
background-color: #F0F0F0;
border-radius: 4px;
box-shadow: inset 1px 1px 2px #C0C0C0;
}
input[type=text] {
}
</style>...
CSS Viewport and Responsive ปรับเว็บให้แสดงได้หล ายขนาดจ...
เหมาะสำหรับคนเขียนเว็บ จัดให้เว็บปรับสัดส่วนตามขนาดจอ ตัวอย่างการใช้เช่นให้รูปภาพแสดงขนาดต่างกันบนมือถือ iPad และ Desktop
ก็อปใส่ในส่วน header:
<meta name="viewport" content="width=device-width, initial-scale=1">
ก็อปใส่ในส่วน header > style:
/* Custom, iPhone Retina */@media only screen and (min-width : 320px) {#image { width:100%; }}
/* Extra Small Devices, Phones */@media only screen...
CSS การกำหนดสัญลักษณ์ด้ว ยตัวเอง Tag UL และ OL
เหมาะกับคนเขียนเว็บไซต์ HTML + CSS ได้ใช้บ่อยมาก ๆ
อธิบาย HTML Tag: UL และ OL
ul คือ unorderlist จะนับ li เป็นสัญลักษณ์ รูปวงกลม หรือรูปสามเหลี่ยม
ol คือ orderlist จะนับ li เป็นตัวเลข 1 2 3 ...
ภาพตัวอย่าง: กำหนดเองการแสดงผลของ UL และ OL เอง เพื่อความสวยงาม
ขั้นตอน 1. สร้าง Tag < style > ไว้ระหว่าง < head > ตรงนี้ </ head > ของ HTML
< style type="text/css" >
ul.submit-desction ...
