`

和小胖儿一起向<img>说再见.

阅读更多
废话不说,直入主题.
我的观点很简单, 当你使用<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的依赖.
如果你在做一个支持换肤的系统时,你就知道这有多重要了.





分享到:
评论
7 楼 ouspec 2007-09-06  
fins 写道
其实这不是什么新鲜的做法,我想这么做的人肯定早就有了,而且大大的有


javaeye3.0的做法是如果和布局相关的img都尽量放到css中,和数据相关还是用Img标签。这样做的确有很多好处,不光是解耦,也使得整个的页面的结构更加简洁合理。
6 楼 fins 2007-09-06  
其实这不是什么新鲜的做法,我想这么做的人肯定早就有了,而且大大的有
5 楼 peterwillcn 2007-09-06  
fins 写道
peterwillcn 写道
say hi fins say img byebye! 也就是说图片的路径引用都在css里...fins对吧?


是这样的.
最终的jsp/html/php页面中, 应该尽可能少的与外界文件路径打交道.



hi...fins I worship you for a long time...Thanks a lot...!
4 楼 fins 2007-09-06  
peterwillcn 写道
say hi fins say img byebye! 也就是说图片的路径引用都在css里...fins对吧?


是这样的.
最终的jsp/html/php页面中, 应该尽可能少的与外界文件路径打交道.
3 楼 boin 2007-09-06  
同意,在有浮动的情况下。在ie下使用背景和使用img标签会给布局带来差异。
2 楼 peterwillcn 2007-09-06  
say hi fins say img byebye! 也就是说图片的路径引用都在css里...fins对吧?
1 楼 fins 2007-09-06  
欢迎大家一起来讨论,看看我们还有哪些情况下可以不使用 img ,
而还有哪些情况下必须使用 img .

相关推荐

    html标签大全

    21. `&lt;code&gt;`、`&lt;kbd&gt;`、`&lt;samp&gt;` 和 `&lt;var&gt;`:这些标签用于表示代码、键盘输入、样本代码和变量,有助于增强代码的可读性。 22. `&lt;cite&gt;`:用于引用作品,通常斜体显示。 23. `&lt;blockquote&gt;`:用于插入引用的段落...

    HTML&javascript自学

    11. **表格**:HTML 的 `&lt;table&gt;` 标签用于创建表格,包含行 `&lt;tr&gt;`、列 `&lt;td&gt;`(或 `&lt;th&gt;` 用于表头)和表头 `&lt;thead&gt;`、表体 `&lt;tbody&gt;`、表尾 `&lt;tfoot&gt;` 等元素。 12. **JavaScript 基础**:JavaScript 用于添加...

    豆瓣电影微信小程序

    - 定义模板:`&lt;template name="star-template"&gt;...&lt;template/&gt;`。 - 引用模板:`&lt;template is="star-template"&gt;&lt;/template&gt;`。 - **案例分析**: - **Star-template**:此模板用于展示电影评分,其中包含了5颗星...

    openjdk遇到的https的ssl异常解决方案

    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" /&gt; ``` 在上面的配置信息中,指定了 HTTPS 连接的端口号、协议、SSL/TLS 协议...

    aspose-word-16.8.0-maven..zip

    &lt;artifactId&gt;aspose-word&lt;/artifactId&gt; &lt;version&gt;16.8.0&lt;/version&gt; &lt;/dependency&gt; &lt;/dependencies&gt; ``` 完成这一步后,Maven会自动下载并管理Aspose.Word库,使得开发者可以直接在代码中导入所需的类和方法,...

    微信小程序bilibili项目实战小胖商城(源码).zip

    微信小程序bilibili项目实战小胖商城(源码).zip微信小程序bilibili项目实战小胖商城(源码).zip微信小程序bilibili项目实战小胖商城(源码).zip微信小程序bilibili项目实战小胖商城(源码).zip微信小程序...

    F:\IDEAcode\rwenjie.zip

    通过在Mapper XML文件中编写动态标签,如`&lt;if&gt;`、`&lt;choose&gt;`、`&lt;when&gt;`、`&lt;otherwise&gt;`、`&lt;where&gt;`、`&lt;set&gt;`等,可以构建出适应各种条件的查询语句。例如,`&lt;if test="name != null"&gt; AND name = #{name}&lt;/if&gt;`可以...

    基于javascript制作微信聊天面板

    这里,每个聊天记录被表示为一个`&lt;li&gt;`元素,包含了用户的头像(`&lt;img&gt;`)和聊天文本(`&lt;span&gt;`)。通过CSS的`float`属性,我们可以控制消息是从左侧还是右侧显示,模拟不同的用户发送消息的情景。 在CSS部分,我们...

    前端实现鼠标跟随动画

    &lt;div :style="{ top: mouseY + 'px', left: mouseX + 'px' }" class="follow-component"&gt;&lt;/div&gt; &lt;/template&gt; &lt;script&gt; export default { props: ['mouseY', 'mouseX'], // ... }; &lt;/script&gt; // 在父组件中使用 ...

    js鼠标经过显示浮动窗可以进去点击

    `&lt;dt&gt;`和`&lt;dd&gt;`元素用于构建浮动窗内的内容布局。 #### 4. **样式细节** - **颜色与背景**:通过`background-color`和`color`属性定义了背景色和字体颜色,以及`background-image`用于添加背景图片。 - **尺寸与...

    小胖参数使用说明

    小胖无限网络使用参数详细表 里面含精确的详细表说明

    小胖阅读器软件v1.1.0.113中文官方安装版

    小胖阅读器恰到好处的简单。简单,在于外观,更在于体验。所以你一定会喜欢全新的小胖阅读器,它会给你简洁畅快的使用感受,而不需要过多的思考压力。 功能介绍 恰到好处的简单 简单,在于外观,更在于体验。所以你...

    JFreeChart实例+包+中文API

    &lt;artifactId&gt;jfreechart&lt;/artifactId&gt; &lt;version&gt;1.5.3&lt;/version&gt; &lt;/dependency&gt; ``` **3. 创建图表** JFreeChart的图表创建主要通过ChartFactory类实现。例如,要创建一个简单的柱状图,可以按照以下步骤操作: ...

    cc3轮播图.zip

    每个图像或内容卡片通常被包裹在一个`&lt;div&gt;`元素中,这些`&lt;div&gt;`元素会被设置为隐藏或显示,以实现轮播效果。 2. CSS:CSS用于定义轮播图的外观和布局。这包括设置轮播图容器的宽度、高度、边距,以及每个卡片的...

    小胖猪开糖果店(感知5以内的数量).doc

    针对幼儿园小班儿童设计的数学教育活动——“小胖猪开糖果店”,不仅激发了孩子们对数学的兴趣,而且通过游戏的方式让孩子们在轻松愉快的环境中感知和掌握5以内的数量,同时锻炼了他们的分类能力。 活动的设计充分...

    小胖、小瘦锻炼记.rar

    在描述中同样提到“小胖、小瘦锻炼记.rar”,这暗示了内容可能是一篇故事、教程或者是健身计划,旨在帮助两类人群——“小胖”和“小瘦”进行适当的运动和健康管理。"小胖"可能是指需要减肥或提高体能的人,而"小瘦...

    小胖减肥记作文.doc

    【小胖减肥记】这篇作文以幽默轻松的方式讲述了一个名叫小胖的孩子的减肥经历,从中我们可以提炼出几个与健康和生活习惯相关的知识点。 1. **肥胖与健康风险**:文章指出,过重或肥胖可能导致心血管疾病,增加身体...

    subprogress.Popen create log reports with html

    html += f"&lt;tr&gt;&lt;td&gt;{log}&lt;/td&gt;&lt;/tr&gt;\n" html += "&lt;/table&gt;" return html html_report = log_to_html('log.txt') ``` 现在,`html_report`变量包含了HTML格式的日志报告。你可以将其写入到HTML文件中,或者通过...

    hibernate要点

    &lt;property name="connection.driver_class"&gt;org.apache.derby.jdbc.ClientDriver&lt;/property&gt; &lt;property name="connection.password"&gt;myeclipse&lt;/property&gt; &lt;!-- 实体映射文件 --&gt; &lt;mapping resource="dao/User.hbm....

Global site tag (gtag.js) - Google Analytics