<!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 {?。。。。。。。。。。。。。。。。。。。。。。。。。?！這個位置的margin-left和left的區別在哪里？ 兩個屬性的頁面效果是一樣的position:absolute;top:0;margin-left:200px;}#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 關注
- 2791 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消