1. 首页
  2. 生活随笔

wordpress文章页面局部下载资源样式风格(1)_在线源码

阿里云服务器优惠

wordpress页面下载文件的样式太丑?别急,站长教你来自己设计一个。

目前想在网站上添加如下下载资料文件样式效果,刚开始样式有点问题,后面经过自己调整,终于符合想要的风格。

效果图

image.png

完成代码和样式如下

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width">
<title>html+css+js在线测试工具</title>
<link rel="stylesheet" type="text/css" href="http://#" />         <!--可引用外部css-->
<script type="text/javascript" src="http://#" ></script>          <!--可引用外部JS,以及jquery等库-->
                                                                  <!-- 各种JS库的引用地址:www.bootcdn.cn -->
<script>
        /* 自写js */
</script>
<style>
.downLi{
    overflow: hidden;
    width: 100%;
    margin-bottom: 30px;
    float: left;
}
.downLi dl {
    overflow: hidden;
    float: left;
    width:796px;
     margin-bottom: 30px;
    height: auto;
    padding: 6px 6pxpx 6px;
    margin-top: 12px;
    border: 1px solid #ffc99f;
    background: #fffcf9;
    border-radius: 4px;
} 
.downLi dl {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
.downLi li.phonepb {

    float: left;
    list-style: none;
    padding-left: 5px;
    height: 22px;
    line-height: 20px;
    color: #f60;
    font-weight: bold;
    font-size: 14px;
    width: 775px;
    overflow: hidden;
}


.downLi li.sne {

    overflow: hidden;
    font-weight: normal;
    border-bottom: 1px dotted #e1e1e1;
    width: 635px;
    background: url(https://soft.shouji.com.cn/static/v1/images/download.gif) 5px 8px no-repeat;
    float: left;
    display: inline;
    font-size: 13px;
    line-height: 20px;
    padding: 5px 0 5px 25px;
}
.downLi li.sne span.adown strong a:link,
.downLi li.sne span.adown strong a:active, 
.downLi li.sne span.adown strong a:visited {
    font-weight: bold;
    color: #000000;
    font-size: 15px;
}

.downLi li.sne span.adown {

    float: left;
    width: 380px;
    overflow: hidden;
    font-size: 13px;
    font-weight: normal;
}
.downLi li.sne span.bdown {

    font-weight: bold;
    font-size: 14px;
    float: right;
    width: 80px;
    height: 20px;
    overflow: hidden;
    text-align: right;
}
.bdown a:link, .bdown a:active, .bdown a:visited {
    margin: 0 6px 0 0;
    color: #1F8515;
    background: none;
      font-size: 15px;
}
</style>

</head>
<body>

       <div class="downLi">
        <dl>
        <li class="phonepb">最新版本下载</li>
        <li class="sne">
            <span class="adown">
                <strong>
                    <a href="https://306t.com/file/28426853-454707605" target="_self" onclick="downClick(this);">闲鱼 v6.7.31</a>
                </strong> (99.35MB / 4.0及更高固件 / 2020-7-6)
                </span>
                <span class="bdown">
                    <a href="https://306t.com/file/28426853-454707605" target="_self" onclick="downClick(this);">下载到电脑</a>
            </span>
            </li>

        </dl>
    </div>
    <div>
        11111111111111
    </div>
</body>
</html>

代码在线运行


原文地址:http://tencent.yundashi168.com/606.html

原创文章,作者:admin,如若转载,请注明出处:http://tencent.yundashi168.com/606.html

发表评论

邮箱地址不会被公开。 必填项已用*标注

联系我们

400-800-8888

在线咨询:点击这里给我发消息

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code

2020年阿里云618大促活动(有香港主机)

1核/2G/1M---91元1年,三年275元;
2核/4G/1M---320元1年,三年960元;
2核/8G/1M---416元1年,三年1093元;
4核/8G/1M---465元1年,三年1396元;
1核2G(香港,不用备案)---249元1年,三年888元;点击直达
还有还有4核8G6M、8核16G10M配置,价格很低很低!

注意:这个价,只有新用户才能看到;老用户借用家人身份重新注册,这个价格重新注册也不亏!

我知道了