请老师优化代码并且解答关于<img>和居中的几个问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{
margin:0;
padding:0;
}
img{
display:block;
}
.container{
margin:100px 0;
}
.header{
width:100%;
height:100px;
background-color:#000;
position:fixed;
line-height:100px;
font-size:20px;
top:0px;
}
.banner1{
background-repeat:no-repeat;
width:100%;
}
.banner2{
background-repeat:no-repeat;
width:100%;
}
.banner3{
background-repeat:no-repeat;
width:800px;
}
.navi{
position:fixed;
right:0px;
}
.navi li{
color:white;
display:inline-block;
margin-right:30px;
float:left;
}
.logo{
float:left;
}
.footer{
width:100%;
height:100px;
line-height:100px;
color:white;
font-size:20px;
background-color:black;
position: fixed;
text-align:center;
bottom:0;
}
.footer ul li{
padding:0 25px;
display:inline-block;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="header">
<div class="logo">
<img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png">
</div>
<ul class="navi">
<a href="#"><li>课程</li></a>
<a href="#"><li>职业路径</li></a>
<a href="#"><li>实战</li></a>
<a href="#"><li>猿问</li></a>
<a href="#"><li>手记</li></a>
</ul>
</div>
<div class="container">
<div class="banner1">
<img src="http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg">
</div>
<div class="banner2">
<img src="http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg">
</div>
<div class="banner3">
<img src="http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg">
</div>
<div class="footer">
<div>
<ul>
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
</div>
</div>
</body>
</html>以上是我的代码，请问有什么可以优化的吗？
背景图片什么时候用background-image:url(),什么时候直接用<img>比较好?
当表示长度的数据后不加px的时候，这个数值的默认单位是什么？
同时规定了图片宽高但是和图片原图宽高比例不同的时候，图片宽高按什么显示？
<div class="footer"> <div> <ul> <li>课程</li> <li>职业路径</li> <li>实战</li> <li>猿问</li> <li>手记</li> </ul> </div>
这一段代码，为什么只有把<ul>套在<div>里，它才能够通过text-align:center；控制居中显示？
正在回答
同学你好，问题解答如下：
1.代码的问题和修改如下：
（1）ul中直接嵌套a不规范，正确的应该是ul>li , 内容应该放在li中。如下修改：
文字放在a标签会有默认样式，如下清除：
（2）图片不设置大小，默认显示原图大小。当分辨率小时，会出现横向滚动条。
图片设置宽度100%：
2.img图片适合做动态加载的图片。在实际开发中 , 有的图片是动态从后台加载来的 . 例如你在网上购物时 , 里面的商品根据不同的搜索显示不同的商品 。这个就是根据你搜索不同的商品 , 向后台请求不同的数据 , 所以商品的图片自然也是从后台动态加载 。动态加载来的图片 , 就可以在js中做成html模板 , 然后使用img引用图片 。（在后面高级阶段的课程中会有相关的）
但是img图片太大的话，网上太卡，就会出现我们经常看到的一个现象，就是图片的上部分加载过来，但是下部分没有加载显示出来。
背景图属于在css样式中引用的，它不会出现一半背景图显示一半不显示的情况。因为只有css中背景图完全加载过来，才会渲染到页面中去。所以页面中不需要动态加载的图片 , 就是一张不会变化的图片 , 这个可以使用背景图设置 。例如页面中的logo ,这个logo不会因为你搜索的内容不同 ,显示的就不同 。所以它不需要从后台加载过来 , 直接设置成背景图片就行哦 。或者有一些大的banner图片，也可以使用背景图设置。
3.具体是说的哪一个属性 ，不太理解同学描述的问题，请详细说一下。
4.一般不需要给图片设置高度的，只设置宽度即可，这样高度会根据宽度的变化原比例进行缩小或者放大。当然了，如果必须同时设置宽高，有一点变形也可以的。
5.老师把div去掉，是可以居中的，建议同学重新测试一下：
祝学习愉快 ！
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星