div＋css布局入门_CSS/HTML

你正在学习CSS布局吗？是不是还不能完全掌握纯CSS布局？通常有两种情况阻碍你的学习：

第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。

另一种原因是你对那些非常熟悉的表现层属性(例如：cellpadding,、hspace、align="left"等等)束手无策，不知道该转换成对应的什么CSS语句。当你解决了第一种问题，知道了如何结构化你的HTML，我再给出一个列表，详细列出原来的表现属性用什么CSS来代替。

结构化HTML
我们在刚学习网页制作时，总是先考虑怎么设计，考虑那些图片、字体、颜色、以及布局方案。然后我们用Photoshop或者Fireworks画出来、切割成小图。最后再通过编辑HTML将所有设计还原表现在页面上。

如果你希望你的HTML页面用CSS布局(是CSS-friendly的)，你需要回头重来，先不考虑“外观”，要先思考你的页面内容的语义和结构。

外观并不是最重要的。一个结构良好的HTML页面可以以任何外观表现出来，CSS Zen Garden是一个典型的例子。CSS Zen Garden帮助我们最终认识到CSS的强大力量。

HTML不仅仅只在电脑屏幕上阅读。你用photoshop精心设计的画面可能不能显示在PDA、移动电话和屏幕阅读机上。但是一个结构良好的HTML页面可以通过CSS的不同定义，显示在任何地方，任何网络设备上。

开始思考
首先要学习什么是"结构"，一些作家也称之为"语义"。这个术语的意思是你需要分析你的内容块，以及每块内容服务的目的，然后再根据这些内容目的建立起相应的HTML结构。

如果你坐下来仔细分析和规划你的页面结构，你可能得到类似这样的几块：

标志和站点名称 
主页面内容 
站点导航(主菜单) 
子菜单 
搜索框 
功能区(例如购物车、收银台) 
页脚(版权和有关法律声明) 
我们通常采用DIV元素来将这些结构定义出来，类似这样：

레이아웃이 아니라 구조입니다. 이는 콘텐츠 블록에 대한 의미론적 설명입니다. 구조를 이해하면 해당 ID를 DIV에 추가할 수 있습니다. 모든 콘텐츠 블록은 DIV 컨테이너 내에 포함될 수 있으며 다른 DIV는 그 안에 중첩될 수 있습니다. 콘텐츠 블록에는 제목, 단락, 이미지, 표, 목록 등 모든 HTML 요소가 포함될 수 있습니다.

위 내용에 따르면 HTML을 구성하는 방법을 이미 알고 있으므로 이제 레이아웃과 스타일을 정의할 수 있습니다. 각 콘텐츠 블록은 페이지의 어느 위치에나 배치할 수 있으며 블록의 색상, 글꼴, 테두리, 배경, 정렬 속성 등을 지정할 수 있습니다.

선택기를 사용하는 것은 놀라운 일입니다
ID의 이름은 특정 콘텐츠 블록을 제어하는 ​​수단입니다. 이 콘텐츠 블록을 DIV로 둘러싸고 고유 ID를 추가하면 CSS를 사용하여 선택할 수 있습니다. 제목, 목록, 그림, 링크, 단락 등을 포함한 각 페이지 요소의 모양을 정확하게 정의하는 변환기입니다. 예를 들어 #header에 대한 CSS 규칙을 작성하면 #content의 이미지 규칙과 완전히 다를 수 있습니다.

또 다른 예는 다양한 규칙을 통해 다양한 콘텐츠 블록의 링크 스타일을 정의할 수 있다는 것입니다. 예: #globalnav a:link 또는 #subnav a:link 또는 #content a:link. 다양한 콘텐츠 블록의 동일한 요소에 대해 다양한 스타일을 정의할 수도 있습니다. 예를 들어, #content p와 #footer p를 통해 각각 #content와 #footer에서 p의 스타일을 정의합니다. 구조적으로 말하면 귀하의 페이지는 사진, 링크, 목록, 단락 등으로 구성됩니다. 이러한 요소 자체는 표시되는 네트워크 장치(PDA, 휴대폰 또는 인터넷 TV)에 영향을 미치지 않습니다.

신중하게 구성된 HTML 페이지는 매우 간단하며 모든 요소는 구조적 목적으로 사용됩니다. 단락을 들여쓰려면 blockquote 태그를 사용할 필요가 없습니다. p 태그를 사용하고 p에 CSS 여백 규칙을 추가하면 들여쓰기 목적이 달성됩니다. p는 구조화된 태그이고 margin은 표시 속성입니다. 전자는 HTML에 속하고 후자는 CSS에 속합니다. (구조와 프리젠테이션의 분리입니다.)

잘 구성된 HTML 페이지에는 프리젠테이션 속성 태그가 거의 없습니다. 코드가 매우 깔끔하고 간결합니다. 예를 들어 원본 코드 는 이제 HTML로만 을 작성할 수 있으며 성능을 제어하는 ​​모든 항목은 CSS로 작성됩니다. 구조화된 HTML에서 테이블은 다른 것이 아닌 테이블입니다(예: 레이아웃에 사용됨). 그리고 포지셔닝).

직접 구조를 연습해 보세요
위에서 언급한 내용은 가장 기본적인 구조일 뿐입니다. 실제 적용에서는 필요에 따라 콘텐츠 블록을 조정할 수 있습니다. DIV 중첩이 자주 발생하며 "컨테이너" 레이어에 다음과 유사한 구조를 가진 다른 레이어가 있는 것을 볼 수 있습니다.

목록

다른 목록

Elemen div bersarang membolehkan anda mentakrifkan lebih banyak peraturan CSS untuk mengawal pembentangan Contohnya: anda boleh memberi #navcontainer peraturan untuk memusatkan senarai di sebelah kanan dan #globalnav peraturan untuk memusatkan senarai di sebelah kiri. , dan # Satu lagi prestasi yang sama sekali berbeza bagi senarai subnav.

Ganti kaedah tradisional dengan CSS
Senarai berikut akan membantu anda menggantikan kaedah tradisional dengan CSS:

Atribut HTML dan kaedah CSS yang sepadan
Atribut HTML Kaedah CSS Penerangan
selaraskan ="left"

align="right" float: left;

float: right; Gunakan CSS untuk mengapungkan sebarang elemen: gambar, perenggan, div, tajuk, jadual, dll. dll.

Apabila anda menggunakan atribut apungan, anda mesti menentukan lebar untuk elemen terapung.

marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" margin: 0 Menggunakan CSS, margin boleh ditetapkan pada mana-mana elemen, bukan hanya elemen badan. anda boleh menentukan nilai margin bahagian atas, kanan, bawah dan kiri elemen masing-masing.

vlink="#333399" alink="#000000" link="#3333FF" a:link #3ff;

a:dilawati: #339; :hover: #999;

a:active: #00f
Dalam HTML, warna pautan ditakrifkan sebagai nilai atribut badan. Gaya pautan adalah sama di seluruh halaman. Menggunakan pemilih CSS, gaya pautan boleh berbeza di bahagian halaman yang berbeza.

bgcolor="#FFFFFF" background-color: #fff; Dalam CSS, warna latar belakang boleh ditakrifkan untuk sebarang elemen, bukan hanya elemen badan dan jadual.

bordercolor="#FFFFFF" border-color: #fff; Mana-mana elemen boleh menetapkan sempadan (boeder), anda boleh menentukan masing-masing atas, kanan, bawah dan kiri

border="3 "

cellspacing="3" border-width: 3px; Menggunakan CSS, anda boleh mentakrifkan jidar jadual sebagai gaya bersatu atau anda boleh menentukan warna, saiz dan gaya bahagian atas, kanan, sempadan bawah dan kiri masing-masing.

Anda boleh menggunakan jadual, td atau pemilih ini

Jika anda perlu menetapkan kesan tanpa sempadan, anda boleh menggunakan definisi CSS: border-collapse:









jelas: kiri;

jelas: kanan; > Banyak susun atur 2 lajur atau 3 lajur menggunakan atribut apungan untuk kedudukan. Jika anda mentakrifkan warna latar belakang atau imej latar belakang dalam lapisan terapung, anda boleh menggunakan atribut jelas

cellpadding="3"

vspace="3"

hspace. = "3" padding: 3px; Menggunakan CSS, mana-mana elemen boleh menetapkan atribut padding Begitu juga, padding boleh ditetapkan ke atas, kanan, bawah dan kiri. padding adalah telus.

align="center" text-align: center;

margin-right: auto; 🎜>Elemen peringkat blok seperti div, p boleh dipusatkan secara mendatar menggunakan margin-kanan: auto; dan margin-kiri: auto; sokongan CSS oleh penyemak imbas, kadangkala kita perlu menggunakan beberapa helah (godam) atau mewujudkan persekitaran (Penyelesaian) untuk membolehkan CSS mencapai kesan yang sama seperti kaedah tradisional. Contohnya, elemen peringkat blok kadangkala perlu menggunakan teknik pemusatan mendatar, teknik pepijat model kotak, dsb. Semua teknik ini diperincikan dalam artikel Molly Holzschlag "Reka Bentuk Web Bersepadu: Strategi untuk Pengurusan Hack CSS Jangka Panjang".

Satu lagi tapak sumber untuk petua CSS ialah "Position is Everything" Big John dan Holly Bergevin.

Memahami gelagat terapung
"Mengandungi Terapung" Eric Meyer akan membantu anda menguasai cara menggunakan atribut terapung untuk reka letak. Unsur terapung kadangkala perlu dikosongkan Membaca "Cara Mengosongkan Terapung Tanpa Penanda Struktur" akan sangat membantu.

Lagi bantuan
Senarai Perbincangan CSS sedia ada ialah sumber yang baik, ia mengumpul maklumat daripada kumpulan perbincangan WiKiA, termasuk ringkasan reka letak CSS (css-discuss.incutio.com/ ?page=CssLayouts) , Ringkasan Petua CSS (css-discuss.incutio.com/?page=CssHack) dan banyak lagi