為什么跟顯示的效果跟教程中的不一樣呢
<!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>前端開(kāi)發(fā)教程-練習(xí)代碼</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{border-bottom:3px?solid?#cc0000;} p{line-height:24px;} #warp{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;background:#3399cc;color:#fff;line-height:80px;text-indent:30px;font-size:30px;font-family="微軟雅黑";} .nav{width:100%;margin-top:10px;} .nav?li{float:left;margin:0?32px;} .nav?li?a{color:#7f7f7f;font-size:16px;display:block;padding-bottom:2px;} .nav?li?a:hover{boder-bottom:3px?solid?#cc0000;text-decoration:none;} .nav?li.current{border-bottom:3px?solid?#cc0000;} .nav?li.current?a:hover{border-bottom:none;} #mainbody{position:relative;margin-top:20px;} #sidebar{width:180px;paidding-bottom:10px;} #sidebar?dl{padding:0?0?5px;} #sidebar?dt{font-weight:normal;line-height:22px;font-family="微軟雅黑";font-size:14px;color:#fff;background:#3399cc;padding:5px?0?5px?15px;margin-bottom:10px;} #sidebar?dd{line-height:20px;padding-left:15px;} #sidebar?dt.current?a{color:#f00;} #content{position:absolute;top:0;margin-left:200px;} #content?h1{color:#000;font-size:24px;font-family:"微軟雅黑";text-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{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?#fdfdfd;color:#555;} .pageto?a:hover{color:#000;text-decoration:none;} .disline{border:1px?dashed?#ccc;} #footer{width:100%;margin-top:15px;padding:0?15px;text-align:center;color:#999;background:#ddd;} </style> </head> <body> <div?id="wrap"> ??<div?id="header"> ????<div?class="logo">前端開(kāi)發(fā)教程</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?基礎(chǔ)教程</dt> ????????<dd?class="current"><a?href="#">CSS?簡(jiǎn)介</a></dd> ????????<dd><a?href="#">CSS?基礎(chǔ)語(yǔ)法</a></dd> ????????<dd><a?href="#">CSS?高級(jí)語(yǔ)法</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?創(chuàng)建</a></dd> ????????<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>? ????????<dt>CSS?盒子模型</dt> ????????<dd><a?href="#">CSS?盒子模型概述</a></dd> ????????<dd><a?href="#">CSS?內(nèi)邊距</a></dd> ????????<dd><a?href="#">CSS?外框</a></dd> ????????<dd><a?href="#">CSS?外邊距</a></dd> ????????<dd><a?href="#">CSS?外邊距合并</a></dd> ????????<dt>CSS?定位</dt> ????????<dd><a?href="#">CSS?定位概述</a></dd> ????????<dd><a?href="#">CSS?相對(duì)定位</a></dd> ????????<dd><a?href="#">CSS?絕對(duì)定位</a></dd> ????????<dd><a?href="#">CSS?浮動(dòng)</a></dd> ????????<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> ????????<dt>CSS?高級(jí)</dt> ????????<dd><a?href="#">CSS?對(duì)齊</a></dd> ????????<dd><a?href="#">CSS?尺寸</a></dd> ????????<dd><a?href="#">CSS?分類</a></dd> ????????<dd><a?href="#">CSS?導(dǎo)航欄</a></dd> ????????<dd><a?href="#">CSS?圖片庫(kù)</a></dd> ????????<dd><a?href="#">CSS?圖片透明</a></dd> ????????<dd><a?href="#">CSS?媒介類型</a></dd> ????????<dd><a?href="#">CSS?注意事項(xiàng)</a></dd> ????????<dd><a?href="#">CSS?總結(jié)</a></dd> ??????</dl> ????</div>???? ????<div?id="content"> ??????<h1>CSS?簡(jiǎn)介</h1> ??????<div?class="pageto"><a?href="#">上一章</a><a?href="#">下一章</a></div> ??????<h3>你應(yīng)該知道這些知識(shí)</h3> ??????<p>·HTML/XHTML</p> ??????<p>如果你希望首先學(xué)習(xí)這些項(xiàng)目,我們的<a?href="#">主頁(yè)</a>上可以找到教程。</p> ??????<div?class="disline"></div> ??????<h3>什么是CSS?</h3> ??????<p>CSS即級(jí)聯(lián)樣式表。?它是一種用來(lái)表現(xiàn)HTML(標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用)或XML(標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集)等文件樣式的計(jì)算機(jī)語(yǔ)言。</p> ??????<div?class="disline"></div> ??????<h3>基本信息</h3> ??????<p>CSS目前最新版本為CSS3,是能夠真正做到網(wǎng)頁(yè)表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計(jì)語(yǔ)言。相對(duì)于傳統(tǒng)HTML的表現(xiàn)而言,CSS能夠?qū)W(wǎng)頁(yè)中的對(duì)象的位置排版進(jìn)行像素級(jí)的精確控制,支持幾乎所有的字體字號(hào)樣式,擁有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式編輯的能力,并能夠進(jìn)行初步交互設(shè)計(jì),是目前基于文本展示最優(yōu)秀的表現(xiàn)設(shè)計(jì)語(yǔ)言。CSS能夠根據(jù)不同使用者的理解能力,簡(jiǎn)化或者優(yōu)化寫(xiě)法,針對(duì)各類人群,有較強(qiáng)的易讀性。</p> ??????<div?class="disline"></div> ??????<h3>發(fā)展歷史</h3> ??????<dl> ????????<dt>CSS1</dt> ????????<dd>作為一項(xiàng)W3C推薦,CSS1發(fā)布于?1996年12月17?日。1999?年1月11日,此推薦被重新修訂。</dd> ??????</dl> ??????<dl> ????????<dt>CSS2</dt> ????????<dd>作為一項(xiàng)?W3C?推薦,CSS2發(fā)布于?1999年1月11日。CSS2添加了對(duì)媒介(打印機(jī)和聽(tīng)覺(jué)設(shè)備)和可下載字體的支持。</dd> ??????</dl> ??????<h3>CSS3</h3> ??????<dl> ????????<dt>CSS3?計(jì)劃將?CSS?劃分為更小的模塊。</dt> ????????<dd?class="learn"><a?href="#">親自體驗(yàn)一下</a>!</dd> ??????</dl> ??????<div?class="pageto"><a?href="#">上一章</a><a?href="#">下一章</a></div> ??????<p?class="tips">本站提供的內(nèi)容僅用于學(xué)習(xí)培訓(xùn)。我們不保證內(nèi)容的正確性。通過(guò)使用本站內(nèi)容隨之而來(lái)的風(fēng)險(xiǎn)與本站無(wú)關(guān)。</p> ????</div>???????? ??</div> ??<div?id="footer">版權(quán)所有</div> </div>?? </body> </html>
各位大神幫我看看:
wrap的寬度,我設(shè)置了,但是還是全屏的。
sidebar的dt標(biāo)簽的margin-top值沒(méi)有表現(xiàn)出來(lái)。
a:hover與教程的源碼效果不一樣。
footer的高度問(wèn)題。我寫(xiě)的跟教程源碼一樣的,為什么效果還是不一樣。
2017-07-20
#mainbody{position:relative;margin-top:20px;}這里錯(cuò)了,應(yīng)該這樣
#mainbody {
? ? width:100%;
? ? position:relative;
? ? margin-top:20px;
}
2017-06-01
你把html代碼里的[任務(wù)一]?[任務(wù)二]?[任務(wù)三]?去掉就OK了
2017-04-18
margin-left:200px 改成 margin-left:220px