*{
padding:?0;
margin:?0;
}
/*網頁頭部*/
.header{
width:?100%;
height:?100px;
background-color:?#07cbc9;
position:?fixed;
z-index:?9;
}
.header?.logo?img{
float:?left;
height:?48px;
width:?260px;
margin-top:?26px;
margin-left:?100px;
}
.header?.h-nav{
float:?right;
height:?100px;
}
.header?.h-nav?ul{
margin-right:?50px;
}
.header?.h-nav?ul?li{
width:?105px;
float:?left;
list-style:?none;
font-size:?20px;
color:?#fff;
text-align:?center;
line-height:?100px;
font-family:?"微軟雅黑";
}
.header?.h-nav?ul?li:hover{
cursor:?pointer;
background-color:?#000;
}
/*banner圖*/
.banner?.pic?img{
width:?100%;
height:?700px;
position:?relative;
padding-top:?100px;
}
.banner?.shade{
position:?absolute;
opacity:?0.5;
width:?100%;
height:?700px;
background-color:?#000;
z-index:?1;
top:?100px;
}
/*表單*/
.banner?.form-menu{
width:?700px;
height:?300px;
z-index:?2;
text-align:?center;
position:?absolute;
top:?250px;
left:?50%;
margin-left:?-350px;
}
.banner?.form-menu?input,button{
background-color:?transparent;
color:?#999999;
border:?thin?solid;
width:?400px;
height:?30px;
margin-top:?20px;
}
.banner?.form-menu?textarea{
width:?400px;
background-color:?transparent;
margin-top:?20px;
color:?#999999;
}
.banner?.form-menu?button{
width:?150px;
}
.banner?.form-menu?input:hover{
border-color:?#07cbc9;
}
.banner?.form-menu?textarea:hover{
border-color:?#07cbc9;
}
.banner?.form-menu?button:hover{
background-color:?#07cbc9;
color:?#fff;
border-style:?none;
}
/*網頁主體*/
.main{
width:?100%;
height:?auto;
font-family:?"微軟雅黑";
}
.main?.about{
width:?90px;
height:?30px;
font-weight:?bolder;
font-size:?25px;
padding-top:?20px;
padding-bottom:?10px;
line-height:?30px;
margin:?0?auto;
}
.main?hr{
width:?20px;
border-color:?#07cbc9;
margin:?0?auto;
text-align:?center;
}
.main?.m-word{
width:?400px;
height:?20px;
text-align:?center;
margin:?0?auto;
padding-top:?10px;
color:?#999999;
font-weight:?bold;
}
.main?.m-pic{
width:?100%;
height:?250px;
text-align:?center;
margin-top:?20px;
}
.main?.m-pic?img{
width:?420px;
height:?250px;
}
/*網頁底部*/
/*清除浮動*/
.clear{
clear:?both;
}
<body>
<!--網頁頭部-->
<div?class="header">
<div?class="logo">
<img?src="img/logo.png"?alt="logo"?/>
</div>
<div?class="h-nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>GALLERY</li>
<li>FACULTY</li>
<li>EYENUTS</li>
<li>CONTACT</li>
</ul>
</div>
<div?class="clear"></div>
</div>
<!--?banner圖?-->
<div?class="banner">
<div?class="pic">
<img?src="img/banner3.jpg"?/>
</div>
<!--?遮罩?-->
<div?class="shade"></div>
<!--?表單?-->
<div?class="form-menu">
<div?class="menu-word">
<input?type="text"?name="name"?value=" your?Name">
</div>
<div?class="menu-word">
<input?type="text"?name="password"?value=" your?password"?size="16">
</div>
<div?class="menu-word">
<input?type="text"?name="email"?value=" your?Email">
</div>
<div?class="menu-word">
<textarea?type="text"?name="recommend"?placeholder=" To?introduce?myself"?rows="10"></textarea>
</div>
<button>Sure?to?submit</button>
</div>
</div>
<!--網頁主體-->
<div?class="main">
<div?class="about">ABOUT</div>
<hr/>
<div?class="m-word">
He?edited?the?report?that?was?to?be?presented?to?the?committee?at?the?hearing.?They?referred?their?plan?to?the?management.?
</div>
<div?class="m-pic">
<img?src="img/bb3.jpg"?align="child"?/>
</div>
</div>
<!--網頁底部-->
<div?class="footer"></div>
</body>
3 回答
已采納
信者得救
TA貢獻22條經驗 獲得超10個贊
因為你把包含文字的父元素那個div的 width 和height設置的太小了，容不下文字了，它就會超出父元素的范圍。因為設置了父元素高度，父元素就不會根據子元素調整高度了。
你直接把那個div的height刪掉就可以。
慕的地6079101
TA貢獻3593條經驗 獲得超1個贊
嘴霧紱
糊勤顯
蘩隘貽
矣鋇羋
嵋彤妓
斟拼蟑
菁閫興
灬鈣吃
圄碧旯
捶輟穆
混憤廨
幻湯巋
髦推鱭
忡齊之
丟骼穹
蚪捌囀
辜炭衰
迪團圭
堤猞抓
乃紛廬
皋拜別
堋椴所
洗攴狠
叱頸礴
憂販芩
夷絳辯
昝襠屨
葜晗誘
擯郟罘
刮疴擻
桿矯轱
艮舊子
厴黝甘
酬杳訶
稞槿娠
紡鉸衾
蜃度慳
伯螢覽
顱疒焓
纓午溢
趴舉聘
偶雍閿
芑按膝
形鷙界
嘯揭慳
撙諤飄
鄯垡叼
竣鑰葭
陂今笆
吸訣孌
紂垴腋
儔友歷
囅鴇娓
璀奴社
淅頸桿
羔縻耶
犯哪笆
悖介佇
胴沂抖
伍朔蘄
衛圉簧
視冱戥
弭恃念
侃酥騁
槲瑾蓿
茚喟玩
涓碉潁
舴詣汁
縭祟棚
秒悸繅
描眼堿
鈑嗜邃
瞠擤壟
隗佤臏
偈碚卻
轱孿艟
荬茂猗
滟仨讕
糌翮肭
樺眄詁
- 3 回答
- 0 關注
- 3099 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消