Home-theater-designers
Anda mahu laman web anda kelihatan hebat --- tetapi kemahiran pengembangan web anda kurang.
Jangan putus asa! Anda tidak perlu tahu CSS atau PHP untuk membina laman web mewah dengan kesan menarik. Beberapa tag HTML mudah dan mengetahui cara menyalin dan menampal akan berlaku.
Untuk memulakan anda dengan beberapa kesan HTML yang hebat, kami telah mengumpulkan templat kod kesan HTML percuma ini. Mereka akan meningkatkan fungsi dan pengalaman pengguna laman web anda, sementara tidak melanggar bank. Walaupun kebanyakannya HTML, kod-kod hebat ini mungkin juga mengandungi beberapa CSS dan PHP.
1. Kesan Paralaks Sejuk Dengan HTML
Anda mungkin pernah melihat Parallax Effect digunakan di laman web dengan iklan dalam talian. Semasa anda menatal artikel ke bawah, gambar latar kelihatan menatal dengan kadar yang berbeza, atau iklan muncul.
Sebagai alternatif, mungkin gambar latar berubah semasa anda mengunjungi pelbagai bahagian laman web ini. Ini adalah kesan hebat yang menambahkan kedalaman visual pada kandungan dan sesuai walaupun anda tidak melakukannya memahami kod HTML asas .
Anda boleh bermain dengan kesan dan menyalin kod untuk a kesan tatal Parallax sederhana dari W3Schools .
Dalam versi yang paling canggih, kesan ini adalah gabungan HTML, CSS, dan JS.
Teruskan dan ambil kod untuk perkara di atas Kesan Paralaks Header / Footer dari CodePen .
2. Kod Kotak Komen HTML yang boleh ditatal
Ini adalah elemen HTML yang mudah tetapi berguna yang membolehkan anda mengemas coretan teks panjang ke dalam format yang ringkas. Dengan cara ini tidak mengambil seluruh ruang di halaman.
Anda boleh bermain dengan warna dan ukuran kotak teks agar sesuai dengan keperluan anda.
Masukan:
Putting some text in this box will let you see how large it can stretch to - eventually the scrollbars should show, enabling you to scroll through the text. That's it! :) Sekiranya anda menginginkan sesuatu yang lebih menarik, anda juga boleh mendapatkan kod kotak komen yang boleh disesuaikan dari Quackit .
Mereka menawarkan beberapa templat, tetapi anda juga dapat menggunakan editornya untuk mengubah dan menguji (menjalankan) kod tersuai anda secara manual.
3. Trik HTML Hebat: Teks yang Diserlahkan
Dengan sederhanaTag HTML anda boleh menambahkan banyak kesan hebat pada teks atau gambar anda. Perhatikan bahawa tidak semuanya berfungsi di penyemak imbas. Yang disebutkan di sini berfungsi di Google Chrome, Microsoft Edge, dan Mozilla Firefox.
Kesan teks HTML ini menyoroti teks antaratanda nama.
Masukan:
Your highlighted text here.Demo output:
4. Tambah Gambar Latar ke Teks
Begitu juga, anda boleh menukar warna teks anda atau menambahkan gambar latar. Yang ini kelihatan hebat jika saiz fon teks lebih besar.
Masukan:
MakeUseOf presents...Kesan yang sama dicapai dengan menambahkan gaya dan elemen fon pada teks dalam a teg.
pemacu keras luaran saya tidak muncul
Demo output:
5. Trik HTML Berguna untuk Menambah Petua Tajuk
Petua alat tajuk muncul ketika anda menatal dengan tetikus di atas sekeping teks atau gambar yang 'dimanipulasi'. Anda akan melihat ini digunakan di laman web pada gambar, teks yang dipautkan, atau bahkan item menu di aplikasi desktop. Gunakan kod HTML ini untuk menambahkan petua alat ke teks biasa di laman web anda.
Masukan:
Move your mouse over me!Demo output:
6. Trik HTML Paling Hebat: Menatal atau Menurunkan Teks
Semasa anda mencari 'marquee html' di Google, anda akan menemui sedikit Paskah Telur. Lihat jumlah hasil carian tatal di bahagian atas? Itulah kesan yang dibuat oleh tag marquee yang sudah usang. Walaupun kesan teks HTML yang sangat sejuk ini sudah tidak digunakan lagi, kebanyakan penyemak imbas masih menyokongnya.
Masukan:
I wanna scroll with it, baby!Demo output:
Awak boleh tambah atribut lebih lanjut untuk mengawal tingkah laku tatal, warna latar, arah, ketinggian dan banyak lagi. Walau bagaimanapun, berhati-hati; kesan ini boleh menjadi agak menjengkelkan jika berlebihan.
Untuk kesan teks jatuh yang sejuk, menuju ke Quackit lagi dan salin kod marquee mereka yang sangat disesuaikan.
7. Bina Switchmenu yang Hebat Dengan HTML
Trik HTML yang paling hebat adalah kesan HTML yang dinamik. Walau bagaimanapun, mereka sering berdasarkan skrip. Berikut adalah satu kesan untuk menu yang anda setuju kelihatan sangat licin.
Ini sedikit lebih rumit daripada tag HTML purata anda kerana ia berfungsi dengan helaian gaya dan skrip. Kelebihannya ialah anda tidak perlu memuat naik fail CSS atau skrip untuk membuatnya berfungsi. Sebaliknya, hanya masukkan kod berikut ke bahagian laman web anda.
Masukan:
.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}.submenu{
margin-bottom: 0.5em;
}
/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/var persistmenu='yes' //'yes' or 'no'. Make sure each SPAN content contains an incrementing ID starting at 1 (id='sub1', id='sub2', etc)
var persisttype='sitewide' //enter 'sitewide' for menu to persist across site, 'local' for this page onlyif (document.getElementById){ //DynamicDrive.com change
document.write('n')
document.write('.submenu{display: none;}n')
document.write('n')
}function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById('masterdiv').getElementsByTagName('span'); //DynamicDrive.com change
if(el.style.display != 'block'){ //DynamicDrive.com change
for (var i=0; i if (ar[i].className=='submenu') //DynamicDrive.com change
ar[i].style.display = 'none';
}
el.style.display = 'block';
}else{
el.style.display = 'none';
}
}
}function get_cookie(Name) {
var search = Name + '='
var returnvalue = '';
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(';', offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}function onloadfunction(){
if (persistmenu=='yes'){
var cookiename=(persisttype=='sitewide')? 'switchmenu' : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!='')
document.getElementById(cookievalue).style.display='block'
}
}function savemenustate(){
var inc=1, blockid=''
while (document.getElementById('sub'+inc)){
if (document.getElementById('sub'+inc).style.display=='block'){
blockid='sub'+inc
break
}
inc++
}
var cookiename=(persisttype=='sitewide')? 'switchmenu' : window.location.pathname
var cookievalue=(persisttype=='sitewide')? blockid+';path=/' : blockid
document.cookie=cookiename+'='+cookievalue
}if (window.addEventListener)
window.addEventListener('load', onloadfunction, false)
else if (window.attachEvent)
window.attachEvent('onload', onloadfunction)
else if (document.getElementById)
window.onload=onloadfunctionif (persistmenu=='yes' && document.getElementById)
window.onunload=savemenustate
And this code goes wherever you want the dynamic menu to appear.
Topics
- Browsers/Addons
- Web Apps
- How-To Tips
- Cool Software
...and more!
Staff Writers
- Karl Gechlik
- Tina
- Varun Kashyap
...and more!
Miscellaneous
- About
- Contact
- Archives
- Disclaimer
Demo output:
Malangnya, kami tidak dapat menunjukkan kesan ini di sini. Tetapi sumber asalnya, Pemacu Dinamik , mempunyai salinan berkesan dari kesan HTML dinamik ini.
8. Dapatkan Hamparan HTML Dengan Tableizer
Sekiranya anda ingin memaparkan spreadsheet di laman web anda, biarkan Tableizer! ubah data anda menjadi jadual HTML. Cukup tampal data mentah dari Excel, Google Doc, atau spreadsheet lain ke alat penukar di tableizer.journalistopia.com . Tweak the pilihan jadual , kemudian klik Jadualkannya untuk menerima output HTML.
Ini mungkin salah satu kod HTML paling keren untuk laman web anda, seperti Jadualkannya! melakukan semua kerja keras.
Klik Salin HTML ke Papan Keratan untuk menyalin kod HTML dan menambahkannya ke laman web anda. Pertimbangkan untuk mengedit warna latar agar kelihatan lebih sejuk.
cara menambah latar belakang pada foto
Walaupun ini bukan kesan HTML, ia sangat berguna.
Kod dan Kesan HTML Lebih Hebat untuk Laman Web anda
Kekuatan HTML, CSS, dan JavaScript menawarkan pilihan yang berpotensi tidak terhad untuk kesan menakjubkan di laman web anda. Mahu lebih?
- Barang HTML memberi anda hebatidea tag.
- Pemacu Dinamik mempunyai banyak skrip HTML dinamik yang luar biasa.
- Quackit menawarkan kod HTML yang menarik.
Kami telah menunjukkan kepada anda lapan kod HTML hebat yang boleh anda salin untuk meningkatkan laman web anda. Walaupun berbeza, semuanya mudah dilaksanakan selagi anda mengetahui teknik pengkodan HTML asas.
Berkongsi Berkongsi Tweet E-mel 17 Contoh Kod HTML Mudah yang Anda Boleh Pelajari dalam 10 MinitIngin membuat laman web asas? Ketahui contoh HTML ini dan cubalah dalam penyunting teks untuk melihat bagaimana mereka kelihatan di penyemak imbas anda.
Baca Seterusnya Topik-topik yang berkaitan- Pengaturcaraan
- HTML
- Pembangunan Web
- Alat Webmaster
Wakil Editor untuk Keselamatan, Linux, DIY, Pengaturcaraan, dan Penerbit Podcast yang Dijelaskan, dan Benar-benar Berguna, dengan pengalaman luas dalam sokongan desktop dan perisian. Penyumbang kepada majalah Linux Format, Christian adalah Raspberry Pi tinkerer, peminat Lego dan peminat permainan retro.
Lagi Dari Christian CawleyLanggan buletin kami
Sertailah buletin kami untuk mendapatkan petua, ulasan, ebook percuma, dan tawaran eksklusif!
Klik di sini untuk melanggan