3-3编程问题
老师老师，为什么我的右边部分用了margin-right：-100%；就已经自动放好位置了，不用再设置right了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding:0;
margin:0;
}
.header{
background:black;
width:100%;
height:80px;
}
.header img{
height:80px;
}
.header ul{
font-size:22px;
float:right;
margin-right:30px;
line-height:80px;
word-spacing:1.5em;
}
.header ul li{
display:inline;
color:white;
}
.content{
height:470px;
padding:0px 300px 0px 300px;
min-width: 300px;
}
.left,.center,.right{
position: relative;
float:left;
}
.center{
width:100%;
background: pink;
height:100%;
}
.left{
background:#ffefdb;
width:300px;
height:100%;
margin-left:-100%;
left:-300px;
}
.left ul{
list-style-type: none;
font-family: "黑体";
margin-top:30%;
}
.left ul li{
line-height: 40px
}
span{
background:pink;
font-size:16px;
color:black;
}
.right{
background:#add8e6;
width:300px;
height:100%;
margin-right:-100%;
}
input{
height: 30px;
}
.right ul{
list-style-type: none;
margin-top:30%;
margin-left:8%;
}
.right ul li{
line-height: 60px;
}
.button{
background-color: red;
font-size:22px;
text-align:center;
height:30px;
width:210px;
line-height:30px;
border: none;
}
.center img{
padding:0;
margin:0;
width:60%;
margin-left:20%;
margin-top:20%;
}
.footer{
background:black;
height:80px;
}
.footer ul{
font-size:22px;
word-spacing: 2em;
line-height: 80px;
text-align:center;
}
.footer ul li{
display:inline;
color:white;
}
</style>
</head>
<body>
<div class="header">
<img src="http://img1.sycdn.imooc.com/climg//590037f600016ce303000100.png"/>
<ul>
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
<div class="content">
<div class="center">
<img src="http://img1.sycdn.imooc.com/climg//590037e00001fab706000400.jpg"/>
</div>
<div class="left">
<ul>
<h2>课程推荐</h2>
<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="right">
<ul>
<h2>登陆</h2>
<li><input size="30" class="text" type="text" placeholder="请输入用户名/手机号/邮箱" name="username"></li>
<li><input size="30" class="password" type="password" placeholder="请输入密码" name="password"></li>
<li><input class="button" type="button" value="登陆" name="submit"></li>
<ul>
</div>
</div>
<div class="footer">
<ul>
<li>网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div>
</body>
</html>10
收起
正在回答
1回答
测试了你的代码，对于本题来说，
1、如果右侧设置margin-right值为正值，那么就会向右增加占据的位置，如果设置设置的值为负值，就会向左移动，如果为位本身宽度为-300px，也会移动到最右边。
而老师在代码中给右侧设置的是margin-left值和right值，都为自身宽度。
2、建议将中间图片设置小一点，如果在大的分辨率显示器下，中间图片已经超出中间区域。
3、建议给body设置最小宽度min-width:900px;保证浏览器缩小到一定屏幕时，页面布局不乱。
自己再修改测试下，祝学习愉快~~
相似问题
登录后可查看更多问答，登录/注册
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星