设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › 引用外部css文件时只显示部分效果
返回列表 发新帖
查看: 1155|回复: 9

[已解决]引用外部css文件时只显示部分效果

[复制链接]
拽猫的尾巴
发表于 2022-10-26 23:16:32 | 显示全部楼层 |阅读模式

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

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

x
本帖最后由 拽猫的尾巴 于 2022-10-27 10:30 编辑

我css样式时内嵌样式的时候时可以正常显示背景的，如下图所示：
登录界面.jpg

代码：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>登录界面</title>
  5.     <script>
  6.         function hide() {
  7.             var h = document.getElementById("login_interface");
  8.             h.style.display="none";
  9.         }
  10.         function show() {
  11.             var e = document.getElementById("login_interface");
  12.             e.style.display="block";
  13.         }
  14.     </script>
  15.     <style>
  16.         body {
  17.             background-image: url(D:/画/电脑壁纸/1.jpg);
  18.             background-size: 3000px;
  19.             background-position: center 20%;
  20.         }
  21.         #login_enroll {
  22.             width: 900px;
  23.             height: 600px;
  24.             border-radius: 10px;
  25.             box-shadow: 0px 5px 10px 5px rgb(0, 0, 0, 0.5);
  26.             position: absolute;
  27.             top: 0;
  28.             bottom: 0;
  29.             left: 0;
  30.             right: 0;
  31.             margin: auto;
  32.         }
  33.         #login_interface {
  34.             background-color: rgb(220, 220, 220);
  35.             width: 450px;
  36.             height: 600px;
  37.             border-radius: 10px 0px 0px 10px;
  38.         }
  39.         #enroll_interface {
  40.             background-color: rgb(255, 180, 180~1);
  41.             width: 450px;
  42.             height: 600px;
  43.             border-radius: 0px 10px 10px 0px;
  44.         }
  45.         .son {
  46.             float: left;
  47.         }
  48.         .fo {
  49.             margin-top: 30%;
  50.             text-align: center;
  51.         }
  52.         h2 {
  53.             font-family: "等线";
  54.             font-size: 30px;
  55.             font-weight: 100;
  56.         }
  57.         input {
  58.             width: 400px;
  59.             height: 50px;
  60.             font-size: 20px;
  61.             border-style: none;
  62.             border-radius: 10px;
  63.         }
  64.         a {
  65.             text-decoration: none;
  66.             color: rgb(94, 94, 94);
  67.             font-size: 15px;
  68.         }
  69.         button {
  70.             width: 150px;
  71.             height: 50px;
  72.             font-size: 15px;
  73.             font-weight: 900;
  74.             color: #fff;
  75.             border-radius: 10px;
  76.             border-style: none;
  77.             background: repeating-linear-gradient(to left, rgb(255, 170, 163), rgb(255, 97, 97));
  78.             box-shadow: 0px 1px 5px 1px rgb(0, 0, 0, 0.5);
  79.         }
  80.         #zhuce {
  81.             text-align: center;
  82.             margin-top:60%;
  83.         }
  84.     </style>
  85. </head>
  86. <body>
  87.     <div id="login_enroll">
  88.         <div id="login_interface" class="son">
  89.             <form action="*" method="post" name="登录界面" class="fo">
  90.                 <h2>登录</h2>
  91.                 <input type="text" placeholder=" 账号：" name="account"><br><br>
  92.                 <input type="password" placeholder=" 密码：" name="password"><br><br>
  93.                 <a href="" target="_blank">忘记密码？</a><br><br><br>
  94.                 <button type="button" onclick="hide();">登 录</button>
  95.             </form>
  96.         </div>

  98.         <div id="enroll_interface" class="son">
  99.                 <div id="zhuce"><button type="button" onclick="show();">注 册</button></div>
  100.         </div>
  101.     </div>
  102. </body>
  103. </html>
复制代码


但是当我从外部链接css文件的时候，只显示了部分效果，背景没了，如下图：
有问题的登录界面.png

html代码如下：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>登录界面</title>
  5.     <link rel="stylesheet" href="./登录界面.css">
  6. <body>
  7.     <div id="login_enroll">
  8.         <div id="login_interface" class="son">
  9.             <form action="*" method="post" name="登录界面" class="fo">
  10.                 <h2>登录</h2>
  11.                 <input type="text" placeholder=" 账号：" name="account"><br><br>
  12.                 <input type="password" placeholder=" 密码：" name="password"><br><br>
  13.                 <a href="" target="_blank">忘记密码？</a><br><br><br>
  14.                 <button type="button" onclick="hide();">登 录</button>
  15.             </form>
  16.         </div>

  18.         <div id="enroll_interface" class="son">
  19.                 <div id="zhuce"><button type="button" onclick="show();">注 册</button></div>
  20.         </div>
  21.     </div>
  22. </body>
  23. </html>
复制代码


css文件代码如下（文件位置应该没错，背景图片在同一个文件夹下，绝对/相对路径都试过了）：
  1. <style>
  2.     body {
  3.         background-image: url(./1.jpg);
  4.         background-size: 3000px;
  5.         background-position: center 20%;
  6.     }
  7.     #login_enroll {
  8.         width: 900px;
  9.         height: 600px;
  10.         border-radius: 10px;
  11.         box-shadow: 0px 5px 10px 5px rgb(0, 0, 0, 0.5);
  12.         position: absolute;
  13.         top: 0;
  14.         bottom: 0;
  15.         left: 0;
  16.         right: 0;
  17.         margin: auto;
  18.     }
  19.     #login_interface {
  20.         background-color: rgb(220, 220, 220);
  21.         width: 450px;
  22.         height: 600px;
  23.         border-radius: 10px 0px 0px 10px;
  24.     }
  25.     #enroll_interface {
  26.         background-color: rgb(255, 180, 180~1);
  27.         width: 450px;
  28.         height: 600px;
  29.         border-radius: 0px 10px 10px 0px;
  30.     }
  31.     .son {
  32.         float: left;
  33.     }
  34.     .fo {
  35.         margin-top: 30%;
  36.         text-align: center;
  37.     }
  38.     h2 {
  39.         font-family: "等线";
  40.         font-size: 30px;
  41.         font-weight: 100;
  42.     }
  43.     input {
  44.         width: 400px;
  45.         height: 50px;
  46.         font-size: 20px;
  47.         border-style: none;
  48.         border-radius: 10px;
  49.     }
  50.     a {
  51.         text-decoration: none;
  52.         color: rgb(94, 94, 94);
  53.         font-size: 15px;
  54.     }
  55.     button {
  56.         width: 150px;
  57.         height: 50px;
  58.         font-size: 15px;
  59.         font-weight: 900;
  60.         color: #fff;
  61.         border-radius: 10px;
  62.         border-style: none;
  63.         background: repeating-linear-gradient(to left, rgb(255, 170, 163), rgb(255, 97, 97));
  64.         box-shadow: 0px 1px 5px 1px rgb(0, 0, 0, 0.5);
  65.     }
  66.     #zhuce {
  67.         text-align: center;
  68.         margin-top:60%;
  69.     }
  70. </style>
复制代码

最佳答案
月排行榜 / 总排行榜
514592647
2022-10-27 16:29:27
你把外部样式表的<style></style>删除就好了
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

kishere
发表于 2022-10-27 09:50:53 | 显示全部楼层
你这什么操作？付费答题？？？
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

拽猫的尾巴
 楼主| 发表于 2022-10-27 10:31:55 | 显示全部楼层
kishere 发表于 2022-10-27 09:50
你这什么操作？付费答题？？？

搞错了，我还以为那个选项是给币别人来着
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

拽猫的尾巴
 楼主| 发表于 2022-10-27 10:34:13 | 显示全部楼层
kishere 发表于 2022-10-27 09:50
你这什么操作？付费答题？？？

找不到怎么设置悬赏
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

拽猫的尾巴
 楼主| 发表于 2022-10-27 11:14:16 | 显示全部楼层
解决了，把css文件里的<style>删除就行
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

当初约定
发表于 2022-10-27 14:34:02 | 显示全部楼层

回帖奖励 +10 鱼币

拽猫的尾巴 发表于 2022-10-27 11:14
解决了，把css文件里的删除就行

不愧是刚启航的小白
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

514592647
发表于 2022-10-27 16:29:27 | 显示全部楼层    本楼为最佳答案   

回帖奖励 +10 鱼币

你把外部样式表的<style></style>删除就好了
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

zhangjinxuan
发表于 2022-10-27 19:07:38 | 显示全部楼层

回帖奖励 +10 鱼币

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

使用道具 举报

hveagle
发表于 2022-10-27 20:08:29 | 显示全部楼层

回帖奖励 +10 鱼币

zhangjinxuan 发表于 2022-10-27 19:07
看看

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

使用道具 举报

1molHF
发表于 2022-10-28 08:28:35 | 显示全部楼层

回帖奖励 +10 鱼币

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

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-5-11 23:16

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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