请问老师,页头和页尾的链接文字,也可以写成随窗口大小自适应吗?该怎么写?
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin:0;padding: 0; } .nav{ width:100%; height: 100px; line-height: 100px; background: black; position: fixed; top:0; overflow: hidden; zoom:1; } .nav img{ float:left; } .nav img:hover{ cursor: pointer; background-color: red; } div ul{ height: 100px; float: right; } div ul li{ text-decoration: none; display: inline-block; color: white; font-size: 18px; padding:0 30px; } li:hover{ color: red; cursor:pointer; } .main{ margin-top: 100px; margin-bottom: 100px; } .main img{ width: 100%; height: 100%; } .footer{ background: black; width:100%; height: 100px; line-height: 100px; text-align: center; position: fixed; bottom: 0; } .footer p{ width:60%; margin:0 auto; } .footer a{ font-size: 18px; text-decoration: none; color: white; padding:0 20px; } </style> </head> <body> <div class="nav"> <img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png" /> <ul> <li>课程</li> <li>职业路径</li> <li>实战</li> <li>猿问</li> <li>手记</li> </ul> </div> <div class="main"> <img src="http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg" /> <img src="http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg" /> <img src="http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg" /> </div> <div class="footer"> <p> <a href="#">网站首页</a> <a href="#">企业合作</a> <a href="#">人才招聘</a> <a href="#">联系我吗</a> <a href="#">常见问题</a> <a href="#">友情链接</a> </p> </div> </body>
链接的文字,在窗口缩小后就会慢慢盖住看不到,怎么样可以实现它们的自适应?
21
收起
正在回答 回答被采纳积分+1
2回答
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星