<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>絕對定位實現布局</title><style type="text/css">* {? ? margin:0; padding:0; font-size:12px; color:#333; font-family:Verdana, Geneva, sans-serif, "宋體"; list-style:none;}a { text-decoration:none;}a:hover { text-decoration:underline; color:#ff0000;}p { line-height:24px;}#wrap { width:780px; margin:0 auto; padding:0 10px 10px; border-left:1px solid #e7e7e7; border-right:1px solid #e7e7e7;}#header { width:100%; overflow:hidden;}.logo { width:100%; height:80px; line-height:80px; font-size:30px; font-family:"微軟雅黑"; background:#3399cc; color:#fff; text-indent:30px;}.nav { width:100%; margin-top:10px;}.nav li { margin:0 32px; float:left;}.nav li a { color:#7f7f7f; font-size:16px; display:block; padding-bottom:2px;}.nav li a:hover { border-bottom:3px solid #cc0000; text-decoration:none;}.nav li.current { border-bottom:3px solid #cc0000;}.nav li.current a:hover { border-bottom:none;}#mainbody { ? ? width:100%; ? ? position：relative ?//參照物 ? ? margin-top:20px;}#sidebar { width:180px; padding-bottom:10px;}#sidebar dl { padding:0 0 5px;}#sidebar dt { font-weight:bold; line-height:22px; font-family:"微軟雅黑"; font-size:14px; color:#fff; background:#3399cc; padding:5px 0 5px 15px; font-weight:normal; margin-bottom:10px;}#sidebar dd { line-height:20px; padding-left:15px;}#sidebar dd.current a { color:#f00;}#content {?position：absolute?margin-left：200px?top:0;}#content h1 { color:#000; font-size:24px; font-family:"微軟雅黑"; font-weight:normal;}#content ?h3 { margin-top:10px; line-height:26px;}#content ?dl { margin-bottom:10px;}#content ?dt { font-weight:bold; line-height:26px;}#content ?dd { line-height:22px;}.learn a { color:#900b09; text-decoration:underline; padding-bottom:2px;}.learn a:hover { text-decoration:none;}.tips { color:#999; margin-top:20px;}.pageto { border-top:1px solid #aaa; border-bottom:3px solid #aaa; margin-top:5px; padding:15px 0;}.pageto a { margin:0 10px; background:#f3f3f3; padding:5px 20px; border:1px solid #dfdfdf; color:#555;}.pageto a:hover { color:#000; text-decoration:none;}.disline { border-bottom:1px dashed #ccc; margin-top:10px;}#footer { width:100%; margin-top:15px; padding:15px 0; text-align:center; color:#999; background:#ddd;}</style></head><body><div id="wrap">? <div id="header">? ? <div class="logo">前端開發教程</div>? ? <div class="nav">? ? ? <ul>? ? ? ? <li class="current"><a href="#">CSS</a></li>? ? ? ? <li><a href="#">HTML</a></li>? ? ? ? <li><a href="#">JavaScript</a></li>? ? ? ? <li><a href="#">jQuery</a></li>? ? ? ? <li><a href="#">Ajax</a></li>? ? ? </ul>? ? </div>? </div>? <div id="mainbody">? ? <div id="sidebar">? ? ? <dl>? ? ? ? <dt>CSS 基礎教程</dt>? ? ? ? <dd class="current"><a href="#">CSS 簡介</a></dd>? ? ? ? <dd><a href="#">CSS 基礎語法</a></dd>? ? ? ? <dd><a href="#">CSS 高級語法</a></dd>? ? ? ? <dd><a href="#">CSS 派生選擇器</a></dd>? ? ? ? <dd><a href="#">CSS id 選擇器</a></dd>? ? ? ? <dd><a href="#">CSS 類選擇器</a></dd>? ? ? ? <dd><a href="#">CSS 屬性選擇器</a></dd>? ? ? ? <dd><a href="#">CSS 創建</a></dd>? ? ? </dl>? ? ? <dl>? ? ? ? <dt>CSS 樣式</dt>? ? ? ? <dd><a href="#">CSS 背景</a></dd>? ? ? ? <dd><a href="#">CSS 文本</a></dd>? ? ? ? <dd><a href="#">CSS 字體</a></dd>? ? ? ? <dd><a href="#">CSS 鏈接</a></dd>? ? ? ? <dd><a href="#">CSS 列表</a></dd>? ? ? ? <dd><a href="#">CSS 表格</a></dd>? ? ? ? <dd><a href="#">CSS 輪廓</a></dd>? ? ? </dl>? ? ? <dl>? ? ? ? <dt>CSS 盒子模型</dt>? ? ? ? <dd><a href="#">CSS 盒子模型概述</a></dd>? ? ? ? <dd><a href="#">CSS 內邊距</a></dd>? ? ? ? <dd><a href="#">CSS 邊框</a></dd>? ? ? ? <dd><a href="#">CSS 外邊距</a></dd>? ? ? ? <dd><a href="#">CSS 外邊距合并</a></dd>? ? ? </dl>? ? ? <dl>? ? ? ? <dt>CSS 定位</dt>? ? ? ? <dd><a href="#">CSS 定位概述</a></dd>? ? ? ? <dd><a href="#">CSS 相對定位</a></dd>? ? ? ? <dd><a href="#">CSS 絕對定位</a></dd>? ? ? ? <dd><a href="#">CSS 浮動</a></dd>? ? ? </dl>? ? ? <dl>? ? ? ? <dt>CSS 選擇器</dt>? ? ? ? <dd><a href="#">CSS 元素選擇器</a></dd>? ? ? ? <dd><a href="#">CSS 選擇器分組</a></dd>? ? ? ? <dd><a href="#">CSS 類選擇器詳解</a></dd>? ? ? ? <dd><a href="#">CSS ID 選擇器詳解</a></dd>? ? ? ? <dd><a href="#">CSS 屬性選擇器詳解</a></dd>? ? ? ? <dd><a href="#">CSS 后代選擇器</a></dd>? ? ? ? <dd><a href="#">CSS 子元素選擇器</a></dd>? ? ? ? <dd><a href="#">CSS 相鄰兄弟選擇器</a></dd>? ? ? ? <dd><a href="#">CSS 偽類</a></dd>? ? ? ? <dd><a href="#">CSS 偽元素</a></dd>? ? ? </dl>? ? ? <dl>? ? ? ? <dt>CSS 高級</dt>? ? ? ? <dd><a href="#">CSS 對齊</a></dd>? ? ? ? <dd><a href="#">CSS 尺寸</a></dd>? ? ? ? <dd><a href="#">CSS 分類</a></dd>? ? ? ? <dd><a href="#">CSS 導航欄</a></dd>? ? ? ? <dd><a href="#">CSS 圖片庫</a></dd>? ? ? ? <dd><a href="#">CSS 圖片透明</a></dd>? ? ? ? <dd><a href="#">CSS 媒介類型</a></dd>? ? ? ? <dd><a href="#">CSS 注意事項</a></dd>? ? ? ? <dd><a href="#">CSS 總結</a></dd>? ? ? </dl>? ? </div>? ? <div id="content">? ? ? <h1>CSS 簡介</h1>? ? ? <div class="pageto"><a href="#">上一章</a> <a href="#">下一章</a></div>? ? ? <h3>你應該知道這些知識</h3>? ? ? <p>在繼續之前，你應該有一個以下基本認識：</p>? ? ? <p>· HTML / XHTML</p>? ? ? <p class="learn">如果您希望首先學習這些項目，我們的<a href="#">主頁</a>上可以找到教程。</p>? ? ? <div class="disline"></div>? ? ? <h3>什么是CSS？</h3>? ? ? <p>CSS即級聯樣式表。? ? ? ? 它是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。</p>? ? ? <div class="disline"></div>? ? ? <h3>基本信息</h3>? ? ? <p>CSS目前最新版本為CSS3，是能夠真正做到網頁表現與內容分離的一種樣式設計語言。相對于傳統HTML的表現而言，CSS能夠對網頁中的對象的位置排版進行像素級的精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力，并能夠進行初步交互設計，是目前基于文本展示最優秀的表現設計語言。CSS能夠根據不同使用者的理解能力，簡化或者優化寫法，針對各類人群，有較強的易讀性。</p>? ? ? <div class="disline"></div>? ? ? <h3>發展歷史</h3>? ? ? <dl>? ? ? ? <dt>CSS1</dt>? ? ? ? <dd>作為一項W3C推薦，CSS1發布于 1996年12月17 日。1999 年1月11日，此推薦被重新修訂。</dd>? ? ? </dl>? ? ? <dl>? ? ? ? <dt>CSS2</dt>? ? ? ? <dd>作為一項 W3C 推薦，CSS2發布于 1999年1月11日。CSS2添加了對媒介（打印機和聽覺設備）和可下載字體的支持。</dd>? ? ? </dl>? ? ? <h3>CSS3</h3>? ? ? <dl>? ? ? ? <dt>CSS3 計劃將 CSS 劃分為更小的模塊。</dt>? ? ? ? <dd class="learn"><a href="#">親自體驗一下</a>！</dd>? ? ? </dl>? ? ? <div class="pageto"><a href="#">上一章</a> <a href="#">下一章</a></div>? ? ? <p class="tips">本站提供的內容僅用于學習培訓。我們不保證內容的正確性。通過使用本站內容隨之而來的風險與本站無關。</p>? ? </div>? </div>? <div id="footer">慕課©版權所有</div></div></body></html>
1 回答
- 1 回答
- 0 關注
- 1455 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消