Keqiji OEMのCSS分析と開発経験_経験交流

keqiji oem の css 分析
この oem は keqiji によって開始され、ドメイン名をお持ちの場合は、独自の web サイトをカスタマイズできます。ウェブマスターが自分でカスタマイズするためのものなので、html、css、jsなどのコードが公開されています。ただし、デフォルトの css は css であり、変更できません。
この css を書くときは、css にあまり詳しくないウェブマスターでもカスタマイズできるように、最小限のタグを使用するようにしました。また、css をレイアウトして記述するときは、大きいものから小さいものへ、小さいものから小さいものへと進むのが一般的な考え方です。
このレイアウトと css は一度書かれたもので変更されていないため、一部の家主はまだ最適化できますが、そのようなコードは最適ではありません。ただし、このようなレイアウトの css は、ウェブマスターがさまざまな方法で定義できます。すぐにいくつかの例を示します。
以下は、初心者に非常に適したこの css の分析です。
プログラム コード

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

ここでは、グローバル テキスト サイズは 12px として定義され、行の高さは 180% です。このような行の高さは、目が疲れにくいように見えます。
ここでは、ページ上の数字と英語を英語フォントで表示できるように、verdana フォントの後に song フォントを配置しています。これにより、より美しくなります。song フォントを追加しない人もいますが、これにより問題が発生します。問題がありますが、少なくとも私のテスト結果は次のとおりです。
また、特定のオペレーティング システムの一部のブラウザでは、背景を追加しないと背景が別の色になってしまうため、背景色を追加しました。
ここで全体のテキストの色も定義します。黒を使用しない理由は、目をより快適にするためです。
最も重要なことは、textalign を追加することです。これは、すべてのコンテンツを body の中央に配置するためであり、内部の大きな div ブロックと組み合わせると、ページの内容を反映する 固定幅のため、ie や firefox などのブラウザでは、コンテンツが常に web ページの中央に表示されます。これは、主に ie と firefox の違いを解決するためです。ここでは、テキストは次のとおりです中央揃えにしてから、大きな div を body. ブロックに追加し、テキストが左揃えになるようにこの div のブロックを書き込みます。

 */ 
 body{ font-size:12px; line-height:1.8; font-family:verdana, "宋体", arial,sans; text-align:center;
  background:#fff; color:#666;} 
 /*

グローバル テキスト リンク スタイルが定義されますここでは省略形を使用しました。スタイルは keqiji メイン サイトと同じです。

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

レイアウトとスタイルには ul と li が多く使用されるため、 ul と li 自体は見た目が良くないので、ここではリストのドットとマージンを削除します。

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

/>

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

画像の境界線テンプレート フレームは次のとおりです。ここでは 0 として定義されており、ここではグローバルに定義されています。後ろに枠線を追加したり、さらに枠線を追加したりしていますが、メインのアイデアは依然として大から小まであります。

 */ 
 img{ border:0;}   
 /*

これは、body に含まれる最大かつ最も外側の div ブロックです。これを使用して、web ページ コンテンツ全体の幅を制御できます。 bodyと併用することで自動芯出しが可能です。 web サイト全体の幅と水平方向の中央揃えを定義します。
1. ここでは、すべてのテキストが左揃えになるように定義されています。
2. margin を使用して firefox でセンタリングを実現します。
3. overflowを使用する場合、一部の人が定義した内容が広すぎてレイアウトに影響を与えるのではないかと心配です。したがって、ハングアップすると自動的に非表示になります。

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

info は、幅 100% の別の div ブロックを追加します。これは、一部のウェブマスターがレイアウトを全画面表示にカスタマイズできるように追加され、右側は固定幅、左側は自動的に適用されます。そしてそれは1行2列の前提問題を解くための基礎となります。
ここで float を追加したのは、「火で火を消す」ため、つまり、float を使用して float の問題を解決するためです。右側にもフロートが必要なので、

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

これがナビゲーション バーです
boder を使用して側面に緑色を追加します

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

ここではabsoluteを使用しています。positioningは、これを使用しているページが3ページ以上あるため、他のコンテンツの影響を受ける可能性が高いため、基本的に影響を受けないように絶対位置として定義されています。
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} 
 /*

これは、header 領域のタイトル テキストのサイズを定義します。色など主な理由は、ウェブマスターがテキスト ロゴを直接追加できるようにするためです。

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

次の left と right により、1 行 2 列のレイアウトが完成します。 leftの外側にinfoを追加しました。これが、ページが自動的に適切に適応できるようにカスタマイズがより柔軟になっている理由です。
左側の大きなブロック
ここの left は、その外側に 100% div があるため、右から 305px 離れています。したがって、右側の列の幅は 305 のままになります。このようにして、left を適応させることができます。

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

これは left の最大の div です。これは、ブラウザのバージョンごとに padding の解釈と計算方法が異なることを解決するためです*/

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

その前の info の幅はすでに 100% であり、内側の左が彼に別の 305px ホールを残しました。したがって、左側からのマイナスの 305px は left のすぐ隣にあります。ここでは左のブロックから5px離れた300pxと書きましたが、このほうが快適そうです。
ここでは幅を 289px として定義します。padding の左右に 5px を加えたものは 299px です。安全のため、1 ピクセル少なく書き込みます。

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

これは検索項目です。言うことはありません。
検索してください。

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

ここでは、
3 つの一般的な 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 を記述するのがはるかに簡単であることがわかります。必要なコードはほんのわずかだけです。ホームページにはさらに多くのコードがある可能性がありますが、
以下では 1 つずつ説明しません。とてもシンプルなものです。

*/  
/*单个页面部分*/ 
 .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. 1 行に 3 列、または 1 行に 2 列が自動的に適応されます。この例で十分です。効果は ie6、ie7、firefox などでも同じです。自動適応を記述するために大量のコードを用意する必要はありません。
3. レイアウトで最も難しいのは、フォームをレイアウトすることです。フォームには非常に多くの要素があるため、特に多くのブラウザーに適応させる場合には、制御が難しい場合があります。こちらの方が難しいです。将来フォームに遭遇する場合、それがあまり単純でない場合は、間違いなくテーブルを使用します。複雑なフォームをテーブルでレイアウトすると、コードは間違いなく人々が作成する div css よりも小さくなると信じています。よく言います。テーブルクロスを使用すると、メンテナンスが特に簡単になります。
4. css を設計する場合、一般的に、ラベルは大から小の順に定義され、レイアウトは大から小の順に定義されます。タグは必ずしも頻繁に使用されるわけではありません。
5. divやブロックにはidを付けないほうが良いという人もいますが、idを付けるのは正しいと思います、idに別のタグがある場合はcssで管理した方が楽です。同じ色のいくつかを class に記述する必要があると考えることがあります。あとはどこで使うか調整していきますが、色が変わったらclassを変えると全く変わります。ただし、すべてを変えるのではなく、一部だけを変える場合はどうしますか、と聞きたいです。レイアウトを変えるつもりですか？そうであれば、構造と性能を分離することに何の意味があるのか​​。
6. 全体的なレイアウトは家を建てるように非常にシンプルですが、大きなものであれば数日で建てることができます。でも細かい装飾は面倒だし大変だし疲れる。 1 ピクセルに分割してコード行を節約し、多くの時間を費やすことがよくありますが、それでも時間はかかると感じますが、一定の範囲内である必要があります。
7. レイアウトするときに、レイアウトと css を非常にクールにする場合があります。しかし、同僚はなぜこのように書くのかしばらく理解できないかもしれませんし、複数人で開発するのは難しいでしょう。自分の書いた内容を変更できるのは自分だけです。これは面倒だ。したがって、非常にnb的なレイアウトにする必要があります。ポイント テーブルに適応させることでコードを節約することもできます。そして彼らは皆それを理解することができます。

上記は keqiji oem の css 分析および開発体験談の内容です。その他の関連コンテンツについては、php 中国語 web サイト (www.php.cn) をご覧ください。