レイアウトで発生した問題 非常に良い洞察_CSS/HTML

WBOY
リリース: 2016-05-16 12:12:01
オリジナル
1365 人が閲覧しました

はじめに
次世代の WEB 開発技術 RIA 技術が成熟するまでには、もちろん HTML との戦いが必要です。少し前に、「ウェブサイトのリファクタリング」が非常に人気がありました。
これらはすべて進歩であり、確かに新しいアイデアを与えてくれます。ここでは開発の経験をいくつかまとめます。

レイアウト
1. 上下左右のレイアウト
より多くの人がページの作り方を学べるように、MM の DW ソフトウェアを使用して視覚化しました。ウェブページ。
ページを作成するときに DW を使用したことを今でも覚えています。「より多くのフォームを使用して Web ページを作成することと、より多くのレイヤーを使用することの違いは何ですか?」という同じ文を友人が私に尋ねたことがあります。
実際には DW の Layout-Layout Table を使ってページ全体の枠を素早く描画し、それを段階的に修正していることを伝えました。ページの作成は非常に高速です。レイヤーを使用して位置を制御するのは困難です。
今考えると、それは本当に少し誤解を招きます。ああ、でも、進歩にはプロセスが必要なのかもしれない。

「ウェブサイトの再構築」 春風が吹き、ページレイアウトにレイヤーを使用することは、確かに私たちの開発に新しいアイデアをもたらしました。
利点:
ページがよりわかりやすくなり、コードの量が削減されます。
CSS がより広く使用されます。

上部と下部の行、明確な階層化、コードデモ:











絶対位置指定を使用できます
#head{
Position:absolute
top;10px;
left:200px; 🎜> }



パディングを使用してレイヤー間の分離を制御します




5. CSS を使用して画像の使用を減らします


ページ レイアウトのデモ (ソース コードが表示されます。以前の TABLE レイアウトよりもはるかに明確です) :
http://davidblog.blogdriver.com/davidblog/ inc/demo_div.jpg
form
1. フォームのmarginとpadding
以前、フォームをページに挿入する際、デフォルトではmarginとpaddingが0になっていないように感じていました。
CSS を使用して 0 に設定できます。
margin:0 0 0 0px;
p タグまたは他のタグを定義することもできます。
2.
optgroup アプリケーションを選択します。

3. チェックボックスまたはラジオ ラベル


を追加します。今日


4. ボタン
前回のプロジェクトではピクチャボタンを使用しました。アプリケーションの欠陥を徐々に発見します。
美化のためにCSSを使用することをお勧めします。
実際、CSS を使用すると、より美しいボタンを実現できます。


table
やはり table を使用する必要があります。テーブルには常に彼の勝ち側があります。
たとえば、一部のデータは GRID を表示したり、構造が比較的均一で、レイアウトが行と列に分かれている場合があります。
テーブル関連のスキル


CSS アプリケーションはコードの記述を減らすことができます
1. テーブル マウス イベント


2.
width:expression{document.body.clientWidth


注目マーク


メニュー 1

メニュー2







    • 健康情報:
      身長
      体重

      上付き

    ソース:php.cn
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    最新の問題
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート