利用锚点做纯CSS的图片展示效果 -- [链接特效]─ 深山工作室提供网络投票系统|微信公众号投票|微信公众号小程序|抖音小程序|百度小程序|微信公众号开发|企业网站建设

利用锚点做纯CSS的图片展示效果

蓝色理想 2009/8/24 8:15:51 深山行者字体:大中小浏览 16771

以下为详细代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

以下为详细代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head profile="http://www.w3.org/2000/08/w3c-synd/#"> 
<meta http-equiv="content-language" content="zh-cn" /> 
<meta http-equiv="content-type" content="text/html;charset=gb2312" /> 
<style> 
dl { 
position:absolute; 
width:240px; 
height:170px; 
border:10px solid #eee; 
} 
dd { 
margin:0; 
width:240px; 
height:170px; 
overflow:hidden; 
} 
dt { 
position:absolute; 
right:1px; 
} 
ul { 
margin:0; 
padding:0; 
width:260px; 
height:170px; 
list-style:none; 
background:url("http://bbs.blueidea.com/attachments/2006/11/10/arrowb_kJrcZheJmiIF.gif") no-repeat 75% 20px; 
border:1px solid #ccc 
} 
#b { 
background-position:75% center 
} 
#c { 
background-position:75% 86% 
} 
li { 
width:205px; 
height:27px; 
font:12px/27px "宋体",sans-serif; 
white-space:nowrap; 
overflow:hidden; 
} 
dt a { 
display:block; 
margin:1px; 
width:30px; 
height:56px; 
text-align:center; 
font:700 12px/55px "宋体",sans-serif; 
color:#fff; 
text-decoration:none; 
background:#666; 
} 
dt a:hover { 
background:orange 
} 
</style> 
<dl> 
<dt><a href="#a" title="">新闻</a><a href="#b" title="">娱乐</a><a href="#c" title="">体育</a></dt> 
<dd> 
<ul id="a"> 
<li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li> 
<li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li> 
<li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li> 
<li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li> 
<li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li> 
<li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li> 
</ul> 
<ul id="b"> 
<li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li> 
<li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li> 
<li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li> 
<li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li> 
<li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li> 
<li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li> 
</ul> 
<ul id="c"> 
<li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li> 
<li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li> 
<li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li> 
<li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li> 
<li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li> 
<li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li> 
</ul> 
</dd> 
</dl>

前一页:网站内容中某个关键字相关右键菜单

后一页:QQ邮箱文件中转站点击下载效果

相关阅读: 谈IE与Firefox的CSS兼容大全; web2.0网页--常用的XHTML标签的使用技巧方法介绍; 标准版下拉菜单; 刘浏家俱; 当鼠标靠在某个字上时,背景也随之改变; ASP导出WORD或Excel文档(比较另类，而且超级强的。); 深山旅行社管理系统商业版增加线路日期报价功能样式选择(增加了3个日期报价效果); 生成随机字符串的函数

共有0条关于《利用锚点做纯CSS的图片展示效果》的评论: 发表评论

正在加载评论......

返回顶部发表评论

呢称:
表情:
内容:	评论内容:不能超过 1000 字,需审核,请自觉遵守互联网相关政策法规。
验证码:

网友评论声明,请自觉遵守互联网相关政策法规。

您发布的评论即表示同意遵守以下条款:
一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家、社会、集体和公民的合法权益;
二、不得发布国家法律、法规明令禁止的内容;互相尊重,对自己在本站的言论和行为负责;
三、本站对您所发布内容拥有处置权。

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

更多>>同类信息: a标签的javascript链接; 网站内容中某个关键字相关右键菜单; 利用锚点做纯CSS的图片展示效果; QQ邮箱文件中转站点击下载效果; Div+CSS+JS树型菜单，可刷新; 淘宝产品首字母类别效果

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

更多>>随机抽取信息: uni-app开发表单input组件的一些规则说明自己预留使用; 深山行者asp购物网终于上线了; 国内各大搜索引擎的蜘蛛名称列表; 旅行社管理系统 V1.9; 定制开发微信小程序的操作流程; jquery中动态生成的代码使用on hover事件时不出现效果

更多标签热门标签

数字建立日期案例邮箱 alert 失效翻页调用圆角绝对管用的iis安装包下载 Abandon 文件夹 FSO png24 宽 IE8 繁体 mssql 状态栏 style dl 电影营销数据库做标绝对定位界面游戏设置文本框自动获取 max 忧化像素轮流数组框美化创建样式分页参数告 tag 企业 letter-spacing 指向脚本 openwin eof