还没到设置左右的移动，只是设置了中间模块的宽度为100%，左中右三块模块无法成为一列
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{margin:0;padding:0;
text-align: right;}
.nav{height:100px;width:100%;
position:fixed;top:0;
left:0;right: 0;
margin:0 auto;
background-color:black;
float: left;
}
.nav span{color:white;
margin-right:30px;
line-height: 100px;
font-size: 20px;
word-spacing: 10px;
}
.footer{height:100px;width:100%;
position:fixed;bottom:0;
left:0;right: 0;
margin:0 auto;
background-color:black;
float: left;}
.footer span{word-spacing:100px;
line-height: 100px;
display: block;
text-align: center;
color: white;
font-size:20px;
}
.content{width:100%;height:1000px;
font-color:black;
}
.middle,.left,.right{
min-width: 300px;
position: relative;
float: left;padding-top: 60px;
margin-top: 100px;
}
.middle{height:100%;width:100%;
padding-top:150px;
line-height: 50px;
background-color: #FFC0CB;
}
.left{width:300px;height:100%
padding-top:150px;text-align:left;
line-height: 50px;
padding-left: -100%;
background-color: #D8BFD8;
min-width: 300px;
position: relative;
float: left;padding-top: 60px;
}
.big{font-size: 35px;}
.special{background-color:#FF69B4;
}
.right{width:200px;height:100%;
text-align:left;
padding-top:150px;
line-height: 50px;
background-color: #B0C4DE;
}
.logoin{display:block;background-color: red;width:270px;
height:50px;text-align: center;font-size:25px;
color:white;line-height: 50px;
}
</style>
</head>
<body>
<div class="nav">
<img class="png" src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"
align="left">
<span class="text" font-color="white">
课程 职业路径 实战 猿问
</span>
</div>
<div class="content">
<div class="left">
<span class="big">课程推荐</span>
<br/>
<span class="special">职业路径</span>
HTML5与CSS3实现动态网页
<br/>
<span class="special">职业路径</span>
零基础入门Android语法与界面
<br/>
<span class="special">职业路径</span>
iOS基础语法和常用控件
<br/>
<span class="special">职业路径</span>
PHP入门开发
<br/>
<span class="special">职业路径</span>
JAVA入门开发
<br/>
</div>
<div class="middle">
<img src="http://img1.sycdn.imooc.com/climg//590037e00001fab706000400.jpg">
</div>
<div class="right">
<span class="big">登录</span>
<form>
<input type="text" name="phone email" placeholder="请输入登录账号/手机号" size="40px">
<input type="text" name="secret" placeholder="6到16位密码，区分大小写，不能用空格" size="40px">
<br/>
<input class="logoin" type="submit" name="logo in" value="登录" >
</form>
</div>
</div>
<div class="footer">
<span color="white">
网站首页 企业合作 人才招聘 联系我们 常见问题 友情链接
</span>
</div>
</body>
</html>
正在回答 回答被采纳积分+1
你好同学 ,根据你修改的代码 , 如下应该是设置margin :
老师经过修改后的代码是可以出来效果的 , 同学要按照老师截图代码认真修改一下 . 如果修改后 , 还是没有效果 , 可以重新提问新问题 , 把完整的代码粘贴一下 . 以便老师准确的去定位代码中所有的问题 .
另外 , 关于同学提问的填充相关 , 原理是这样的 :
圣杯布局不是很好理解 , 所以建议同学能够结合视频或者教辅资料辅助理解 ,圣杯布局的实现思路资料如下:
中间部分整体的盒子是不设置宽度100%的 , 而同学疑惑的左右两边的填充 , 是给left , right留的位置 . 这样middle设置宽度100%之后 .除了左右两边的padding位置 , 其他的部分都会被middle占据 .
正因为middle设置宽度100% ,一行的位置都被它占据 . left , right只能被挤到下边了 . 所以需要结合定位和margin使它们两个在middle左右两边显示 .
祝学习愉快 ,望采纳 .
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星