Wulin.com (www.vevb.com) Artikel Pendahuluan: Keterampilan Produksi Halaman Web: XHTML, CSS dan JS.
Detail 1 …………………………………………………………………………………………………………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………………1. Ketika teks dan gambar berada pada baris yang sama, teks perlu diselaraskan dengan bagian bawah gambar, dan perlu ditulis seperti ini:
<li> Ingat kata sandi <img src = align = gaya bawah = margin-bottom: -4px/> </li>
2. Ketika teks dan gambar berada di baris yang sama, teks dan gambar perlu dipusatkan dan ditulis seperti ini:
<li> Ingat kata sandi <img src = static/img/xyx.jpg align = tengah/> </li>
3. Ubah editor yang dibuka oleh menu kode sumber IE View
Buka Editor Registry dan masukkan Regedit di Start-Run
Temukan lokasi berikut: hkey_local_machinesoftwaremicrosoft internet explorerview name sourceitoreditor Modifikasi data default ke d: Program FileseMEditorEditor.exe
Beralih ke IE untuk melihat kode sumber dan Anda dapat melihat efeknya.
Jika item nama editoredor sumber tampilan tidak memilikinya, Anda dapat membuatnya sendiri.
4. Secara otomatis memaksimalkan jendela dan tambahkan antara <body> dan </body>:
<Bahasa skrip = javascript>
setTimeout ('top.moveto (0,0)', 5000);
setTimeout ('top.resizeto (screen.availwidth, screen.availheight)', 5000);
</script>
5. Window.Opener sebenarnya adalah bentuk induk dari formulir yang dibuka dengan window.open.
Misalnya, dalam bentuk induk induk, lulus window.open (subform.html), lalu di subform.html window.opener
Ini berarti Parentform, Anda dapat mengatur nilai formulir induk atau memanggil metode JS dengan cara ini.
1, window.opener.test (); --- Panggil metode test () dalam bentuk induk;
2. Jika Window.Opener ada, atur nilai StockBox di Parentform.
if (window.opener &&! window.opener.closed)
{
window.opener.document.parentform.stockbox.value = simbol;
}
6. Cara menyegarkan halaman
Cara menyegarkan halaman dalam javascript:
1 History.go (0)
2 location.reload ()
3 Lokasi = Lokasi
4 Lokasi.ASSIGN (Lokasi)
5 Document.ExecCommand ('Refresh')
6 window.navigate (lokasi)
7 Lokasi.Replace (Lokasi)
8 document.url = location.href
Cara menyegarkan halaman secara otomatis:
1. Refresh halaman otomatis: Tambahkan <meta http-equiv = refresh content = 20> ke area <head>
2. Lompatan Halaman Otomatis: Tambahkan <meta http-equiv = refresh content = 20; url = http: //www.webjx.com> ke area <wead>
3.JS secara otomatis menyegarkan halaman
<bahasa skrip = javascript>
fungsi myrefresh ()
{
window.location.reload ();
}
setTimeout ('myrefresh ()', 1000); // Tentukan refresh sekali dalam 1 detik
</script>
4. JS Refresh Framework
a) Segarkan halaman yang berisi bingkai untuk
<bahasa skrip = javascript>
parent.location.reload ();
</script>
b) Jendela anak menyegarkan jendela induk
<bahasa skrip = javascript>
self.opener.location.reload ();
</script>
(atau <a href = javascript: opener.location.reload ()> refresh </a>)
c) Segarkan halaman bingkai lain
<bahasa skrip = javascript>
Parent.Antere frameid.location.reload ();
</script>
7. Jika Anda telah menggunakan peretasan CSS, Anda harus tahu bahwa penamaan dengan garis bawah adalah peretasan. Jika Anda menggunakan _style, itu dapat membuat sebagian besar browser di luar yaitu mengabaikan definisi gaya ini, jadi menggunakan _ sebagai pemisah saat penamaan tidak distandarisasi. Pesan kesalahan akan muncul saat melakukan pemeriksaan CSS.
8. IE metode penulisan anotasi bersyarat
<!-[if! Ie]> Itu bisa dikenali kecuali yaitu <! [Endif]->
<!-[jika yaitu]> semua IE dapat diidentifikasi <! [Endif]->
<!-[jika yaitu 5.0]> Hanya IE 5.0 yang dapat mengenali <! [Endif]->
9. Metode Penulisan Hack CSS
Tipe pertama:
.div {
Latar belakang: oranye;
*Latar Belakang: Hijau! Penting;
*latar belakang: biru;
}
Tipe kedua:
.div {
margin: 10px;
*margin: 15px;
_margin: 15px;
}
Tipe ketiga:
#div {color: #333; }
*+html #div {color: #999; }
* html #div {color: #666; }
Detail 2 ……………………………………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………………
1. IE6 dan berikut ini tidak mengenali: melayang-layang kelas semu di luar tag. Di Firefox, IE7, efeknya dapat dicapai dengan benar. Larutan:
#show li.s1 {border: 1px solid #ff9900; Latar belakang:#454242;}
#show li.s2 {border: 1px solid #d9d8d8; Latar belakang:#312e2e;}
<li> </li>
2. Setel haslayout untuk elemen
Banyak masalah IE6 (atau IE7) dapat diselesaikan dengan menetapkan nilai haslayout. Cara termudah untuk mengatur nilai haslayout untuk suatu elemen adalah dengan menambahkan tinggi atau lebar CSS (tentu saja, zoom juga dapat digunakan, tetapi ini bukan bagian dari CSS). Misalnya, diatur ke ketinggian: 1%. Jika elemen induk tidak mengatur tinggi, ketinggian fisik elemen tidak akan berubah, tetapi sudah memiliki properti haslayout.
3. Karakter muncul berulang kali di IE6
Pastikan tampilan itu: inline diatur ke elemen mengambang;
Gunakan margin-kanan: -3px dalam elemen mengambang;
4. Prioritas gaya
1. Gaya inline [1.0.0.0]
2. ID Selector [0.1.0.0]
3. Kelas, atribut, pemilih kelas semu [0.0.1.0]
4. Tag elemen, pemilih elemen semu [0.0.0.1]
5. Metode Penulisan CSS yang berpusat secara vertikal satu elemen
#exm {
Posisi: Absolute;
Kiri: 50%;
Atas: 50%;
z-index: 1;
Lebar: 200px;
Tinggi: 100px;
margin-kiri: -100px;
margin-top: -52px;
}
6. Zoom: Normal | nomor
Mengatur atau mengambil rasio penskalaan objek. Menetapkan atau mengubah nilai properti ini untuk suatu objek yang telah diberikan akan menyebabkan konten di sekitar objek mengalir lagi. Meskipun properti ini tidak dapat diwariskan, itu mempengaruhi semua objek anak dari objek (anak -anak).
7. Ketika gambar dan teks disusun berdampingan, teks gambar harus dipusatkan secara vertikal:
1> Setel-height: ke ketinggian gambar, atau ketinggian elemen induk gambar.
2> lalu atur vertikal-Align: tengah di css gambar;
8. Saat elemen LI berisi elemen IMG, kosong muncul di bawah IE6
Solusi 1
Buat Li mengambang dan atur IMG ke elemen level blok
Solusi 2
Set UL's Font-size: 0;
Solusi 3
Atur vertikal-Align IMG: Bawah;
Solusi 4
Atur margin -bottom IMG: -5px;
Detail 3 …………………………………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………………
1. Gaya hyperlink yang telah dikunjungi dengan mengklik tidak memiliki arwah dan aktif
Solusi: Ubah Urutan Atribut CSS: LVHA
2. Bidang panjang kontinu di bawah FF tidak dapat dibungkus secara otomatis
Solusi: Word-Wrap: Break-word; overflow: tersembunyi;
3. Ketinggian wadah induk tidak dapat beradaptasi di bawah FF
Solusi: Bersihkan elemen anak yang mengambang
4. Kesenjangan dihasilkan di bawah gambar di bawah IE
Solusi: Tentukan IMG sebagai tampilan: blok, atau vertikal-selaras sebagai atas/bawah/tengah/teks-bottom
Tentukan ukuran font wadah induk ke nol, ukuran font: 0
5. Ada celah 3px antara elemen mengambang di bawah IE6 dan elemen non-floating yang berdekatan.
Solusi: Elemen non-mengambang yang berdekatan juga diatur ke float;
Elemen mengambang didefinisikan relatif terhadap IE6_Margin-Right: -3px;
6. Konten LI ditampilkan dalam elipsis setelah terlalu lama.
Solusi: SPACE Putih: NowRap; (Teks tidak membungkus) teks-overflow: ellipsis; -o-text-overflow: ellipsis; meluap: tersembunyi;
7. Teks tidak dapat dipusatkan secara vertikal
Solusi: Tinggi garis dan tinggi kontainer sama-sama height = tinggi;
8. Kotak input teks tidak dapat disejajarkan dengan teks yang berdekatan.
Solusi: Atur kotak input teks vertikal-Align: tengah;
9. IE mengatur gaya batang gulir
Larutan:
tubuh{
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color: #fff;
scrollbar-shadow-color: #eeeeee;
scrollbar-3dlight-color: #eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color: #ffff;
scrollbar-darkshadow-color: #fff;
}
10. IE6 tidak dapat mendefinisikan kontainer dengan ketinggian 1 px
Solusi: overflow: Tersembunyi
Zoom: 0.8
Line-Height: 1px
Detail 4 ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………………
1. Biarkan lapisan ditampilkan pada flash
Solusi: Set TransParent <Param Name = WMode Value = Transparent /> atau <param name = WMode value = OPAQUE /> untuk flash
2. Buat lapisan berpusat secara vertikal di browser
Solusi: Gunakan persentase penentuan posisi absolut, dengan nilai negatif dari tambalan eksternal.
Posisi: Absolute;
Atas: 50%;
Kiri: 50%;
Margin: -100px Auto Auto -100px;
Lebar: 200px;
Tinggi: 200px;
3. Tambahkan ke favorit
Solusi: <Tipe Script = Teks/JavaScript>
// <! [CDATA [
function bookmark () {
var title = document.title
var url = document.location.href
if (window.sideebar) window.sideebar.addpanel (judul, url,);
lain if (window.opera && window.print) {
var mbm = document.create_r_relement_x ('a');
mbm.setAttribute ('rel', 'sidebar');
mbm.setAttribute ('href', url);
mbm.setAttribute ('judul', judul);
mbm.click ();}
lain jika (document.all) window.external.addfavorite (url, judul);
}
//]]>
</script>
<a href = javascript: bookmark ()> Tambahkan ke favorit </a>
Detail 5 ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………………
1. Cara Menulis Daftar Berita Umum:
<ul class = list>
<li> <span> 6 Juni 2006 </span> <a href =#> judul berita 01 </a> </li>
<li> <span> 6 Juni 2006 </span> <a href =#> judul berita 02 </a> </li>
<li> <span> 6 Juni 2006 </span> <a href =#> Judul berita 03 </a> </li>
<li> <span> 6 Juni 2006 </span> <a href =#> Judul berita 04 </a> </li>
</ul>
2.ie mengimplementasikan halaman latar belakang halaman (FF dan chrome tidak mendukung)
Dari atas ke bawah:
body {filter: progid: dximagetransform.microsoft.gradient (gradientType = 0, startColorStr =#ffffff, endcolorStr =#000000);}
Kiri kiri atas ke kanan bawah:
Filter: alpha (style = 1, opacity = 25, finishopacity = 100, startx = 50, finishx = 100, starty = 50, finishy = 100); latar belakang-warna: SkyBlue;}
Dari kiri ke kanan
body {filter: progid: dximagetransform.microsoft.gradient (gradientType = 1, startColorStr =#ffffff, endcolorStr =#000000);}
Dari atas ke bawah
style = filter: progid: dximagetransform.microsoft.gradient (gradientType = 0, startColorStr = biru, endcolorstr = white);
3. Gaya hover mencapai berbagai efek dan dapat digunakan secara fleksibel
#outer a {border: 1px solid #069;}
#outer A: hover {border: 1px putus #c00;}
4.border: tidak ada; perbedaan dari perbatasan: 0
Perbedaan kinerja teoretis:
Perbatasan: 0; Set Border ke 0 piksel meskipun tidak terlihat pada halaman, sesuai dengan nilai default perbatasan, browser masih membuat perbatasan/warna perbatasan, yaitu, nilai memori telah ditempati. Perbatasan: Tidak Ada; Set Border to None, yaitu, tidak ada tindakan rendering ketika browser tidak ada, yaitu, nilai memori tidak akan dikonsumsi.
Perbedaan kompatibilitas:
Perbedaan kompatibilitas hanya untuk browser IE6, IE7, Tag Tombol, Input, dan ini akan terjadi di bawah tema XP Win, Win7, dan Vista. Ketika perbatasan tidak ada, tampaknya perbatasan yang tidak valid untuk IE6/7 masih ada. Ketika perbatasan adalah 0, rasanya lebih efektif daripada tidak sama sekali. Semua browser secara konsisten menyembunyikan perbatasan.
Bagaimana membuat perbatasan: tidak ada; sepenuhnya kompatibel? Cukup tambahkan atribut latar belakang ke pemilih yang sama
5.CSS mengimplementasikan tata letak kontur multi-kolom, margin dalam yang positif dan margin luar negatif
Terapkan gaya untuk setiap kolom yang perlu mencapai kontur: .e {padding-bottom: 32767px; margin-bottom: -32767px;}
6. Posisi: Kerabat; Penggunaan Khusus? ? ? ?
* {margin: 0; padding: 0; font: normal 12px/25px songti;}
body {latar belakang:#f8f8f8;}
ul {List-style: none; width: 300px; tinggi: 25px; margin: 20px auto;}
Li {float: left; lebar: 86px; tinggi: 25px; teks -align: tengah; margin: 0 -5px; display: inline;}
A {Color: #FFFFF; float: kiri; lebar: 86px; tinggi: 25px; atas: 0; kiri: 0; latar belakang: url (***. gif) tengah tengah tanpa-repeat;}
A: Hover {color:#000; latar belakang: url (***. gif) 0 0 no-repeat; lebar: 86px; posisi: relatif;}
Detail 6 …………………………………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………………
1. Innertext: konten dari posisi awal ke posisi akhir, tidak termasuk tag innerHTML
outerhtml: berisi innerHtml dan tag
<Div id = test> <span> test1 </span> test2 </div>
test.innerText: test1 test2
test.innerhtml: <span> test1 </span> test2
test.outerHtml: <div id = test> <span> test1 </span> test2 </div>
2. Number (): Ketika string yang berisi karakter non-numerik digunakan sebagai parameter, hasilnya adalah NAN
ParseInt (): Konversi string menjadi angka serendah mungkin dari kiri ke kanan sampai berhenti ketika non-digit ditemui
isnan (): return true ketika parameter bukan angka;
3. A = 23.50ABC
typeof (a) = string
parsefloat (a) = 23.5
Parseint (a) = 23
Angka (a) = nan
4. Nama variabel JS berisi angka yang digarisbawahi oleh tanda dolar dan tidak dapat mulai dengan angka
5. GetElementsByTagname_R () perlu diambil setelah dokumen dimuat
6. Nodetype: 12 Jenis, 1 mewakili node elemen, dan 3 mewakili node teks
Nodename: mewakili nama simpul. Jika itu adalah simpul teks, itu berarti #Text
NODEVALUE: mewakili nilai node
Misalnya: Dapatkan node if (obj.nodename.tolowercase () == 'li') {}
Ubah konten teks p document.getElementsbytagname_r ('p') [0] .firstchild.nodevalue = ''
7. Node Tua ke Node Anak
Childnodes: Daftar semua node anak tingkat pertama di elemen, tidak termasuk node anak yang lebih dalam
obj.firstchild = obj.childnodes [0]
obj.lastchild = obj.childnodes [obj.childnodes.length-1]
haschildnodes () menentukan apakah elemen memiliki anak dan mengembalikan nilai boolean
7. Node anak ke node induk
var parentelm = mylinkitem.parentnode;
while (parentelm, classname! = 'syna' && parentelm! = 'document.body')
ParentelM = Parentelm.ParentNode
8. Ubah Properti Elemen
1) Dapatkan atau atur dalam bentuk properti objek
var mainimage = document.geteLementByIdx_x ('nav'). getElementsbyTagname ['img'] [0];
Mainimage.src = '';
Mainimage.;
2) Gunakan metode getAttribute () dan setattribute ()
Detail 7 ………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………………
1. Konversikan angka menjadi bentuk yang memiliki X Decimal Places Function Round to (Base, Precision)
{var m = math.pow (10, presisi);
var a = math.round (base*m)/m;
mengembalikan a;
}
var n = 3.942487;
Roundto (n, 3) = 3.942
Roundto (n, 0) = 3
2. Buat angka acak yang dibatasi
fungsi randombetween (min, max)
{return min+math.floor (math.random ()*(max-min+1))}
3. Konversi angka menjadi string
var a = 10;
a = string (a);/a = a.toString ();
4. URL Pengkodean
var a =? p = e;
var b = Escape (a);
var c = (b);
5. Ubah jenis elemen dalam dokumen
P ---> Div
Pertama -tama buat elemen div, lalu salin simpul anak P ke div, dan akhirnya ganti p dengan div
6. Berapa banyak parameter yang diperlukan untuk suatu fungsi
fungsi add (n1, n2) {}
return num = add.length;
7. Berapa banyak parameter yang dilewatkan dalam suatu fungsi
fungsi add (n1, n2) {
mengembalikan argumen.length;}
Detail 8 ………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………………
1). Tampilan: blok inline; Seperti namanya, itu adalah bentuk blok di inline, dan lebar tinggi dapat diatur.
.element-class {
Tampilan: -Moz-Inline-Stack; // Kode hanya Firefox
Tampilan: blok inline; // Beberapa browser standar
Zoom: 1; // IE saja
*Tampilan: inline; // Hanya IE tahu kode ini (css hack)
}
2) .Clean float
.clearfix: setelah {visibilitas: tersembunyi; tampilan: blok; font-ukuran: 0; konten :; jelas: keduanya; tinggi: 0;}
.clearfix {zoom: 1;}
3). Tambahkan ikon khusus di bilah alamat
Pertama, kita perlu membuat pra-dibuat file ikon dengan ukuran 16*16 piksel. Ekstensi file adalah ICO dan mengunggahnya ke direktori yang sesuai. Tambahkan kode berikut antara file sumber html <head> </head>: <tautan rel = nama ikon href = alamat gambar (perhatikan bahwa itu sesuai dengan direktori sekarang)>. Tentu saja, jika pengguna menjelajah menggunakan IE5 atau di atas, itu bahkan lebih mudah. Cukup unggah gambar ke direktori root situs web dan dapat diakui secara otomatis!
4). Saat mengatur tampilan: wadah kosong blok di IE6 ke ketinggian yang lebih kecil, seperti <p style = tinggi: 1px;> </p>, Anda akan menemukan bahwa tinggi badannya tidak bisa kurang dari nilai tertentu. Solusi: Atur overflow: Tersembunyi.
5). Teks dipotong dengan elipsis
Div {width: 200px; tinggi: 100px; overflow: tersembunyi; teks-overflow: ellipsis; spasi putih: nowrap;}