鱼C论坛

 找回密码
 立即注册
查看: 2014|回复: 6

[已解决]新人求助,为什么我无法做到004讲中改变窗口尺寸改变背景

[复制链接]
发表于 2020-2-11 00:10:39 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
我将img文件夹和.html文件放在一个文件夹里,所以写代码时不是../img/bc2.png是img/bc.png,请问代码哪里出了问题还是浏览器设置原因。
代码如下:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>一只特立独行的猪</title>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
  8.     <meta name="description" content="《零基础入门学习Web开发》案例演示">
  9.     <meta name="author" content="小甲鱼">
  10.         <style>
  11.                 body {
  12.                         background-image: url(img/bc.png)
  13.                 }
  14.                 h1{
  15.                         text-align: center;
  16.                         color: white;
  17.                 }
  18.                 h2{
  19.                         margin-left: 60%;
  20.                         color: white;
  21.                 }
  22.                 p{
  23.                         text-indent: 32px;
  24.                         font-size: 16px;
  25.                         line-hight: 32px;
  26.                         color: white;
  27.                 }
  28.                 img{
  29.                         position: absolute;
  30.                         left: 50%;
  31.                         margin-left: -181px;
  32.                 }
  33.         </style>
  34.         <style media="print">
  35.                 h1{
  36.                         color: black;
  37.                 }
  38.                 h2{
  39.                         color: black;
  40.                 }
  41.                 p{
  42.                         color: black;
  43.                 }
  44.         </style>
  45.         <style media="screen and (min-witdh:512px) and (max-width:1024px)">
  46.                 body{
  47.                         background-image: url("img/bc2.png");
  48.                 }
  49.         </style>
  50. </head>
  51. <body>
  52.     <h1>一只特立独行的猪</h1>
  53.     <h2>王小波</h2>
  54.     <p>插队的时候,我喂过猪、也放过牛。假如没有人来管,这两种动物也完全知道该怎样生活。它们会自由自在地闲逛,饥则食渴则饮,春天来临时还要谈谈爱情;这样一来,它们的生活层次很低,完全乏善可陈。人来了以后,给它们的生活做出了安排:每一头牛和每一口猪的生活都有了主题。就它们中的大多数而言,这种生活主题是很悲惨的:前者的主题是干活,后者的主题是长肉。我不认为这有什么可抱怨的,因为我当时的生活也不见得丰富了多少,除了八个样板戏,也没有什么消遣。有极少数的猪和牛,它们的生活另有安排。以猪为例,种猪和母猪除了吃,还有别的事可干。就我所见,它们对这些安排也不大喜欢。种猪的任务是交配,换言之,我们的政策准许它当个花花公子。但是疲惫的种猪往往摆出一种肉猪(肉猪是阉过的)才有的正人君子架势,死活不肯跳到母猪背上去。母猪的任务是生崽儿,但有些母猪却要把猪崽儿吃掉。总的来说,人的安排使猪痛苦不堪。但它们还是接受了:猪总是猪啊。</p>
  55.     <p>对生活做种种设置是人特有的品性。不光是设置动物,也设置自己。我们知道,在古希腊有个斯巴达,那里的生活被设置得了无生趣,其目的就是要使男人成为亡命战士,使女人成为生育机器,前者像些斗鸡,后者像些母猪。这两类动物是很特别的,但我以为,它们肯定不喜欢自己的生活。但不喜欢又能怎么样?人也好,动物也罢,都很难改变自己的命运。</p>
  56.     <p>以下谈到的一只猪有些与众不同。我喂猪时,它已经有四五岁了,从名分上说,它是肉猪,但长得又黑又瘦,两眼炯炯有光。这家伙像山羊一样敏捷,一米高的猪栏一跳就过;它还能跳上猪圈的房顶,这一点又像是猫——所以它总是到处游逛,根本就不在圈里呆着。所有喂过猪的知青都把它当宠儿来对待,它也是我的宠儿——因为它只对知青好,容许他们走到三米之内,要是别的人,它早就跑了。它是公的,原本该劁掉。不过你去试试看,哪怕你把劁猪刀藏在身后,它也能嗅出来,朝你瞪大眼睛,噢噢地吼起来。我总是用细米糠熬的粥喂它,等它吃够了以后,才把糠对到野草里喂别的猪。其他猪看了嫉妒,一起嚷起来。这时候整个猪场一片鬼哭狼嚎,但我和它都不在乎。吃饱了以后,它就跳上房顶去晒太阳,或者模仿各种声音。它会学汽车响、拖拉机响,学得都很像;有时整天不见踪影,我估计它到附近的村寨里找母猪去了。我们这里也有母猪,都关在圈里,被过度的生育搞得走了形,又脏又臭,它对它们不感兴趣;村寨里的母猪好看一些。它有很多精彩的事迹,但我喂猪的时间短,知道得有限,索性就不写了。总而言之,所有喂过猪的知青都喜欢它,喜欢它特立独行的派头儿,还说它活得潇洒。但老乡们就不这么浪漫,他们说,这猪不正经。领导则痛恨它,这一点以后还要谈到。我对它则不止是喜欢——我尊敬它,常常不顾自己虚长十几岁这一现实,把它叫做“猪兄”。如前所述,这位猪兄会模仿各种声音。我想它也学过人说话,但没有学会——假如学会了,我们就可以做倾心之谈。但这不能怪它。人和猪的音色差得太远了。</p>
  57.     <p>后来,猪兄学会了汽笛叫,这个本领给它招来了麻烦。我们那里有座糖厂,中午要鸣一次汽笛,让工人换班。我们队下地干活时,听见这次汽笛响就收工回来。我的猪兄每天上午十点钟总要跳到房上学汽笛,地里的人听见它叫就回来——这可比糖厂鸣笛早了一个半小时。坦白地说,这不能全怪猪兄,它毕竟不是锅炉,叫起来和汽笛还有些区别,但老乡们却硬说听不出来。领导上因此开了一个会,把它定成了破坏春耕的坏分子,要对它采取专政手段——会议的精神我已经知道了,但我不为它担忧——因为假如专政是指绳索和杀猪刀的话,那是一点门都没有的。以前的领导也不是没试过,一百人也治不住它。狗也没用:猪兄跑起来像颗鱼雷,能把狗撞出一丈开外。谁知这回是动了真格的,指导员带了二十几个人,手拿五四式手枪;副指导员带了十几人,手持看青的火枪,分两路在猪场外的空地上兜捕它。这就使我陷入了内心的矛盾:按我和它的交情,我该舞起两把杀猪刀冲出去,和它并肩战斗,但我又觉得这样做太过惊世骇俗——它毕竟是只猪啊;还有一个理由,我不敢对抗领导,我怀疑这才是问题之所在。总之,我在一边看着。猪兄的镇定使我佩服之极:它很冷静地躲在手枪和火枪的连线之内,任凭人喊狗咬,不离那条线。这样,拿手枪的人开火就会把拿火枪的打死,反之亦然;两头同时开火,两头都会被打死。至于它,因为目标小,多半没事。就这样连兜了几个圈子,它找到了一个空子,一头撞出去了;跑得潇洒之极。以后我在甘蔗地里还见过它一次,它长出了獠牙,还认识我,但已不容我走近了。这种冷淡使我痛心,但我也赞成它对心怀叵测的人保持距离。</p>
  58.     <p>我已经四十岁了,除了这只猪,还没见过谁敢于如此无视对生活的设置。相反,我倒见过很多想要设置别人生活的人,还有对被设置的生活安之若素的人。因为这个原故,我一直怀念这只特立独行的猪。</p>
  59.     <img src="img/pig.png">
  60. </body>
  61. </html>
复制代码

最佳答案
2020-2-11 08:10:41
1、如果 img 文件夹和 index 放在一起,那么图片调用 src 是:

  1. img/bc.png
复制代码

关于路径学习参看:绝对路径和相对路径

2、代码中 25 行属性拼写错误:
Snip20200211_300.png



想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-2-11 08:10:41 | 显示全部楼层    本楼为最佳答案   
1、如果 img 文件夹和 index 放在一起,那么图片调用 src 是:

  1. img/bc.png
复制代码

关于路径学习参看:绝对路径和相对路径

2、代码中 25 行属性拼写错误:
Snip20200211_300.png



评分

参与人数 1荣誉 +5 鱼币 +5 贡献 +3 收起 理由
王逗比666 + 5 + 5 + 3

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2020-2-11 11:54:38 From FishC Mobile | 显示全部楼层
本帖最后由 王逗比666 于 2020-2-11 12:07 编辑

谢谢不二如是大佬
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2020-2-11 12:06:58 | 显示全部楼层
不二如是 发表于 2020-2-11 08:10
1、如果 img 文件夹和 index 放在一起,那么图片调用 src 是:

哇,不二如是大佬回复我的帖子了,谢谢大佬,现在电脑不在我这边,一会我就去改
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2020-2-11 12:12:56 | 显示全部楼层
不二如是 发表于 2020-2-11 08:10
1、如果 img 文件夹和 index 放在一起,那么图片调用 src 是:

大佬是这样吗
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>一只特立独行的猪</title>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
  8.     <meta name="description" content="《零基础入门学习Web开发》案例演示">
  9.     <meta name="author" content="小甲鱼">
  10.         <style>
  11.                 body {
  12.                         background-image: url(img/bc.png)
  13.                 }
  14.                 h1{
  15.                         text-align: center;
  16.                         color: white;
  17.                 }
  18.                 h2{
  19.                         margin-left: 60%;
  20.                         color: white;
  21.                 }
  22.                 p{
  23.                         text-indent: 32px;
  24.                         font-size: 16px;
  25.                         line-height: 32px;
  26.                         color: white;
  27.                 }
  28.                 img{
  29.                         position: absolute;
  30.                         left: 50%;
  31.                         margin-left: -181px;
  32.                 }
  33.         </style>
  34.         <style media="print">
  35.                 h1{
  36.                         color: black;
  37.                 }
  38.                 h2{
  39.                         color: black;
  40.                 }
  41.                 p{
  42.                         color: black;
  43.                 }
  44.         </style>
  45.         <style media="screen and (min-witdh:512px) and (max-width:1024px)">
  46.                 body{
  47.                         background-image: url("img/bc2.png");
  48.                 }
  49.         </style>
  50. </head>
  51. <body>
  52.     <h1>一只特立独行的猪</h1>
  53.     <h2>王小波</h2>
  54.     <p>插队的时候,我喂过猪、也放过牛。假如没有人来管,这两种动物也完全知道该怎样生活。它们会自由自在地闲逛,饥则食渴则饮,春天来临时还要谈谈爱情;这样一来,它们的生活层次很低,完全乏善可陈。人来了以后,给它们的生活做出了安排:每一头牛和每一口猪的生活都有了主题。就它们中的大多数而言,这种生活主题是很悲惨的:前者的主题是干活,后者的主题是长肉。我不认为这有什么可抱怨的,因为我当时的生活也不见得丰富了多少,除了八个样板戏,也没有什么消遣。有极少数的猪和牛,它们的生活另有安排。以猪为例,种猪和母猪除了吃,还有别的事可干。就我所见,它们对这些安排也不大喜欢。种猪的任务是交配,换言之,我们的政策准许它当个花花公子。但是疲惫的种猪往往摆出一种肉猪(肉猪是阉过的)才有的正人君子架势,死活不肯跳到母猪背上去。母猪的任务是生崽儿,但有些母猪却要把猪崽儿吃掉。总的来说,人的安排使猪痛苦不堪。但它们还是接受了:猪总是猪啊。</p>
  55.     <p>对生活做种种设置是人特有的品性。不光是设置动物,也设置自己。我们知道,在古希腊有个斯巴达,那里的生活被设置得了无生趣,其目的就是要使男人成为亡命战士,使女人成为生育机器,前者像些斗鸡,后者像些母猪。这两类动物是很特别的,但我以为,它们肯定不喜欢自己的生活。但不喜欢又能怎么样?人也好,动物也罢,都很难改变自己的命运。</p>
  56.     <p>以下谈到的一只猪有些与众不同。我喂猪时,它已经有四五岁了,从名分上说,它是肉猪,但长得又黑又瘦,两眼炯炯有光。这家伙像山羊一样敏捷,一米高的猪栏一跳就过;它还能跳上猪圈的房顶,这一点又像是猫——所以它总是到处游逛,根本就不在圈里呆着。所有喂过猪的知青都把它当宠儿来对待,它也是我的宠儿——因为它只对知青好,容许他们走到三米之内,要是别的人,它早就跑了。它是公的,原本该劁掉。不过你去试试看,哪怕你把劁猪刀藏在身后,它也能嗅出来,朝你瞪大眼睛,噢噢地吼起来。我总是用细米糠熬的粥喂它,等它吃够了以后,才把糠对到野草里喂别的猪。其他猪看了嫉妒,一起嚷起来。这时候整个猪场一片鬼哭狼嚎,但我和它都不在乎。吃饱了以后,它就跳上房顶去晒太阳,或者模仿各种声音。它会学汽车响、拖拉机响,学得都很像;有时整天不见踪影,我估计它到附近的村寨里找母猪去了。我们这里也有母猪,都关在圈里,被过度的生育搞得走了形,又脏又臭,它对它们不感兴趣;村寨里的母猪好看一些。它有很多精彩的事迹,但我喂猪的时间短,知道得有限,索性就不写了。总而言之,所有喂过猪的知青都喜欢它,喜欢它特立独行的派头儿,还说它活得潇洒。但老乡们就不这么浪漫,他们说,这猪不正经。领导则痛恨它,这一点以后还要谈到。我对它则不止是喜欢——我尊敬它,常常不顾自己虚长十几岁这一现实,把它叫做“猪兄”。如前所述,这位猪兄会模仿各种声音。我想它也学过人说话,但没有学会——假如学会了,我们就可以做倾心之谈。但这不能怪它。人和猪的音色差得太远了。</p>
  57.     <p>后来,猪兄学会了汽笛叫,这个本领给它招来了麻烦。我们那里有座糖厂,中午要鸣一次汽笛,让工人换班。我们队下地干活时,听见这次汽笛响就收工回来。我的猪兄每天上午十点钟总要跳到房上学汽笛,地里的人听见它叫就回来——这可比糖厂鸣笛早了一个半小时。坦白地说,这不能全怪猪兄,它毕竟不是锅炉,叫起来和汽笛还有些区别,但老乡们却硬说听不出来。领导上因此开了一个会,把它定成了破坏春耕的坏分子,要对它采取专政手段——会议的精神我已经知道了,但我不为它担忧——因为假如专政是指绳索和杀猪刀的话,那是一点门都没有的。以前的领导也不是没试过,一百人也治不住它。狗也没用:猪兄跑起来像颗鱼雷,能把狗撞出一丈开外。谁知这回是动了真格的,指导员带了二十几个人,手拿五四式手枪;副指导员带了十几人,手持看青的火枪,分两路在猪场外的空地上兜捕它。这就使我陷入了内心的矛盾:按我和它的交情,我该舞起两把杀猪刀冲出去,和它并肩战斗,但我又觉得这样做太过惊世骇俗——它毕竟是只猪啊;还有一个理由,我不敢对抗领导,我怀疑这才是问题之所在。总之,我在一边看着。猪兄的镇定使我佩服之极:它很冷静地躲在手枪和火枪的连线之内,任凭人喊狗咬,不离那条线。这样,拿手枪的人开火就会把拿火枪的打死,反之亦然;两头同时开火,两头都会被打死。至于它,因为目标小,多半没事。就这样连兜了几个圈子,它找到了一个空子,一头撞出去了;跑得潇洒之极。以后我在甘蔗地里还见过它一次,它长出了獠牙,还认识我,但已不容我走近了。这种冷淡使我痛心,但我也赞成它对心怀叵测的人保持距离。</p>
  58.     <p>我已经四十岁了,除了这只猪,还没见过谁敢于如此无视对生活的设置。相反,我倒见过很多想要设置别人生活的人,还有对被设置的生活安之若素的人。因为这个原故,我一直怀念这只特立独行的猪。</p>
  59.     <img src="img/pig.png">
  60. </body>
  61. </html>
复制代码

可我还是做不到改变背景
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-2-11 12:59:31 | 显示全部楼层
王逗比666 发表于 2020-2-11 12:12
大佬是这样吗
可我还是做不到改变背景

缩小浏览器到适配范围,就会看到变化
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2020-2-11 13:28:22 From FishC Mobile | 显示全部楼层
不二如是 发表于 2020-2-11 12:59
缩小浏览器到适配范围,就会看到变化

不行啊
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-4-28 13:57

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表