左右两边宽度无法固定。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0;}
body{min-width:900px;}
.header,
.footer{ /*头部尾部修饰 */
float: left;
width: 100%;
background:black;
height: 100px;
line-height: 40px;
text-align: center;
}
.header img{float: left;}
.header ul{list-style-type:none;float:right;margin: 0px auto;line-height:100px;}
.header ul li{float:left;color:white;font-size:18px;margin: 0px 40px;}
.header ul li a{text-decoration: none;color:white;}
.container{padding: 0 380px 0 350px ;} /* 这里响应式不能实现，当放大缩小页面的时候，宽度发生变化，无法固定 */
.left,
.middle,
.right{
position: relative;
float: left;
min-height: 700px;
}
.middle{width: 100%;background: #F4ADB9;}
.left{width:350px;background: #F7D1D1;margin-left:-100%;left:-350px;}
.right{width:380px;background: #C0E0FF;margin-left:-380px;right: -380px;}
.left ul{/*左边导航修饰*/
margin: 120px auto;
text-align: center;
list-style-type: none;
width: 280px;
height: 230px;
}
.left ul li{
margin: 10px;
float: left;
}
.left ul li a{background: orange;color:black;text-decoration: none;}
.middle img{margin:100px 9px;} /* 中间背景图*/
.right input{width: 250px;height: 50px;margin: 20px 50px;} /* 设置输入框之间的间距*/
.right .sub1{background: red;color: } /* 登录按钮背景颜色*/
.login{margin: 100px auto;} /*登录框整体位移中间*/
/* 底部导航修饰 */
.footer{width: 100%;height: 40px; background: black; line-height:40px;position: fixed;bottom: 0px;}
.footer ul{width:550px;list-style-type:none;margin: 0px auto;}
.footer ul li{float:left;color:white;font-size:16px;margin: 0px 20px;}
.footer ul li a{text-decoration: none;color:white;}
</style>
</head><body> <div class="header"> <img src="http://img1.sycdn.imooc.com/climg//590037f600016ce303000100.png" alt=""/> <!--导航--> <ul > <li><a href="#">课程</a></li> <li><a href="#">职业路径</a></li> <li><a href="#">实战</a></li> <li><a href="#">猿问</a></li> <li><a href="#">手记</a></li> </ul> </div> <div class="container"> <div class="middle"> <img src="http://img1.sycdn.imooc.com/climg//590037e00001fab706000400.jpg"/> </div> <div class="left"> <ul> <h2 align="center">课程推荐</h2> <li><a href="#"/>职业路径</a> <span>HTML5与CSS3</span></li> <li><a href="#"/>职业路径</a> <span>零基础入门Android</span></li> <li><a href="#"/>职业路径</a> <span>ios基础语法与常用控件</span></li> <li><a href="#"/>职业路径</a> <span>PHP入门开发</span></li> <li><a href="#"/>职业路径</a> <span>JAVA入门开发</span></li> </ul> </div> <div class="right"> <form class="login" action="#" method="get" accept-charset="utf-8"> <h2 align="center">登录</h2> <input type="text" placeholder="请输入登录账号/邮箱/手机号。" /><br/> <input type="text" placeholder="请输入6-10位密码/区分大小写/不能用空格。"/><br/> <input class="sub1" type="submit" value="登录"/> </form> </div> </div> <div class="footer"> <ul> <li><a href="#"/>网站首页</a></li> <li><a href="#"/>人才招聘</a></li> <li><a href="#"/>联系我们</a></li> <li><a href="#"/>常见问题</a></li> <li><a href="#"/>友情链接</a></li> </ul> </div> </body> </html>
25
收起
正在回答 回答被采纳积分+1
1回答
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星