:::
所有書籍
「DREAMWEAVER」目錄
MarkDown
ul 置中方法（用於使用 li 設計的選單）
色碼表
網頁時間跳轉語法
搜尋優化
網址列小圖示
時間到自動換圖語法
常用的語法
利用 css 讓 ul div 置中
ul 置中方法（用於使用 li 設計的選單）
CSS的垂直置中,左右置中
浮動式固定上選單
製作浮動式的回到網頁頂部按鈕
將footer 浮動固定在網頁下方
讓 float 的 div 高度相同
左欄固定，右欄佔滿剩餘空間
浮動式固定上選單
DREAMWEAVER =========== <div class="entry-content">CSS的垂直置中方式有很多 #### 1. 方法一 **HTML** <figure class="figure-code code"> <figcaption> </figcaption><div class="highlight"> ``` <span class="nt"><div</span> <span class="na">class=</span><span class="s">"center-block"</span><span class="nt">></span>置中<span class="nt"></div></span> ``` </div> </figure>**CSS** <figure class="figure-code code"> <figcaption> </figcaption><div class="highlight"> ``` <span class="nc">.center-block</span> <span class="p">{</span> <span class="nl">position</span><span class="p">:</span> <span class="nb">absolute</span><span class="p">;</span> <span class="nl">top</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">left</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">right</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">bottom</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span><span class="m">400px</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span><span class="m">200px</span><span class="p">;</span> <span class="nl">background-color</span><span class="p">:</span> <span class="m">#cccccc</span><span class="p">;</span> <span class="nl">margin</span><span class="p">:</span><span class="nb">auto</span><span class="p">;</span> <span class="p">}</span> ``` </div> </figure>#### 2. 方法二 **HTML** <figure class="figure-code code"> <figcaption> </figcaption><div class="highlight"> ``` <span class="nt"><div</span> <span class="na">class=</span><span class="s">"center-block"</span><span class="nt">></span>置中<span class="nt"></div></span> ``` </div> </figure>**CSS** <figure class="figure-code code"> <figcaption> </figcaption><div class="highlight"> ``` <span class="nc">.center-block</span> <span class="p">{</span> <span class="nl">position</span><span class="p">:</span><span class="nb">absolute</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">400px</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span><span class="m">400px</span><span class="p">;</span> <span class="nl">top</span><span class="p">:</span><span class="m">50%</span><span class="p">;</span> <span class="nl">left</span><span class="p">:</span> <span class="m">50%</span><span class="p">;</span> <span class="nl">margin-top</span><span class="p">:</span><span class="m">-200px</span><span class="p">;</span> <span class="err">//本身height的50%</span> <span class="nl">margin-left</span><span class="p">:</span> <span class="m">-200px</span><span class="p">;</span> <span class="err">//本身width的50%</span> <span class="nl">background-color</span><span class="p">:</span> <span class="m">#cccccc</span><span class="p">;</span> <span class="p">}</span> ``` </div> </figure>#### 3. 方法三 **HTML** <figure class="figure-code code"> <figcaption> </figcaption><div class="highlight"> ``` <span class="nt"><div</span> <span class="na">id=</span><span class="s">"float-center"</span><span class="nt">></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"center-block"</span><span class="nt">></span>置中<span class="nt"></div></span> ``` </div> </figure>**CSS** <figure class="figure-code code"> <figcaption> </figcaption><div class="highlight"> ``` <span class="nt">html</span><span class="o">,</span> <span class="nt">body</span> <span class="p">{</span> <span class="nl">margin</span><span class="p">:</span><span class="m">0</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span><span class="m">0</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span><span class="m">100%</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.float-center</span> <span class="p">{</span> <span class="nl">float</span><span class="p">:</span><span class="nb">left</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span><span class="m">50%</span><span class="p">;</span> <span class="nl">margin-bottom</span><span class="p">:</span><span class="m">-200px</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span><span class="m">1px</span><span class="p">;</span> <span class="c">/* only for IE7 */</span> <span class="p">}</span> <span class="nc">.center-block</span> <span class="p">{</span> <span class="nl">clear</span><span class="p">:</span><span class="nb">both</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span><span class="m">400px</span><span class="p">;</span> <span class="nl">position</span><span class="p">:</span><span class="nb">relative</span><span class="p">;</span> <span class="nl">background-color</span><span class="p">:</span> <span class="m">#cccccc</span><span class="p">;</span> <span class="p">}</span> ``` </div> </figure> </div>
:::
主選單
首頁
本站消息
教學圖片
教學文章
會員登入
帳號
密碼
記住我
登入
ul 置中方法（用於使用 li 設計的選單）
