窗口一缩小字体位置就全乱了 这该怎么解决。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{
margin: 0;
padding: 0;
}
.header{
width: 100%;
height: 100px;
background-color: black;
line-height: 100px;
position: fixed;
top: 0;
}
.left{
float: left;
}
.nav{
position: absolute;
left: 50%
}
.nav ul li{
float: right;
list-style-type: none;
padding-right: 70px;
}
.nav ul li a{
text-decoration: none;
color: #ffffff;
font-size: 30px;
font-weight: bold;
}
.footer{
width: 100%;
height: 100px;
background-color: black;
line-height: 100px;
position: fixed;
bottom: 0;
}
.footer ul li{
float: left;
list-style-type: none;
padding-right: 150px;
}
.footer ul li a{
text-decoration: none;
color: #ffffff;
font-size: 20px;
font-weight: bold;
}
.nav2{
position: absolute;
left: 20%
}
.container{
width: 100%;
height: 900px;
background-color: #38B9C6;
margin-top: 100px;
}
.container .left{
width: 59.5%;
height: 900px;
}
.container .left .zuo{
width: 50%;
float: left;
}
.left ul li{
list-style-type: none;
margin: -10px 0;
}
.left a{
color: #fff;
text-decoration: none;
}
.container .left .you{
width: 50%;
float: left;
}
.xian{
width: 0.5%;
height: 900px;
background-color: #E48342;
position: absolute;
left: 59.5%;
}
h3{
font-size: 30px;
}
span{
background-color: #F28F3F;
margin-right: 20px;
}
input{
width: 300px;
height: 40px;
}
.submit{
height: 50px;
background-color: red;
color: #fff;
font-size: 20px;
}
.container .right{
position: absolute;
left: 70%;
}
</style>
</head>
<body>
<!-- 顶部 -->
<div class="header">
<div class="left"><a href="#"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png
"/></a></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 class="container">
<div class="left">
<div class="zuo">
<h3><a href="#">课程推荐</a></h3>
<ul class="leftsidebar">
<li><span>职业路径</span><a href="#">HTML5与CSS3实现动态网页</a></li>
<li><span>职业路径</span><a href="#">零基础入门Android语法与界面</a></li>
<li><span>职业路径</span><a href="#">IOS基础语法与常用控件</a></li>
<li><span>职业路径</span><a href="#">PHP入门与开发</a></li>
<li><span>职业路径</span><a href="#">JAVA入门开发</a></li>
</ul>
</div>
<div class="you">
<h3><a href="#">相关课程</a></h3>
<ul class="leftsidebar">
<li><a href="#">HTML CSS JavaScript</a></li>
<li><a href="#">HTML CSS Jquery</a></li>
<li><a href="#">移动端基础 移动端APP开发</a></li>
</ul>
</div>
</div>
<div class="xian">
</div>
<div class="right">
<h3>登录</h3>
<input class="id" type="text" name="iphone" placeholder="请输入登录邮箱/手机号">
<br/>
<input class="psd" type="password" name="psd" placeholder="6-11位密码,区分大小写,不能用空格 ">
<br/>
<input class="submit" type="submit" name="submit" value="登录">
</div>
</div>
</div>
<div class="footer">
<ul class="nav2">
<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>
正在回答
这个题不要考虑当窗口缩小的情况，只需要完成全屏状态下正常显示即可。当窗口变大或者缩小，内容也会跟随变化，这属于响应式的范围，在基础布局中还未涉及，到进阶路径中会有专门的课程去讲解这方面的知识。先把基础的知识打好才能学习更加复杂的布局哦。祝学习愉快！
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星