自定义列表格式
来源:互联网 发布:数控凯恩帝编程代码 编辑:程序博客网 时间:2024/05/16 07:22
看来前端开发不可避免要学一些photoshop的知识
网页上的列表样式如果可以自定义,用自己喜欢的图片来排版,那是非常愉快的体验。当然,这是被广泛应用的一项技术,现在浏览各种网页的时候几乎每个网页都有自己独特的列表样式。
今天的体会是前段开发一定要学一些基本的Photoshop知识,比如如何消除背景,如何制作web图片,好,我大概地来介绍一下。
首先网页中的列表是用:
<ul> <li>...</li> <li>...</li></ul>
或者是ol写成的结构,样式统一在css中设置,举个例子:
li { list-style-image: url(images/backpack.gif); padding: 5px; margin-left: 20px;}
很显然样式用到了images文件夹中的一个图片,然后用这个图片在作为每个列表的开头,下面我来说说如何制作这个图片,让它为我们所用。
你要有一张图,可以bing上搜一下,下载下来。作为列表的图片需要透明背景,因此格式必须是gif,网上并没有如此现成的资源,于是我们需要自力更生,其实这是个非常快速的过程。
下载完图片后用Photoshop打开:
然后是设置透明背景,需要用到魔棒工具:
如图形状的就是魔棒工具,各个版本的ps都有。然后我们要双击一下背景图层:
然后回车,让背景图层变成一个普通图层,名称你可以任意命名,我还是用的系统默认的图层0.
接下来用魔棒点击一下背景,你会发现背景被选中了:
按一下删除键,或者编辑-删除,就可以把背景弄掉了:
当你看见背景变成了灰白格子,就成功了!接下来要用到一个特殊功能:存储为web所用格式:
进去以后把大小调成15px 15px,格式一定要是gif,保存即可。接着把路径写入css里面,自定义的列表就做好了。
0 0
- 自定义列表格式
- 在DataGrid中简单使用下拉列表框等自定义格式
- struts2循环标签(将一个列表的内容在界面显示出来,自定义日期格式)
- 【格式】项目问题列表
- 文档格式签名列表
- 文件夹列表,xml格式
- 有序列表&无序列表&自定义列表
- VBA自定义常量列表
- 自定义控件列表
- ListView_Adapter自定义列表显示
- moss2007 列表自定义搜索
- VBA自定义常量列表
- Android自定义列表(ListView)
- Android自定义列表(ListView)
- sharepoint2010 创建自定义列表
- CSS 自定义列表样式
- 自定义AlertDialog列表样式
- 自定义列表对话框(二)
- 关于Android内存泄漏的工具
- http代码表
- 一秒集成 省市区三级联动选择器-CityPickerView
- 不同阶段的性能测试
- 项目 5 后缀表达式 (补)
- 自定义列表格式
- 公共网络开放的WebService接口
- HTTP请求异步和同步的区别
- c++博客资源链接整理(逐步扩充)
- Windows 64位 配置64位oracle tns 不起作用
- 如何在路由器上实现nginx本地web弹窗功能
- Linux下Tomcat启动正常,但是浏览器不能访问首页
- java io系列18之 CharArrayReader(字符数组输入流)
- 顺序表应用2:多余元素删除之建表算法