淘宝端正春のCSSノートコレクション_交流体験

CSS を記述した経験を要約して、残念ながら、私はもうかなりの年齢なので、やりたいことは本当にできません。そこで考えを変え、noteという形で発表できるので、書けないことを気にしなくて済むと思いました。

それでは、タオバオのホームページのちょっとした裏技についてお話しましょう。

カテゴリ間の水平線と垂直線

昔から当初、カテゴリ間の縦線は 3 種類しかありませんでした。

1. 背景画像
   a タグにパディングを設定し、幅と高さ 1 ピクセルの背景画像を使用して右側に配置します。 。
   欠点: 最後のものでも、背景を非表示にするためにクラスを使用する必要があります。

2. 記号
   各 a タグの間を埋めるには「|」記号を使用します。
   デメリット: HTML ファイルが大きくなる、ファイルのメンテナンスが面倒になる、HTML では意味がなくなる。

3. a タグの右側の境界線。
   背景画像と同じですが、代わりにborder-rightを使用します。デメリットも上記と同様です。

これを見て、誰かが淘宝網のホームページを開いて、firebug を使用してソース コードを表示し、どのように行われているかを確認したかもしれません。

実際、現在の方法では、ul の overflow:hidden を使用してから、li の margin-left:-1px を使用します。このアプローチにより、上記の欠点を同時に回避できます。
なぜ今までそうしなかったのかわかりません。もしかして私がそのような習慣を最初に発見したのでしょうか？
カテゴリ間に垂直線を実装するためにこの方法を以前に使用した人は関係ありません。
しかし、タオバオのホームページがオンラインになった直後、一部の同業ウェブサイトもホームページの改訂にこの方法を使用しました。
そのウェブサイトは読まなくても大丈夫です。クラスは本当に書くことが少し多いです。 HTML の読み込みはさらに手間がかかります。
とにかく、ホームページが 117 万の Web ページを読み込む必要がある場合、私の脳は自動的にそれをブロックします。

角を丸くする方法。

この角を丸くするには、フロントエンド開発者が多大な労力を費やしすぎています。http 接続の数と CSS を考慮する必要があります。 . HTML のコード サイズとセマンティクス
掲載されているのは、既存の角丸を置き換える最近の計画です。考慮されていない状況も多くあるかもしれませんが、一般的な記述方法は次のとおりです。
利点 メンテナンスが簡単です。画像は 1 つだけです。ある程度任意に拡大縮小することもできます。欠点は、意味のない HTML コードが増えることです。

css:

.c,.c i,.c i i,.c b,.c b b,.c p{
background-image:url(http://www.php .cn/);/*背景画像*/
background-repeat:no-repeat;
}
.c{
width:200px;/*仮決定幅* /
background-position :0 -4px;
}
.c i{
display:block;
height:4px;
}
.c i i{
margin :0 0 0 4px;
background-position:right 0;
}
.c b{
display:block; height:4px;
背景-position:0bottom;
}
.c b b{
margin:0 0 0 4px;
background-position :rightbottom;
}
. c p{
margin:0 0 0 4px;
padding:0 4px 0 0;
background-position:right -4px ;
}
html：



ボタン ボタン ボタン ボタン ボタン ボタン
押してくださいボタン ボタン ボタン ボタン ボタン ボタン ボタンボタン ボタン ボタン


phpcn ltphpcn /p>

テーブルのグローバル定義

Firefox ではキャプション タグの左側に 1px の隙間ができるバグがあり、非常に迷惑です。簡単な方法は -1px しか思いつきません。余白がなくなりました。

css:

テーブル{
border-collapse:collapse;
}
table caption,table td,table th{
border:1px solid #a2bbdd;/*边框颜色*/
background:#c3d9ff;/*背景颜色*/
}
表のキャプション{
text-align:left;
ボーダーボトム:なし;
マージン左:-1px;
}
html：

表格标题

标题
标题
标题
标题


内容
内容
内容
内容

真剣に受け止める必要がある 2 つのタグ

頭字語タグは名詞を説明するのに最適ですが、あまり使用されていません。(私はずっと使いたいと思っていたので、書き留めました。)
css:
頭字語{cursor:help}
html:
text
このタグは、h2 でより多くのリンクを表示するために使用されるこのタグをどの Web サイトで見たか忘れました。本をチェックした後、誰もが感じました。それは少し不適切で、少し物議をかもしました。
css:
CSS コンポーネントはまだ書かれていません...送信する必要があります
html:
title more>>

タイトルの右側に「more」を実装しました
/>


かつて上の図に示すエフェクトを実行し、位置を使用して相対的な位置を設定しましたこれを h2 タグの右側に追加します。この方法では、実際にコードに複数の行が追加されます。実際、不器用な方法を使用してこれを実現できます。

たとえば、HTML コードは次のとおりです。

タイトル 詳細...
potsitionを利用するためのCSSはほぼ以下の通りです。

h2{
位置:相対;
高さ:20px;
}
スパン{
位置:絶対;
right:0;
top:0;
display:block;
height:20px;
} このようにして、右側でさらに多くのことを達成できます。実際には、さらに単純にすることもできます:

h2{
height:20px;
}
span{ float:right;
display:block;
margin:-10px 0 0 0;
height:20px;
}
実際には、margin を使用しているだけです。top の負の数は、達成するために使用されます。デフォルトの float は h2 タグの下にラップされるため、それ自体が飛び上がるようにします。コードはこれで終わりです。非常に簡単ではありませんか? 非常に簡単だと言いました。非常に簡単なので、別のテスト ページは公開しません。

ps: いつかは Blue Ideal と同じエディターを作る必要があると思います...
タオバオの CSS 属性順序記述基準

前の部門の同僚はそれぞれ一連の記述基準を持っていましたが、それがお互いの CSS コードを読むのが非常に困難であったため、一連の記述基準を実装しました、もしかしたらあなたにも役立つかもしれません。


*{
/*表示プロパティ*/
表示
位置
フロート
クリア
カーソル …

/*ボックス モデル*/
マージン
パディング
幅
高さ

/*植字*/
vertical-align
white-space
text-decoration
text-align
…

/*Text* /
color
font
content

/*border background boderとbackgroundを最後に置く理由は、変更の頻度がより頻繁になるためです。最後に確認すると便利ですよ（笑） */
border
background
}
最終的に属性の書き込み順の仕様は、 神?魔物? - 体型はどうですか! - 服装の種類 (ビキニ? パッド入りジャケット?) - 服装のスタイル (黒? 白? ボタン? ジッパー?) - どのような化粧品やヘアスタイルが使用されているか
文章標準のこの小さな部分は、推奨されている文章標準ではありません。ブラウザの製造元によって定義されているため、大多数の標準プロモーターでは認識されない可能性があります。しかし、これらは、既存の淘宝網の環境に最も合致していると数人の兄弟が信じるようになったものです。

CSS コードの省略形

CSS 省略形の構文は初心者には役立ちますが、ベテランは読む必要はありません。

0px単位は必要ありません。直接: margin: 0
ボックス モデルの略語で、構文は margin: top rightbottom left; です。もちろん、値は margin: top (right left)bottom と省略することもできます。左右は同じである必要があります
css 最後の属性の「;」記号は省略されています。 (非推奨 ^_^)
フォント幅の標準を 400 に置き換え、太字を 700 に置き換えます。
16 進数のカラー値は、各 2 桁の値が同じ場合、たとえば、#000000 を #000 に短縮でき、#0044DD は #04D に短縮できます。
border の略語、構文は border:width style color で、boder:1px ソリッドレッドに似ています。
background の略語、構文はカラー画像リピート添付位置です。類似: background:#f00 url(background .gif) no-repeat fixed 0 0 (どうして fix と書かないのですか?)
フォントの略語は、font: italic small-caps ball 1em/140% "SimSun"、sans-serif に似ています。最も単純なフォント: 12px "SimSun" に省略されています。
list の属性の省略形、url(image.gif) 内の構文 list-style:square ですが、通常は使用しません。
10個の項目を作るのは本当に難しいです 無駄な改行やスペースは削除するだけです 1個として数えます
ある日、チーム内で「未知の写真の縦方向の中央揃え」の問題をみんなで話し合っていて、突然属性を使用することを思いつきましたこれを実装するためにvertical-align:middleを使用したため、時間をかけて次の未熟な例を作成しました:
CSS:

p{
width:140px; 高さ:140px;
text-indent:-8px;
text-align:center;
line-height:138px;
background:red;
font-size:12px;
*font-size:120px;
* text-indent:-60px;
}
img{
width:100px;
/> height:100px;
vertical-align:middle;
} HTML:


当初の目的は位置を使用することではありませんでした。結局のところ、ブラウザによって表示される多数の画像は、次の場合により多くのリソースを消費することになります。レンダリング。

欠点は、意味のないnbsp;が出力されることと、font-sizeとfont-indentdの計算式があまり単純ではないことです(なので上記の数字は全部でっちあげです^_^)。

/>
その後、Xiaoma はこのアイデアを見て、退屈な nbsp の代わりに :after 出力を使用して、時間をかけてコードをアップグレードしました。コードを以下に示します。

CSS:

.tb-p-c{
表示: ブロック;
幅:140px;
高さ:140px;
line-height:140px;
text-align:center;
*font-size:123px;
}
.tb-p-c img{
vertical-align :middle;
}
.tb-p-c:after {
content: ".";
Visibility: hidden;
font-size: 12px;
margin-left: -5px;
}
HTML:



その結果、サークルの中心は CSS を再度アップグレードしました:

CSS:

.tb-p-c{
表示: テーブルセル;
垂直整列:ミドル;
幅:140px;
高さ:140px;
text-align :center;
*display: block;
*font-size: 122px;
background:red;
}
.tb-p-c img {
vertical-align:middle;
}
これは 3 回目のアップグレードです。時間の都合上、上記のコードはテストしませんでした。その理由は、レンダリングにディスプレイが使用されているためです。ブラウザが複数回実行されるようなレンダリングなので、まだテストしていません。
今回のディスカッションは私たちにとっても得るものが多かったので、皆さんも参加していただければ、私たちが見つけていない方法や視点がさらに増えると思います。皆さんもケチらずにもっと返信を投稿して一緒に改善していきましょう。