亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定

57行display:block;為什么欄目還在一行

<!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;
top:0px;
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>&middot;?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">慕課&copy;版權所有</div>
</div>
</body>
</html>

57行把.nav li a{display:block;}把a標簽轉成塊元素了，為什么頂部導航CSS HTML JAVASCRIPT什么的還是橫排顯示，而且我試了下把57行刪了也是橫排顯示

正在回答

2 回答

你前面幾節重新看。行級元素和塊級元素的區別。

首先你要知道他為什么設置display:block; ?就是因為他設置了 margin-bottom ? ?a本身是不支持設置上下外邊距的，這是塊級元素才有的特性，所以設置display:block; ? ?

你刪除這個，設置的高度就無效了，相對應的高度當然變了。 ?導航欄是a 撐起來的，所以也可以說成或看成導航欄高度變了


1 回復 有任何疑惑可以回復我~
#1

霸氣的擎宇

不是margin-bottom 是 padding-bottom; 是內邊距
2016-07-08 回復 有任何疑惑可以回復我~
#2

霸氣的擎宇

內聯也就是行級元素和塊狀元素的區別： 都適用盒子模型。塊狀元素獨占一行，可設寬高，也可設內外邊距等。 而內聯元素不可設寬高，可設左右內外邊距但是上下內外邊距不可設。 偏要設置怎么辦？display:block; 當然塊狀元素被影響了或本身就存在的并且不是你想要的屬性的時候，可以設置display：inline； 等等……具體情況以后你總會遇到的，基礎很重要很重要很重要。
2016-07-09 回復 有任何疑惑可以回復我~
#3

C0EEC3F7BBAA 提問者

非常感謝！
2016-07-09 回復 有任何疑惑可以回復我~

找到原因了，因為有

.nav li {

margin:0 32px;

float:left;

但為什么把57行display:block刪了，頂部導航欄行高會有輕微變化呢··哪里變的

0 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消
網頁布局基礎
  • 參與學習       214663    人
  • 解答問題       1833    個

讓你精通CSS中三大定位機制，徹底掌握網頁布局的相關知識

進入課程

57行display:block;為什么欄目還在一行

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號