3-3编程练习求问
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{margin:0;padding:0;}
h2{font-family: "微软雅黑";font-size: 25px;margin-bottom: 0.5em;}
body{background-color: pink;min-width: 978px;}
.nav{width:100%;min-width:1000px;height:100px;background-color:black;position:fixed;top:0;z-index:999;}
.logo{background: url("http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"
) no-repeat top left;float: left;width:300px;height: 100px}
.title{float:right;text-align: center;font-size:23px;margin-right:20px;}
.list li{list-style:none;display:inline;color:white;line-height: 100px;margin:auto 30px;}
.container{max-height:1000px;margin:0 auto;padding:100px 320px 0 320px;}
.middle,.left,.right{position:relative;float:left;min-height:800px;padding-top:100px;}
.left{background-color: #add8e6;width:300px;float:left;padding-left:20px;background-color:#FFDEAD;margin-left:-100%;left:-320px;}
.left li{list-style: none;line-height: 2.5em;}
.middle{width:100%;background-color: pink;margin:0 auto;text-align:center;}
/* .middle img{position:relative;top:100px;}*/
.right{width:300px;background-color: #add8e6;padding-left:20px;margin-left:-320px;right:-320px;}
input,.login{width:250px;height:30px;margin-top: 20px;}
.login{background-color: red;color:#fff;}
#rec span{background-color: #FFB6C1;margin-right: 0.5em;}
.rg{width:45%;float:left;}
#kc{width:245px;}
#kc a{text-decoration: none;color:inherit;line-height: 2.5em;margin-right: 1.5em;}
.footer{width:100%;height:60px;position:fixed;bottom:0;background-color: black;text-align:center;}
.footer li{list-style:none;display:inline;color:white;line-height: 60px;font-size:20px;margin:auto 40px;}
</style>
</head>
<body>
<div class="nav">
<div class="logo"></div>
<div class="title">
<ul class="list">
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
</div>
<div class="container">
<div class="middle">
<img src="http://img1.sycdn.imooc.com/climg//590037e00001fab706000400.jpg">
</div>
<div class="left">
<h2>课程推荐</h2>
<ul id="rec">
<li><span>职业路径</span> HTML5与CSS3实现动态网页</li>
<li><span>职业路径</span> HTML5与CSS3实现动态网页</li>
<li><span>职业路径</span> HTML5与CSS3实现动态网页</li>
<li><span>职业路径</span> HTML5与CSS3实现动态网页</li>
<li><span>职业路径</span> PHP入门开发</li>
<li><span>职业路径</span> JAVA入门开发</li>
</ul>
</div>
<div class="right">
<form>
<h2>登陆</h2>
<input type="text" name="user" placeholder="请输入登陆邮箱/手机号">
<input type="password" name="password" placeholder="6-12位密码，区分大小写，不能用空格" size="35">
<br>
<input type="button" value="登陆" size="35" class="login">
</form>
</div>
</div>
<div class="footer">
<ul>
<li>网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div>
<!-- 此处写代码 -->
</body>
</html>老师，能帮忙看看我这个实现ok吗？
有一个疑问：为什么我的body要设置min-width: 978px？这个值是我拉伸窗口得出的，但不知道为什么是这个值，怎么算出来的？
还有登陆按钮设置不了高度?
其它的padding/margin值设置不知道合不合理?
15
收起
正在回答
2回答
页面内出现了垂直滚动条，建议中间部分的高度适当调小一些
其次，min-width的临界值是960px，这个值是这么计算出来的，左右两边的元素是定宽300px*2+左右两边元素的左填充20px*2+右边元素的左边距320px=960
还有登录按钮是可以设置高度的，例如：
整体效果不错呢，继续加油吧~~~
相似问题
登录后可查看更多问答，登录/注册
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星