html頁面布局筆記

一般html布局會用居中顯示，這裡需要注意的是，當元素設定了固定寬度之後，margin：0 auto才适用，如果設定了width為100%，則無效：

<code>.wapper{</code><code>margin</code><code>:</code><code>0</code> <code>auto</code><code>;width </code><code>100%</code><code>; }  \\這是無效的</code>

<code>.wapper {</code><code>margin</code><code>:</code><code>0</code> <code>auto</code><code>;width </code><code>750px</code><code>;}  \\這是正确的</code>

float屬性：一般float會對它自己後面的标簽産生影響（隻對它後面的标簽影響），這時受影響的标簽需要清除浮動。

<code>clear：</code><code>both</code><code>;     #隻對float後面受影響的标簽有效，但對父級标簽無效。</code>

<code>overflow：</code><code>hidden</code><code>;  #對float後面的标簽和父級标簽都有效。</code>

float還會影響父級标簽，比如：

<code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"test"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"test1"</code><code>&gt;&lt;/</code><code>div</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"test2"</code><code>&gt;&lt;/</code><code>div</code><code>&gt;</code>

<code>&lt;/</code><code>div</code><code>&gt;</code>

這裡如果test2設為float，則test2後面的标簽和父級标簽test都會受到影響。

position定位方式：

<code>#靜态定位</code>

<code>#相對定位</code>

<code>#絕對定位</code>

可設定四個屬性值：

<code>static</code>

<code>relative</code>

<code>absolute</code>

<code>fixed</code>

html a标簽預設未點選的顔色為藍色，點選過後為紫色，如何修改？

<code>.nav a:link,.nav a:visited{color:green;text-decoration:none;}</code>

<code>.nav  a:hover,.nav a:actived{color:red;text-decoration:none;}</code>

版權聲明：原創作品，謝絕轉載。否則将追究法律責任

本文轉自 王家東哥 51CTO部落格，原文連結:http://blog.51cto.com/xiaodongge/1931747