


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

Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

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





Menggunakan bootstrap dalam vue.js dibahagikan kepada lima langkah: Pasang bootstrap. Import bootstrap di main.js. Gunakan komponen bootstrap secara langsung dalam templat. Pilihan: Gaya tersuai. Pilihan: Gunakan pemalam.

HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.

Terdapat dua cara untuk membuat garis perpecahan bootstrap: menggunakan tag, yang mewujudkan garis perpecahan mendatar. Gunakan harta sempadan CSS untuk membuat garis perpecahan gaya tersuai.

WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.

Terdapat beberapa cara untuk memasukkan imej dalam bootstrap: masukkan imej secara langsung, menggunakan tag HTML IMG. Dengan komponen imej bootstrap, anda boleh memberikan imej yang responsif dan lebih banyak gaya. Tetapkan saiz imej, gunakan kelas IMG-cecair untuk membuat imej boleh disesuaikan. Tetapkan sempadan, menggunakan kelas IMG-Sempadan. Tetapkan sudut bulat dan gunakan kelas IMG-bulat. Tetapkan bayangan, gunakan kelas bayangan. Saiz semula dan letakkan imej, menggunakan gaya CSS. Menggunakan imej latar belakang, gunakan harta CSS imej latar belakang.

Untuk menubuhkan rangka kerja bootstrap, anda perlu mengikuti langkah -langkah ini: 1. Rujuk fail bootstrap melalui CDN; 2. Muat turun dan tuan rumah fail pada pelayan anda sendiri; 3. Sertakan fail bootstrap di HTML; 4. Menyusun sass/kurang seperti yang diperlukan; 5. Import fail tersuai (pilihan). Setelah persediaan selesai, anda boleh menggunakan sistem grid Bootstrap, komponen, dan gaya untuk membuat laman web dan aplikasi yang responsif.

Untuk menyesuaikan saiz unsur-unsur dalam bootstrap, anda boleh menggunakan kelas dimensi, yang termasuk: menyesuaikan lebar: .col-, .w-, .mw-adjust ketinggian: .h-, .min-h-, .max-h-

Bagaimana cara menggunakan butang bootstrap? Perkenalkan CSS bootstrap untuk membuat elemen butang dan tambahkan kelas butang bootstrap untuk menambah teks butang
