を備えています。
構造・性能関連コンテンツ紹介
html structure css performance javascrip behavior Webレイアウトは、構造、性能、動作の分離の原則を考慮し、まず上記の構造とセマンティクスに注目し、次にCSSやJSなどを考慮すると、後の保守や解析が容易になる ......。
構造と性能の分離という考え方
- 初級開発者の発想と制作方法：レイヤーの中に入れ子になったdiv。 {を使用します。 中級開発者のアイデアと製作方法：冗長なdivを削除し、シンプルにする。
- 上級開発者の発想と製造方法：htmlの構造を最大限に生かし、cssとセットでhtmlとcssの収まりが悪くなる。
ステップ
最初に構造とセマンティクスによってコードを書く
次にCSSのスタイリング
HTMLとCSSのフィット感を軽減
をオーバーフローさせます。
visible デフォルト値。コンテンツはトリミングされず、要素ボックスの外側にレンダリングされます。
hidden コンテンツはトリミングされ、残りのコンテンツは見えなくなります。
scroll コンテンツは切り取られていますが、ブラウザはコンテンツの残りの部分を見るためにスクロールバーを表示します。
auto コンテンツが切り取られている場合、ブラウザは残りのコンテンツを見るためにスクロールバーを表示します。
inherit は、overflow 属性の値が親要素から継承されることを指定します。
text-indent テキストをターゲット位置までインデントします。冗長なコードを削減する
ウェブデザインを手に入れたら、まずページのテキストコンテンツとコンテンツモジュール間の関係に注目しましょう。
セマンティックなhtmlコードを書くことに集中し、デザインのスタイルについてはあまり考えないようにしましょう。
htmlがコンテンツによって書かれるまで待ってから、スタイルの実装を検討する。
既存の構造を変えずに、デザイン画が求める視覚効果を完成させる
余白はマイナスにすることができ、マイナスの値を持つことで、そのコンテンツを動かすことができるのです 4方向への動きを実現。
構造（HTML）やスタイル（CSS）では、まずHTMLで内容を書き出し、マージンを使って位置を移動させることでタイポグラフィを実現し、スタイルと構造の結合を減らし、コードを削減することができる
ウェブページのスキニングとまとめ
htmlのcssへの依存度を最小にする
ページスキニング：同じhtml構造、異なるcssスタイル
グレイブルWEBの生徒さんたちのシェアをご紹介します。
Web制作に携わるようになって、htmlは構造を、cssはスタイルを、javascriptは動作を表すことを知り、Web制作では常に構造と性能の分離の原則を強調してきましたが、この構造は一般的にHTMLを指し、分離に加えて、それらを参照するために別のファイルに書き出すことですか？もちろん、ここでの研究では、分離がメソッドだけでなく、思考の一種であることを学んだ、簡単に言えば、平面二次元座標、ここで技術開発に代わってX軸、ウェブ生産のニーズに代わってY軸は、分離は、技術開発に基づいており、我々のウェブ生産が完了する必要があります！また、我々は、WebサイトやWebサイト上で動作するようにする必要があります。
例：私たちは家を建てるとしましょう、HTMLは家の構造に相当し、CSSは後の装飾に相当し、Webページが完了するために効果に基づいている、我々は効果によると、Webページを閲覧するときに異なっている、スタイルが異なっているので、我々はページを閲覧する様々であり、どのように我々は、Webページをレイアウトするのですか？まず第一に、あまりにも多くのCSSスタイルを考慮しないでください、私たちのHTML構造が合理的にシンプルでセマンティックにしてみて、完璧なCSSスタイルを追加します
私たちはページを取得すると、別の生産者は、この構造スタイルの理解の深さによると、構造構造スタイルに別のリンクを持って、暫定的にに分け：プライマリ、中級、高度な3つの異なるレベル。
画像
このような一般的なダイアログボックスを言ってみましょう、そこに3つのユニットは、まず我々は、CTRL + Vの他のユニットを完了する必要があります。それはページを取得する一次生産者であれば、一般的に分割する上記のボックスによると、大きなDivは、左と右フローティング、左側はimgを入れて、右側のp、hおよび他のタグ、位置属性を通じて時間の要因として使用されますします次のコードを説明する。
<div class="demo1">
<div class="fl">
<img src="... /... /images/head02.jpg" alt="">
</div>
<div class="fr">
<span>10 minutes ago</span>
<h6>Gradually walking without a book</h6>
<p>
Do you have a lot of lingering thoughts in your head every day that you are busy, and when you think about it, you don't know what you are really busy with, and developing good habits, taking care of yourself, and following your dreams can improve your productivity, which also means improving your relationships with your family and friends, because when you change, everything around you changes, and what habits do high performers have that we should learn from? ?
</p>
</div>
</div>
<div class="demo2">
<img src="... /... /images/head02.jpg" alt="">
<div class="fr">
<span>10 minutes ago</span>
<h6>Gradually walking without a book</h6>
<p>
Do you have a lot of lingering thoughts in your head every day that you are busy, and when you think about it, you don't know what you are really busy with, and developing good habits, taking care of yourself, and following your dreams can improve your productivity, which also means improving your relationships with your family and friends, because when you change, everything around you changes, and what habits do high performers have that we should learn from? ?
</p>
</div>
</div>
<div class="demo3">
<img src="... /... /images/head02.jpg" alt="">
<span class="time">10 minutes ago</span>
<h6>Gradually walking without a book</h6>
<p>
Do you have a lot of lingering thoughts in your head every day that you are busy, and when you think about it, you don't know what you are really busy with, and developing good habits, taking care of yourself, and following your dreams can improve your productivity, which also means improving your relationships with your family and friends, because when you change, everything around you changes, and what habits do high performers have that we should learn from? ?
</p>
</div>
</div>
=>3種類のページ構造を表す3種類のデモ||ページ構造公開編を書くとわかる。
/*reset* body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin: 0;padding: 0;list-style: none;font:12px/1.5 "Arial", "sans-serif", "Microsoft elegant black", "Song", "Tahoma"}
/*public style* .demo1,.demo2{
width: 600px;
margin-top: 20px;
overflow: hidden;
margin-bottom: 20px;
}
p{
text-align: justify;
text-indent: 2em;
line-height: 24px;
}
=> ジュニアメーカーCSS
/*beginner* .demo1{
width: 600px;
margin-top: 20px;
overflow: hidden;
}
.demo1 .fl{
width: 100px;
float: left;
}
.demo1 .fl img{
margin-left: 20px;
padding: 10px;
border: 1px solid #ccc;
}
.demo1 .fr{
width:488px;
float: right;
border: 1px solid #ccc;
position: relative;
padding: 5px;
}
.demo1 .fr span{
position: absolute;
right:18px;
top: 5px;
}
=> 中間制作者のcssで、一次制作者と比べて左側のdivを削除し、右側の部分を残して構造を簡略化したものです。
/*intermediate* .demo2 .fr{
width:488px;
float: right;
border: 1px solid #ccc;
position: relative;
padding: 5px;
}
.demo2 .fr span{
position: absolute;
right:18px;
top: 5px;
}
.demo2 img{
margin-left: 20px;
padding: 10px;
border: 1px solid #ccc;
}
=>Advanced producer css: まず構造とセマンティクスに従ってコードを書き、次にcssのスタイル設定、cssのhtmlへの適合を減らす（ドキュメント移動、画像移動出し、位置決め属性）。
{{コード
おわりに ウェブデザイン画を手に入れたら、まずテキストとコンテンツモジュールの関係を観察し、意味あるhtmlコードを書くことに集中し、デザイン間のレイアウトスタイルをあまり考えず、htmlコードの編集が完了するまで待ち、それから実現方法を考え、既存のページ構造を変えずにデザイン画要件で提示した視覚効果を完成するよう努力しましょう！（※）。( クリックすると、Webページのシンプルなレイアウトの構造が完成し、ダウンロードできます。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン