国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Rumah hujung hadapan web html tutorial 正確認(rèn)識(shí)DIV+CSS布局_html/css_WEB-ITnose

正確認(rèn)識(shí)DIV+CSS布局_html/css_WEB-ITnose

Jun 24, 2016 pm 12:32 PM

有不少網(wǎng)友在談?wù)撚玫絛iv+CSS布局這個(gè)說法,用來和table布局比較。it560認(rèn)為實(shí)際上div不是用來布局的,div只是用來表示一個(gè)其它元素都無法準(zhǔn)確表達(dá)語意的一個(gè)塊區(qū),只有CSS是用于布局的,所以根本就不存在div+CSS布局這回事。反過來,table布局的時(shí)候經(jīng)常依賴于CSS定義一個(gè)單元格的布局屬性,所以可以說是table+CSS布局。也就是說,我們討論的兩種主流布局方法應(yīng)該是純CSS布局和table+CSS布局,如果你覺得你在用的是div+CSS布局,那么有可能你也有強(qiáng)迫癥了。

接下來我們說說如何進(jìn)行純CSS布局,因?yàn)镃SS布局依賴于XHTML,所以我們先要說說如何書寫一個(gè)CSS無關(guān)的XHTML。其實(shí)書寫CSS無關(guān)的XHTML并不難,雖然你不能再好像書寫table布局代碼那樣集中精力于最重的視覺效果上,但其難度也不過是中學(xué)生寫作文那樣。

中學(xué)生寫作文如何寫呢?首先看看題目,然后想想整篇文章分為哪幾個(gè)大的段落,每個(gè)大的段落說些什么,能夠把你要說的東西說清楚。對(duì)于XHTML來說,這相當(dāng)于用div把文檔切割為幾大塊。這時(shí)候你不要想著這些div將構(gòu)建一個(gè)怎樣的DOM啊、CSS如何選擇DOM中元素設(shè)置規(guī)則實(shí)現(xiàn)布局之類的事情,就大概劃分一下文檔的大區(qū)域就好了。

然后當(dāng)然是用一些常用的手法來表現(xiàn)感情或者論證問題,這在XHTML中就是用特定的元素來完成一些常見的信息組織。下面就是信息組織形式與元素的對(duì)應(yīng)列表。

img

作為內(nèi)容的圖片是一定要放到img里面的,這沒有更好的選擇了。然而如果圖片不是作為內(nèi)容,而是作為修飾性的,則千萬不要用img。對(duì)于非內(nèi)容的圖片,應(yīng)該在CSS中引用,而不在XHTML中出現(xiàn)。例如每一個(gè)導(dǎo)航鏈接有一個(gè)前導(dǎo)的箭頭指示,那么這些箭頭就應(yīng)該通過CSS的background-image屬性加上去,而不是直接作為img出現(xiàn)。

a

這也是一個(gè)非常準(zhǔn)確定義的元素,鏈接都需要使用它?;蛟S已經(jīng)有很多人忘記了a的本意是錨點(diǎn),其實(shí)這是一個(gè)十分有用的語義,你可以用它來標(biāo)記文檔中一些重要的引用位置。

ul, ol

ul和ol分別是什么意思呢?如果你回答不上來,卻知道它們可以用來干什么,那證明你是被可視化工具寵壞了,要轉(zhuǎn)換過來編寫符合語義的XHTML需要先補(bǔ)充基礎(chǔ)知識(shí),這時(shí)候你最好先找一些看起來非?;A(chǔ)非常全面的XHTML書籍看看,因?yàn)闆]有扎實(shí)的基礎(chǔ)你在上面構(gòu)建更多的知識(shí)都是不牢固的。ul和ol其實(shí)分別代表unordered list和ordered list,也就是無序列表和有序列表。在語義上,它們都用于表示一類并列關(guān)系的內(nèi)容,例如我們?nèi)ド痰曩徫镏傲幸粡坰hopping list,上面要買的東西就是并列關(guān)系,在中文可以用頓號(hào)隔開那種。

休息夠了吧?下面繼續(xù)看!

ul常用于導(dǎo)航條,因?yàn)閷?dǎo)航元素符合上面所說的并列關(guān)系,樹狀導(dǎo)航結(jié)構(gòu)還可以通過嵌套u(yù)l來表述。在這里,導(dǎo)航可以是我們常見的水平或豎直導(dǎo)航欄,甚至可以是地圖導(dǎo)航,例如在中國(guó)地圖上不同的省份熱區(qū)其實(shí)是不同的li。如果我說,在主流瀏覽器上用戶看到了中國(guó)地圖和可以直接點(diǎn)擊省份熱區(qū),在不支持CSS的瀏覽器上用戶能看到一份純文本的省份名稱列表,使用的是同一份XHTML,而這完全通過CSS實(shí)現(xiàn),甚至不依賴于JavaScript,你相信嗎?

另外,如果你要顯示一個(gè)圖庫的縮略圖,這些圖片也可以放在ul中哦,因?yàn)檫@些圖片也是并列關(guān)系。它們可以自動(dòng)先橫排,排滿一行就自動(dòng)排第二行,CSS可以讓他們乖乖排隊(duì),而不需好像table那樣把圖片定死在一個(gè)格子里。其實(shí)table用于布局就如同用監(jiān)獄關(guān)押內(nèi)容一樣,把內(nèi)容鎖死在一個(gè)格子里不讓它到處亂跑;符合語義的XHTML就如同一個(gè)開放的舞臺(tái),你只要懂得利用CSS的規(guī)則,內(nèi)容就自然會(huì)找一個(gè)適合表現(xiàn)自己的地方站著。

dl

沒有聽說過dl嗎?因?yàn)槟切┛梢暬ぞ呱傻拇a中從來不會(huì)出現(xiàn)dl?dl的意思是definition list,也就是定義列表。它包含的子元素不是li,而是dt和dd,也就是definition term和definition description。dl本身設(shè)計(jì)為字典單詞與解釋列表這樣的語義,例如:


?
hehe

?
哈哈

?
girl

?
it560

如果你需要表示的的語義也是類似的,一個(gè)列表既包含定義也包含解釋,那么也可以考慮用dl。

form, input

form也就是表單啦,這沒什么好說的,就算再不顧及語義的人在書寫XHTML時(shí)也會(huì)考慮到它與各種input對(duì)提交數(shù)據(jù)的影響,從而小心謹(jǐn)慎。

table

table自然是用來表示表格的,這不廢話!如果是數(shù)據(jù)表,當(dāng)然可以用table來表示,但如果不是,就最好別用table了。

人名列表呢?例如一個(gè)3行4列的人名列表。如果這12個(gè)人名是并列關(guān)系,我建議你用ul和12個(gè)li來表示,再通過CSS來讓它們?cè)谝恍袃?nèi)并列顯示多個(gè)。名片表呢?也就是3行8列,每?jī)闪兄凶髠?cè)一列顯示人名右側(cè)一列顯示電話地址等聯(lián)系方式。我覺得dl在一定程度上能滿足此需求,dt放人名,dd放聯(lián)系方式,不過這時(shí)候就涉及了dl濫用的爭(zhēng)論,因?yàn)槿嗣c聯(lián)系方式當(dāng)作定義與解釋有點(diǎn)牽強(qiáng)。

接下來還有一個(gè)關(guān)于你是否系統(tǒng)學(xué)習(xí)過XHTML的小提問,那就是你是否知道table下面的caption、col、colgroup、thead、tbody、tfoot元素及summary屬性分別用于定義什么,還有就是你書寫table時(shí)是否會(huì)使用thead、tbody。

div, span

再次審閱上面的列表,如果你需要表示一個(gè)塊區(qū)卻無法在上面找到更適合的元素,那么你就可以考慮使用div和span這兩個(gè)最沒有語義的元素了。div與span的區(qū)別,歷史上的不說了,現(xiàn)在通常大塊的區(qū)域用div,行內(nèi)的小文本片段就用span。在上面我已經(jīng)說了div一般用于全局劃分為幾個(gè)大的區(qū)域,所以一般不需要使用了。span其實(shí)也很少使用,因?yàn)樾袃?nèi)的強(qiáng)調(diào)通??梢杂谜Z義更強(qiáng)的元素例如strong和em。

在理解上上述那么多常用元素后,寫一個(gè)XHTML就真的如同中學(xué)生寫作文一樣輕而易舉,現(xiàn)在你理解了你在搭的是什么,而以前你只在乎搭出你想要的視覺效果來。寫代碼與寫作文所類似的地方,就在于你寫得越多就越熟練,也就越能寫出好東西來。在寫好XHTML后我們就要開始考慮如何寫CSS了,或許還需要在XHTML中略作修改以方便CSS中規(guī)則的選擇與匹配,不過這是以后再說的內(nèi)容了,今天就說到這里。

本文章轉(zhuǎn)自http://www.it560.com/design/htmlcss/0MMDAwMDAwMzk0MA.html

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

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

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Tutorial PHP
1502
276
Melaksanakan butang yang boleh diklik menggunakan elemen butang HTML Melaksanakan butang yang boleh diklik menggunakan elemen butang HTML Jul 07, 2025 am 02:31 AM

Untuk menggunakan elemen butang HTML untuk mencapai butang yang boleh diklik, anda mesti menguasai penggunaan asas dan langkah berjaga -jaga yang sama. 1. Buat butang dengan tag dan tentukan tingkah laku melalui atribut jenis (seperti butang, hantar, tetapkan semula), yang dikemukakan secara lalai; 2. Tambahkan fungsi interaktif melalui JavaScript, yang boleh ditulis dalam talian atau mengikat pendengar acara melalui ID untuk meningkatkan penyelenggaraan; 3. Gunakan CSS untuk menyesuaikan gaya, termasuk warna latar belakang, sempadan, sudut bulat dan kesan status hover/aktif untuk meningkatkan pengalaman pengguna; 4. Perhatikan masalah biasa: Pastikan atribut kurang upaya tidak didayakan, peristiwa JS terikat dengan betul, oklusi susun atur, dan gunakan bantuan alat pemaju untuk menyelesaikan masalah. Menguasai ini

Mengkonfigurasi metadata dokumen dalam elemen kepala HTML Mengkonfigurasi metadata dokumen dalam elemen kepala HTML Jul 09, 2025 am 02:30 AM

Metadata dalam htmlhead adalah penting untuk SEO, perkongsian sosial, dan tingkah laku penyemak imbas. 1. Tetapkan tajuk halaman dan perihalan, gunakan dan simpannya ringkas dan unik; 2. Tambahkan maklumat kad OpenGraph dan Twitter untuk mengoptimumkan kesan perkongsian sosial, perhatikan saiz imej dan gunakan alat penyahpepijatan untuk menguji; 3. Tentukan set aksara dan tetapan Viewport untuk memastikan sokongan pelbagai bahasa disesuaikan dengan terminal mudah alih; 4. Tag pilihan seperti Hak Cipta Pengarang, Kawalan Robot dan Canonical Mencegah Kandungan Duplikat juga harus dikonfigurasi dengan munasabah.

Tutorial HTML terbaik untuk pemula pada tahun 2025 Tutorial HTML terbaik untuk pemula pada tahun 2025 Jul 08, 2025 am 12:25 AM

Tolearnhtmlin2025, chooseatutorialthatalishands-onpracticeWithmodernstandardsandIntegrateScsSandjavascriptbasics.1.priorit izehands-onleleingwithstep-by-stepprojectslikeBuildingapersonalprofileorbloglayout.2.ensureitcoversmodernhtmlelementssuchas,

HTML untuk Tutorial Templat E -mel HTML untuk Tutorial Templat E -mel Jul 10, 2025 pm 02:01 PM

Bagaimana membuat templat mel html dengan keserasian yang baik? Pertama, anda perlu membina struktur dengan jadual untuk mengelakkan menggunakan susun atur div flex atau grid; Kedua, semua gaya mesti digariskan dan tidak boleh bergantung pada CSS luaran; Kemudian gambar harus ditambah dengan keterangan alt dan menggunakan URL awam, dan butang harus disimulasikan dengan jadual atau TD dengan warna latar belakang; Akhirnya, anda mesti menguji dan menyesuaikan butiran mengenai pelbagai pelanggan.

Bagaimana untuk mengaitkan kapsyen dengan imej atau media menggunakan angka HTML dan elemen figcaption? Bagaimana untuk mengaitkan kapsyen dengan imej atau media menggunakan angka HTML dan elemen figcaption? Jul 07, 2025 am 02:30 AM

Menggunakan jumlah HTML membolehkan kejelasan intuitif dan semantik untuk menambah teks kapsyen ke imej atau media. 1. Digunakan untuk membungkus kandungan media bebas, seperti gambar, video atau blok kod; 2. Ia diletakkan sebagai teks penjelasannya, dan boleh terletak di atas atau di bawah media; 3. Mereka bukan sahaja meningkatkan kejelasan struktur halaman, tetapi juga meningkatkan akses dan kesan SEO; 4. Apabila menggunakannya, anda harus memberi perhatian untuk mengelakkan penyalahgunaan, dan memohon kepada kandungan yang perlu ditekankan dan disertai dengan keterangan, bukannya gambar hiasan biasa; 5. Atribut alt yang tidak boleh diabaikan, yang berbeza dari figcaption; 6. Figcaption adalah fleksibel dan boleh diletakkan di bahagian atas atau bawah angka seperti yang diperlukan. Menggunakan kedua -dua tag ini dengan betul membantu membina semantik dan mudah difahami kandungan web.

Bagaimana Mengatasi Penyerahan Borang Di HTML Tanpa Pelayan? Bagaimana Mengatasi Penyerahan Borang Di HTML Tanpa Pelayan? Jul 09, 2025 am 01:14 AM

Apabila tiada pelayan backend, penyerahan borang HTML masih boleh diproses melalui teknologi front-end atau perkhidmatan pihak ketiga. Kaedah khusus termasuk: 1. Gunakan JavaScript untuk memintas penyerahan bentuk untuk mencapai pengesahan input dan maklum balas pengguna, tetapi data tidak akan berterusan; 2. Gunakan perkhidmatan bentuk tanpa pelayan pihak ketiga seperti FormSpree untuk mengumpul data dan memberikan pemberitahuan e-mel dan fungsi semula; 3. Gunakan LocalStorage untuk menyimpan data klien sementara, yang sesuai untuk menyimpan keutamaan pengguna atau menguruskan status aplikasi tunggal halaman, tetapi tidak sesuai untuk penyimpanan jangka panjang maklumat sensitif.

Apakah atribut global yang paling biasa digunakan dalam HTML? Apakah atribut global yang paling biasa digunakan dalam HTML? Jul 10, 2025 am 10:58 AM

Kelas, ID, Gaya, Data, dan Tajuk adalah atribut global yang paling biasa digunakan dalam HTML. Kelas digunakan untuk menentukan satu atau lebih nama kelas untuk memudahkan tetapan gaya dan operasi JavaScript; ID menyediakan pengenal unik untuk elemen, sesuai untuk lompatan sauh dan kawalan JavaScript; Gaya membolehkan gaya sebaris ditambah, sesuai untuk debugging sementara tetapi tidak disyorkan untuk kegunaan besar-besaran; sifat data digunakan untuk menyimpan data tersuai, yang mudah untuk interaksi front-end dan back-end; Tajuk digunakan untuk menambah arahan tetikus, tetapi gaya dan kelakuannya terhad oleh penyemak imbas. Pemilihan yang munasabah sifat -sifat ini dapat meningkatkan kecekapan pembangunan dan pengalaman pengguna.

Melaksanakan pemuatan malas asli untuk imej dalam html Melaksanakan pemuatan malas asli untuk imej dalam html Jul 12, 2025 am 12:48 AM

Pemuatan malas asli adalah fungsi penyemak imbas terbina dalam yang membolehkan pemuatan gambar malas dengan menambah atribut pemuatan = "malas" ke tag. 1. Ia tidak memerlukan JavaScript atau perpustakaan pihak ketiga, dan digunakan secara langsung dalam HTML; 2. Ia sesuai untuk gambar yang tidak dipaparkan pada skrin pertama di bawah halaman, galeri gambar menatal tambahan dan sumber gambar yang besar; 3. Ia tidak sesuai untuk gambar dengan skrin pertama atau paparan: Tiada; 4. Apabila menggunakannya, pemegang tempat yang sesuai harus ditetapkan untuk mengelakkan susun atur susun atur; 5. Ia harus mengoptimumkan pemuatan imej responsif dalam kombinasi dengan atribut srcset dan saiz; 6. Isu keserasian perlu dipertimbangkan. Sesetengah pelayar lama tidak menyokongnya. Mereka boleh digunakan melalui pengesanan ciri dan digabungkan dengan penyelesaian JavaScript.

See all articles