左右两边宽度无法固定。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | <!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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <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 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧