麻烦老师帮忙看下代码可以么
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin:0;
padding:0;
list-style:none;
font-family:"微软雅黑";}
body{background-color:rgb(173,216,230);}
div.header{width:100%;
height:100px;
background-color:black;
position:fixed;
top:0;
overflow:hidden;
*zoom:1;}
div.logo{float:left;
height:100px;
margin:auto 0;
}
div.logo img{display:block;}
div.nav ul{overflow:hidden;
*zoom:1;float:right;}
div.nav ul li{height:100px;
line-height:100px;
margin-right:60px;
float:left;}
a{text-decoration:none;
color:white;
font-size:20px;}
a:active{color:orange;}
div.container{width:80%;
height:100%;
margin:0 auto;
text-align:center;
padding-top:100px;
padding-bottom:100px;
font-size:12px;
overflow:hidden;
*zoom:1;}
.left,.center,.right{padding:60px 10px 0;
width:30%;
text-align:left;}
div.left{float:left;}
div.center{float:left;}
div.container li{padding-top:20px;
font-size:"楷体";}
span{background-color:rgb(234,136,136);}
div.sider{width:5px;
height:600px;
background-color:rgb(238,149,114);
float:left;}
div.right{float:right;}
input{width:100%;
height:30px;
margin-top:20px;
font-size:10px;}
.login{text-align:center;
background-color:red;
color:white;}
div.footer{width:100%;
height:100px;
background-color:black;
position:fixed;
bottom:0;
text-align:center;}
div.footer ul{display:inline-block;}
div.footer ul li{display:inline-block;
height:100px;
line-height:100px;
padding:0 15px;}
</style>
</head>
<body>
<div class="header">
<div class="logo">
<img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"/>
</div>
<div class="nav">
<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>
<div class="container">
<div class="left">
<h1>课程推荐</h1>
<ul>
<li><span>职业路径</span> HTML5与CSS3实现动态网页</li>
<li><span>职业路径</span> 零基础入门Android语法与界面</li>
<li><span>职业路径</span> IOS基础与反与常用控件</li>
<li><span>职业路径</span> PHP入门开发</li>
<li><span>职业路径</span> JAVA入门开发</li>
</ul>
</div>
<div class="center">
<h1>相关课程</h1>
<ul>
<li>HTML CSS JavaScript</li>
<li>HTML5 CSS3 Jquery</li>
<li>移动端基础 移动端APP开发</li>
</ul>
</div>
<div class="sider"></div>
<div class="right">
<h1>登录</h1>
<form>
<input type="text" name="zhanghao" src="#" placeholder="请输入登录邮箱/手机号">
<input type="password" name="password" src="#" placeholder="6-16位密码，区分大小写，不能用空格">
<input type="button" name="denglu" src="#" value="登录" class="login">
</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>
<li><a href="#">友情链接</a></li>
</ul>
</div>
</body>
</html>
div宽度用百分数，内外间距宽度用数值，造成界面大小屏幕时显示不同，这样怎么解决好？2
收起
正在回答
2回答
同学你好，因为设置的是百分比，宽度是一定会改变的哦。或者将内外边距也设置为百分比，不过宽度上要是占用的总宽度之后为100%（即：设置的宽度，加上左右的内外边距）；
不过当前这样设置，左边与中间部分是可以的，不过右边部分与分割线要在设置下。
（1）分割线的高度不够，如下，下面是缺一部分的。
建议：可以给html以及body设置高度100%，然后给分割线的高度都设置为100%，例：
（2）但是这样垂直方向有滚动条，因为高度是100%，然后又加上上下的内边距，占据的总高度超出100%，可以去掉上下内边距，使其与上下部分重合，就不会出现垂直方向的滚动条了。
（3）且中间的内容，上内边距要设置大一些，效果才会更好，例：
（4）右侧表单项，整体的宽度太大，建议：可以给form设置一个固定的宽，稍微小一些。且“登录”按钮要没有边框，建议：可以设置border:none;属性。
希望能帮助到你，欢迎采纳。
祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星