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

最新推荐文章于 2023-01-19 11:23:16 发布

小六杂聊

最新推荐文章于 2023-01-19 11:23:16 发布

阅读量874

点赞数

分类专栏： css 文章标签： HTML CSS 下载列表

本文链接：https://blog.csdn.net/kabuqinuo229891/article/details/38176045

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

直接上图，先看看效果。

目前使用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 ,群里边有源代码。或者去以下链接地址下载：

下载列表资源