学习永不停止
我们一起努力吧!

网站”下载页面”html代码分享(用于单页或放于文章内)

阳江鼎阳抄数设计交流群

平时写博文分享一些资料的时候,将下载地址做成超级链接时总觉得与不是很美观。也偿试在百度输入关键字找一些现成单独的html格式“下载页面”代码使用,无奈的是,无论关键字怎样变化,出来并不是想象中的代码,而是一大堆下载站,屡试屡失败。本人用的是wordpress博客程序,知道网上有一些下载插件,但查找发现样式也并不丰富,并没有找到适合自己网站,同时个人感觉使用某些插件还有一个不好的地方,那就是一旦使用了,就意味着以后长期都要用下去,如果某一天发觉这个插件不好不想要了,那之前所有文章引用的下载地址和页面都会被清除。另外,网站其实并非篇篇文章都要提供资源下载,没用的时候老是挂着插件,它肯定会影响整体网站速度。于是,花了十多分钟就动手制作了以下的html“下载页面”,样式很简单,觉得适合的朋友可以复制稍作修改,用于单页网站或文章内使用。 样式:

大家可以复制使用,如果发生页面错位,将UTF-8改成GB2312即可: 

<div>
<style type="text/css">
<!--
.STYLE2 {font-size: 12px}
.STYLE3 {color: #FFFFFF; font-size: 12px; }
.STYLE5 {font-size: 13px}
.STYLE6 {
	font-size: 18px;
	font-weight: bold;
}
-->
</style>

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
  <tr>
    <td><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
  <tr>
    <td height="30" colspan="2" background="http://image.jdks100.com/bgJK04.gif"><table width="700" border="0" align="left" cellpadding="0" cellspacing="0">
      <tr>
        <td width="220"><div align="center" class="STYLE3"><img src="http://image.jdks100.com/bgJK06.gif" width="11" height="12" align="absmiddle" /> 在电脑上观看</div></td>
        <td><div align="center" class="STYLE2">您可以在网页上在线阅读,同时可免费下载到电脑。</div></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td width="200" height="200"><img src="http://image.jdks100.com/JK-SP01.png" width="200" height="200" /></td>
    <td bgcolor="#000000"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
      <tr>
        <td><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="1" bordercolor="#CCCCCC">
          <tr>
            <td height="37" bgcolor="ffe5dc"><div align="center" class="STYLE6">全国大学生英语竞赛视频教程</div></td>
          </tr>
          <tr>
            <td height="45" bgcolor="#FFFFFF"><div align="center">
              <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
                <tr>
                  <td><div align="center"><img src="http://image.jdks100.com/bgJK02_3.gif" width="120" height="40" align="absmiddle" /></div></td>
                  <td><div align="center"><img src="http://image.jdks100.com/bgJK01.gif" width="120" height="40" /></div></td>
                  <td><table width="100" border="0" align="center" cellpadding="0" cellspacing="0">
                    <tr>
                      <td><div align="center"><img src="http://image.jdks100.com/bgJK03.gif" width="80" height="24" align="absbottom" /></div></td>
                    </tr>
                  </table></td>
                </tr>
              </table>
            </div></td>
          </tr>
          <tr>
            <td height="31" bgcolor="#FFFFFF"><span class="STYLE5">主讲老师:姜天元/杨璐/徐翠/李西元/赵文通/刘晓晨/陈月娣</span></td>
          </tr>
          <tr>
            <td height="81" bgcolor="#FFFFFF"><table width="100%" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td height="23"><span class="STYLE5">上线时间:2016-04-11</span></td>
                <td><span class="STYLE5">文件大小:420M</span></td>
              </tr>
              <tr>
                <td height="25"><span class="STYLE5">课程学时:全程</span></td>
                <td><span class="STYLE5">下载次数:1458</span></td>
              </tr>
              <tr>
                <td height="25"><span class="STYLE5">视频数量:全套</span></td>
                <td><span class="STYLE5">播放次数:8449</span></td>
              </tr>
            </table></td>
          </tr>
        </table></td>
      </tr>
    </table></td>
  </tr>
  
</table>
</td>
  </tr>
</table>
</div>

如果确实转换出错,就用这组wordpress的代码吧:

<p>
	<br />
</p>
<table width="700" border="0" cellpadding="0" cellspacing="0" align="center" class="ke-zeroborder">
	<tbody>
		<tr>
			<td width="200" height="200" colspan="1" rowspan="5">
				<span id="_baidu_bookmark_start_0" style="line-height:0px;">‍</span><img src="http://image.jdks100.com/JK-SP01.png" width="200" height="200" /> 
			</td>
			<td rowspan="1" align="center" valign="middle" style="text-align:center;vertical-align:middle;">
				<img src="http://image.jdks100.com/bgJK02_3.gif" alt="" /><br />
			</td>
			<td colspan="2" style="text-align:center;vertical-align:middle;">
				<img src="http://image.jdks100.com/bgJK01.gif" alt="" /><br />
			</td>
			<td colspan="3" style="text-align:center;vertical-align:middle;">
				<img src="http://image.jdks100.com/bgJK03.gif" alt="" /><br />
			</td>
		</tr>
		<tr>
			<td rowspan="1" colspan="6" style="vertical-align:middle;">
				<span style="font-size:16px;line-height:24px;">全国大学生英语竞赛视频教程</span> 
			</td>
		</tr>
		<tr>
			<td colspan="6">
				<span>主讲老师:姜天元/杨璐/徐翠/李西元/赵文通/刘晓晨/陈月娣</span> 
			</td>
		</tr>
		<tr>
			<td>
				更新情况:最新
			</td>
			<td rowspan="1" colspan="5">
				文件大小:20MB
			</td>
		</tr>
		<tr>
			<td>
				课程学时:全程
			</td>
			<td rowspan="1" colspan="5">
				视频数量:全套
			</td>
		</tr>
	</tbody>
</table>
<p>
	<br />
</p>
<p>
	<br />
</p>
<p>
	<span id="_baidu_bookmark_start_5" style="line-height:0px;">‍</span><span id="_baidu_bookmark_start_2" style="line-height:0px;">‍</span><span id="_baidu_bookmark_start_3" style="line-height:0px;">‍</span><span id="_baidu_bookmark_start_4" style="line-height:0px;">‍</span> 
</p>

未经允许不得转载:http://jdks100.com/风语守望_博客 » 网站”下载页面”html代码分享(用于单页或放于文章内)


分享到:更多 ()
关注“公众平台”:     学习交流QQ群(185619299):

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  • 4 + 4 = ?

风语守望_博客,共同学习,一起成长!

网站首页联系我们
防复制