


Mod berita berbilang baris dan berbilang lajur CSS_Pertukaran pengalaman
Mod berita berbilang baris dan berbilang lajur CSS_Pertukaran pengalaman
Lihat gambar:
Kesan ini genap tiga lajur dan empat Untuk modul berita lajur, saya pernah menggunakan jadual, memikirkan ia lebih mudah daripada css, sehingga saya membangunkan apungan a barulah saya menyedari bahawa menggunakan ul lebih mudah dan lebih mudah untuk dikawal pada kod dahulu:
Petikan:
.news{} .news li{ list-style:none; clear:both} .news li a#n1{ text-decoration:none; float:left; line-height:22px;} .news li a#n2{ text-decoration:none; float:right; color:#999} .news li a#n3{ float:right; padding-right:20px;color:#999} .news li a#n1:hover{ text-decoration:underline;} .news li a#n3:hover,.news li a#n3:hover{ text-decoration:none;}
a#n1 ialah tajuk berita, terapung di sebelah kiri, n2 dan n3 ialah bilangan klik dan tarikh keluaran, terapung di sebelah kanan, dengan jarak 20px
Perhatikan bahawa semua apungan mesti dikosongkan pada li
Ujian menyokong ie6, ie7, ff, opera
Contoh, tiga lajur:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css多行多列的新闻模式</title> <style type="text/css"> <!-- *{margin: 0px; padding:0px;} body { font-family:"宋体"; font-size:12px; color:#000; padding:100px;} .news{} .news li{ list-style:none; clear:both} .news li a#n1{ text-decoration:none; float:left; line-height:22px;} .news li a#n2{ text-decoration:none; float:right; color:#999} .news li a#n3{ float:right; padding-right:20px;color:#999} .news li a#n1:hover{ text-decoration:underline;} .news li a#n3:hover,.news li a#n3:hover{ text-decoration:none;} /**/ --> </style></head> <body> 这是三列 <ul class="news"> <li>左列,新闻标题项点 击发布日期</li> <li>>> 热烈祝贺weilaixu.cn隆重上线88882008-08-08</li> <li>>> 热烈祝贺weilaixu.cn隆重上线88882008-08-08</li> <li>>> 热烈祝贺weilaixu.cn隆重上线88882008-08-08</li> <li>>> 热烈祝贺weilaixu.cn隆重上线88882008-08-08</li> </ul> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css多行多列的新闻模式</title> <style type="text/css"> <!-- *{margin: 0px; padding:0px;} body { font-family:"宋体"; font-size:12px; color:#000; padding:100px;} .news{} .news li{ list-style:none; clear:both} .news li a#n1{ text-decoration:none; float:left; line-height:22px;} .news li a#n2{ text-decoration:none; float:right; color:#999} .news li a#n3{ float:right; padding-right:20px;color:#999} .news li a#n1:hover{ text-decoration:underline;} .news li a#n3:hover,.news li a#n3:hover{ text-decoration:none;} --> </style></head> <body> 这是二列 <ul class="news"> <li>左列,新闻标题项点击次数</li> <li>>> 热烈祝贺weilaixu.cn隆重上线2008-08-08</li> <li>>> 热烈祝贺weilaixu.cn隆重上线2008-08-08</li> <li>>> 热烈祝贺weilaixu.cn隆重上线2008-08-08</li> <li>>> 热烈祝贺weilaixu.cn隆重上线2008-08-08</li> </ul> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css多行多列的新闻模式</title> <style type="text/css"> <!-- *{margin: 0px; padding:0px;} body { font-family:"宋体"; font-size:12px; color:#000; padding:100px;} .news2{} .news2 li{ list-style:none;clear:both;margin-top:10px;border-bottom:1px dashed #ccc;height:16px; display:block} .news2 li a#n1{ text-decoration:none;float:left;} .news2 li a#n2{ text-decoration:none; float:right; color:#999;display:block} .news2 li a#n3{ float:right; padding-right:20px;color:#999; display:block} .news2 li a#n1:hover{ text-decoration:underline;} .news2 li a#n3:hover,.news li a#n3:hover{ text-decoration:none;} /**/ --> </style></head> <body> 加条虚线 <ul class="news2"> <li>>> 热烈祝贺weilaixu.cn隆重上线2008-08-08</li> <li>>> 热烈祝贺weilaixu.cn隆重上线2008-08-08</li> <li>>> 热烈祝贺weilaixu.cn隆重上线2008-08-08</li> <li>>> 热烈祝贺weilaixu.cn隆重上线2008-08-08</li> </ul> </body> </html>
Contoh, warna latar belakang yang berbeza:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css多行多列的新闻模式</title> <style type="text/css"> <!-- *{margin: 0px; padding:0px;} body { font-family:"宋体"; font-size:12px; color:#000; padding:100px;} .news{} .news3{ background:#ccc;} .news3 li{ list-style:none; clear:both; height:20px; padding-top:8px;} .news3 li#x1{ list-style:none; clear:both; height:20px; background-color:#F2F2F2} .news3 li a#n1{ text-decoration:none; float:left;} .news3 li a#n2{ text-decoration:none; float:right; color:#999} .news3 li a#n3{ float:right; padding-right:20px;color:#999} .news3 li a#n1:hover{ text-decoration:underline;} .news3 li a#n3:hover,.news li a#n3:hover{ text-decoration:none;} --> </style></head> <body> 不同背景色 <ul class="news3"> <li>>> 热烈祝贺weilaixu.cn隆重上线2008-08-08</li> <li id="x1">>> 热烈祝贺weilaixu.cn隆重上线2008-08-08</li> <li>>> 热烈祝贺weilaixu.cn隆重上线2008-08-08</li> </ul> </body> </html>
Contoh, sempadan:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css多行多列的新闻模式</title> <style type="text/css"> <!-- *{margin: 0px; padding:0px;} body { font-family:"宋体"; font-size:12px; color:#000; padding:100px;} .news4{} .news4 li{ list-style:none; clear:both;margin-top:10px; padding:10px; border:1px solid #ccc; display:block} .news4 li a#n1{ text-decoration:none;float:left;} .news4 li a#n2{ text-decoration:none; float:right; color:#999;display:block} .news4 li a#n3{ float:right; padding-right:20px;color:#999; display:block} .news4 li a#n1:hover{ text-decoration:underline;} .news4 li a#n3:hover,.news li a#n3:hover{ text-decoration:none;} /**/ --> </style></head> <body> 边框 <ul class="news4"> <li>>> 热烈祝贺weilaixu.cn隆重上线2008-08-08</li> <li>>> 热烈祝贺weilaixu.cn隆重上线2008-08-08</li> <li>>> 热烈祝贺weilaixu.cn隆重上线2008-08-08</li> <li>>> 热烈祝贺weilaixu.cn隆重上线2008-08-08</li> </ul> </body> </html>

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Dalam Vue.js, atribut pemegang tempat menentukan teks pemegang tempat bagi elemen input, yang dipaparkan apabila pengguna belum memasukkan kandungan, menyediakan petua atau contoh input dan meningkatkan kebolehcapaian borang. Penggunaannya adalah untuk menetapkan atribut pemegang tempat pada elemen input dan menyesuaikan penampilan menggunakan CSS. Amalan terbaik termasuk relevan dengan input, pendek dan jelas, mengelakkan teks lalai dan mempertimbangkan kebolehaksesan.

Teg span boleh menambah gaya, atribut atau gelagat pada teks Ia digunakan untuk: menambah gaya, seperti warna dan saiz fon. Tetapkan atribut seperti id, kelas, dsb. Tingkah laku yang berkaitan seperti klik, tuding, dsb. Tandakan teks untuk pemprosesan atau petikan selanjutnya.

REM dalam CSS ialah unit relatif berbanding saiz fon elemen akar (html). Ia mempunyai ciri-ciri berikut: relatif kepada saiz fon elemen akar, tidak dipengaruhi oleh elemen induk. Apabila saiz fon elemen akar berubah, elemen menggunakan REM akan melaraskan dengan sewajarnya. Boleh digunakan dengan mana-mana harta CSS. Kelebihan menggunakan REM termasuk: Responsif: Pastikan teks boleh dibaca pada peranti dan saiz skrin yang berbeza. Ketekalan: Pastikan saiz fon adalah konsisten di seluruh tapak web anda. Kebolehskalaan: Tukar saiz fon global dengan mudah dengan melaraskan saiz fon elemen akar.

Terdapat lima cara untuk memperkenalkan imej dalam Vue: melalui URL, memerlukan fungsi, fail statik, arahan v-bind dan imej latar belakang CSS. Imej dinamik boleh dikendalikan dalam sifat pengiraan atau pendengar Vue, dan alatan yang digabungkan boleh digunakan untuk mengoptimumkan pemuatan imej. Pastikan laluan adalah betul jika tidak ralat memuatkan akan muncul.

Nod ialah entiti dalam DOM JavaScript yang mewakili elemen HTML. Ia mewakili elemen tertentu dalam halaman dan boleh digunakan untuk mengakses dan memanipulasi elemen tersebut. Jenis nod biasa termasuk nod elemen, nod teks, nod ulasan dan nod dokumen. Melalui kaedah DOM seperti getElementById(), anda boleh mengakses nod dan mengendalikannya, termasuk mengubah suai sifat, menambah/mengalih keluar nod anak, memasukkan/menggantikan nod dan nod pengklonan. Traversal nod membantu menavigasi dalam struktur DOM. Nod berguna untuk mencipta kandungan halaman, pengendalian acara, animasi dan pengikatan data secara dinamik.

Pemalam penyemak imbas biasanya ditulis dalam bahasa berikut: Bahasa bahagian hadapan: JavaScript, HTML, CSS Bahasa bahagian belakang: C++, Rust, WebAssembly Bahasa lain: Python, Java

1. Mula-mula, buka ikon tetapan di sudut kiri bawah dan klik pilihan tetapan 2. Kemudian, cari lajur CSS dalam tetingkap lompat .

Dalam Vue.js, ref digunakan dalam JavaScript untuk merujuk elemen DOM (boleh diakses oleh subkomponen dan elemen DOM itu sendiri), manakala id digunakan untuk menetapkan atribut id HTML (boleh digunakan untuk penggayaan CSS, penanda HTML dan carian JavaScript ).
