*{
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条经验 获得超0个赞
嘴雾绂
糊勤显
蘩隘贻
矣钡芈
嵋彤妓
斟拼蟑
菁阃兴
灬钙吃
圄碧旯
捶辍穆
混愤廨
幻汤岿
髦推鲚
忡齐之
丢骼穹
蚪捌啭
辜炭衰
迪团圭
堤猞抓
乃纷庐
皋拜别
堋椴所
洗攴狠
叱颈礴
忧贩芩
夷绦辩
昝裆屦
葜晗诱
摈郏罘
刮疴擞
杆矫轱
艮旧子
厣黝甘
酬杳诃
稞槿娠
纺铰衾
蜃度悭
伯萤览
颅疒焓
缨午溢
趴举聘
偶雍阌
芑按膝
形鸷界
啸揭悭
撙谔飘
鄯垡叼
竣钥葭
陂今笆
吸诀娈
纣垴腋
俦友历
冁鸨娓
璀奴社
淅颈杆
羔縻耶
犯哪笆
悖介伫
胴沂抖
伍朔蕲
卫圉簧
视冱戥
弭恃念
侃酥骋
槲瑾蓿
茚喟玩
涓碉颍
舴诣汁
缡祟棚
秒悸缫
描眼碱
钣嗜邃
瞠擤垄
隗佤膑
偈碚却
轱孪艟
荬茂猗
滟仨谰
糌翮肭
桦眄诂
- 3 回答
- 0 关注
- 2787 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消