Analisis CSS dan pengalaman pembangunan Keqiji OEM_Pertukaran pengalaman

Analisis CSS Keqiji OEM
OEM ini dilancarkan oleh Keqiji Jika anda mempunyai nama domain, maka anda boleh menyesuaikan laman web anda sendiri. Memandangkan ia adalah untuk juruweb menyesuaikannya sendiri, HTML, CSS, JS dan kod lain dibuka. Tetapi CSS lalai ialah CSS dan tidak boleh diubah.
Semasa menulis CSS ini, saya cuba menggunakan tag paling sedikit, supaya juruweb yang tidak begitu biasa dengan CSS juga boleh menyesuaikannya. Di samping itu, apabila menyusun dan menulis CSS, idea umum adalah untuk pergi dari besar ke kecil, dan dari kecil ke kecil.
Reka letak dan CSS ini ditulis sekali dan tidak diubah, jadi sesetengah tuan tanah masih boleh mengoptimumkannya dan kod tersebut tidak optimum. Walau bagaimanapun, CSS susun atur sedemikian boleh ditakrifkan oleh juruweb dalam pelbagai cara. Saya akan tunjukkan beberapa contoh kepada anda sebentar lagi.
Berikut adalah analisis CSS ini, yang sangat sesuai untuk pemula.
Kod program

@charset "utf-8"; 
/*定义全局,在这定义了全局中的标签*/ 
 * {margin:0px;padding:0px;} 
 /*

Saiz teks global ditakrifkan di sini sebagai 12PX dan ketinggian garisan adalah 180% tidak akan meletihkan mata.
Di sini, saya meletakkan fon Lagu di belakang fon Verdana supaya nombor dan bahasa Inggeris pada halaman boleh dipaparkan dalam fon Inggeris, yang akan menjadi lebih cantik, sesetengah orang tidak menambah fon Lagu, tetapi ini akan menyebabkan masalah. Sekurang-kurangnya itulah yang ditunjukkan oleh keputusan ujian saya.
Selain itu, saya menambah warna latar belakang kerana dalam sesetengah pelayar di bawah sistem pengendalian tertentu, jika anda tidak menambah latar belakang, latar belakang akan menjadi warna lain.
Saya juga mentakrifkan keseluruhan warna teks di sini. Sebab untuk tidak menggunakan warna hitam adalah untuk menjadikan mata lebih selesa; menyedari bahawa jika kandungan halaman adalah Jika lebar tetap, maka dalam pelayar seperti IE dan FIREFOX, kandungan sentiasa di tengah-tengah halaman web Ini terutamanya untuk menyelesaikan perbezaan antara IE dan FIREFOX Di sini, teks berada di tengah, dan kemudian kami menambah blok DIV yang besar pada BODY , tulis blok DIV ini supaya teks dijajarkan ke kiri,

 */ 
 body{ font-size:12px; line-height:1.8; font-family:Verdana, "宋体", Arial,Sans; text-align:center;
  background:#FFF; color:#666;} 
 /*

Gaya pautan teks global ialah. ditakrifkan di sini. Saya menggunakan bentuk yang disingkatkan Gayanya adalah sama seperti tapak utama Keqiji

*/ 
 a:link,a:visited{color:#000099; text-decoration: underline;} 
 a:hover,a:active{color:#000;text-decoration: none;background-color: #FED762;} 
 /*

Memandangkan banyak UL dan LI akan digunakan dalam reka letak, dan gaya UL dan LI sendiri tidak cantik, jadi di sini kami mengalih keluar senarai titik dan margin

 */ 
 ul,li{ list-style:none;} 
 /*

Templat sempadan imej ditakrifkan di sini sebagai 0 dan ia ditakrifkan secara global di sini . Terdapat sempadan ditambah di bahagian belakang dan tambahan yang ditambah Idea utama masih dari besar ke kecil.

 */ 
 img{ border:0;}   
 /*

Ini adalah blok DIV terbesar dan paling luar yang disertakan dalam BODY Dengannya, anda boleh mengawal lebar keseluruhan kandungan halaman web. Digunakan bersama BODY, pemusatan automatik boleh dicapai. Tentukan lebar dan pemusatan mendatar bagi keseluruhan tapak web

1. Di sini ditakrifkan bahawa semua teks dijajar ke kiri.
2. Gunakan MARGIN untuk mencapai pemusatan dalam FIREFOX.
3. Apabila menggunakan OVERFLOW, saya bimbang kandungan yang ditakrifkan oleh sesetengah orang akan terlalu luas dan menjejaskan reka letak. Jadi ia akan disembunyikan secara automatik apabila digantung;

 */ 
 #wrapper{ text-align:left;margin:0 auto; width:1000px; overflow:hidden;} 
 /*

INFO telah menambah blok DIV dengan lebar 100%. sebelah kanan mempunyai lebar tetap, dan sebelah kiri digunakan secara automatik. Dan ia adalah asas untuk menyelesaikan soalan prasyarat satu baris dan dua lajur.

Saya tambah FLOAT di sini untuk "melawan api dengan api", iaitu menggunakan float untuk menyelesaikan masalah terapung. Kerana pelampung juga diperlukan di sebelah kanan;

 */ 
 #info{ width:100%; float:left; } 
 /*

Berikut ialah bar navigasi

Gunakan BODER untuk menambah warna hijau di sebelah

*/ 
 #nav{width:100%; text-align:center; border-top:5px solid #5DB30A; background:#FAFAFA; line-height:2.2} 
 /*

Kedudukan mutlak digunakan di sini, kerana terdapat lebih daripada tiga halaman menggunakan ini, kemungkinan besar ia akan dipengaruhi oleh kandungan lain, jadi ia ditakrifkan sebagai kedudukan mutlak, supaya ia pada dasarnya tidak akan terjejas.

kedudukan gambar bykijiji

*/ 
 #bykijiji{position: absolute; margin-left:550px; margin-top:-20px;}  
 /* 
 主体大块*/ 
 #main{text-align:left;margin:0 auto;} 
 /*底部大块*/ 
 #footer{border-top:1px solid #CDCDCD; padding:10px 0; clear:both; text-align:center;margin:0 auto;} 
 /*头部大块*/ 
 #header{  clear:both} 
 /*

Ini mentakrifkan saiz teks tajuk dalam kawasan HEADER. Warna dll. Sebab utama adalah untuk membenarkan juruweb menambah LOGO teks secara langsung.

标题*/ 
 #header h2{ font-size:35px; margin-top:0px; font-weight:bold; color:#404040} 
 /*

KIRI dan KANAN berikut melengkapkan reka letak satu baris dan dua lajur. Saya menambah MAKLUMAT di luar KIRI. Inilah sebabnya mengapa penyesuaian dibuat lebih fleksibel supaya halaman boleh menyesuaikan secara automatik dengan sewajarnya.

Blok besar di sebelah kiri
KIRI di sini adalah 305PX jauh dari kanan, kerana terdapat 100% DIV di luarnya. Jadi, ini meninggalkan lebar 305 untuk lajur kanan. Dengan cara ini LEFT boleh menyesuaikan diri.

 */ 
 #left{ margin-right:305px;color:#000; font-size:14px;} 
 /*

Ini ialah DIV terbesar di LEFT. Ini adalah untuk menyelesaikan perbezaan dalam tafsiran dan kaedah pengiraan PADDING dalam versi pelayar yang berbeza*/

#leftbox{ padding:10px; font-size:14px;} 
 /*右边大块

Kerana lebar INFO di hadapan sudah 100%, dan lebar di dalam. LEFT meninggalkan dia satu lagi lubang 305PX. Oleh itu, 305PX negatif dari sebelah kiri adalah betul-betul di sebelah KIRI. Saya menulis 300PX di sini, iaitu 5PX dari blok kiri ini kelihatan lebih selesa.

Di sini saya mentakrifkan lebar sebagai 289PX ditambah 5PX di sebelah kiri dan kanan PADDING ia adalah 299PX;

 */ 
 #right{  margin-left:-300px; float:left; width:289px; padding:5px;background:#F7F7F7; margin-top:24px;} 
 /*

Ini adalah item carian, tiada apa yang boleh dikatakan.

Cari yang itu

*/ 
 #search{ padding:0 0 10px 0; text-align:left} 
 /*定义标题文字大小*/ 
 h1{ font-size:16px;} 
 /*

 在这里，定议了
 公用的三个CSS，他们都是布局中常用的。分别为水平换行，左浮动和右浮动
 这样命名很简单，而且字符最短，这样论在CSS文件中，还是页面中，最能作到代码尽量少。
 

*/ 
 .c{clear:both; height:0px; overflow:hidden;} 
 .l{ float:left;} 
 .r{ float:right;} 
 /*这里定义了一个文字大小，由于上边定义的很多都是12PX；可能或一定会有部分地方要用小字的，所以提前写在这里。*/ 
 .f12{ font-size:12px;} 
 /*这义SMALL的文字大小。*/ 
 small{font-size:12px;color:#999;font-weight: normal; padding-left:5px;} 
 .h_hr{ height:1px; overflow:hidden; margin:10px 5px; background:#CDCDCD;} 
/*++++++++++++++++++++++++++++++++++++++++++++++++++

以上就是定义的全局。然后在下边又分别对首页，LIST页面，以及单个信息的页面作了单独的CSS；
可以看出，用了上边的基础，下边单个页面CSS写起就方便多了。而且只要很少的代码就可以了。可能首页的代码会多一些；
下边的这些就不一一说明了。很简单的东西。

*/  
/*单个页面部分*/ 
 .imgbox{ text-align:center; width:200px;} 
 .imgbox img{ border:4px solid #CCC; display:block; margin:0 auto; } 
 .navbox{border-left:4px solid #f5f5f5; margin:5px 0 10px 0; padding-left:8px; } 
/*LIST页面部分*/ 
 #listnav{ background:#f7f7f7; line-height:2.0; padding-left:10px; border-bottom:1px solid #D4D4D4;} 
 .listbox{ color:#666;width:590px;font-size:12px;border-bottom: 1px dashed #CCC;} 
 /*绿色的时间*/ 
 .listbox p{color: #008000;} 
 /*大标题*/ 
 #leftbox h2{font-size:14px; margin-top:10px;} 
 #leftbox span{ margin-left:10px;} 
/*首页页面部分*/ 
 #h_center_l{ width:66%; border-left:1px solid #CDCDCD;border-right:1px solid #CDCDCD; float:left;
 margin-top:10px;} 
 #h_center_lbox{width:49%; border-right:1px solid #CDCDCD; float:left;} 
 #h_center_lboxb{width:50%;  float:right;} 
 #h_center_r{width:33%; float:right;margin-top:10px;} 
 #h_center_l h1,#h_center_r h1{ padding-left:5px; font-size:14px;} 
 #h_center_l ul,#h_center_r ul{ padding-left:19px; font-size:12px;} 
 #qcity{clear:both; margin-bottom:20px; margin-top:10px;} 
 #qcity li{ display:inline; padding-left:10px;} 
 #qcity h3{ font-size:14px; color:#000} 
 #links { border-top: 1px solid #CCC; margin-top: 15px; } 
/*广告块部分*/ 
#leftbottomad{ background:#FFFFCC; margin-left:10px; display:none} 
#pfm{padding:20px;  font-size:12px;} 
/*CSS完*/

说一说我个人在写布局和CSS的一点感受吧！说明，只是个人的感受！
1、了解用户群，如果你的用户是白领都是学生。那么你没有必要去考虑IE5以下的版本。那样你会累死的。
2、一行三列或一行二列自动适应，这个例子就可以了，他在IE6，IE7，FIREFOX等的效果都是一样的。没有必要有一堆代码去写一个自动适应。
3、布局最难的就是布表单了。表单中的元素太多了，很难控制，特别是要适应很多浏览器。这个是更难了。如果将来我遇到表单，如果不是非常简单的，那么我一定用表格，我想信，复杂的表单用表格去布局，代码一定会小于那个人家常说的DIV+CSS。而且有表格布这东西，维护特别的容易。
4、在CSS设计的时间，总的来说，是标签从大到小来定义，布局从大块到小块。标签不一定用到很多。
5、有些人认为不要给那些DIV或块加上什么ID； 我认为，加ID是正确的，如果ID中有不同的标签，那么通过CSS来控制就在容易了。有时我们会认为一些同样的色彩应该写在一个CLASS里。然后哪里用到那么我们就在哪里调，如果变色，一改这个CLASS就全变了。但是，我想问，如果不全变呢，只变一块，你怎么办。还去改布局吗？ 如果是这样，那么结构和表现分开又有什么意义呢。
6、我们布大局可能会很简单，就像盖房子，大的样子几天就起来。但细细装修就麻烦了，又苦又累。我们常常分为了一个像素，节省一行代码而浪费大量的时间在上边，我感觉时间还是要花的，但是要有一个度。
7、布局时，我们也许把布局和CSS都弄的很NB。但同事一时半会看不懂你为什么要这样写，这样多人开发就很难了。你写的东西可能只有你能改。这样就麻烦了。所以，我们一定非要布局写的很NB。适应用点表格也是可以节省代码的。而且都能看懂。

以上就是客齐集OEM的CSS解析与开发经验_经验交流的内容，更多相关内容请关注PHP中文网（www.php.cn）！