请问页面主体内容显示不全怎么办?

请问页面主体内容显示不全怎么办?

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="utf-8">

<style type="text/css">

*{

margin: 0;

padding: 0;

}

/*导航条样式*/

.head{

width: 100%;

height: 100px;

background: black;

position: fixed;

top: 0;

left: 0;

}

.logo{

position: absolute;

top: 0;

left: 0;

cursor: pointer;

}

.nav{

position: absolute;

right: 0;

top: 0;

}

.nav-li{

float: left;

height: 100px;

line-height: 100px;

color: white;

font-family: "微软雅黑";

margin: 0 20px;

cursor: pointer;


}

/*内容样式*/

.content-li{

   width:100%;

   height: 397px; 

}

/*页脚内容*/

.footer{

width: 100%;

height: 100px;

background: black;

position:fixed;

bottom: 0;

}

.foot-ul{

width: 70%;

height: 100%;

line-height: 100px;

list-style: none;

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto auto;

}

.foot-li{

float: left;

display: inline-block;

color: white;

             font-family: "微软雅黑";

margin: 0 50px;

cursor: pointer;

}

</style>

</head>

<body>

    <div class="head">

    <div class="logo"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"></div>

    <div class="nav">

    <div class="nav-li">课程</div>

    <div class="nav-li">职业路径</div>

    <div class="nav-li">实战</div>

    <div class="nav-li">猿问</div>

    <div class="nav-li">手记</div>

    </div>

    </div>

    <div class="content">

        <div class="content-li"><img src="http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg"/></div>

        <div class="content-li"><img src="http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg"/></div>

        <div class="content-li"><img src="http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg"/></div>

    </div>

    <div class="footer">

    <ul class="foot-ul">

        <li class="foot-li">网页首页</li>

        <li class="foot-li">企业合作</li>

        <li class="foot-li">人才招聘</li>

        <li class="foot-li">联系我们</li>

        <li class="foot-li">常见问题</li>

        <li class="foot-li">友情链接</li>

        </div>

    </div>

</body>

</html>


正在回答

登陆购买课程后可参与讨论,去登陆

2回答

要给主体部分的图片重新定义宽和高,都设置为100%,让它填充满自己的·父元素大小,然后再给主体设置上下外边据各100就可以了。

祝学习愉快!

提问者 慕工程9242966 2018-03-28 20:01:45

我给主体添加上外边距设置100px,下外边距150px,就显示完整了,可是我页脚是设置的高度100px,为什么我页脚设置的外边距是100px的时候还是显示不完整呢?

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师