บทความนี้แนะนำเฟรมเวิร์กที่ง่ายมากจนไม่สามารถง่ายขึ้นได้
ก่อนอื่นให้ดูที่องค์ประกอบหน้าของเฟรมเวิร์กนี้ เนื่องจากมันเป็นโปรแกรมทดสอบด้วยตนเองอย่างหมดจดฉันเพิ่งสร้างรหัสใน Notepa ++ ซึ่งเป็นร่างมาก แต่มันก็ยังมีเนื้อหาทั่วไปในเฟรม โอเคกลับไปที่จุดก่อนดูที่องค์ประกอบของไฟล์
1.Frame.html มีโครงสร้างของเฟรมเวิร์ก
2.link.html มีแถบเมนูที่ด้านซ้ายของเฟรม
3.FirstPage.html มีบรรทัดข้อความในหน้าหลักของเฟรมเวิร์ก (ฉันขี้เกียจและฉันทำไม่ดี)
4.SecondPage.html คล้ายกับด้านบน 3 และใช้สำหรับการทดสอบ
ด้านล่างเป็นภาพหน้าจอ (ไม่ชัดเจนฉันกำลังทำสิ่งนี้เป็นครั้งแรก)
มาดูรหัสใน frame.htm:
<html>
<head>
</head>
<frameset cols = 159px,*>
<ชื่อเฟรม = a1 src = link.html noresize = ใช่ border = 1px scrolling = auto bordercolor = blue>
<frame name = a2 src = firstPage.html>
</frameset>
</html>
มันไม่ง่ายมากเหรอ? ส่วนใหญ่ประกอบด้วยองค์ประกอบเฟรมเซตและจากนั้นแอตทริบิวต์ cols = 159px ถูกตั้งค่า วัตถุประสงค์ของคุณสมบัตินี้คือการแบ่งหน้าออกเป็น 159px และอีกสองพื้นที่ ดังที่แสดงในภาพด้านบน
จากนั้นมีแท็กเฟรม แอตทริบิวต์ Cols ด้านบนมีหลายค่า องค์ประกอบของเด็ก <เฟรม> ด้านล่างควรมีค่าที่สอดคล้องกันหลายประการ จากนั้นมีคุณลักษณะทั่วไปบางอย่างของ <frame> รวมถึงความกว้างของเส้นขอบไม่ว่าจะเป็นแถบเลื่อนที่ปรากฏสีขอบและไม่ว่าผู้ใช้จะได้รับอนุญาตให้เปลี่ยนขนาดได้หรือไม่ ไฟล์ต้นฉบับคือ ฯลฯ
จากนั้นไฟล์ต้นฉบับที่สองจะชี้ไปที่ FirstPage เป็นการทดสอบ
ถัดไปคือ link.html:
<style type = text/css>
-
*{มาร์จิ้น: 0; padding: 0; ชายแดน: 0;}
ร่างกาย {
Font-Family: Arial, Serif, Serif;
ขนาดตัวอักษร: 12px;
-
#nav {
ความกว้าง: 180px;
ความสูงของสาย: 24px;
ประเภทรายการประเภท: ไม่มี;
TEXT-ALIGN: ซ้าย;
/*กำหนดความสูงของเส้นและสีพื้นหลังของเมนู UL ทั้งหมด*/
-
-
#nav a {
ความกว้าง: 160px;
แสดง: บล็อก;
Padding-Left: 20px;
/*ความกว้าง (ต้อง) มิฉะนั้น li ด้านล่างจะเปลี่ยนรูป*/
-
#nav li {
ความเป็นมา: #CCC; /*สีพื้นหลังของไดเรกทอรีระดับแรก*/
ขอบด้านล่าง: #FFF 1px Solid; /*ขอบสีขาวด้านล่าง*/
ลอย: ซ้าย;
/*ลอย: ซ้ายไม่ควรตั้งค่า แต่ไม่สามารถแสดงได้ตามปกติใน Firefox
การสืบทอดความกว้างของ NAV จำกัดความกว้าง Li ขยายลงโดยอัตโนมัติ*/
-
#nav li a: โฮเวอร์ {
ความเป็นมา:#CC0000; /*สีพื้นหลังที่แสดงโดยไดเรกทอรีระดับแรก OnMouseOver*//
-
#NAV A: LINK {
สี:#666; การตกแต่งข้อความ: ไม่มี;
-
#NAV A: เยี่ยมชม {
สี:#666; การตกแต่งข้อความ: ไม่มี;
-
#nav a: โฮเวอร์ {
สี: #FFF; การตกแต่งข้อความ: ไม่มี; Font-Weight: BOLD;
-
-
#nav li ul {
รายการสไตล์: ไม่มี;
TEXT-ALIGN: ซ้าย;
-
#nav li ul li {
ความเป็นมา: #EBEBEB; /*สีพื้นหลังของไดเรกทอรีรอง*/
-
#nav li ul a {
Padding-Left: 10px;
ความกว้าง: 160px;
/* padding-left directory ตัวละครจีนย้ายไปทางขวา แต่ความกว้างจะต้องรีเซ็ต = (ความกว้างทั้งหมดส่วนซ้าย-ซ้าย)*//
-
/*ต่อไปนี้เป็นรูปแบบการเชื่อมโยงของไดเรกทอรีรอง*/
#nav li ul a: ลิงค์ {
สี:#666; การตกแต่งข้อความ: ไม่มี;
-
#nav li ul a: เยี่ยมชม {
สี:#666; การตกแต่งข้อความ: ไม่มี;
-
#nav li ul a: โฮเวอร์ {
สี:#F3F3F3;
การตกแต่งข้อความ: ไม่มี;
Font-Weight: ปกติ;
ความเป็นมา:#CC0000;
/* สีตัวอักษรและสีพื้นหลังของ onmouseover ทุติยภูมิ*/
-
-
#nav li: โฮเวอร์ ul {
ซ้าย: อัตโนมัติ;
-
#nav li.sfhover ul {
ซ้าย: อัตโนมัติ;
-
#เนื้อหา {
ชัดเจน: ซ้าย;
-
#nav ul.collapsed {
แสดง: ไม่มี;
-
-
#พ่อแม่{
ความกว้าง: 180px;
-
*#พ่อแม่{
ความกว้าง: 100%;
-
</style>
<div id = parent>
<ul id = nav>
<li> <a href =#menu = childMenU1 onclick = domenu ('ChildMenu1')> เว็บไซต์ของฉัน </a>
<ul id = childMenu1 class = ยุบ>
<li> <a href = firstPage.html target = a2> หน้าแรก </a> </li>
<li> <a href = secondpage.html target = a2> หน้าสอง </a> </li>
</ul>
</li>
<li> <a href =#menu = childMenU2 onClick = domenu ('childMenU2')> บัญชีของฉัน </a>
<ul id = childMenu2 class = ยุบ>
<a href =#> จ่าย </a> </li>
<li> <a href =#> การจัดการ </a> </li>
<li> <a href =#> การชำระเงินออนไลน์ </a> </li>
<li> <a href =#> register remittance </a> </li>
<li> <a href =#> พบออนไลน์ </a> </li>
<li> <a href =#> บัญชีประวัติศาสตร์ </a> </li>
</ul>
</li>
<li> <a href =#menu = childMenu3 onClick = domenu ('childMenu3')> การจัดการเว็บไซต์ </a>
<ul id = childMenu3 class = ยุบ>
<li> <a href =#> เข้าสู่ระบบ </a> </li>
<a href =#> การจัดการบทบาท </a> </li>
<li> <a href =#> การจัดการผู้ใช้ </a> </li>
</ul>
</li>
</ul>
</div>
<script type = text/javascript>
-
var lastleftid =;
ฟังก์ชั่น menufix () {
var obj = document.getElementById (NAV) .getElementsByTagname (LI);
สำหรับ (var i = 0; i <obj.length; i ++) {
obj [i] .onmouseover = function () {
this.className + = (this.className.length> 0? :) + sfhover;
-
obj [i] .onmousedown = function () {
this.className + = (this.className.length> 0? :) + sfhover;
-
obj [i] .onmouseup = function () {
this.className + = (this.className.length> 0? :) + sfhover;
-
obj [i] .onmouseout = function () {
this.className = this.className.replace (ใหม่ regexp ((? |^) sfhover // b),);
-
-
-
ฟังก์ชั่น domenu (emid)
-
var obj = document.getElementById (emid);
obj.className = (obj.classname.toLowerCase () == ขยาย?
if ((lastleftid! =) && (emid! = lastleftid)) // ปิดเมนูก่อนหน้า
-
document.getElementById (lastleftId) .className = ยุบ;
-
Lastleftid = emid;
-
ฟังก์ชั่น getMenuid ()
-
var menuid =;
var _paramstr = สตริงใหม่ (window.location.href);
var _sharppos = _paramstr.indexof (#);
if (_sharppos> = 0 && _sharppos <_paramstr.length - 1)
-
_paramstr = _paramstr.substring (_sharppos + 1, _paramstr.length);
-
อื่น
-
_paramstr =;
-
if (_paramstr.length> 0)
-
var _paramarr = _paramstr.split (&);
if (_paramarr.length> 0)
-
var _paramkeyval = _paramarr [0] .split (=);
if (_paramkeyval.length> 0)
-
menuid = _paramkeyval [1];
-
-
-
if (menuid! =)
-
Domenu (เมนู MENID)
-
-
getMenuid (); //* โปรดให้ความสนใจกับคำสั่งของฟังก์ชั่นทั้งสองนี้มิฉะนั้น getMenuid () จะไม่มีผลกระทบใด ๆ ใน Firefox
menufix ();
-
</script>
นี่เป็นเรื่องขี้เกียจจริงๆ มันเป็นเมนูแบบเลื่อนลงที่ทำโดย Div+CSS+JS ที่พบบนอินเทอร์เน็ต หากคุณสนใจคุณสามารถดูด้วยตัวเอง ฉันรู้สึกว่าฉันสามารถใช้มันเองและมันก็โอเคที่จะรู้วิธีแก้ไข
นี่คือสองหน้าทดสอบ เนื่องจากแม้แต่ผู้ที่รู้ว่า HTML เล็กน้อยก็สามารถเขียนได้มีเพียงรหัสสำหรับหน้า 1 เท่านั้นที่โพสต์ที่นี่:
<html>
<head>
<title> หน้าแรก </title>
<style>
</style>
</head>
<body>
<H1> หน้าแรก </h1>
</body>
</html>
ฉันเดาว่าอาจารย์จะอาเจียนเมื่อเขาเห็นสิ่งนี้และเขาต้องบอกว่ามันเป็นถังขยะมาก แต่เขาเพิ่งบันทึกสิ่งเล็ก ๆ น้อย ๆ ที่เขาทำ ฮ่าฮ่ายกโทษให้ฉัน