Penggunaan Brilian Menggunakan Senarai HTML dalam Reka Bentuk Web

Anda boleh mencari senarai yang direka dengan baik di seluruh Internet. Pereka telah menggunakannya selama beberapa dekad menyelaras maklumat dan susun atur halaman, dan di web hari ini anda dapat melihat kreativiti yang hebat dalam bagaimana pereka web menggunakan senarai. Ini termasuk menu navigasi, pautan profil, arkib, tugas / senarai semak, dan banyak kegunaan lain!

Dalam jawatan ini saya akan memperkenalkan pelbagai jenis senarai HTML, dengan tip-tip untuk mereka bentuk, terutamanya bagaimana cara tambah kelebihan unik ke senarai anda. Juga saya akan membawa anda melalui beberapa contoh laman web dengan reka bentuk senarai hebat, dan akhirnya anda akan mendapat senarai laman web dengan senarai HTML yang direka dengan baik. Tidak ada lagi keraguan tentang bagaimana membuat senarai mencari biasa anda kelihatan unik, dan mari mulai paling banyak dari mereka hari ini!

Elemen Penyenaraian

Pereka web sentiasa melompat dari satu kereta muzik ke seterusnya, dengan itu menyebabkan gaya laman web berubah dari masa ke masa, tetapi senarai telah menjadi ujian masa dan mungkin sangat baik dalam inovasi masa depan World Wide Web.

Sebelum menyemak contoh-contoh saya mahu menutup beberapa mata dengan senarai HTML. Terdapat beberapa jenis senarai yang boleh anda gunakan dalam kerja reka bentuk anda sendiri. Majoriti pereka web berfokus pada Senarai tidak disusun yang dibuka dengan a

Senarai Pesanan

Definisi Data

Senarai tidak disusun (
)

Mungkin salah satu unsur yang paling digunakan dalam standard HTML4 / HTML5. Senarai yang tidak disusun akan mengeluarkan data dengan cara yang sama seperti senarai yang dipesan, namun anda tidak akan melihat mana-mana penanda angka di sebelah. Sebaliknya setiap item diberikan a bulatan kecil atau cakera dan dipecah ke garisan baru. Ikon ini juga boleh diubah dengan jenis-jenis-jenis harta dijumpai dalam CSS.

Berikut ialah kod contoh senarai tidak teratur:

  Perkara 1
 Perkara 2
 Perkara 3

Senarai yang tidak disusun adalah ubat yang sempurna untuk bangunan pautan navigasi. Kerana anda boleh dengan mudah senarai keseluruhan sarang dalam sebarang item senarai ianya adalah perkara mudah untuk mewujudkan pautan sub-navigasi juga. Selepas mengeluarkan gaya senarai, anda akan dibiarkan dengan unsur item kosong. Dari sini, anda boleh mengaitkan pautan utama untuk muncul sebagai elemen blok pada halaman anda, dengan itu mengisi reka bentuk menu navigasi, dan dengan beberapa kod jQuery anda boleh menyusun tajuk yang indah untuk tapak anda.

Paling biasa, anda akan menemui senarai tanpa urutan di tengah-tengah artikel web atau arahan pemasangan. Ambil perhatian bahawa Google dan bot carian lain tidak memproses kandungan halaman anda dengan cara yang berbeza, jadi anda SEO tidak akan terjejas terlepas dari mana jenis penyenaraian yang anda pilih.

Senarai Pesanan (
)

Apabila anda perlu menempah satu set data, mungkin untuk menetapkan rangka kerja susun atur anda sendiri dari awal, tetapi dengan cara ini anda perlu menambah setiap nombor bertambah dengan tangan, yang boleh meletihkan. Senarai yang dipesan adalah hebat untuk memelihara tugas bernombor sejajar tanpa sebarang skru. Perintah item senarai dalaman anda (

) akan menentukan bagaimana data dibentangkan.

Berikut ialah kod contoh senarai yang diperintahkan:
```
  Perkara 1
 Perkara 2
 Perkara 3
 
 
```
Ia juga mungkin untuk menukar kaunter dari nombor biasa ke beberapa pilihan lain. Ini termasuk huruf abjad dan angka Romawi, untuk menamakan beberapa. Pereka web akan menggunakan senarai pesanan untuk senarai kandungan khusus. Data resipi, tugasan harian, kegemaran, atau pengguna baru / terakhir yang dilog masuk hanya beberapa contoh. Selalunya anda akan melihat komen blog dibina menggunakan senarai yang diperintahkan untuk menyimpan setiap komen dalam urutan nombor.

Senarai Definisi Data (
)

Senarai definisi tidak kelihatan seringkali lagi (tidak seperti mereka pernah popular). Mereka biasa dilihat dengan pereka web yang menghasilkan format kompleks pautan atau kandungan kotak. The tag senarai data (
) sering disalahpahami oleh coders hari ini. Dalam spesifikasi data HTML4.01 digunakan untuk pasangan item dengan keterangan mereka. Ini disebut senarai definisi.

Berikut ialah kod contoh senarai definisi data:
```
  Perkara 1
 Penerangan
 Perkara 2
 Penerangan
 Perkara 3
 Penerangan
 
 
```
Bagaimanapun, dengan senarai data spesifikasi baru HTML5 telah diberikan transkripsi. Tidak ada perbezaan dengan sintaks bagaimana anda menggunakan unsur-unsur, namun tujuannya telah dikemas kini sebagai senarai perihalan yang terdiri daripada satu atau lebih istilah data (
) diikuti dengan satu atau lebih definisi data (
).

Contoh kuat dari artikel HTML5 Doctor adalah senarai diformat metadata. Di dalam satu tunggal dl senarai elemen yang anda mahu mentakrifkan istilah, seperti nama anda, kemudian setiap seterusnya tag definisi boleh menggambarkan data tentang anda, mungkin umur anda, pekerjaan, bandar / bandar semasa, dan sebagainya sebarang set data dengan pasangan kunci / nilai sesuai dengan baik dalam senarai penerangan. Anda boleh menggunakan lebih daripada satu istilah data dalam senarai, tetapi W3C menyatakan itu setiap istilah mestilah unik dalam senarai.

Sekarang bahawa kami telah menjahit 3 gaya senarai popular, mari beralih kepada beberapa contoh! Pereka web telah sangat kreatif dengan senarai mereka sejak beberapa tahun kebelakangan ini. Saya telah mencatatkan 7 laman web kegemaran saya di bawah ini dengan memberi tumpuan khusus kepada penggunaan kreatif senarai mereka.

Navigasi Senarai Tidak Sempurna Mudah

Menu navigasi lebih mudah dibina dengan teknik CSS moden. Inilah sebabnya mengapa senarai yang tidak disusun dan senarai yang diperintahkan telah menjadi pilihan yang popular. Salah satu contoh kegemaran saya ini muncul di blog media sosial, Mashable.

Menuju bahagian atas tajuk mereka, anda akan melihat 2 set hubungan utama. Secara langsung ke bahagian atas logo mereka adalah senarai kecil tanpa urutan yang mengandungi pautan komuniti seperti Top Stories, Top Trending, dan People. Pereka bentuk telah mencipta gaya hover yang anggun yang mempunyai latar belakang dan skema warna pepejal.

Secara langsung di bawah ini anda akan melihat pautan sub navigasi mereka. Menu navigasi ini membawa kepada kategori blog seperti Media Sosial atau Tech. Kedua-dua senarai tidak teratur terdapat dalam a HTML5
elemen untuk memastikan semuanya selaras dengan templat. Kesan hover yang ditambah di sini memaparkan sudut bulat di sekitar menu sub-navigation. Setiap pautan memaparkan sebagai elemen blok dan memakan banyak ruang menu navigasi.

Ciri Perisian Penyenaraian

Ini mungkin salah satu contoh favorit saya dalam senarai gaya. Pemaju web dan syarikat perisian menggunakannya dalam reka bentuk web korporat mereka sendiri. Contoh saya menumpukan pada halaman Perkara Kod Kebudayaan, aplikasi senarai tugas. Mereka telah membina a set item dan ciri yang diformatkan anda boleh mencari dalam Perkara.

Seluruh koleksi terkandung di dalam a
tag yang memegang lajur kiri dan kanan. Di dalamnya adalah terapung
elemen dengan kelas kiri dan kanan, masing-masing. Kandungan item senarai sebenarnya dipecahkan kepada segmen dan CSS digunakan untuk menyelaraskan segala-galanya.

Imej ditambah sebagai tag terus ke dalam kod dan kedudukan berbanding dengan yang mereka ada
. The kuat tag digunakan untuk setiap titik tajuk yang muncul dalam teks yang lebih gelap, dan secara langsung selepas ini penerangan ditambah.

Unsur-unsur telah digabungkan dengan indah dan saya sangat mengagumi etika kerja Kod Budaya. Mereka telah terbukti menawarkan reka bentuk yang hebat selama bertahun-tahun, terutama untuk Perkara. Jika anda menyemak apa-apa direktori ikon seperti Icon Finder, ia agak mudah untuk memilih satu set freebie, dan dari sini anda boleh mencipta reka bentuk dan kod gaya yang serupa senarai dalam CSS.

Sekiranya anda berminat lagi dalam reka bentuk laman Perkara untuk iPhone mereka sebenarnya menggunakan senarai penerangan. Setiap ikon adalah ditetapkan sebagai istilah definisi dan deskripsi akan diletakkan di sebelah kanan. Ini bukan cara yang disyorkan untuk menggunakan tag ini, tetapi ia berfungsi dengan baik dalam beberapa keadaan!

Kategori Blog dan Tags

Pengguna WordPress sangat akrab dengan sistem kategori / tag. Ia telah bekerja dengan baik dalam kebanyakan bentuk media sosial setakat ini, tetapi ia asalnya berasal dari blogosphere. Tags bagus untuk memaparkan beberapa artikel khusus yang berkaitan dengan topik ini. Kategori lebih luas dan digunakan untuk merangkumi bahagian artikel yang lebih besar.

Contoh terbaik yang boleh saya fikirkan ialah Majalah Smashing dan reka bentuk semula laman utama mereka. Di bahagian atas, anda akan melihat tab yang dilabelkan “Majalah” dengan ikon tag kecil yang menggantungkan sisi. Tuding pada ini untuk memaparkan senarai tersembunyi kategori seperti kod, reka bentuk, grafik, dan lain-lain. Setiap juga dinamakan dengan kesan hover CSS3 yang mewah untuk muncul sebagai butang berkilat.

Melihat kod yang akan anda perhatikan mereka telah meletakkan kotak ini di kawasan lajur kiri. Ia diberikan a paparan: tiada; gaya ke muncul tersembunyi sehingga dicetuskan. Senarai yang tidak disusun ditetapkan dengan setiap item senarai yang mengandungi pautan jangkar, tetapi sebagai alternatif pautan ini dipaparkan dalam baris dan berpecah kepada dua baris untuk ruang yang diperlukan.

Lajur Footer dengan Senarai Definisi

Saya sentiasa menjadi peminat besar dalam reka bentuk Digg klasik. Ia memaparkan semua yang anda harapkan dari laman web berita dengan keupayaan sosial yang hebat. Satu bahagian yang sangat menarik untuk reka bentuk lama mereka adalah persediaan lajur footer menggunakan senarai definisi.

Malangnya kru Digg telah melancarkan reka bentuk v4 secara langsung, tetapi Internet adalah tempat nostalgia dan dengan Arkib Internet Wayback kita boleh menarik reka bentuk Digg yang lebih tua dari Ogos 2007. Templat ini mempunyai banyak elemen antara muka pengguna yang hebat, tetapi lebih khusus, mari fokus pada kawasan footer. Anda akan perhatikan setiap lajur sebenarnya dipecah menjadi elemen senarai data. Lajur ini adalah ditetapkan untuk dipaparkan sebagai blok dan terapung bersebelahan dengan lebar yang telah ditentukan sebelumnya.

The terma data berkelakuan sebagai pengepala dalam senarai dan hanya muncul sekali setiap lajur. Pada pendapat saya ini adalah cara yang lebih baik dan bersih untuk membina senarai penerangan anda. Ia boleh menggunakan lebih daripada satu istilah per senarai, tetapi ini sering merosakkan HTML anda dan anda boleh kehilangan jejak kod dengan cepat. Dua lajur pertama mengandungi 6-7 pautan yang disenaraikan di bawah satu sama lain sebagai terma data untuk menerangkan teks header, tetapi selepas ini anda akan melihat lajur melepaskan diri dari pemformatan lalai.

Contohnya, di bawah Digg Tools & API disana ada hanya dua definisi data. Ini sebenarnya 2 paragraf yang mengandungi pautan dalaman dan satu ayat. Pasti tidak ada yang salah dengan markup ini, dan sebenarnya ia adalah sistem yang sangat kreatif dan mampan untuk membina tiang kaki. Saya pasti jika anda melayari arkib halaman Digg, anda akan dapati lebih banyak contoh hebat senarai.

Tugas dan To-dos

Senarai tidak semestinya diperbadankan untuk gaya reka bentuk. Sebenarnya ada masa di mana kandungan memerlukan item senarai untuk membentuk senarai data sebenar. Senarai tugasan adalah contoh sempurna fenomena ini. Walau bagaimanapun, tidak ada satu ton pengurus tugas yang dibina di web jadi sukar untuk mencari contoh yang bagus.

App Aliran adalah salah satu perkhidmatan seperti panel pengguna yang cantik. Jika anda mempunyai masa saya cadangkan mendaftar untuk akaun percuma untuk memberikan aplikasinya demo. Walaupun anda tidak merancang untuk membayar ia masih merupakan aplikasi web yang sangat menyeronokkan untuk mengelirukan dengan dan anda juga boleh mengeluarkan beberapa inspirasi reka bentuk.

Jika anda log masuk, menu kiri bawah menyusun koleksi senarai anda. Ini adalah tugas yang anda boleh menyusun semula, mengedit, menandakan dan semak sebagai lengkap. Mengklik pada senarai lalai yang pertama “Asas-asas” akan membuka kandungan di anak tetingkap kanan, di sini struktur keseluruhan senarai dibina dengan senarai yang tidak disusun.

Setiap item mengandungi jumlah konteks yang agak besar. Setiap bar yang anda lihat akan menyampaikan hadiah satu senarai item ditambah kepada keseluruhan
elemen. Terdapat banyak objek dalaman seperti ikon edit, kotak semak penyelesaian, bendera dan ikon sampah juga. Juga di sebelah menu pautan di bawah “Fokus” anda akan perasan barangan yang dibina ditetapkan kepada senarai tidak teratur. Ia kelihatan hebat kerana kesederhanaannya pasti.

Senarai Pemain Dribbble

Bersama ramai ahli pereka saya seorang penagih Dribbble yang besar. Laman web dibina dengan indah dan ia mempunyai beberapa pereka grafik terbaik dari seluruh dunia. Sekiranya anda tidak dikenali dengan rangkaian Dribbble adalah komuniti sosial yang dijemput hanya pereka web yang berkongsi gambar kerja terkini mereka.

Perkara menarik jika anda mengalih perhatian anda ke bahagian bawah sebelah kanan kawasan sidebarnya. Di sini kita mempunyai senarai pesanan dengan kelas “senarai pemain“. Ia mempunyai pemula yang merupakan pereka terbaru yang diberikan jemputan dan yang telah masuk ke laman web yang paling baru-baru ini. Walau apa pun alasan pemaju web Dribbble telah memilih untuk menggunakannya memerintahkan senarai dengan setiap item senarai yang mengandungi butiran mengenai pengguna.

Kandungan dalaman sebenarnya dipecah menjadi dua segmen. A
terapung ke kanan memegang pautan berikut / unfollow jika anda sedang log masuk. Elemen ganti memaparkan a
pengepala dengan kelas “vard” yang mengandungi nama pengguna dan avatar. Kedua-duanya dikaitkan dengan profil peribadi Dribbble mereka, bersama dengan beberapa statistik akaun.

Breadcrumbs mendatar

Terdapat beberapa contoh hebat dan amalan terbaik yang ditulis untuk membina navigasi roti. Menu ini kelihatannya memaparkan koleksi sub-pautan yang anda lalui untuk mencapai halaman semasa. Kami mempunyai tutorial roti bakar hebat yang dipaparkan di Hongkiat yang dibina sepenuhnya dengan teknik CSS3 dan senarai tidak teratur.

Penggunaan reka bentuk sambungan utama sebagai elemen blok untuk memaparkan menu senarai. Pautan utama diberikan imej latar belakang dan a berkurangan z-indeks harta supaya anak panah akan dipaparkan di atas setiap elemen bersamaan.

Juga, lihat contoh Google di salah satu halaman sokongan mereka. Ini adalah elemen halaman yang sempurna untuk dimasukkan ke dalam laman web anda sendiri jika anda mempunyai pelbagai halaman bersarang kandungan. Pelawat mungkin akan mencari untuk kembali ke laman sebelumnya tanpa menyemak sejarah mereka.

Tidak ada terlalu banyak alternatif untuk membina senarai pautan breadcrumb. Anda boleh menggunakan senarai yang dipesan crawler enjin carian memahami ada perintah untuk pautan menu, bagaimanapun seperti yang dinyatakan sebelum ini mungkin tidak akan membuat terlalu banyak perbezaan ketika datang ke ranking di SERPS. Jika anda mempunyai keperluan yang lebih kompleks untuk serbuk roti seperti tajuk / perihalan untuk setiap pautan, anda boleh menggunakan elemen senarai definisi yang lebih baik.

UI Berbeza Senarai Cantik

Tanpa terperinci, matlamat saya adalah untuk mengumpulkan elemen antara muka berasaskan senarai yang hebat. Ini lebih mudah dikatakan daripada dilakukan - tetapi Internet mempunyai banyak pilihan untuk dipilih! Terdapat banyak ruang untuk pertumbuhan di dalam senarai HTML. Sekiranya anda ingin lebih banyak inspirasi, lihat galeri mini di bawah dengan beberapa contoh hebat.

6wunderkinder

Menu navigasi yang hebat digelar sebagai elemen butang.

Kek Sweet Cake

Cake Sweet Cake mempunyai senarai imej kecil yang cantik yang mengandungi beberapa sampel lazat karya bakeri mereka.

Cheesemonger Invitational

Laman web Invesori Cheesemonger mempunyai 2 berasingan
elemen terapung untuk mencipta 1 menu navigasi. Ia kelihatan sangat kemas sejajar dengan grafik grafik berpusat mereka.

Editor Threepenny

Pautan media sosial di bahagian bawah laman web Editor Threepenny semuanya dibuat di bawah senarai. Ia sangat sesuai dengan lajur tema susun atur tangan dan kertas.

Le Tipi

Satu lagi contoh menu navigasi yang digayakan dengan imej dan CSS.

Awak tahu siapa

Anda Tahu Siapa yang mempunyai kesan reka bentuk retro mewah di laman web mereka. Bahagian bawah laman utama mempunyai senarai kecil yang disusun yang mengandungi lakaran kecil karya projek terkini mereka.

MediaLoot

Senarai tidak disusun yang dibuat untuk rancangan pendaftaran MediaLoot, kelihatan menjanjikan.

365psd

365psd menawarkan template Photoshop baru untuk dimuat turun setiap hari. Di bar sisi mereka, anda akan dapati senarai tag yang dibina ke dalam senarai yang tidak disusun. Ini kelihatan sempurna dalam blog dan halaman arkib di mana senarai tag kecil terasa sesuai.

Kesimpulannya

Mudah-mudahan galeri ini mempunyai senarai kreatif HTML yang kreatif yang memberikan anda inspirasi untuk merancang kandungan susun atur. Adalah sukar untuk merangka idea konkrit untuk senarai anda di halaman web, tetapi senarai item adalah sebahagian besar daripada proses reka bentuk dan menawarkan hubungan yang membina antara tanda markup dan kandungan.

Mungkin ada puluhan senarai hebat lain yang terdapat di seluruh web, dan dengan jumlah pereka web yang semakin meningkat, kita pasti akan melihat jumlah ini meningkat lebih cepat dari sebelumnya. Jika anda tahu mana-mana laman web hebat yang memaparkan senarai HTML yang mengagumkan, jangan ragu untuk menawarkan pautan di bahagian komen kami di bawah. Juga jika anda memasukkan mana-mana gaya yang disenaraikan di atas ke dalam laman web anda sendiri, kami ingin mencarinya!
Bawa Office 2003 Menus Kembali ke 2010 dengan UBitMenu

Bawa Menu Mula Windows 7 ke Windows 10 dengan Shell Klasik

Mencerahkan Firefox untuk Cuti