请老师指点:我写的2-6代码如下,有两个问题不知如何解决(含截图)
1:为什么图像在浏览器全屏下宽度没有铺满整个页面,如何实现呢?
2:我想实现导航项跟随页面的左右缩放而滚动(不固定在视口的右边),如何实现呢?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{ margin:0;
padding:0;
}
.header{
width:100%;
height:90px;
background:#000
position:fixed;
top:0;
}
.logo{
width:200px;
height:auto;
position:absolute;
left:0;
}
.nav{
width:580px;
height:90px;
/*border:1px solid blue;*/
text-align:center;
font:bold 20px/100px "微软雅黑";
position:absolute;right:0;
}
.ul1 li{
color:#fff;
display:inline;
margin:30px;
}
.main{
width:100%;
margin:90px auto 80px auto
}
.main1{
height:480px;
}
.main2{
height:480px;
}
.main3{
height:480px;
}
.footer{
width:100%;
height:80px;
font:20px "微软雅黑";
background:#000;
text-align:center;
line-height:80px;
position:fixed;
bottom:0;
}
.ul2 li{
color:#fff;
list-style:none;
display:inline;
margin:auto 25px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="header">
<div class="logo"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"/></div>
<div class="nav">
<ul class="ul1">
<li>课程</li>
<li>职业路径</li>
<li>实践</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
</div>
<div class="main">
<div class="main1">
<img src="http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg"/>
</div>
<div class="main2"><img src="http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg"/></div>
<div class="main3"><img src="http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg"/></div>
</div>
<div class="footer">
<ul class="ul2">
<li>网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div>
</body>
</html>
正在回答
.main img{width:100%;}因为你设置的是图片的容器为width:100%。所以图片不会铺满页面
.header{min-width:1000px;}当页面宽度小于1000px时,导航就不会在视口右上方固定了
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星