请选择
进入手机版
|
继续访问电脑版
设为首页
收藏本站
开启辅助访问
用户名
Email
自动登录
找回密码
密码
登录
立即注册
只需一步，快速开始
快捷导航
首页
Portal
论坛
BBS
切图
切图案例
教程
服务介绍
网页制作问答
每日签到
【HUX】问题互助平台
搜索
搜索
热搜:
切图
网页切图
网站切图
本版
文章
帖子
群组
用户
网页切图论坛
»
论坛
›
切图版块
›
切图教程
›
列表(li)标记图片定位不精确(list-style)怎么办？
切图广告位招租
网站切图广告位招租
返回列表
查看:
205
|
回复:
0
列表(li)标记图片定位不精确(list-style)怎么办？
[复制链接]
admin
admin
当前离线
注册时间
2015-10-2
最后登录
2018-5-14
阅读权限
200
积分
7911
精华
0
帖子
1900
1900
主题
0
听众
7911
积分
管理员
TA的每日心情
开心
2018-1-16 20:02
签到天数: 66 天
连续签到: 1 天
[LV.6]常住居民II
收听TA
发消息
发表于 2016-7-3 09:58:58
|
显示全部楼层
新手们经常苦恼于list-style-image的定位问题，解决的办法一般是用li的背景模拟来解决。
这个文章中，我们向大家介绍，采用相对定位的方法。同样可以很好的解决。
未使用li标记图片相对定位的样子
代码调试框
[]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>mb5u.com</title> <style type="text/css"> li {list-style:url("/images/weather/hn2_sunny.gif");} li a { font:12px/25px 宋体; } </style> </head> <body> <ul> <li><a href="http://www.<a href="http://www.divcss6.com/" target="_blank" class="relatedlink">divcss</a>6.com/" target="_blank" class="relatedlink">div css</a>教程</li> <li>CSS Templates </li> <li>CSS布局实例</li> <li>CSS Layout Example</li> <li>CSS2.0教程</li> </ul> </body> </html>
[ 可先修改部分代码 再运行查看效果 ]
已使用li标记图片相对定位的样子
代码调试框
[]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>mb5u.com</title> <style type="text/css"> li {list-style:url("/images/weather/hn2_sunny.gif");} li a { position:relative; top:-7px; font:12px/25px 宋体; } </style> </head> <body> <ul> <li>Div CSS教程</li> <li>CSS Templates </li> <li>CSS布局实例</li> <li>CSS Layout Example</li> <li>CSS2.0教程</li> </ul> </body> </html>
[ 可先修改部分代码 再运行查看效果 ]
div css切图，网页切图制作
回复
使用道具
举报
返回列表
高级模式
B
Color
Image
Link
Quote
Code
Smilies
您需要登录后才可以回帖
登录
|
立即注册
发表回复
回帖并转播
回帖后跳转到最后一页
积分 0, 距离下一级还需 积分
回顶部
发表于 2016-7-3 09:58:58
