ホームページ >ウェブフロントエンド >htmlチュートリアル >DIV+CSS_html/css_WEB-ITnose の上に立つ
プログラマーとして、単にテクノロジーを学ぶことはできません。必要に応じて、さらに先を見て、より高い成果を達成できるようにする必要があります。
Web 開発を行っている場合、DIV+CSS は非常に単純であると多くの人が考えています。それは本当です。非常にクールなページの特殊効果は、人々に新鮮な気持ちを与えます。美しい Web ページを見ると、私はよく興奮します。しかし、学習レベルがこれに限定されている場合、プログラマーになる以外に何ができるでしょうか。
グローバル思考の意識
ページデザインで最初に行うことは、DIV を使用してフレームワークをデザインすることです。たとえば、ページの全体的な構造がどのようなものであるべきかを検討します。 、中層と下層、または左と右 中層と右層、またはその一部のみなど。
<div style="border:1px solidred;margin:1px;height:100px;">这是top部分</div><div style="border:1px solidred;margin:1px;height:500px;">这是middle部分</div><div style="border:1px solidred;margin:1px;height:100px;">这是bottom部分</div> <div style="border:1px solidred;margin:1px;width:200px;float:left;">这是left部分</div><div style="border:1px solidred;margin:1px;width:400px;float:left;">这是center部分</div><div style="border:1px solidred;margin:1px;width:200px;float:left;">这是right部分</div>
これはすべての Web 開発者にとって Web ページを作成するための最初のステップであり、彼らは長年この道を歩んできましたが、この知恵は誰でも利用できるわけではありません考えています。このフレームワークでは、デザイナーは 1 つのレベルで盲目的に進むのではなく、高い視点から考え、全体的な視点から問題を考えることができることが求められます。そうしないと、全体の構造が明確でなく、眉毛やひげがごちゃ混ぜになったデザインになってしまいます。細部への明確な注意もありません!
共通点を見つける
DIV フレームワークの設計が完了したら、通常、ページのスタイルを変更するのに非常に便利になるように、ページ要素を分類する必要があります。たとえば、左側の共通のブログ列です。 CSDN 側 共通のスタイルを持っているので、スタイルを変更する際に、ページのスタイルの統一性をできるだけ確保し、スタイルの違いによってページが見苦しくなるのを防ぐことができます。
このようにして、上記の DIV コードの場合、パブリック コンポーネントを抽象化してクラスを形成し、その異なる部分を各 div ブロックに保持できます。コードは次のとおりです。提案されたコンポーネントは、次のように CSS ファイルに配置されます。
<div class="style1" style="height:100px;">这是top部分</div><div class="style1"style="height:500px;">这是middle部分</div><div class="style1"style="height:100px;">这是bottom部分</div> <div class="style1"style="width:200px;float:left;">这是left部分</div><div class="style1"style="width:400px;float:left;">这是center部分</div><div class="style1"style="width:200px;float:left;">这是right部分</div>
Web 開発者にとって、公開部分の抽出は、初心者とベテランを分ける重要な部分です。学習についてのこの考え方は、学んだことを基礎にして学んでいないことを考えることを意味します。この知恵は、あなたや私にとって、非常に優れた技術を学ぶよりも賞賛に値します。
どんなに素晴らしい技術でも、目で見て触れて学ぶことができれば、学べないことはありません。しかし、考えを凝縮することは誰にでもできることではありませんので、もっと考え、学習経験をまとめ、方法を洗練させることが友達の上達への近道です!