css 里面的图片定位position高级应用 -- [DIV+CSS]─ 深山工作室提供网络投票系统|微信公众号投票|微信公众号小程序|抖音小程序|百度小程序|微信公众号开发|企业网站建设

css 里面的图片定位position高级应用

网络 2009/5/12 23:11:43 admin 字体:大中小浏览 16091

以下为详细代码

<html>

<head>
 <title>CSS Sprites: Image Slicing's Kiss of Death</title>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 <style media="screen">

#skyline {
 width: 400px;
 height: 200px;
 background: url(./UploadFiles/2009512232323738.jpg);
 margin: 10px auto; padding: 0;
 position: relative;
}
#skyline li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;}

#skyline li, #skyline a {height: 200px; display: block;}
#panel1b {left: 0; width: 95px;}
#panel2b {left: 96px; width: 75px;}
#panel3b {left: 172px; width: 110px;}
#panel4b {left: 283px; width: 117px;}

#panel1b a:hover {background: transparent url(./UploadFiles/2009512232323738.jpg) 0 -200px no-repeat;}
#panel2b a:hover {background: transparent url(./UploadFiles/2009512232323738.jpg) -96px -200px no-repeat;}
#panel3b a:hover {background: transparent url(./UploadFiles/2009512232323738.jpg) -172px -200px no-repeat;}
#panel4b a:hover {background: transparent url(./UploadFiles/2009512232323738.jpg) -283px -200px no-repeat;}

</style>
</head>

前一页:简单的圆角实现方案

后一页:利用css制作简易相册

相关阅读: Asp加密解密函数; IE6在定义DIV最小高度时出现错误的解决方法; 深山行者留言系统V2.3; 广西南宁美程国际旅行社有限公司; 地瓜坊; 定义链接的样式CSS; optgroup 标签; 四川省中国青年旅行社有限公司高新分社

更多信息>>栏目类别选择: 百度小程序开发; 微信小程序开发; 微信公众号开发; uni-app; asp函数库; ASP; DIV+CSS; HTML; python

更多>>同类信息: jquery设置或获取修改classname; 利用css3.0写出一个音乐播放的唱片碟盘的效果; 利用css中的scale()实现放大缩小效果; 利用background-color:#000000a8在背景颜色16进制代码之后加字母加上数字让背景色透明; css背景使用base64编码或者将base64编码放在img图片标签中; 利用css3中的-webkit-font-smoothing把网页文字的毛边去掉

更多>>最新添加文章: dw里面查找替换使用正则删除sqlserver里面的CONSTRAINT; Android移动端自动化测试：使用UIAutomatorViewer与Selenium定位元素; 抖音直播音挂载小雪花懂车帝小程序; javascript获取浏览器指纹可以用来做投票; 火狐Mozilla Firefox出现：无法载入您的Firefox配置文件它可能已经丢失或是无法访问问题解决集合处理办法; 在Android、iOS、Windows、MacOS中微信小程序的文件存放路径; python通过代码修改pip下载源让下载库飞起; python里面requests.post返回的res.text还有其它的吗

更多>>随机抽取信息: 利用javascript静态改变表单指向与提交方式; 定制开发微信小程序的操作流程; 按钮复制文章URL和复制保留文章的版权; 连云港振辉旋膜式除氧器; 设置自己个性的网页滚动条附详细介绍; 微信小程序腾讯视频播放组件tencentvideo（wxa75efa648b60994b）

更多标签热门标签

目标滚动条放大排序做标 label 键盘界面创业尺寸位置自动获取 exe 台历关键字重复 img 翻转 csss rnd 风格珍惜上传灰色 javascri 留言次数字体 CAD 数据变幻小偷还原获取顶部管理缩略图 box 图层 dd 高亮 weatherxml 自适应高度文章间隔结果返回 Javascript实现CSS代码高亮显示1 meta 强度显示器