|
|
|||||||||||
|
|||||||||||||
| 当前位置： 电脑软硬件应用网 > 设计学院 > 网页设计 > 正文 |
|
|||
| 网页小技巧:随心所欲的分隔线 | |||
| 2006-8-7 10:42:21 文/佚名 出处:电脑软硬件应用网 | |||
|
而事实上，有一种看上去似乎很原始的方法被我们忽略了：用图片。 你是不以为听错了呢？没有，就是用图片！不要听见图片就觉得网页会变得臃肿，关键是要看怎么用图片。 一个黑色的1px×1px的图片有多大？我可以告诉你：43字节，如右图。（为了便于大家阅读，我们将图片显示为20px×20px）我们就是用这样一张图片来实现灵活多变的分隔线。 来看下面实例： 随心所欲控制长短： ＜IMG height=1 src="yl-021113-1-pic1.gif" width=100＞ ＜IMG height=1 src="yl-021113-1-pic1.gif" width=200＞ ＜IMG height=1 src="yl-021113-1-pic1.gif" width=300＞ 随心所欲控制粗细： ＜IMG height=1 src="yl-021113-1-pic1.gif" width=300＞ ＜IMG height=2 src="yl-021113-1-pic1.gif" width=300＞ ＜IMG height=3 src="yl-021113-1-pic1.gif" width=300＞ 纵向的？没有问题： ＜IMG height=100 src="yl-021113-1-pic1.gif" width=1＞ ＜IMG height=80 src="yl-021113-1-pic1.gif" width=2＞ ＜IMG height=60 src="yl-021113-1-pic1.gif" width=3＞ 聪明的你一定已经明白了，上面的那些线就是用一张1px×1px的图片强制定义尺寸实现的，是不很容易呢？而这张图片只有43字节大小！实现的过程仅仅是强制定义一下尺寸，要比其他一些方法容易的多，用起来也灵活的多，因为它可以随意定义尺寸，随意更换位置。 接下来我们再看下面这个例子： ＜IMG height=10 src="yl-021113-1-pic2.gif" width=300＞ 这里笔者只是随便做的一个例子，类似这种修饰条在网页设计当中还是比较常见的，通常的做法是做一个1px宽的小图片，做为单元格的背景填充；或者是做成实际尺寸大小的图片。 其实完全没有必要做成实际尺寸大小的图片，我们做成1px宽（高度是实际高度）的小图片，然后强制定义一下尺寸就可以了。比如上例就是一张1px*10px的图片，如右图。（为了便于大家阅读，我们将图片显示为8px×80px），放到网页中时定义成300px*10px就可以了，或者你认为这与填充成背景没什么区别，的确，用的是同样的图片，但这样做会更灵活，而不再受单元格的限制。如果是纵向的，道理是一样的，就不再赘述。 一点小经验，希望能够对大家有用。 |
|||
| 最新热点 | 最新推荐 | 相关文章 | ||
| 页面自动跳转的几种实现方法 网站内容的四种分类形式 或多或少的… 如何指定规范网页？rel="canonical" 浅谈网站评论体系设计的不足之处 网页中“上一篇”“下一篇”设计思考 网页设计进度指示器帮助用户预测步骤 网页用户体验:网页注册表单设计分析 网页设计常出现8大问题 网页设计的形象思维归纳 彻底去掉动易内容页顶部的“改变图片… |
| 关于45IT | About 45IT | 联系方式 | 版权声明 | 网站导航 | |
|
Copyright © 2003-2011 45IT. All Rights Reserved 浙ICP备09049068号 |
