使用frame,框架后,在jsp中,外部引用 link css样式表无效的解决方法

使用frame,框架后,在jsp中,外部引用 link css样式表无效的解决方法

 

<link href="http://www.kfeat.com/template/css/style.css" rel="stylesheet" type="text/css" />
今天项目出现一个怪问题,发现CSS样式没了,查了查路径也没错啊.
然后查了查资料,人家说用了框架后,css路径最好不要用相对路径.
晕,还是没用啊.

charset="utf-8" 也加了啊,CSS里的中文也没乱码啊.

狂晕中...

最后终于好了.
原因就是 css内部编码和页面内部编码不一致.

我的解决办法是,把css考出来,然后用记事本另存为 utf-8格式,
然后把代码再拷贝进去 刷新下OK。

 


<<<<<<<<<<<<<<<<<

 

实践发现,我在frame中必须使用绝对路径,即在电脑上的css文件的绝对路径。。。


使用绝对路径:

     <link rel="stylesheet" type="text/css" href="H:/netbeans workspace/netbeans

6.9/ShoppingSystemOnline/build/web/css/background_left.css" />

 


由于我写的是jsp。。。还用了struts2.。。。

所以还有更聪明的办法!!!!!!

 <link rel="stylesheet" type="text/css" href="<s:text name="backgroundPath"/>background_top.css" />
     

 

>>>>>>>>>>>>>>>>>

### 使用 `frameset` 创建多帧布局 为了在 Java Web 项目中使用 `frameset` 实现上下左右多帧布局,并使左侧框架 (`left.jsp`) 中的链接点击后在右侧框架 (`right.jsp`) 显示内容,可以按照以下方法配置: #### HTML 文件结构 首先定义一个包含多个框架的主页面 (例如 `index.html`)。此页面利用 `<frameset>` 标签来划分不同区域。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Frames Example</title> </head> <body> <frameset rows="10%,*" cols="*,70%"> <!-- 上部导航栏 --> <frame src="top.jsp" name="topFrame"/> <!-- 左侧菜单栏 --> <frameset cols="25%,*"> <frame src="left.jsp" name="leftFrame"/> <!-- 右边主要内容区 --> <frame src="right.jsp" name="rightFrame"/> </frameset> </frameset> <noframes> Your browser does not support frames. </noframes> </body> </html> ``` 上述代码片段展示了如何设置一个多层嵌套的 `frameset` 结构[^3]。这里设置了两个水平方向上的分隔条以及垂直方向上的一组双列布局;其中顶部占总高度的10%,剩余空间由底部占据;而左侧面板宽度固定为父容器宽度的25%,其余部分留给右边的内容面板。 #### 配置 JSP 页面间的交互 为了让左边框内的超链接能在右面加载相应网页,需确保这些链接都指定了正确的 `target` 属性值对应到右边的 frame 名字(`rightFrame`)。 ##### left.jsp 示例 ```jsp <!-- left.jsp --> <a href="contentPage1.jsp" target="rightFrame">Link to Content Page 1</a><br/> <a href="contentPage2.jsp" target="rightFrame">Link to Content Page 2</a> ``` 这样当用户单击任何一个链接时,所选页面就会被加载并显示在名为 `rightFrame` 的框架里。 #### CSS样式调整 对于整体外观的设计可以通过CSS来进行优化,比如背景图片的应用等。可以在全局样式表或者单独针对某个特定页面应用自定义样式规则。 ```css /* styles.css */ body { margin: 0; padding: 0; font-family: Arial, sans-serif; } table { width: 90%; margin-left: auto; margin-right: auto; } ``` 注意这里的样式的具体实现可以根据实际需求进行修改和扩展[^2]。 #### JavaScript 动态控制(可选) 如果有更复杂的逻辑处理需求,则可能需要用到JavaScript脚本来动态改变某些属性或执行其他操作。不过基于当前描述的需求来看,仅依靠HTML与基本的锚点跳转已经能够满足要求了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值