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

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › 在IDEA修改了CSS但无效
返回列表 发新帖
查看: 1168|回复: 1

[已解决]在IDEA修改了CSS但无效

[复制链接]
ZhihanXing
发表于 2023-11-12 14:01:49 | 显示全部楼层 |阅读模式
5鱼币
我明明已经修改了导航栏列表中图片的长和宽，但是效果并不如意，而且用浏览器的开发工具去看的话发现还是使用的没有修改的CSS，这是怎么回事？
页面代码
  1. <%--
  2.   Created by IntelliJ IDEA.
  3.   User: xing
  4.   Date: 2023/10/22
  5.   Time: 20:24
  6.   To change this template use File | Settings | File Templates.
  7. --%>
  8. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  9. <html>
  10. <head>
  11.     <title>Title</title>
  12.     <link rel="stylesheet" href="style/public.css">
  13. <body>
  14. <header>
  15.     <div class="logo"><img src="images/logoko.png" alt=""></div>
  16.     <nav>
  17.         <ul>
  18.             <li>
  19.                 <a href="index.jsp"><img src="images/index.png" alt="">首页</a>
  20.             </li>
  21.             <li>
  22.                 <a href="write.jsp"><img src="images/write.png" alt="">写博客</a>
  23.             </li>
  24.             <li>
  25.                 <a href="about.jsp"><img src="images/about.png" alt="">关于我们</a>
  26.             </li>
  27.             <li>
  28.                 <a href="register.jsp"><img src="images/register.png" alt="">登录/注册</a>
  29.             </li>
  30.         </ul>
  31.     </nav>
  32. </header>
  33. </body>
  34. </html>
复制代码

对应的CSS
  1. /* 初始化设置 */

  3. * {
  4.     margin: 0;
  5.     padding: 0;
  6.     list-style: none;
  7.     box-sizing: border-box;
  8. }


  11. /* 浮动设置 */

  13. .leftfloat {
  14.     float: left;
  15. }

  17. body {
  18.     background-color: #ecf0f1;
  19. }

  21. header {
  22.     height: 100px;
  23.     background-color: #3498db;
  24.     position: relative;
  25. }

  27. header .logo {
  28.     width: 400px;
  29.     margin: 0 auto;
  30. }

  32. header nav {
  33.     width: 100%;
  34.     height: 30px;
  35.     background-color: #2c3e50;
  36.     position: absolute;
  37.     bottom: 0;
  38. }

  40. header nav a {
  41.     text-decoration: none;
  42.     color: white;
  43. }

  45. header nav a:hover {
  46.     color: skyblue;
  47.     font-weight: 600;
  48. }

  50. header nav ul li a img {
  51.     width: 20px;
  52.     height: 20px;
  53. }

  55. header nav ul {
  56.     position: absolute;
  57.     left: 30%;
  58. }

  60. header nav ul li {
  61.     display: inline-block;
  62.     width: 100px;
  63.     text-align: center;
  64.     line-height: 30px;
  65. }

  67. .box {
  68.     width: 800px;
  69.     min-height: 500px;
  70.     background-color: #ADD8E6;
  71.     margin: 0 auto;
  72.     padding: 20px;
  73. }

  75. .ad {
  76.     width: 150px;
  77.     height: 400px;
  78.     background-color: tomato;
  79.     position: fixed;
  80.     left: 0;
  81.     top: 15%;
  82. }

  84. .ad .x {
  85.     width: 20px;
  86.     height: 20px;
  87.     background-color: white;
  88.     position: absolute;
  89.     right: 0;
  90.     top: 0;
  91.     font-size: 20px;
  92.     line-height: 20px;
  93.     text-align: center;
  94.     cursor: pointer;
  95. }

  97. footer {
  98.     height: 80px;
  99.     background-color: #333333;
  100.     color: white;
  101.     padding-top: 4px;
  102. }

  104. footer p {
  105.     text-align: center;
  106.     line-height: normal;
  107.     font-weight: 200;
  108. }
复制代码

对应的效果图片
最佳答案
月排行榜 / 总排行榜
isdkz
2023-11-12 14:01:50
检查一下你的CSS文件路径是否正确，以及确保你在浏览器中清除了缓存。另外，你的CSS选择器可能存在问题，尝试使用更具体的选择器来覆盖原有样式。例如，使用更具体的选择器来修改导航栏列表中图片的长和宽，比如给img添加class或者id，并使用该class或id作为选择器。
屏幕截图(22).png

最佳答案

isdkz

查看完整内容

检查一下你的CSS文件路径是否正确，以及确保你在浏览器中清除了缓存。另外，你的CSS选择器可能存在问题，尝试使用更具体的选择器来覆盖原有样式。例如，使用更具体的选择器来修改导航栏列表中图片的长和宽，比如给img添加class或者id，并使用该class或id作为选择器。
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

isdkz
发表于 2023-11-12 14:01:50 | 显示全部楼层    本楼为最佳答案   
检查一下你的CSS文件路径是否正确，以及确保你在浏览器中清除了缓存。另外，你的CSS选择器可能存在问题，尝试使用更具体的选择器来覆盖原有样式。例如，使用更具体的选择器来修改导航栏列表中图片的长和宽，比如给img添加class或者id，并使用该class或id作为选择器。
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2025-5-13 20:57

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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