Artikel ini memperkenalkan kerangka kerja yang sangat sederhana sehingga tidak bisa lebih sederhana.
Pertama -tama mari kita lihat komposisi halaman kerangka kerja ini. Karena ini adalah program pengujian manual murni, saya hanya membuat beberapa kode di Notepa ++, yang sangat samar. Tapi itu masih berisi konten umum di frameset. Oke, mari kita kembali ke intinya, lihat pertama kali komposisi file.
1.Frame.html berisi struktur kerangka kerja
2.link.html berisi bilah menu di sisi kiri bingkai
3.FirstPage.html berisi baris teks di halaman utama kerangka kerja (saya malas dan saya tidak melakukannya dengan baik)
4.secondpage.html mirip dengan 3 di atas dan digunakan untuk pengujian.
Di bawah ini adalah tangkapan layar (tidak jelas, saya melakukan ini untuk pertama kalinya)
Mari kita lihat kode dalam frame.htm:
<Html>
<head>
</head>
<frameset cols = 159px,*>
<frame name = a1 src = link.html noresize = yes border = 1px scrolling = auto bordercolor = blue>
<frame name = a2 src = firstpage.html>
</fameset>
</html>
Bukankah rasanya sangat sederhana? Ini terutama terdiri dari elemen frameset, dan kemudian atribut cols = 159px,* diatur. Tujuan dari properti ini adalah untuk membagi halaman menjadi 159px dan dua area lainnya. Seperti yang ditunjukkan pada gambar di atas.
Lalu ada tag bingkai. Atribut Cols di atas memiliki beberapa nilai. Elemen <frame> anak di bawah ini juga harus memiliki beberapa nilai yang sesuai. Lalu ada beberapa atribut umum dari <fame>. Termasuk lebar perbatasan, apakah bilah gulir muncul, warna perbatasan, dan apakah pengguna diizinkan untuk mengubah ukurannya. File sumber yang mana, dll.
Kemudian file sumber kedua menunjuk ke FirstPage sebagai tes.
Berikutnya adalah link.html:
<Tipe Gaya = Teks/CSS>
<!-
*{margin: 0; padding: 0; Border: 0;}
tubuh {
Font-Family: Arial, Serif, Serif;
font-size: 12px;
}
#nav {
Lebar: 180px;
Line-Height: 24px;
Daftar-gaya-tipe: tidak ada;
Teks-Align: Kiri;
/*Tentukan tinggi garis dan warna latar belakang seluruh menu UL*/
}
/*=========================================================*//
#nav a {
Lebar: 160px;
Tampilan: Blok;
Padding-left: 20px;
/*Lebar (harus), jika tidak, li di bawah ini akan merusak*/
}
#nav li {
Latar Belakang: #CCC; /*Warna latar belakang direktori tingkat pertama*/
Border-Bottom: #FFF 1PX SOLID; /*Tepi putih di bawah*/
float: kiri;
/*float: kiri, tidak boleh diatur, tetapi tidak dapat ditampilkan secara normal di Firefox.
Mewarisi lebar nav, membatasi lebar, li secara otomatis meluas ke bawah*/
}
#nav li A: hover {
Latar Belakang:#CC0000; /*Warna latar belakang yang ditampilkan oleh direktori tingkat pertama Onmouseover*/
}
#nav a: link {
Warna:#666; Dekorasi Teks: Tidak Ada;
}
#nav A: Dikunjungi {
Warna:#666; Teks-Dekorasi: Tidak Ada;
}
#nav a: hover {
Warna: #fff; Teks-Dekorasi: Tidak Ada; Font-WEIGHT: BOLD;
}
/*============================================================*//
#nav li ul {
List-style: tidak ada;
Teks-Align: Kiri;
}
#nav li ul li {
Latar belakang: #ebebeb; /*Warna latar belakang direktori sekunder*/
}
#nav li ul a {
Padding-left: 10px;
Lebar: 160px;
/* Padding-Left Secondary Directory Karakter Cina bergerak ke kanan, tetapi lebar harus reset = (total lebar-padding-left)*/
}
/*Berikut ini adalah gaya tautan direktori sekunder*/
#nav li ul a: link {
Warna:#666; Dekorasi Teks: Tidak Ada;
}
#nav li ul a: dikunjungi {
Warna:#666; Teks-Dekorasi: Tidak Ada;
}
#nav li ul a: hover {
Warna:#f3f3f3;
Dekorasi Teks: Tidak Ada;
Font-Weight: Normal;
Latar Belakang:#CC0000;
/* Warna font dan warna latar belakang Onmouseover sekunder*/
}
/*=============================================*//
#nav Li: Hover ul {
Kiri: otomatis;
}
#nav li.sfhover ul {
Kiri: otomatis;
}
#isi {
Jelas: Kiri;
}
#nav ul.collapsed {
Tampilan: Tidak Ada;
}
->
#INDUK{
Lebar: 180px;
}
*#INDUK{
Lebar: 100%;
}
</tyle>
<Div ID = Parent>
<ul id = nav>
<li> <a href =#menu = childmenu1 onclick = domenu ('childmenu1')> situs web saya </a>
<ul id = classmenu1 class = collapsed>
<li> <a href = firstpage.html target = a2> halaman pertama </a> </li>
<li> <a href = SecondPage.html target = a2> halaman kedua </a> </li>
</ul>
</li>
<li> <a href =#menu = childmenu2 onclick = domenu ('childmenu2')> akun saya </a>
<ul id = classmenu2 class = collapsed>
<a href =#> pay </a> </li>
<li> <a href =#> manajemen </a> </li>
<li> <a href =#> pembayaran online </a> </li>
<li> <a href =#> Register Remittance </a> </li>
<li> <a href =#> online ditemukan </a> </li>
<li> <a href =#> akun historis </a> </li>
</ul>
</li>
<li> <a href =#menu = childmenu3 onclick = domenu ('childmenu3')> manajemen situs web </a>
<ul id = classmenu3 class = collapsed>
<li> <a href =#> login </a> </li>
<a href =#> manajemen peran </a> </li>
<li> <a href =#> manajemen pengguna </a> </li>
</ul>
</li>
</ul>
</div>
<type skrip = teks/javascript>
<!-
var lastleftid =;
fungsi menufix () {
var obj = document.geteLementById (nav) .geteLementsByTagname (li);
untuk (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 baru ((? |^) sfhover // b),);
}
}
}
Fungsi Domenu (Emid)
{
var obj = document.geteLementById (emid);
obj.classname = (obj.classname.tolowercase () == diperluas? Runtuh: diperluas);
if ((lastleftid! =) && (emid! = lastleftid)) // tutup menu sebelumnya
{
document.geteLementById (lastleftid) .className = runtuh;
}
Lastleftid = emid;
}
fungsi getMenuid ()
{
var menuID =;
var _paramstr = string baru (window.location.href);
var _sharppos = _paramstr.indexof (#);
if (_sharppos> = 0 && _sharppos <_paramstr.length - 1)
{
_paramstr = _paramstr.substring (_sharppos + 1, _paramstr.length);
}
kalau tidak
{
_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 (menuID)
}
}
GetMenuid (); //* Harap perhatikan urutan kedua fungsi ini, jika tidak getMenuid () tidak akan memiliki efek di Firefox
Menufix ();
->
</script>
Ini sebenarnya malas. Ini adalah menu tarik-turun yang dibuat oleh Div+CSS+JS yang ditemukan di internet. Jika Anda tertarik, Anda dapat melihatnya sendiri. Saya merasa bahwa saya dapat menggunakannya sendiri dan tidak apa -apa untuk mengetahui cara memodifikasinya.
Berikut adalah dua halaman tes. Karena bahkan mereka yang tahu sedikit HTML dapat menuliskannya, hanya kode untuk halaman 1 yang diposting di sini:
<Html>
<head>
<Title> halaman pertama </iteme>
<tyle>
</tyle>
</head>
<body>
<h1> halaman pertama </h1>
</body>
</html>
Saya kira sang tuan akan muntah ketika dia melihat ini, dan dia pasti mengatakan itu sangat sampah, tapi dia hanya mencatat hal -hal kecil yang dia buat. Haha, maafkan aku.