ภาษาไทย
โค้ดเอฟเฟกต์พิเศษของหน้าเว็บ: เมนูแบบเลื่อนลงของหน้าเว็บที่สร้างด้วย CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/ DTD/xhtml11.dtd " [ <!ELEMENT a (#PCDATA | ตาราง)* > ]> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head > <meta http- equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> <title>เมนูแบบเลื่อนลง Pure CSS เข้ากันได้กับ IE และ FF</title> <style type="text/css"> body {color:#fff;} #wrapper {color:#000;} .red {color:#c00;} #info {margin-top:20px;} #info h1 {font- ขนาด: 3em; text-align: center; font-family: จอร์เจีย, "times new roman", serif;} #head {height:145px; border:0;} #positioner 1px; z-index:100; } #ads {position:relative; z-index:10;} .menu {display:none;} #noniemenu {ตำแหน่ง:สัมบูรณ์;} #noniemenu .holder ul {padding:0; :0;} #noniemenu .holder ul li {list-style-type: none;} #noniemenu .holder li {} #noniemenu .holder li ul {แสดง: none;} #noniemenu .holder li:hover > ul#a3 {display:block; position:absolute ; left:105px; margin-top:-20px; border:1px solid #000;} #noniemenu .bold {แบบอักษร:bold;} #noniemenu .ผู้ถือ fff; width:104px; height: 18px; display:block; overflow:hidden; :auto; } #noniemenu a.outer:visited { color:#fff; line-height:18px; การตกแต่ง: ไม่มี; ตระกูลฟอนต์: verdana, arial, sans-serif; } #noniemenu a.outer:hover { พื้นหลัง:#697210; overflow:visible; ภายใน #noniemenu: เยี่ยมชม { display:block; width:104px; height:18px; border-bottom:1px solid #000; #eee; text-align:center ; } #noniemenu a.second {font-weight:bold;} #noniemenu a.inner:hover { พื้นหลัง:#add; } </style> <!--[ถ้า lte IE 6 ]> <style type="text /css"> body {margin-top:-8px;} #head {height:147px;} #noniemenu {display:none;} .menu {display:block ตำแหน่ง:absolute;} .menu a.outer, .menu a.outer:visited { สี:#fff; ความสูง:18px; -align:center; float:left ; text-family: verdana, arial, sans-serif; โฮเวอร์ { พื้นหลัง:#697210; ล้น :visible; } .menu a.inner, .menu :visited { display:block; width :102px; height:18px; border-bottom:1px solid #000; ข้อความ-การตกแต่ง:none; :10px; text-align:center ; } .menu:hover { พื้นหลัง:#add; } .menu a.outer table.first a.second { ความสูง:18px; font-weight:bold; } .เมนู a.outer table.first a.second:hover { ตำแหน่ง:สัมพัทธ์; มองเห็นได้; } .menu a.outer table.first a.second:hover top :-2px; left:102px; border-collapse:collapse; พื้นหลัง:#eee; border:1px solid #000; lte IE 6]> <style> #ads {display:none;} #adsie {clear:both; text-align:center; width:750px; margin-top:10px;} </style> <![endif]- -> </head> <body > <div id="wrapper"> <div id="head"> <div id="positioner"> <div class="menu"> <a class="outer" href= "../menu/index. html">การสาธิต <table class="first"><tr><td> <a class="inner" href="../menu/zero_dollars.html" title="ศูนย์ หน้าโฆษณาดอลลาร์">ศูนย์ดอลลาร์</a> <a class="inner" href="../menu/embed.html" title="การตัดข้อความรอบรูปภาพ">การตัดข้อความ</a> <a class=" inner" href="../ menu/form.html" title="Styling forms">รูปแบบที่มีสไตล์</a> <a class="inner" href="../menu/nodots.html" title="Removing active/focus borders">active focus </a> <a class="inner Second" href="../menu/hover_click.html" title="Hover/click โดยไม่มี active/focus borders">HOVER/CLICK > <table><tr><td > <a class="inner" href="../menu/form.html" title="Styling forms">รูปแบบที่กำหนดสไตล์</a> <a class="inner" href= "../menu/nodots. html" title="การลบเส้นขอบที่ใช้งานอยู่/โฟกัส">โฟกัสที่ใช้งานอยู่</a> <a class="inner" href="../menu/hover_click.html" title="Hover/ คลิกโดยไม่มีเส้นขอบที่ใช้งานอยู่/โฟกัส">โฮเวอร์/คลิก</a> </td></tr></table> </a> <a class="inner" href="../menu/shadow_boxing.html " title="Multi-position drop shadow">ชาโดว์บ็อกซิ่ง</a> <a class="inner" href="../menu/old_master.html" title="Image Map for detail">แผนที่รูปภาพ</ a> <a class="inner " href="../menu/bodies.html" title="สนุกกับภาพพื้นหลัง">พื้นหลังที่สนุกสนาน</a> <a class="inner" href="../menu /fade_scroll.html" title=" fade-out scrolling">การเลื่อนแบบจาง</a> <a class="inner" href="../menu/em_images.html" title="em size image comparison">em size รูปภาพ</a> </td ></tr></table> </a> <a class="outer" href="index.html">เมนู <table class="first"><tr><td > <a class="inner" href="spies.html" title="a coded list of spies">เมนูสายลับ</a> <a class="inner" href="vertical.html" title="a แนวนอน เมนูแนวตั้ง">เมนูแนวตั้ง</ a> <a class="inner" href="expand.html" title="an ขยายรายการที่ไม่เรียงลำดับ">รายการขยาย</a> <a class="inner" href="enlarge .html" title="an unordered list with link image">ลิงก์รูปภาพ</a> <a class="inner" href="cross.html" title="non-rectangle links">ไม่ใช่รูปสี่เหลี่ยมผืนผ้า</a> <a class="inner" href ="jigsaw.html" title="jigsaw links">ลิงก์จิ๊กซอว์</a> <a class="inner" href="circles.html" title="ลิงก์แบบวงกลม">ลิงก์แบบวงกลม </a> </td> </tr></table> </a> <a class="outer" href="../layouts/index.html">เค้าโครง <table class="first">< tr><td> <a class ="inner" href="../layouts/bodyfix.html" title="Cross browserfixedlay">แก้ไข 1</a> <a class="inner" href=". ./layouts/body2.html" title="รูปแบบคงที่ของเบราว์เซอร์ข้าม">แก้ไข 2</a> <a class="inner" href="../layouts/body4.html" title="รูปแบบคงที่ของเบราว์เซอร์ข้าม" >แก้ไข 3</a> < a class="inner" href="../layouts/body5.html" title="รูปแบบคงที่ของเบราว์เซอร์ข้าม">แก้ไข 4</a> <a class="inner" href= "../layouts/minimum. html" title="รูปแบบความกว้างขั้นต่ำที่เรียบง่าย">ความกว้างขั้นต่ำ</a> </td></tr></table> </a> <a class="outer" href ="../boxes/index .html">กล่อง <table class="first"><tr><td> <a class="inner" href="../boxes/scrollbars.html" title="Left แถบเลื่อน">เลื่อนไปทางซ้าย</ a> <a class="inner" href="../boxes/floatfix.html" title="IE6 3px float fix">แก้ไข IE6 3px</a> <a class=" inner" href="../ Boxes/snazzy.html" title="Snazzy borders">เส้นขอบสุดเก๋</a> <a class="inner" href="../boxes/krazy.html" title="Krazy Korners">กราซี่คอร์เนอร์</a > <a class="inner" href="../boxes/outside.html" title="Percentage PLUSpixels">% PLUS พิกเซล</a> <a class="inner" href="../boxes/ minwidth.html" title="min-width for IE">IE ความกว้างขั้นต่ำ</a> <a class="inner" href="../boxes/minheight.html" ชื่อ ="min-height สำหรับ IE" >IE ความสูงขั้นต่ำ</a> </td></tr></table> </a> <a class="outer" href="../mozilla/index. html">MOZILLA <table class= "first"><tr><td> <a class="inner" href="../mozilla/dropdown.html" title="เมนูแบบเลื่อนลง">เมนูแบบเลื่อนลง< /a> <a class=" inner" href="../mozilla/cascade.html" title="A cascading menu">เมนูแบบเรียงซ้อน</a> <a class="inner" href="../mozilla /content.html" title=" การใช้เนื้อหา:">เนื้อหา:</a> <a class="inner" href="../mozilla/moxbox.html" title=":hover ใช้กับ div">mozzie กล่อง</a> <a class ="inner" href="../mozilla/rainbow.html" title="ฉันสามารถสร้างสายรุ้ง">กล่องสีรุ้ง</a> <a class="inner" href=" ../mozilla/snooker.html " title="Snooker cue">คิวสนุกเกอร์</a> <a class="inner" href="../mozilla/target.html" title="Target Practise">ฝึกซ้อมเป้าหมาย </a> <a class= "inner" href="../mozilla/splittext.html" title="ส่วนหัวแบบทูโทน">ส่วนหัวแบบทูโทน</a> <a class="inner" href=".. /mozilla/shadow_text.html" title ="ข้อความเงา">ข้อความเงา</a> </td></tr></table> </a> <a class="outer" href="../ie /index.html">EXPLORER < table class="first"><tr><td> <a class="inner" href="../ie/exampleone.html" title="ตัวอย่างหนึ่ง">ตัวอย่างหนึ่ง< /a> <a class=" inner" href="../ie/weft.html" title="Weft fonts">แบบอักษรพุ่ง</a> <a class="inner" href="../ie/ exampletwo.html" title="จัดแนวตั้ง">จัดแนวตั้ง</a> </td></tr></table> </a> <a class="outer" href="../opacty/index. html">ความทึบ <table class= "first"><tr><td> <a class="inner" href="../opacty/colors.html" title="วงล้อสี">สีทึบแสง</a> <a class="inner" href ="../opacty/picturemenu.html" title="a menu used opacity">เมนูทึบแสง</a> <a class="inner" href="../opacty/png .html" title="partial opacity ">ความทึบบางส่วน</a> <a class="inner" href="../opacty/png2.html" title="partial opacity II">ความทึบบางส่วน II</a> </td></tr> </table> </a> </div> <div id="noniemenu"> <div class="holder"> <ul> <li><a class="outer" href ="../menu/index .html">การสาธิต</a></li> <li><a class="inner" href="../menu/zero_dollars.html" title="โฆษณาศูนย์ดอลลาร์ หน้า">ศูนย์ดอลลาร์</a ></li> <li><a class="inner" href="../menu/embed.html" title="การตัดข้อความรอบรูปภาพ">การตัดข้อความ</a> </li> <li>< a class="inner" href="../menu/form.html" title="Styling forms">รูปแบบที่มีสไตล์</a></li> <li><a class= "inner" href=".. /menu/nodots.html" title="Removing active/focus borders">active focus</a></li> <li><a class="inner Second" href=". ./menu/hover_click.html" title="โฮเวอร์/คลิกโดยไม่มีเส้นขอบที่ใช้งานอยู่/โฟกัส">โฮเวอร์/คลิก ></a> <ul id="a3"> <li><a class="inner" href= "../menu/form.html" title="Styling forms">แบบฟอร์มที่กำหนดสไตล์</a></li> <li><a class="inner" href="../menu/nodots.html" ="การลบเส้นขอบที่ใช้งานอยู่/โฟกัส">โฟกัสที่ใช้งานอยู่</a></li> <li><a class="inner" href="../menu/hover_click.html" title="Hover/click โดยไม่มีการใช้งาน /focus borders">โฮเวอร์/คลิก </a></li> </ul> </li> <li><a class="inner" href="../menu/shadow_boxing.html" title="Multi -position drop shadow">เงามวย </a></li> <li><a class="inner" href="../menu/old_master.html" title="Image Map สำหรับข้อมูลโดยละเอียด">แผนผังรูปภาพ </a></li> <li><a class="inner" href="../menu/bodies.html" title="สนุกกับภาพพื้นหลัง">พื้นหลังที่สนุกสนาน</a></li> < li><a class="inner " href="../menu/fade_scroll.html" title="fade-out scrolling">การเลื่อนจางลง</a></li> <li><a class="inner" href="../menu/ em_images.html" title="em size image comparison">รูปภาพขนาด em</a></li> </ul> </div> <div class="holder"> <ul > <li><a class= "outer" href="index.html">เมนู</a></li> <li><a class="inner" href="spies.html" title="a coded รายการสายลับ">เมนูสายลับ</a></li> <li><a class="inner" href="vertical.html" title="ahorizontal แนวตั้งเมนู">เมนูแนวตั้ง</a></li > <li><a class= "inner" href="expand.html" title="an การขยายรายการที่ไม่เรียงลำดับ">การขยายรายการ</a></li> <li><a class="inner" href=" ขยาย.html" title="รายการที่ไม่เรียงลำดับพร้อมรูปภาพลิงก์">ลิงก์รูปภาพ</a></li> <li><a class="inner" href="cross.html" title="ลิงก์ที่ไม่ใช่รูปสี่เหลี่ยมผืนผ้า" >ไม่ใช่รูปสี่เหลี่ยมผืนผ้า</a> </li> <li><a class="inner" href="jigsaw.html" title="jigsaw links">ลิงก์ตัวต่อ</a></li> <li>< a class="inner" href= "circles.html" title="circular links">ลิงก์แบบวงกลม</a></li> </ul> </div> <div class="holder"> <ul> < li><a class="outer " href="../layouts/index.html">เค้าโครง</a></li> <li><a class="inner" href="../layouts/bodyfix .html" title="รูปแบบคงที่ของเบราว์เซอร์ข้าม">แก้ไข 1</a></li> <li><a class="inner" href="../layouts/body2.html" title="แก้ไขเบราว์เซอร์ข้าม รูปแบบ">แก้ไข 2</a ></li> <li><a class="inner" href="../layouts/body4.html" title="รูปแบบคงที่ของเบราว์เซอร์ข้าม">แก้ไข 3</a> </li> <li>< a class="inner" href="../layouts/body5.html" title="รูปแบบคงที่ของเบราว์เซอร์ข้าม">แก้ไข 4</a></li> <li><a class="inner" href=" ../layouts/minimum.html" title="รูปแบบความกว้างขั้นต่ำที่เรียบง่าย">ความกว้างขั้นต่ำ</a></li> </ul> </div> <div class=" ผู้ถือ"> <ul> <li ><a class="outer" href="../boxes/index.html">กล่อง</a></li> <li><a class="inner" href= "../boxes/scrollbars. html" title="แถบเลื่อนซ้าย">เลื่อนซ้าย</a></li> <li><a class="inner" href="../boxes/floatfix.html" title="IE6 3px float fix">แก้ไข IE6 3px</a></li> <li><a class="inner" href="../boxes/snazzy.html" title="เส้นขอบโก๋">โก๋ เส้นขอบ</a></li > <li><a class="inner" href="../boxes/krazy.html" title="Krazy Korners">krazy korners</a></li> <li ><a class="inner" href="../boxes/outside.html" title="Percentage PLUSpixels">% PLUS พิกเซล</a></li> <li><a class="inner" href ="../boxes/minwidth .html" title="min-width for IE">IE ความกว้างขั้นต่ำ</a></li> <li><a class="inner" href="../boxes /minheight.html" title=" min-height สำหรับ IE">IE ความสูงขั้นต่ำ</a></li> </ul> </div> <div class="holder"> <ul> <li>< a class="outer" href= "../mozilla/index.html">MOZILLA</a></li> <li><a class="inner" href="../mozilla/dropdown.html" title="เมนูแบบเลื่อนลง" >เมนูแบบเลื่อนลง</a></li> <li><a class="inner" href="../mozilla/cascade.html" title="เมนูแบบเรียงซ้อน"> เมนูเรียงซ้อน</a></ li> <li><a class="inner" href="../mozilla/content.html" title="การใช้เนื้อหา:">เนื้อหา:</a></li> <li><a class=" inner" href="../mozilla/moxbox.html" title=":hover ใช้กับ div">กล่อง mozzie</a></li> <li><a class= "inner" href=".. /mozilla/rainbow.html" title="ฉันสามารถสร้างสายรุ้ง">กล่องสีรุ้ง</a></li> <li><a class="inner" href=".. /mozilla/snooker.html" title ="ไม้คิวสนุกเกอร์">ไม้คิวสนุกเกอร์</a></li> <li><a class="inner" href="../mozilla/target.html" title="Target ฝึกฝน">การฝึกกำหนดเป้าหมาย</a ></li> <li><a class="inner" href="../mozilla/splittext.html" title="หัวเรื่องแบบทูโทน">หัวเรื่องแบบทูโทน</a> </li> <li>< a class="inner" href="../mozilla/shadow_text.html" title="ข้อความเงา">ข้อความเงา</a></li> </ul> </div > <div class="holder" > <ul> <li><a class="outer" href="../ie/index.html">นักสำรวจ</a></li> <li><a คลาส ="inner" href=". ./ie/exampleone.html" title="ตัวอย่างหนึ่ง">ตัวอย่างหนึ่ง</a></li> <li><a class="inner" href="../ie /weft.html" title=" แบบอักษรพุ่ง">แบบอักษรพุ่ง</a></li> <li><a class="inner" href="../ie/exampletwo.html" title="Vertical align" >จัดแนวตั้ง</a>< /li> </ul> </div> <div class="holder"> <ul> <li><a class="outer" href="../opacty/index. html">ความทึบ</a> </li> <li><a class="inner" href="../opacty/colors.html" title="วงล้อสี">สีทึบแสง</a></li > <li><a class= "inner" href="../opacty/picturemenu.html" title="เมนูที่ใช้ความทึบ">เมนูทึบแสง</a></li> <li><a class=" inner" href="../ opacty/png.html" title="partial opacity">ความทึบบางส่วน</a></li> <li><a class="inner" href="../opacty/png2 .html" title="partial opacity II">ความทึบบางส่วน II</a></li> </ul> </div> </div> </div> </div> <!-- ปลายส่วนหัว - -> <div id="info "> <h2>วางความสนุกลง</h2> <h1>ไม่มี JAVASCRIPT</h1> <h1>แค่ CSS!!!</h1> <h1 class="red">ตอนนี้ ด้วย CASCADE</h1> </h1> div> </div> </body> </html>
