壮士！中间图片定位的对不对？底部元素又窜上去了，设置清楚不管用是咋回事？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
font-family: "楷体";
}
/*___________下面是结构框架______________*/
.header,
.footer{
float:left;
width: 100%;
height: 60px;
background: #4682b4;
color: white;
}
.main{
padding: 0 280px 0 350px;
min-width: 50%;
}
.middle,
.left,
.right{
height: 600px;
position: relative;
float: left;
}
.middle{
width: 100%;
background: #ffc0cb;
}
.left{
width: 350px;
background: #fff0f5;
margin-left: -100%;
left: -350px;
}
.right{
width: 280px;
background: #87cefa;
margin-left: -280px;
right: -280px;
}
/*________________下面是导航__________________*/
.logo{
float: left;
}
.nav{
float: right;
font-size: 18px;
}
.nav-li{
line-height: 60px;
float: right;
margin-right: 30px;
}
/*________________下面是页脚___________________*/
.footer{
text-align: center;
/*底部元素又窜上去了。。。清楚浮动怎么不管用了？绝对定位太局限了*/
position: absolute;
top:100%;
left: 0;
}
.footer-li{
display: inline-block;
line-height: 60px;
margin-right: 30px;
font-size: 18px;
}
/*————————————————下面是左栏——————————————————*/
.job{
background: #fa8072;
}
.left,
.right{
text-align: center;
}
.center-li{
text-align:left;
margin-top: 30%;
}
/*————————————————下面是右栏—————————————————*/
.center-inner{
margin-top: 35%;
}
.input{
width: 200px;
height: 35px;
font-size: 11px;
outline: none;
}
.input-li{
width: 200px;
height: 35px;
background: red;
color: white;
border-radius: 4px;
border: 1px solid #ff1493;/*按钮像死了一样没有立体感*/
}
/*————————————————下面是中间——————————————————*/
/*这样做对么？*/
.middle{
text-align: center;
}
.zhong{
margin-top: 15%;
}
/*————————————————下面是a样式设置—————————————*/
a{
text-decoration: none;
color: black;
}
a:hover{
color: orange;
}
</style>
</head>
<body>
<!-- 页头 -->
<div class="header">
<div class="logo">
<img width="180" src=" imooclogo.png">
</div>
<div class="nav">
<div class="nav-li"><a href="#">手记</a></div>
<div class="nav-li"><a href="#">猿问</a></div>
<div class="nav-li"><a href="#">实战</a></div>
<div class="nav-li"><a href="#">职业路径</a></div>
<div class="nav-li"><a href="#">课程</a></div>
</div>
</div>
<!-- 主体 -->
<div class="main">
<!-- 中间 -->
<div class="middle">
<img width="400px" src="http://img1.sycdn.imooc.com/climg//590037e00001fab706000400.jpg" class="zhong">
</div>
<!-- 左侧 -->
<div class="left">
<div class="center-li">
<h3>课程推荐</h3><br/>
<div class="left-li"><span class="job">职业路径</span> <a href="#">HTML5HTMLHTMLHTMLH</a></div><br/>
<div class="left-li"><span class="job">职业路径</span> <a href="#">零基础入门零基础入门零基础入门</a></div><br/>
<div class="left-li"><span class="job">职业路径</span> <a href="#">零基础入门零基础入门零基础入门</a></div><br/>
<div class="left-li"><span class="job">职业路径</span> <a href="#">零基础入门零基础入门</a></div><br/>
<div class="left-li"><span class="job">职业路径</span> <a href="#">零基础入门</a></div>
</div>
</div>
<!-- 右侧 -->
<div class="right">
<div class="center-inner">
<form class="form">
<h3>登录</h3><br/>
<input class="input" type="text" name="usname" value="" placeholder="请输入登录邮箱/手机号" autofocus required/><br/><br/>
<input class="input" type="password" name="psw" value="" placeholder="6-16位密码，区分大小写，不能用空格" autofocus required/><br/><br/>
<input class="input-li" type="submit" name="提交" value="登录"/>
</form>
</div>
<div style="clear: both;"></div>
</div>
<!-- 页脚 -->
<div class="footer">
<div class="footer-li"><a href="#">网站首页</a></div>
<div class="footer-li"><a href="#">企业合作</a></div>
<div class="footer-li"><a href="#">人才招聘</a></div>
<div class="footer-li"><a href="##">联系我们</a></div>
<div class="footer-li"><a href="">常见问题</a></div>
<div class="footer-li"><a href="#">友情链接</a></div>
</div>
</div>
</body>
</html>
1 | <br> |
正在回答 回答被采纳积分+1
你的footer不是横向全屏的吗？要的就是横向全屏。
还有上个问题，我跟你说原因，你自己去找，自己去查，后面元素产生问题的原因目前你可能会遇到的有两种，一是浮动了，而是设置了定位，只要前面的内容设置了浮动或者是设置了定位，如果没有进行处理的话，后面的内容一定会“异位”。如果是浮动了，记得一定要清除浮动，如果是用定位了，那么就要填充或者后面继续使用定位。从你的代码和问题中看的出来，你对浮动和定位这两个重难点没有掌握好，建议再去重新学习这两个课，相信你这次再去听课的时候一定能收货很多技巧，因为好多问题你都遇到了，听我的，不要说自己都学会了，其他的问题都解决了，不要急躁，踏踏实实的学，后面学的会很轻松的，加油！
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星