ホームページ > 記事 > ウェブフロントエンド > DIV+CSS Web ページのレイアウト_html/css_WEB-ITnose
DIV+CSS Web ページのレイアウト_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:32:111106ブラウズ
-------------------------------------------- --- --------------------------------------------------- --- --------------------------
******************* **** ********************************************* ***** **************************************
前書き: 簡単にするため誰もが CSS を学習できるように、私の友人の Ling Yucao が時間をかけて、誰もが使える便利な txt チュートリアルを作成しました。実際、div+css レイアウトで重要なのは、css の使用方法を知ることです。一度彼が書いたチュートリアルを学べば、一般的な div+css レイアウトについて理解できないことは何もありません。さらに、自分でさらにサンプルを作成した場合は、それを使用することもできます。ふふ、これらは Xiaoxia が学ぶべき基本的なテクノロジーです。
*********************************************** ****** ******************************************* ******* *********
-------------------------------- ---------- -------------------------------------- ---------- ----------------------------------
スタイルとはシート:
CSS は Cascading Style Sheet の略です。 「カスケード スタイル シート」と訳されます。 Web ページのスタイルを (拡張) 制御するために使用されるマークアップ言語で、Web ページのコンテンツからスタイル情報を分離できます。
------------------------------------------------ -------------------------------------------------- ------------------------
スタイル シートを Web ページに追加できます。以下の 3 通りの Web ページをご覧ください。ターゲットに最も近いスタイル定義が優先されます。優先度の高いスタイルは、優先度の低いスタイルの重複しない定義を継承しますが、重複する定義をオーバーライドします。例外については、! important 宣言を参照してください。
------------------------------------------------- -------------------------------------------------- ------------------------
一つ。まず外部スタイル シート ファイル (.css) を作成してから、HTML リンク オブジェクトを使用できます。例は次のとおりです。
2つ。内部スタイル ブロック オブジェクトを定義します
3 つ。インライン定義
この行は左右の外側パッチで追加されます
------- - ------------------------------------------------- - ------------------------------------------------- - --------------
属性:
font-family: "宋体";
font-size:12px;
font- style : 継承;/*標準*/ font-style:italic;/*斜体*/
font-style: oblique;/*斜体*/
font-style:inherit;/*デフォルトで親オブジェクトのプロパティを継承*/
font-weight:lighter;/*フォントのウェイト、400 に相当*/
font-weight:900;/*フォントのウェイト*/
font-weight:bold;/*太字、700 に相当、< に相当*/
font-weight:bolder;/* 通常より細い text-decoration:inherit;/* デフォルトで親オブジェクトのプロパティを継承*/
text-decoration:blink;/* 点滅*/
text-decoration:underline;/ *下線*/
text-decoration:line-through;/* スルーライン*/
text-decoration:overline;/*overline*/
line-height:normal;/*デフォルトの行の高さ*/
line-height: 21px;/*高さ 21px*/
文字間隔: 2px;/*フォント間隔*/
word-spacing:2px;/*英語フォント間隔*/
テキスト:
2.
text-align:left;/*Text-align:left*/
text-align:right;/*Text-align:right*/
text-align: center;/*Text-align: center*/
テキスト-align:inherit;/ *デフォルトの親オブジェクトのプロパティ*/
text-align:justify;/*テキストを両端に揃えます*/
text-indent:inherit;/*デフォルトの親オブジェクトのプロパティ*/
text -indent:10px;/*テキストの省略形を 10 ピクセルにします*/
vertical-align: middle;垂直配置: 中央; /*背景を修正*/
background-attachment:scroll;/*背景のスクロール*/
background- color:#ffffff;/*背景色*/
background-image:url(Untitled-1.gif);/*背景画像*/
background-position:center;/*背景画像は中央に配置*/
background-repeat :no-repeat;/*背景画像は繰り返しません*/
背景:透明 なし 繰り返しスクロール 0% 0%/*デフォルト値 */
4. 位置決め
Position:relative;/*静的な配置はスペースを保存します*/
Position:static;/* デフォルト値*/
z-index: auto;/* object*/
z-index:1;/*最初のレイヤーに置きます（Photoshopのレイヤーを見ることができます）*/
top:auto ;/*Default*/
left:auto;/*Default*/
bottom :auto;/*デフォルト*/
right:auto;/*デフォルト*/
5. サイズ
max-height:200px;/*最大高さ*/
min-height:100px;/*最小高さ*/ width:auto;/**/
max-height:200px;/**/
min-height:100px;/**/
6. レイアウト
float:left ;/*左フロート*/
overflow:visible;/*デフォルト。すべて表示 */ overflow:hidden;/*サイズを超えるコンテンツは表示しない*/
display:block;/*ブロック オブジェクトとして*/
display:inline;/*インライン オブジェクトとして*/
可視性:可視 ;/*表示オブジェクト*/
7. 内部および外部パッチ、擬似オブジェクト、境界線、リスト
padding:0px;
a:link{};/*Normal*/
a :visited{ };/*クリック後*/
a:hover{};/*ポイント時*/
とき
list-style-position: inside; /*テキスト内*/
list-style-type: ディスク/* list-style-position: inside; ---------- -------------------------------------- ---------- -------------
************************** ********** *************************
ブラウザ対応の方法:
共通の方法 1:
#wrapper
{
width: 80px; /* IE6 */
}または
#wrapper{margin:0 0 3px ! important;margin:0 0 10px /* 前は IE7+mozillafirefox、後ろは IE6 */
}---------------------------- --------------- -----------
一般的な方法 2:
#1 { color: #333; } /* mozillafirefox */
*+html #1 { カラー: #999; } /* IE7 */
--------------- ----------------- ------------------------共通方法3 [html+を表示] css]:
1. IE 以外のすべてで認識されます すべての IE が認識可能
3.
4.
5 を認識できます。 .0 以降は
6 を認識できます。
7 を認識できます。 -[IE 6 の場合]> IE6 以下のバージョンは
8 を認識できます。
9.
11 を認識できます。
注意すべきこと: 継承について理解します。両端のフロートを忘れずにクリアし、通常の属性を使用することを忘れないでください。上記のことを理解していれば、CSS を学習したことになります。 http://validator.w3.org/ この Web サイトにアクセスして、認定された xhmtl 言語であるかどうかを確認してください。 著者: Ling Yucao QQ: 477764498 電子メール: lingyucao@yahoo.cn
------ -------------------------------------------------- -------------------------------------------------- - ----------------
*********** ***** ******************************************** ****** ******************************************* *******
***************************************** ************ ************************************* ************* ******************想成高手，再向下看吧!css写标点儿，就不咋用调バグ完了。
1. デフォルトの幅は width:auto です。
2. フローティング レイヤーをクリアし、font-size: 0px を追加します。
3.フローティング レイヤーをクリアします。レイヤーの高さは 0px であってはなりません。
6. デフォルトでは、幅と高さが 100% でないレイヤーには width:auto が使用されません。
7.width:100%,height:100% は親オブジェクトを完全に埋めます。Width100% では、IE5 で問題が発生することがあります。
8.height:auto は現在のオブジェクト内の要素をターゲットにします。 width:親オブジェクトの100%。
************************************* **** ********************************************* ***** ****************************
**************** ******* ****************************************** ******** ***************************************** ***
***** **************************************** ********** *************************************** *********** ***********
1.CSS フォント属性の省略規則は通常、CSS で設定されます。 フォントのプロパティは次のようになります。
font-weight:bold;
font-varient: small-caps; 1em;
font-family :verdana,sans-serif;
ただし、すべてを 1 行に記述することもできます:
font: 太字斜体小文字 1em/1.5em verdana,sans -セリフ;
本当に良いです!注意点が 1 つあります。この省略方法は、font-size プロパティと font-family プロパティの両方が指定されている場合にのみ機能します。また、font-weight、font-style、font-variant を設定しない場合は、デフォルト値が使用されるため、この点に注意してください。
通常、1 つの要素に対して設定できるクラス (Class) は 1 つだけですが、2 つ使用できないというわけではありません。実際、これを行うことができます:
…
P 要素に同時に 2 つのクラスをスペースで区切って与えます。これにより、すべてのテキストとサイドがclass 属性が P 要素に追加されます。 2 つのクラスの属性間に競合がある場合は、後で設定された方が有効になります。つまり、CSS ファイル内で後から配置されたクラスの属性が有効になります。
補足: ID の場合、
...
のように書くことはできません3. CSS ボーダーのデフォルト値
通常次のように境界線の色、幅、スタイルを設定できます:
border: 3px Solid #000
这位把边界显示成3像素宽，黑色，实线。但实际上这里只需要指定风格即可。
如果只指定了风格，其他属性就会使用缺省值。一般地，Border的宽度缺省是medium，一般等于3到4个像素；缺省的颜色是其中文字的颜色。如果这个值正好合适的话，就不用设那么多了。
4. CSS用于文档打印
许多网站上都有一个针对打印的版本，但实际上这并不需要，因为可以用CSS来设定打印风格。
也就是说，可以为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印：
第1行就是显示，第2行是打印，注意其中的media属性。
但应该在打印CSS中写什么东西呢？你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片，再关掉一些导航按钮。要想了解更多，可以看“打印差异”这一篇。
5. 图片替换技巧
一般都建议用标准的HTML来显示文字，而不要使用图片，这样不但快，也更具可读性。但如果你想用一些特殊字体时，就只能用图片了。
比如你想整个卖东西的图标，你就用了这个图片：
这当然可以，但对搜索引擎来说，和正常文字相比，它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的：
Buy widgets
但这样就没有特殊字体了。要想达到同样效果，可以这样设计CSS：
h1 { background: url(widget-image.gif) no-repeat; height: image height text-indent: -2000px }
注意把image height换成真的图片的高度。这里，图片会当作背景显示出来，而真正的文字由于设定了-2000像素这个缩进，它们会出现在屏幕左边2000点的地方，就看不见了。但这对于关闭图片的人来说，可能全部看不到了，这点要注意。
6. CSS box模型的另一种调整技巧
这个Box模型的调整主要是针对IE6之前的IE浏览器的，它们把边界宽度和空白都算在元素宽度上。比如：
#box { width: 100px; border: 5px; padding: 20px }
这样调用它：
这时盒子的全宽应该是150点，这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上，它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。
但用CSS也可以达到同样的目的，让它们显示效果一致。
#box { width: 150px } #box div { border: 5px; padding: 20px }
这样调用：
这样，不管什么浏览器，宽度都是150点了。
7. 块元素居中对齐
如果想做个固定宽度的网页并且想让网页水平居中的话，通常是这样：
#content { width: 700px; margin: 0 auto }
你会使用
body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }
这会把网页内容都居中，所以在Content中又加入了:text-align: left 。
8. 用CSS来处理垂直对齐
垂直对齐用表格可以很方便地实现，设定表格单元 vertical-align: middle 就可以了。但对CSS来说这没用。如果你想设定一个导航条是2em高，而想让导航文字垂直居中的话，设定这个属性是没用的。
CSS方法是什么呢？对了，把这些文字的行高设为 2em：line-height: 2em ，这就可以了。
9. CSS在容器内定位
CSS的一个好处是可以把一个元素任意定位，在一个容器内也可以。比如对这个容器：
#container { position: relative }
这样容器内所有的元素都会相对定位，可以这样用：
左から 30 ポイント、上から 5 ポイントに配置したい場合は、次のようにすることができます:
#navigation {position:Absolute; left: 30px; top: 5px }
もちろん、これを実行します:
margin: 5px 0 0 30px
4 つの数字の順序は上、右、下、左であることに注意してください。もちろん、場合によってはマージンよりも位置決めの方が良い場合もあります。
10. 背景色を画面の下部に直接配置します
垂直方向の制御は CSS の機能を超えています。ナビゲーションバーをコンテンツバーのようにページの一番下に直接移動させたい場合は、テーブルを使用するのが非常に便利ですが、次のようにCSSのみを使用する場合は次のようになります。 }
ナビゲーション バーを短くする まっすぐ下に移動せず、コンテンツが途中で終了すると終了します。それについて私たちは何ができるでしょうか？
残念ながら、チートする唯一の方法は、列幅と同じ幅で短い列に背景画像を追加し、設定された背景色と同じ色にすることです。
body {background: url(blue-image.gif) 0 0repeat-y }
---------------------------- -------------------------------------------------- --------------------------------------------------
*** ********************************************* ***** ******************************************** ****** ****************************************** ****** ******************************************* ******* *****************************
************** ******** ***************************************** ********* **************************************** ********** マスター、また下を向いてください！
******** ************************ ********** *************************************** *********** *****************************
********** ****************** ******************************* ******************* ****************************** ************
****** ****************************** ******************** ***************************** ********************* **********
line-height を使用して垂直方向の中央揃えにする
line-height:24px ;
固定幅のコンテナーを使用していて、行を垂直方向の中央揃えにする必要がある場合は、 line- を使用するだけです。高さ (高さは親コンテナと同じです) 垂直方向のセンタリングの概要については、こちらを参照してください。
コンテナフロートのクリア
#main {
overflow:hidden;}
このような問題については、以前にも言及しました。詳細については、こちらをご覧ください。
リンクを折り返さないでください
a {
white-space:nowrap;}
上記の設定でリンクの折り返しを回避できますが、個人的には長いリンクには対応する行を含めることをお勧めします（改行についての議論、記録を参照）円の中心の）。
Firefox に常にスクロール バーを表示させる
html {
overflow:-moz-scrollbars-vertical;}
Mozilla/Firefox のプライベート CSS プロパティの詳細については、こちらを参照してください。クロスブラウザーをサポートするには、
body, html {
}
ブロック要素を水平方向に中央揃えにします
margin:0 auto;
は実際には
margin-left です: auto;
margin-right: auto;基本的にすべての CSS の教科書でこのテクニックが説明されていますが、幅を追加することを忘れないでください。
body{
}
を使用して、内部コンテナ
text-align: left;
Restore を定義することもできます。
Exploer テキストエリアのスクロール バーを非表示にする
textarea {
overflow:auto;}
Exploer テキストエリアにはデフォルトで垂直スクロール バーが表示されます (理由は聞かないでください)。
印刷ページネーションを設定する
h2 {
page-break-before:always;}
page-break-before 属性は、Web ページを印刷するときにページネーションを設定できます。
リンク上の点線枠を削除します
a:active, a:focus {
outline:none;}
Firefox は、リンクがフォーカスされると (またはクリックされると)、デフォルトで点線の枠を追加します。上記の属性を削除します。
最も簡単な CSS リセット
* {
margin: 0}
----------------------------------------------------------------------------------------------------------------------------
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************
想成高手，再向下看吧!
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************
----------------------------------------------------------------------------------------------------------------------------
单行一列
以下是引用片段：
body { margin: 0px; padding: 0px; text-align: center; }
#content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
两行一列
以下是引用片段：
body { margin: 0px; padding: 0px; text-align: center;}
#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px;}
#content-end {margin-left:auto; margin-right:auto; width: 400px; width: 370px;}
三行一列
以下是引用片段：
body { margin: 0px; padding: 0px; text-align: center; }
#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
#content-mid { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
#content-end { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
单行两列
以下是引用片段：
#bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto; }
#bodycenter #dv1 {float: left;width: 280px;}
#bodycenter #dv2 {float: right;width: 410px;}
两行两列
以下是引用片段：
#header{ width: 700px; margin-right: auto;margin-left: auto; overflow: auto;}
#bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }
#bodycenter #dv1 { float: left; width: 280px;}
#bodycenter #dv2 { float: right;width: 410px;}
三行两列
以下是引用片段：
#header{ width: 700px;margin-right: auto; margin-left: auto; }
#bodycenter {width: 700px; margin-right: auto; margin-left: auto; }
#bodycenter #dv1 { float: left;width: 280px;}
#bodycenter #dv2 { float: right; width: 410px;}
#footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }
单行三列
绝对定位
以下是引用片段：
#left { position: absolute; top: 0px; left: 0px; width: 120px; }
#middle {margin: 20px 190px 20px 190px; }
#right {position: absolute;top: 0px; right: 0px; width: 120px;}
float定位一
xhtml:
以下是引用片段：
CSS:
以下是引用片段：
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}
float定位二
xhtml:
以下是引用片段：
This is the main content.
This is the left sidebar.
This is the right sidebar.
CSS:
以下是引用片段：
body {margin: 0;padding-left: 200px;padding-right: 190px;min-width: 240px;}
.column {position: relative;float: left;}
#center {width: 100%;}
#left {width: 180px; right: 240px;margin-left: -100%;}
#right {width: 130px;margin-right: -100%;}
两行三列
xhtml:
以下是引用片段：
CSS:
以下是引用片段：
#header{width:100%; height:auto;}
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}
三行三列
xhtml:
以下是引用片段：
CSS:
以下是引用片段：
#header{width:100%; height:auto;}
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}
#footer{width:100%; height:auto;}
*************************************************************************************************************************
想成为高手，继续向下看。
*************************************************************************************************************************
扩展框问题そのような組版は拡張ボックスの問題を簡単に引き起こす可能性があります。
幅と高さの指定された値を定義してみてください
* Float ドロップの問題
```
Double margin に ｛float: left;｝ を追加します。 IE6 のバグ
解決策は、display:inline を追加することです
IE6 で画像の下に隙間があるのはなぜですか?
このバグを解決するには、HTML のレイアウトを変更するか、img を設定する方法がたくさんあります。 display:block するか、vertical-align 属性を設定するか、vertical-align:top |bottom |middle |text-bottom で解決できます。 IEでもよく出てきますが、解決策は .right 同じ浮動小数点:left または IE6 の定義に相対的.leftテキストとテキスト入力ボックスを整列させる方法
この種の問題が発生した場合は、vertical- を設定するだけです。テキスト ボックスの align:middle
FF のテキストがコンテナを開けないのはなぜですか? 標準ブラウザでは高さの値が固定されているコンテナの高さは、IE6 のように引き伸ばされません。高さを伸ばしたいのですが、どのように設定すればよいですか?方法は、高さを削除して min-height:200px; を設定することです。min-height を認識しない IE6 に対応するために、次のように定義できます。 :200px;
min-height:200px;
}FLASH でレイヤーを表示する方法
解決策は、FLASH の透明度を設定することですor
使用方法 レイヤーはブラウザ内で垂直方向に中央揃えになります
パーセント絶対位置を使用し、負の値をパッチする方法を使用します。負の値のサイズは、それ自体の幅と高さを 2 で割ったものです。
方法 2: まず、親要素で TEXT-ALIGN を定義します。 center; これは、IE ではこの設定で十分であることを意味します。
ただし、mozilla の中心に置くことはできません。解決策は、子要素を定義するときに「MARGIN-RIGHT: auto;MARGIN-LEFT: auto;」を追加することです。この方法を使用してページ全体を中央に配置したい場合は、設定しないことをお勧めします。 DIV では、分割された各 div で MARGIN-RIGHT: auto;MARGIN-LEFT: auto; を定義するだけで、複数の div を順番に分割できます。
{
width:300px;margin-left:auto;
margin-right:auto;}
Firefox ie6 ie7 用の CSS スタイル
現在、ほとんどの場合、ie6 と ie7 のハッキングに ! important を使用しています。 Firefox テストは正常に表示できます
が、IE7 は ! important を正しく解釈できるため、ページが必要どおりに表示されなくなります。 「*+html」を使用した IE7 用の優れたハックを見つけました。これで IE7 で閲覧できるようになりました。問題はありません。
#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
すると、フォントの色は、Firefox では #333、IE6 では #666、IE7 では #999 として表示されます。
min-width は、レイアウトが常に正しいことを保証するために、要素の最小幅が特定の幅未満にならないように指定できる非常に便利な CSS コマンドです。しかし、IE はこれを認識せず、実際には幅を最小幅として扱います。このコマンドを IE で機能させるには、 タグの下に
その後、CSS は次のように設計されます:
#container{ min- width: 600px ; width:expression(document.body.clientWidth < 600? "600px": "auto" );}
最初の min-width は通常ですが、行 2 の幅は Javascript を使用します。 IE の場合、これにより HTML ドキュメントも形式的ではなくなります。実際にはJavaScriptの判断により最小幅を実装しています。
p[id]{}div[id]{}
これは、IE6.0 および IE6.0、FF、およびOPera の役割
属性セレクターとサブセレクターの間にはまだ違いがありますが、サブセレクターの範囲は形式的に狭くなります。たとえば、p[id] では、すべての p が比較的大きくなります。 ID を持つタグは同じスタイルです。
最も無慈悲な方法 - ! important;
いくつかの詳細な問題を解決する方法が本当にない場合は、FF が最初に自動的に「! important」を解析しますが、IE はこの方法を使用できます。
コンテナーの包含関係について
1. Firefox と IE を区別する属性を制御するコードを 2 行書きます。
background:orange; Firefox は * を認識できないため、非常に簡単です。 IE7 は * を認識できますが、標準ブラウザ (Firefox、Opera、Netscape など) は *; を認識できません。
2. IE7 と IE6 を区別する属性を制御するコードを 2 行記述します。
background:green ! important;background:blue;
//このコードが書かれていて、IE7 を使用して参照すると、コードが書かれている領域の背景が緑色であることがわかりますが、IE6 を使用している場合は、はい、これは IE7 が ! important* を認識できるためで、認識されると次の文を無視して実行されますが、IE6 は ! important を認識できないため、最初の部分はスキップされます。後半は直接実行されます。
3. Firefox、IE7、IE6 を区別する属性を制御するコードを 3 行書きます:
background:orange;*background:green ! important;*background:blue;
//This Firefox では背景がオレンジ色、IE7 では緑色、IE6 では青色が表示されます。理由は前と同じです。そのため、次の 2 つの文は実行されず、最初の文が直接実行されます。 , IE7 はコードの最初の行も実行できますが、2 番目の文も認識できるため、コードの 2 番目の文を実行して前の効果をフィルタリングしましたが、最後の文は IE7 で認識されませんでした。 IE6 は !imprtant を認識できません。最初はコードの最初の文が実行されましたが、2 番目の文が認識できないため、当然最後の文が実行されます。
注: IE は * を認識できますが、標準ブラウザ (Firefox、Opera、Netscape など) は * を認識できません。IE6 は * を認識できますが、! important は認識できません。ただし、!重要;
************************************** は認識できます。 ** *********************************************** *** *************************************