您的位置：首页 > Web前端 > CSS

用html与css实现一个下载列表

2014-07-27 19:25 302 查看

今天项目需求，需要一个鼠标放在一个下载超链接上然后弹出一个文本框显示左右上传的文本以及上传信息。于是心血来潮做了一个这样的控件。

直接上图，先看看效果。

目前使用html与css样式来实现的这样一个组件。后续会专门来把它用js来动态生成。

下边就是该组件的html代码

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="relativeBlogs.css" type="text/css"/>
<script type="text/javascript"  src="jquery-1.9.1.min.js"></script>
</head>
<body>
<div>你好<div>
<div id="RelativeBlogs" style="left:0px;top:0px; position:absolute; z-index:2000">
<strong>
<a id="btn_close">关闭</a>
相关文章阅读
</strong>
<ul>
<li>
<span class="date">
2012/03/14
</span>
<a title="Jquery插件--easyUI属性汇总" href="http://my.oschina.net/parker/blog/49222">
Jquery插件--easyUI属性汇总...
</a>
</li>
<li>
<span class="date">
2012/02/16
</span>
<a title="Jquery插件easyUi表单验证提交 " href="http://my.oschina.net/chen106106/blog/40874">
Jquery插件easyUi表单验证提交 ...
</a>
</li>
<li>
<span class="date">
2012/08/24
</span>
<a title="jQuery UI ThemeRoller - 主题工具" href="http://my.oschina.net/yuhere/blog/74490">
jQuery UI ThemeRoller - 主题工具...
</a>
</li>
<li>
<span class="date">
2013/04/02
</span>
<a title="jquery easyui 验证框" href="http://my.oschina.net/tianyuyangliu/blog/119373">
jquery easyui 验证框
</a>
</li>
<li>
<span class="date">
2013/12/07
</span>
<a title="jquery easyui 插件开发 " href="http://my.oschina.net/gougouqihao/blog/182318">
jquery easyui 插件开发 ...
</a>
</li>
</ul>
</div>
</body>
</html>

下边是CSS代码

@CHARSET "UTF-8";

*{padding: 0; margin: 0;}
a {color:#4466BB;outline:0;}
a:hover {color:#00A;}
ul,ol {list-style-type:none;}
img {border:0;}
#RelativeBlogs {width:400px; height:160px;background-color:#FFFFFF;
font-size:10.5px;
border:1px solid #4682B4;}
#RelativeBlogs strong {display:block;margin:0 0 8px 0;background:#4682B4;color:#fff;padding:5px 5px;}
#RelativeBlogs strong a#btn_close {cursor:pointer;float:right;color:#fff;font-size:11px;}
#RelativeBlogs ul {margin:10px;}
#RelativeBlogs ul li {line-height:22px;}
#RelativeBlogs ul li a {background:url('a2.gif') no-repeat left center; padding-left:15px;font-size:10pt;text-decoration:none;}
#RelativeBlogs ul li .date {float:right; font-size:12px; color:lighten(#333,20%);-webkit-text-size-adjust:none;}

如果有需要的朋友可以添加QQ群：121907968 ,群里边有源代码。或者去以下链接地址下载：

下载列表资源

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航