HTML อ้างอิง:
ตัวอย่างซอร์สโค้ด
<div id=”นำทาง”>
<ul>
<li class=”menu2″ onMouseOver=”this.className='menu1′” onMouseOut=”this.className='menu2′”>ของฉัน
<คลาส div =”รายการ”>
<a href=”http://www.onlygrape.com/“>葡提子</a><br />
<a href=”#”>我的首页</a><br />
<a href=”#”>我的日志</a><br />
<a href=”#”>我的日志</a><br />
<a href=”#”>我的相册</a><br />
<a href=”#”>我的收藏</a><br />
</div>
</li>
<li class=”menu2″ onMouseOver=”this.className='menu1′” onMouseOut=”this.className='menu2′”>社区圈子
<คลาส div =”รายการ”>
<a href=”http://www.onlygrape.com/“>葡提子</a><br />
<a href=”#”>我的首页</a><br />
<a href=”#”>我的日志</a><br />
<a href=”#”>我的相册</a><br />
<a href=”#”>我的收藏</a><br />
</div>
</li>
<li class=”menu2″ onMouseOver=”this.className='menu1′” onMouseOut=”this.className='menu2′”>ของฉัน
<คลาส div =”รายการ”>
<a href=”http://www.onlygrape.com/“>葡提子</a><br />
<a href=”#”>我的相册</a><br />
<a href=”#”>我的收藏</a><br />
</div>
</li>
<li class=”menu2″ onMouseOver=”this.className='menu1′” onMouseOut=”this.className='menu2′”>账户管理
<คลาส div =”รายการ”>
<a href=”http://www.onlygrape.com/“>葡提子</a><br />
<a href=”#”>我的首页</a><br />
<a href=”#”>我的日志</a><br />
<a href=”#”>我的相册</a><br />
<a href=”#”>我的收藏</a><br />
<a href=”#”>我的日志</a><br />
<a href=”#”>我的相册</a><br />
<a href=”#”>我的收藏</a><br />
</div>
</li>
</ul>
</div>
意类似于以下代码的HTML。这是变换的关键。
Example Source Code
คลาส =”เมนู2″
onMouseOver=”this.className='menu1′”
onMouseOut=”this.className='menu2′”
下的看CSS代码：
ตัวอย่างซอร์สโค้ด
ร่างกาย{
สีพื้นหลัง:สีขาว;
ขนาดตัวอักษร:12px;
ตระกูลฟอนต์:Arial, Helvetica, sans-serif;
ระยะขอบ:0px;
ช่องว่างภายใน:0px;
สี:สีขาว;
-
อูล, ลี{
ระยะขอบ:0px;
ช่องว่างภายใน:0px;
-
ลี่{
จอแสดงผล: อินไลน์;
รายการสไตล์: ไม่มี;
รายการสไตล์ตำแหน่ง: ภายนอก;
การจัดตำแหน่งข้อความ: กึ่งกลาง;
แบบอักษรน้ำหนัก: ตัวหนา;
ลอย:ซ้าย;
-
เป็น:ลิงค์{
สี:#336601;
การตกแต่งข้อความ: ไม่มี;
ลอย:ซ้าย;
ความกว้าง:100px;
การขยาย:3px 5px 0px 5px;
-
ก:เยี่ยมชมแล้ว{
สี:#336601;
การตกแต่งข้อความ: ไม่มี;
ลอย:ซ้าย;
การขยาย:3px 5px 0px 5px;
ความกว้าง:100px;
-
ก:โฮเวอร์{
สี:สีขาว;
ลอย:ซ้าย;
การขยาย:3px 3px 0px 20px;
ความกว้าง:88px;
การตกแต่งข้อความ: ไม่มี;
สีพื้นหลัง:#539D26;
-
ก:ใช้งานอยู่{
สี:สีขาว;
ลอย:ซ้าย;
การขยาย:3px 3px 0px 20px;
ความกว้าง:88px;
การตกแต่งข้อความ: ไม่มี;
สีพื้นหลัง:#BD06B4;
-
#นำทาง{
ความกว้าง:600px;
ความสูง:30px;
ขอบล่าง:0px;
การขยาย:0px 5px;
ตำแหน่ง:แน่นอน;
ดัชนี z:1;
ซ้าย: 198px;
ด้านบน: 25px;
-
.รายการ{
ความสูงของบรรทัด:20px;
การจัดแนวข้อความ: ซ้าย;
ช่องว่างภายใน:4px;
แบบอักษรน้ำหนัก:ปกติ;
-
.เมนู1{
ความกว้าง:120px;
ความสูง:อัตโนมัติ;
ระยะขอบ:6px 4px 0px 0px;
เส้นขอบ: 1px ทึบ #9CDD75;
สีพื้นหลัง:#F1FBEC;
สี:#336601;
การขยาย:6px 0px 0px 0px;
เคอร์เซอร์:มือ;
ล้น-y: ซ่อน;
ตัวกรอง:อัลฟ่า(ความทึบ=70);
-moz-ความทึบ:0.7;
-
.เมนู2{
ความกว้าง:120px;
ความสูง:18px;
ระยะขอบ:6px 4px 0px 0px;
สีพื้นหลัง:#F5F5F5;
สี:#999999;
เส้นขอบ:1px ทึบ #EEE8DD;
การขยาย:6px 0px 0px 0px;
ล้น-y: ซ่อน;
เคอร์เซอร์:มือ;
-