navigation เมนูนั้นยังดูหน้าตาเหมือนรายการมากกว่าเมนู
ดังนั้นเราจะใส่สไตล์เพิ่มเข้าไป
เราจะเอาจุด(bullet)ที่ใช้แสดงรายการออกไปก่อน
และย้ายรายการแต่ละรายการออกไปทางด้านซ้ายในตำแหน่งเดิมที่ใช้แสดงจุดในแต่ละรายการ
นอกจากนั้นเราก็จะใส่พื้นหลังสีขาวและสี่เหลี่ยมสีดำให้แต่ละรายการ
(ทำไมน่ะหรือ ไม่มีเหตุผลเฉพาะหรอกเพียงแต่ว่าเราสามารถทำได้)
นอกจากนี้เรายังไม่ได้ระบุวว่าสีที่ใช้ลิงค์เป็นสีอะไร ดังนั้นให้เพิ่มลงไปด้วยสีฟ้าใช้สำหรับลิงค์ที่ผู้อ่านยังมองไม่เห็นส่วนสีม่วงใช้สำหรับลิงค์ ที่ผู้อ่านคลิกเข้าไปดูแล้ว
โดยทั่วไปแล้ว บราวเซอร์จะแสดงลิงค์ด้วยการขีดเส้นใต้และใส่สี
โดยปกติสีที่ใช้จะเหมือนกับสีที่ระบุไว้ในที่นี้ คือ
สีฟ้าไว้สำหรับลิงค์ไปยังหน้าที่คุณยังไม่ได้เข้าไปดู
(หรือที่เคยเข้าไปดูเมื่อนานมาแล้ว)
สีม่วงไว้ใช้สำหรับหน้าที่เข้าไปดูมาแล้ว
ใน HTML การสร้างลิงค์ทำได้โดยใช้ element <a> ดังนั้นเวลาที่เรระบุสีเราจะต้องใส่สไตล์ให้กับ “a” เพื่อแยกความแตกต่างระหว่างลิงค์ที่เยี่ยม ชมแล้วกับลิงค์ที่ยังไม่ได้เยี่ยมชม CSS ได้กำหนดให้มี “pseudo-classes” (:link และ :visited) ที่เรียกว่า “pseudo-classes” เพื่อแยกแยะความแตกต่างระหว่าง classattributes, ที่แสดงบน HTML โดยตรงตัวอย่างเช่น
นอกจากนี้เรายังไม่ได้ระบุวว่าสีที่ใช้ลิงค์เป็นสีอะไร ดังนั้นให้เพิ่มลงไปด้วยสีฟ้าใช้สำหรับลิงค์ที่ผู้อ่านยังมองไม่เห็นส่วนสีม่วงใช้สำหรับลิงค์ ที่ผู้อ่านคลิกเข้าไปดูแล้ว
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
</style>
</head>
<body>
[etc.]
โดยทั่วไปแล้ว บราวเซอร์จะแสดงลิงค์ด้วยการขีดเส้นใต้และใส่สี
โดยปกติสีที่ใช้จะเหมือนกับสีที่ระบุไว้ในที่นี้ คือ
สีฟ้าไว้สำหรับลิงค์ไปยังหน้าที่คุณยังไม่ได้เข้าไปดู
(หรือที่เคยเข้าไปดูเมื่อนานมาแล้ว)
สีม่วงไว้ใช้สำหรับหน้าที่เข้าไปดูมาแล้ว
ใน HTML การสร้างลิงค์ทำได้โดยใช้ element <a> ดังนั้นเวลาที่เรระบุสีเราจะต้องใส่สไตล์ให้กับ “a” เพื่อแยกความแตกต่างระหว่างลิงค์ที่เยี่ยม ชมแล้วกับลิงค์ที่ยังไม่ได้เยี่ยมชม CSS ได้กำหนดให้มี “pseudo-classes” (:link และ :visited) ที่เรียกว่า “pseudo-classes” เพื่อแยกแยะความแตกต่างระหว่าง classattributes, ที่แสดงบน HTML โดยตรงตัวอย่างเช่น
class="navbar"
ที่แสดงไว้ในตัวอย่างข้างต้น
0 ความคิดเห็น:
แสดงความคิดเห็น