2-7编程练习几个问题

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		*{padding:0;margin:0;}
		li{list-style:none;}
		.header{width:100%;height:100px;background:black;position:fixed;overflow:hidden;}
		.header .logo{float:left;}
		.header .nav{float:right;}
		.header .nav li{float:left;color:#fff;line-height:100px;font-size:20px;margin-right:50px;}
		.container{width:100%;height:auto;padding-top:100px;}
		.banner-1 img,.banner-2 img,.banner-3 img{width:100%;height:auto;display:block;}
		.footer{width:100%;height:100px;background:black;position:fixed;top:91%;overflow:hidden;}
		.footer .nav-font{float:left;}
		.footer .nav-font{margin-left:600px;}
		.footer .nav-font li{float:left;margin-right:80px;color:#fff;line-height:100px;font-size:20px;text-align:center;}
	</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>课程</li>
				<li>职业路径</li>
				<li>实战</li>
				<li>猿问</li>
				<li>手记</li>
			</ul>
		</div>
	</div>
	<div class="container">
		<div class="banner-1"><img src="http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg">
		</div>
		<div class="banner-2"><img src="http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg">
		</div>
		<div class="banner-3"><img src="http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg">
		</div>
	</div>
	<div class="footer">
		<div class="nav-font">
			<ul>
				<li>网站首页</li>
				<li>企业合作</li>
				<li>人才招聘</li>
				<li>联系我们</li>
				<li>常见问题</li>
				<li>友情链接</li>
			</ul>
		</div>
	</div>
</body>
</html>

第一个问题是导航部分

怎么在页面缩小时导航部分的字体不会随着页面的缩小而移动位子。比如把页面窗口从右边往左的话，导航部分的字体也会像左移动

第二个问题是图片的部分

问题和上面差不多，怎么在页面缩小时导航部分的图片不会随着页面的缩小而移动位子。比如把页面窗口从右边往左的话，图片也会像左移动的同时缩小

qq_Lcy_6 2018-11-07

源自：CSS网页布局基础 2-7 编程练习

收起

3回答

妮可妮可妮_ 回答被采纳获得+3积分 2018-11-07 18:38:12

你好同学,

在实际开发中一般这种情况都会使用响应式的方法解决,

因为作业中有一些内容是设置了固定的宽高,当浏览器缩小的时候,宽度不够就产生了布局变化, 由于顶部设置了固定定位,当使用最小宽度的方式时会出现一些问题,想要实现随着屏幕的变化，内容会进行相应的调整是属于响应式布局中的内容,我们现阶段还没有学习响应式布局还不能实现,在响应式开发与常用框架的响应式开发和常用框架的课程中会讲到,本作业中同学只需要完成全屏状态下的正常显示即可。

祝学习愉快!

收起回答