废话不说,直入主题.
我的观点很简单, 当你使用<img>标签时,如果满足以下条件,那么请你不要再使用它了:
1 图片内容或路径不是动态生成的.
2 图片的作用类似图标,给用户操作提示
3 图片的作用只是起到装饰作用(做页面修饰)
不用IMG 那么用什么呢?
用span 或 div + CSS (background-image),然后把css全部提取到css文件中.
为什么这么做呢?
答案很简单,让你的jsp页面,jspTag(如果你的tag代码中输出<img>的话)和图片资源彻底的解藕.
最终目的是要达到: 图片的路径的变化,只会引起css文件内容的变化.
而对jsp java jsptag代码毫无影响.
CSS是用来决定页面的样式 和 美观与否的关键,
而图片从某种程度上来讲(尤其是满足文章开头所列三点的图片) 也决定着页面的样式 和 美观与否.
显然他们应当是一类.这也是为什么CSS文件中对URL的使用采用的是"相对与CSS文件"而不是"相对于引用CSS文件的文件"(很久以前是后者这样的).
总之,希望大家能够尽可能的用我说的方式,渐渐放弃对IMG的依赖.
如果你在做一个支持换肤的系统时,你就知道这有多重要了.
分享到:
相关推荐
21. `<code>`、`<kbd>`、`<samp>` 和 `<var>`:这些标签用于表示代码、键盘输入、样本代码和变量,有助于增强代码的可读性。 22. `<cite>`:用于引用作品,通常斜体显示。 23. `<blockquote>`:用于插入引用的段落...
11. **表格**:HTML 的 `<table>` 标签用于创建表格,包含行 `<tr>`、列 `<td>`(或 `<th>` 用于表头)和表头 `<thead>`、表体 `<tbody>`、表尾 `<tfoot>` 等元素。 12. **JavaScript 基础**:JavaScript 用于添加...
- 定义模板:`<template name="star-template">...<template/>`。 - 引用模板:`<template is="star-template"></template>`。 - **案例分析**: - **Star-template**:此模板用于展示电影评分,其中包含了5颗星...
ciphers="TLS_RSA_WITH_AES_256_CBC_SHA, TLS_RSA_WITH_AES_128_CBC_SHA, SSL_RSA_WITH_3DES_EDE_CBC_SHA, SSL_RSA_WITH_RC4_128_SHA" /> ``` 在上面的配置信息中,指定了 HTTPS 连接的端口号、协议、SSL/TLS 协议...
<artifactId>aspose-word</artifactId> <version>16.8.0</version> </dependency> </dependencies> ``` 完成这一步后,Maven会自动下载并管理Aspose.Word库,使得开发者可以直接在代码中导入所需的类和方法,...
微信小程序bilibili项目实战小胖商城(源码).zip微信小程序bilibili项目实战小胖商城(源码).zip微信小程序bilibili项目实战小胖商城(源码).zip微信小程序bilibili项目实战小胖商城(源码).zip微信小程序...
通过在Mapper XML文件中编写动态标签,如`<if>`、`<choose>`、`<when>`、`<otherwise>`、`<where>`、`<set>`等,可以构建出适应各种条件的查询语句。例如,`<if test="name != null"> AND name = #{name}</if>`可以...
这里,每个聊天记录被表示为一个`<li>`元素,包含了用户的头像(`<img>`)和聊天文本(`<span>`)。通过CSS的`float`属性,我们可以控制消息是从左侧还是右侧显示,模拟不同的用户发送消息的情景。 在CSS部分,我们...
<div :style="{ top: mouseY + 'px', left: mouseX + 'px' }" class="follow-component"></div> </template> <script> export default { props: ['mouseY', 'mouseX'], // ... }; </script> // 在父组件中使用 ...
`<dt>`和`<dd>`元素用于构建浮动窗内的内容布局。 #### 4. **样式细节** - **颜色与背景**:通过`background-color`和`color`属性定义了背景色和字体颜色,以及`background-image`用于添加背景图片。 - **尺寸与...
小胖无限网络使用参数详细表 里面含精确的详细表说明
小胖阅读器恰到好处的简单。简单,在于外观,更在于体验。所以你一定会喜欢全新的小胖阅读器,它会给你简洁畅快的使用感受,而不需要过多的思考压力。 功能介绍 恰到好处的简单 简单,在于外观,更在于体验。所以你...
<artifactId>jfreechart</artifactId> <version>1.5.3</version> </dependency> ``` **3. 创建图表** JFreeChart的图表创建主要通过ChartFactory类实现。例如,要创建一个简单的柱状图,可以按照以下步骤操作: ...
每个图像或内容卡片通常被包裹在一个`<div>`元素中,这些`<div>`元素会被设置为隐藏或显示,以实现轮播效果。 2. CSS:CSS用于定义轮播图的外观和布局。这包括设置轮播图容器的宽度、高度、边距,以及每个卡片的...
针对幼儿园小班儿童设计的数学教育活动——“小胖猪开糖果店”,不仅激发了孩子们对数学的兴趣,而且通过游戏的方式让孩子们在轻松愉快的环境中感知和掌握5以内的数量,同时锻炼了他们的分类能力。 活动的设计充分...
在描述中同样提到“小胖、小瘦锻炼记.rar”,这暗示了内容可能是一篇故事、教程或者是健身计划,旨在帮助两类人群——“小胖”和“小瘦”进行适当的运动和健康管理。"小胖"可能是指需要减肥或提高体能的人,而"小瘦...
【小胖减肥记】这篇作文以幽默轻松的方式讲述了一个名叫小胖的孩子的减肥经历,从中我们可以提炼出几个与健康和生活习惯相关的知识点。 1. **肥胖与健康风险**:文章指出,过重或肥胖可能导致心血管疾病,增加身体...
html += f"<tr><td>{log}</td></tr>\n" html += "</table>" return html html_report = log_to_html('log.txt') ``` 现在,`html_report`变量包含了HTML格式的日志报告。你可以将其写入到HTML文件中,或者通过...
<property name="connection.driver_class">org.apache.derby.jdbc.ClientDriver</property> <property name="connection.password">myeclipse</property> <!-- 实体映射文件 --> <mapping resource="dao/User.hbm....