CSS グラフィックと text_CSS/HTML を混合するためのいくつかのスキーム

Baidu News ホームページ ソリューション:

コードをコピー コードは次のとおりです:

td>
…

HTML の構造は醜いですが、CSS はシンプルです。
新浪微博ホ​​ームページの計画:

コードをコピー コードは次のとおりです。

....

CSS:

コードをコピー コードは次のとおりです:

.twit_list dd .twit_item_pic{float:left;width:66px;padding-top:2px;} .twit_list dd .twit_item_content{float:left;width:316px;color:#666;line-height:18px ;}

ほとんどの受験者はこの答えを持っています。フローティングを使用すると、幅を固定する必要があり、構造の柔軟性が失われると同時に、フローティングによって引き起こされる一連の問題を解決する必要があります。
NetEase ホームページ プラン:

コードをコピー コードは次のとおりです。

• …


• …


• …

CSS:

コードをコピー コードは次のとおりです。 :

.list-figure { float: left; _display: inline; width: 130px; margin-left: -140px; margin-top: 6px ; }

これらの記述方法では、CSS の基本概念が理解されていません。ブロック書式設定コンテキスト (ブロックレベルの書式設定コンテキスト) の概念を理解していれば、このようには記述しません。 BFC をトリガーするブロック レベル要素の場合、そのエッジはフロート ボックスと重なりません。
推奨される解決策:

コードをコピー コードは次のとおりです。

...

...

CSS:

コードをコピー コードは次のとおりです。

.item .pic { float:left;margin-right:10px; }
.item .content { overflow:hidden;zoom:1; } /* または、display:table-cell を使用します */

私が書いた例

复制代 代码如下:

左図右内容の効果

タイトル タイトル タイトル タイトル

• コンテンツ コンテンツ コンテンツ コンテンツ 1


• コンテンツ コンテンツ コンテンツ コンテンツ 2


• コンテンツ コンテンツ コンテンツ コンテンツ 3


• コンテンツ コンテンツ コンテンツ コンテンツ 4

概要
使用済みテクノロジーではなく、よりスキルです
学校には体系的なフロントエンド開発コースがないため、html/css/javascriptの基本概念の理解が非常に不十分です。多くの人の学習方法は、まず本を読んで、その本が実践からかけ離れていれば直接実践するというもので、問題があればネットで検索し、出てくるものは基本的に「スキル」です。あるいは、学校の「偉い人たち」から学び、あらゆる種類の良い経験も悪い経験も受け入れることもできます。たとえば、画像の左右のコンテンツの表示効果を実現するには、HTML と CSS を記述します (下図を参照)。これは私の筆記試験の問題の 1 つですが、非常に簡単そうです。しかし、まだ誰も最良の答えを持っていません。オンラインで見て、国内の大手 Web サイトがどのようにしてこれを実現しているのかを見れば、彼らを責めることはできません。