Es wird empfohlen, den CSS-Box-Modus gründlich zu verstehen (kurze Einführung in das DIV-Layout)_Erfahrungsaustausch

Kata Pendahuluan
Jika anda ingin cuba susun atur halaman web anda tanpa menggunakan jadual, tetapi gunakan CSS untuk susun atur halaman web anda, yang sering didengar menggunakan p untuk susun atur struktur halaman web anda, atau anda ingin mempelajari Reka bentuk piawaian halaman web, atau bos anda mahu anda menukar kaedah susun atur meja tradisional untuk meningkatkan daya saing syarikat, maka satu titik pengetahuan yang anda mesti didedahkan ialah mod kotak CSS Ini adalah teras susun atur p, susun atur meja tradisional Ia menggunakan jadual saiz yang berbeza dan sarang jadual ke kedudukan dan susun atur kandungan halaman web Selepas bertukar kepada susun atur CSS, halaman web disusun melalui kotak dan sarang kotak dengan saiz berbeza yang ditentukan oleh CSS. Oleh kerana kod halaman web yang ditaip dengan cara ini adalah ringkas, mudah dikemas kini dan boleh serasi dengan lebih banyak penyemak imbas, seperti peranti PDA, ia juga boleh dilayari secara normal, jadi adalah berfaedah untuk melepaskan penataan jadual yang saya suka Sebelum ini, yang lebih penting, penyusunan taip halaman web. Kelebihannya jauh lebih banyak daripada ini. Anda boleh mencari maklumat yang relevan sendiri.
Memahami model kotak CSS
Apakah model kotak CSS? Mengapa ia dipanggil kotak? Mari kita bincangkan tentang nama atribut yang sering kita dengar dalam reka bentuk web: kandungan, padding, jidar dan mod kotak CSS semuanya mempunyai atribut ini.

Kita boleh memahami sifat-sifat ini dengan memindahkannya ke kotak (kotak) dalam kehidupan seharian kita. Kemudian isinya adalah apa yang ada di dalam kotak itu adalah buih atau bahan tambahan tahan gempa yang lain untuk mengelakkan kandungan (berharga) daripada rosak, seperti untuk sempadan itu sendiri; kotak tidak boleh diletakkan apabila ia diletakkan bersama-sama, meninggalkan ruang tertentu untuk pengudaraan dan untuk mudah dikeluarkan. Dalam reka bentuk web, kandungan sering merujuk kepada teks, gambar dan elemen lain, tetapi ia juga boleh menjadi kotak kecil (p-nested) Berbeza daripada kotak dalam kehidupan sebenar, perkara dalam kehidupan sebenar secara amnya tidak boleh lebih besar daripada kotak, jika tidak kotak itu akan diregangkan Patah, dan kotak CSS adalah anjal Perkara di dalam adalah lebih besar daripada kotak itu sendiri dan akan meregangkannya paling banyak, tetapi ia tidak akan rosak. Pengisian hanya mempunyai atribut lebar, yang boleh difahami sebagai ketebalan bahan bantu anti-seismik dalam kotak dalam kehidupan, manakala sempadan mempunyai saiz dan warna, yang boleh difahami sebagai ketebalan kotak yang kita lihat dalam kehidupan. dan bahan warna apa kotak itu dibuat. Sempadan ialah jarak antara kotak dengan benda lain. Dalam kehidupan sebenar, andaikan kita berada dalam segi empat sama dan letakkan kotak dengan saiz dan warna yang berbeza pada selang waktu tertentu dan dalam susunan tertentu Akhirnya, apabila kita melihat ke bawah dari segi empat sama, kita akan melihat grafik dan struktur yang serupa dengan apa yang kita mahu lakukan . Reka letak halaman web direka, seperti yang ditunjukkan di bawah.

Susun atur halaman web yang diperbuat daripada “kotak”

Wie gut verstehen Sie das CSS-Boxmuster? Wenn es nicht gründlich genug ist, werde ich später weiterlesen und das Konzept der Boxen erklären.
Ändern Sie unser Denken
Das traditionelle Front-End-Webdesign wird folgendermaßen durchgeführt: Überlegen Sie je nach Anforderungen zunächst die Hauptfarbe, welche Art von Bildern verwendet werden soll, welche Schriftarten und Farben usw. Dann können wir es mit einer Software wie Photoshop frei zeichnen und schließlich in kleine Bilder schneiden. Nach dem Wechsel zu CSS für das Layout müssen wir diese Idee ändern Unser Hauptaugenmerk liegt auf der Semantik und Struktur der Seite. Da eine Webseite über eine starke CSS-Steuerung verfügt, können Sie den gewünschten Webseitenstil problemlos anpassen. Darüber hinaus ist CSS ein weiterer Zweck Das Layout dient dazu, den Code leicht lesbar zu machen, die Blöcke zu löschen und die Wiederverwendung zu stärken. Daher ist die Struktur wichtig. Wenn Sie sagen möchten, dass das Design meiner Webseite sehr kompliziert ist, kann dieser Effekt später erzielt werden? Was ich Ihnen sagen möchte, ist, dass der Effekt mit CSS im Allgemeinen schwierig zu erreichen ist, da die Steuerfähigkeit von CSS so leistungsstark ist. Übrigens hat die Verwendung von CSS einen sehr praktischen Vorteil B. für den Schriftsatz, wenn Sie Aufträge zum Erstellen einer Website entgegennehmen, wenn Sie CSS zum Layouten der Webseite verwenden, wenn der Kunde später unzufrieden ist, insbesondere mit dem Farbton, können Sie ihn ganz einfach ändern und sogar anpassen Kunden können mehrere Stile von CSS-Dateien auswählen oder ein Programm schreiben, um dynamische Aufrufe zu implementieren, damit die Website den Stil dynamisch ändern kann.
Erreichen der Trennung von Struktur und Präsentation
Bevor wir mit der eigentlichen Layoutpraxis beginnen, wollen wir noch etwas verstehen – die Trennung von Struktur und Präsentation. Dabei werden auch die Merkmale des CSS-Layouts genutzt. Der Code wird prägnant sein. Ist das nicht der Zweck des Erlernens von CSS? Wenn beispielsweise ein P-Tag vorhanden ist, bedeutet dies, dass es sich um ein Leistungsattribut handelt, das ich um zwei Zeichen rechts einrücken möchte Leerzeichen und dann fortfahren Ohne Leerzeichen hinzuzufügen, können Sie jetzt einen CSS-Stil für das P-Tag angeben: P {text-indent: 2em;}, sodass der resultierende Körperinhalt wie folgt aussieht, ohne zusätzliche Leistungskontroll-Tags:
Wenn Sie dies dennoch ändern möchten: Um einen Absatz mit Schriftart, Schriftgröße, Hintergrund, Zeilenabstand usw. zu ändern, fügen Sie einfach das entsprechende CSS direkt zum P-Stil hinzu. Es ist nicht erforderlich, es wie folgt zu schreiben:

Absatzinhalt

Dies ist eine Mischung aus Wenn viele Absätze eine einheitliche Struktur und Leistung haben, wäre es umständlich, den Code auf diese Weise aufzuschreiben.
Lassen Sie uns direkt einen Codeabschnitt auflisten, um unser Verständnis der Trennung von Struktur und Leistung zu vertiefen:
Verwenden Sie CSS für den Schriftsatz

< ;p id="photoList"> >
;/p>

Kein CSS-Layout

Kaedah pertama adalah untuk memisahkan struktur dan persembahan Kod untuk bahagian kandungan haruslah mudah. ​​Jika terdapat lebih banyak senarai imej, maka kaedah susun atur CSS yang pertama akan mempunyai lebih banyak kelebihan anda faham: Saya Dalam BADAN, saya ingin memperkenalkan anda kepada seseorang, saya hanya akan memberitahu anda bahawa dia adalah seorang wanita, anda boleh mengetahuinya dengan menyemaknya dalam CSS. Dengan cara ini, kerja saya dalam BODY akan menjadi mudah, yang bermaksud bahawa kod BODY akan menjadi mudah. Jika BODY mempunyai ahli pasukan di sana, saya hanya boleh merekodkan item dalam CSS Ini adalah sedikit seperti konsep komponen dan kejadian dalam perisian Flash yang berbeza berkongsi komponen yang sama, jadi fail animasi tidak akan menjadi besar adalah untuk memindahkan idea kepada reka bentuk web CSS, iaitu, kodnya tidak rumit, dan fail halaman web adalah kecil dan boleh dimuat turun oleh pelanggan dengan lebih cepat.

Gunakan reka letak CSS untuk mengurangkan saiz fail halaman web

Seperti reka letak yang saya buat di atas, ia dibahagikan kepada empat blok, dan bingkai setiap blok adalah yang sama Ya, rangka kerja ini ditulis dalam CSS Setelah gaya ditulis, ia boleh dipanggil berkali-kali (dipanggil dengan kelas, bukan ID Selagi kandungan teks diubah, banyak bahagian dengan gaya bersatu boleh dihasilkan. Kod gaya dan strukturnya ialah (sila jangan salin dan jana halaman web secara langsung, tampal kod berikut ke dalam halaman web yang sepatutnya):

 

结构代码是这样的：

 

 
 

首 页

 

文 章

 

相册

 

Blog

 

论 坛

 

帮助

 
 
 

前言

 

第一段内容

 

理解CSS盒子模式

 

第二段内容

 

 
 

关于华升 | 广告服务 | 华升招聘 | 客服中心 | Q Q留言 | 网站管理 | 会员登录 | 购物车

Copyright ©2006 - 2008 Tang Guohui. Alle Rechte vorbehalten

 

 
 

　　好了,此文到此结束,更多内容,如:CSS中的盒子宽度计算,浏览器兼容问题,XHTML规范化写法等请大家去参考其它资料.如果觉得此文还可以,看过之后记得跟帖,你的鼓励是我不断出新文章的动力^-^