CSS3 สื่อแบบสอบถามตัวอย่าง
บทนี้เราจะแสดงให้เห็นถึงคุณตัวอย่างบางส่วนสำหรับมัลติมีเดีย
ก่อนที่เราจะเริ่มต้นที่จะทำให้รายการของการเชื่อมโยงไปยังกล่องจดหมายอิเล็กทรอนิกส์ โค้ด HTML ที่เป็นดังต่อไปนี้:
ตัวอย่างที่ 1
<html>
<head>
<style>
UL {
รูปแบบรายการ-Type: none;
}
UL หลี่ {
สี: สีเขียว;
ตกแต่งข้อความ: none;
padding: 3px;
จอแสดงผล: บล็อก
}
</ style>
</ head>
<body>
<ul>
<li> <a data-email = "[email protected]" href = "mailto: [email protected]"> จอห์นโด </ a> </ li>
<li> <a data-email = "[email protected]" href = "mailto: [email protected]"> แมรี่ Moe </ a> </ li>
<li> <a data-email = "[email protected]" href = "mailto: [email protected]"> Amanda แพนด้า </ a> </ li>
</ ul>
</ body>
</ html>
ลอง»
โปรดทราบว่า data-email คุณสมบัติ ใน HTML เราสามารถใช้กับ data- คำนำหน้าแอตทริบิวต์การจัดเก็บข้อมูล
520 699px กว้าง - เพิ่มไอคอนกล่องจดหมาย
เมื่อความกว้างของเบราว์เซอร์ใน 520 699px กล่องจดหมายก่อนที่จะเพิ่มการเชื่อมโยงจดหมายไอคอนนี้:
ตัวอย่างที่ 2
UL หลี่ {
padding ซ้าย: 30px;
พื้นหลัง: URL (อีเมล icon.png) กลางซ้ายไม่ซ้ำ;
}
}
ลอง»
700 1000px - เพิ่มข้อมูลคำนำหน้าข้อความ
เมื่อความกว้างของเบราว์เซอร์ 700 1000px ที่จะเชื่อมโยงกล่องจดหมายก่อนที่จะเพิ่ม "อีเมล":
ตัวอย่างที่ 3
UL li A: ก่อน {
เนื้อหา: "อีเมล์:";
ตัวอักษรสไตล์: italic;
color: # 666666;
}
}
ลอง»
มากกว่า 1001PX กว้าง - เพิ่มที่อยู่อีเมล
เมื่อเบราว์เซอร์จะกว้างกว่า 1001PX ติดต่อ e-mail address จะถูกเพิ่มเข้ามาหลังจากการเชื่อมโยง
เราใช้ data- แอตทริบิวต์เพิ่มที่อยู่อีเมลหลังจากแต่ละชื่อ:
ตัวอย่างที่ 4
UL li A: หลังจาก {
เนื้อหา: "(" attr (ข้อมูล อีเมล์) ")";
font-size: 12px;
ตัวอักษรสไตล์: italic;
color: # 666666;
}
}
ลอง»
มากกว่า 1151px กว้าง - เพิ่มไอคอน
เมื่อเบราว์เซอร์จะกว้างกว่า 1001PX ชื่อจะถูกเพิ่มในด้านหน้าของไอคอน
ตัวอย่างเช่นเราไม่ได้มีการเขียนบล็อกแบบสอบถามเพิ่มเติมเราสามารถใช้ในคำสั่งสื่อที่มีอยู่คั่นด้วยเครื่องหมายจุลภาคเพื่อเพิ่มคำสั่งสื่อเพิ่มเติม (ที่คล้ายกันหรือผู้ประกอบการ):
ตัวอย่างที่ 5
UL หลี่ {
padding ซ้าย: 30px;
พื้นหลัง: URL (อีเมล icon.png) กลางซ้ายไม่ซ้ำ;
}
}
ลอง»
ตัวอย่างเพิ่มเติม
ใช้การเชื่อมโยงรายชื่อผู้รับจดหมายในแถบด้านข้างหน้าเว็บ
ตัวอย่างในคอลัมน์ด้านซ้ายของหน้าเพื่อเพิ่มรายชื่อผู้รับจดหมายของการเชื่อมโยง