作业点评的宽度平铺问题

作业点评的宽度平铺问题

【网页整体】
1、  整个页面没有铺平网页,针对这个问题,帮你提出一些解决的方式
不同的电脑它的分辨率是不一样的,所以会导致你的电脑打开这个网页,看着页面是铺满的,别人的电脑看着这个页面是没有铺满的,解决方法如下:
(1)      将这个页面每个区域的最外层盒子的宽度设置为100%
(2)      最外层的盒子中再套一个大盒子,可以讲这个大盒子的宽度设置为定值,然后再设置一个margin:0 auto;这样整个区域既可以平铺整个页面,区域中的内容也能够居中显示。
(3)      代码示范:
<header style=”witdh:100%”>
     <div style=”width:1200px;margin:0 auto”>
               <a></a>
      <nav></nav>
</div>
</header>
【顶部】
1、  顶部的背景颜色要跟Logo图片的背景颜色一样;
2、  .container{}宽度过宽导致页面出现横向滚动条,建议将宽度设置成1200px;
【banner区域】
1、  banner图片要用img标签在html文档里面引入;
2、  图片要铺满整个页面,给img的宽度设置100%即可

老师,我作业里都设置了100%的width,请问为什么还会说别人的电脑里显示没有铺满。我电脑mbp屏幕比较小,确实有点不懂怎么小屏幕调试大屏

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

一、针对于你的作业没有铺满全屏的问题主要有以下两点:

1、主要是针对banner图片和portfolio区域的图片,你虽然设置了宽度100%,但是你的图片用的是background-image: url(img/banner.jpg);而且并没有控制其水平方向不平铺(可以设置background-repeat:no-repeat;)。设置了background-repeat:no-repeat;还需要设置background-size: cover;背景图片才能撑满全屏;

2、banner图片、portfolio区域的图片都建议使用img在html文档里面引入,然后设置img宽度为100%即可撑满全屏;

祝学习愉快!

  • 指尖烟头 提问者 #1
    搜嘎,这些细节部分没有人给我解释自己还真难琢磨,谢谢啦
    2017-01-26 01:16:33
小于飞飞 2017-01-24 20:37:38

不清楚代码具体情况,可以把代码传上来,综合看下。希望对你有帮助,祝学习愉快,欢迎采纳。

  • 提问者 指尖烟头 #1
    就是关于屏幕适配的调试方法,我当时看我作业确实已经都是平铺没有溢出了
    2017-01-24 20:42:09
  • 小于飞飞 回复 提问者 指尖烟头 #2
    看了你的作业,你是将内部的“container”设置成100%,老师建议,外层设置100%,然后内层根据具体宽度设置。关于具体情况核实后,尽快回复你。可以先继续学习哟。
    2017-01-24 20:50:57
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
HTML5与CSS3实现动态网页 2018
  • 参与学习       1887    人
  • 提交作业       4643    份
  • 解答问题       5760    个

有HTML和CSS基础,却不知道如何进阶?本路径带你通过系统学习,完成从“会做网页”到“做出好的动态网页”的蜕变,迈出成为前端工程师的第一步。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师