帝国cms 内容下载超级漂亮的下载附件页面代码和css样式下面查收

  css样式

/*附件下载插件开始*/
.xydown{width:615px;height:45px; border:1px dashed #ddd; padding:10px; margin:10px 0;line-height:24px;border-radius: 3px;}
.xydown a{text-decoration:none;}
.xydown .downbtn{width: 88px;height:50px;padding: 10px 35px 10px 55px;background: url(../img/down.jpg) repeat-x;color: #ffffff;font-size: 20px;display: block;}
.xydown .xydowntext{padding-left:10px;font-size:12px;}
.xydown_downlinks{width:500px;}
.xydown_down_link{background: none repeat scroll 0 0 #FFFCEF; border: 1px solid #FFBB76; border-radius: 2px; color: #DB7C22; font-size: 14px; margin-bottom: 10px; padding: 5px 10px;}
.xydown_views{color:red;}
.xydown_box{border-bottom:1px solid #aaa; padding:10px 0;}
.xydown_box_content{line-height:18px; padding:0 0 0 10px;}
.xydown_box_content p{margin:5px 0;}
.xydown_box_content a{color:#D54E21;}
.xydown_box_content a:hover{color:#1d1d1d;}
.xydown_left{float:left; width:320px;}
.xydown_right{width:160px; float:right; margin:0 auto;}
.xydown_right img{max-width:160px;}
.xydown_notice{padding-top:10px; text-align:center;}
#facebox .content{width:600px; background:none repeat scroll 0 0 #E0E2E4; color:#333;}
#facebox .popup{border:6px solid #ff7d00;}
.downbtn{background: none repeat scroll 0 0 #1BA1E2; border: 0 none; border-radius: 2px; color: #FFFFFF; cursor: pointer; font-family: "Open Sans","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",Arial,Verdana,Tahoma,sans-serif; font-size: 14px; margin: -4px 20px 0 0; padding: 3px 30px;text-transform:none;text-decoration:none;}
.downlink a:link{color: #ffffff;}
.downlink a:visited{color: #ffffff;}
.downlink a:hover{color: #ffffff;}
.downlink a:active{color: #ffffff;}
.downbtn{background: none repeat scroll 0 0 #1BA1E2; border: 0 none; border-radius: 2px; color: #FFFFFF !important; cursor: pointer; font-family: "Open Sans","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",Arial,Verdana,Tahoma,sans-serif; font-size: 14px; margin: -4px 20px 0 0; padding: 3px 30px;}
.yanshibtn{background: none repeat scroll 0 0 #d33431; border: 0 none; border-radius: 2px; color: #FFFFFF!important; cursor: pointer; font-family: "Open Sans","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",Arial,Verdana,Tahoma,sans-serif; font-size: 14px; margin: -4px 20px 0 0; padding: 3px 30px;text-transform:none;text-decoration:none;}
.downbtn a:hover,.yanshibtn a:hover{background: none repeat scroll 0 0 #9B59B6; border: 0 none; border-radius: 2px; color: #FFFFFF; cursor: pointer; font-family: "Open Sans","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",Arial,Verdana,Tahoma,sans-serif; font-size: 14px; margin: -4px 20px 0 0; padding: 3px 30px;}
.paydown{margin-bottom: 20px;width: auto;border: 1px solid #CFCFCF;;background: #E7E7E7;;}
.paydown p{margin:3px;padding:3px 15px;border-bottom: 1px solid #f8f8f8;text-indent: 0;}
.paydown p span{padding:0 5px;color: #E14D43;font-weight: bold;font-size: 120%;}
.paydown .down-title{float: left;padding-top: 15px;width:9%;color: #666;text-align: center;font-weight: bold;font-size: 16px;}
.paydown .down-detail{float: right;min-height: 140px;width: 90%;border-left:1px solid #eee;background: #fff;}
.paydown p.down-ordinary{color: #28B78D;}
.paydown p.down-vip{color: #E14D43;}
.paydown p a{margin-left: 10px;font-weight: bold;text-decoration: none;}
.paydown p.down-tip{border-bottom: none;}
.clear {clear: both;display: block;overflow: hidden;visibility: hidden;width: 0;height: 0;}
/*附件下载插件end*/

  html代码(调用代码自己编写)

<div class="paydown" id="paydown" style="width: 1400px; margin: 0 auto;">
	<div class="down-title"><br>附<br>件<br>下<br>载</div>
	<div class="down-detail">
		<p class="down-price">文件名称:<span></span></p>
		<p class="down-ordinary">当前版本:</p>
		<p class="down-vip">作者信息:</p>
		<p class="down-tip">提示:下载后请检查MD5值,自行进行病毒查杀操作!</p>
		<p class="down-tip">下载地址:
		<strong>
           <a class="downbtn" rel="external nofollow" title="" href="" target="_blank">点击下载</a>
        </strong>
		<a style="color: #FF0000;"> 【文件大小:】</a></p>
	 </div>
	 <div class="clear"></div>
</div>