• (模板)网页游戏用的“内容区”的“游戏下载”模板


    网页游戏用的“内容区”的下载模板

     <style>
     .article-main{
         width:939px;
         }
     
    /*下载中心*/
    .big_pub_right { width:960px; }
    .faq p { line-height:25px; }
    .pub_title { background:#353b42; height:84px; color:#969db0; line-height:84px; padding:0px 20px; }
    .pub_title a { color:#969db0; }
    .local_name { font-size:20px; float:left; }
    .local { float:right; }
    .pub_block {  min-height:500px; padding:55px; }
    .dl_tab { border-bottom:solid 1px rgb(2,2,2); height:35px; margin-bottom:30px; }
    .dl_tab a { height:32px; font-size:16px; color:#969db0; width:142px; float:left; text-align:center; margin-right:5px; }
    .dl_tab .f, .dl_tab a:hover { border-bottom:solid 3px #c53f48; color:#c53f48; }
    .dl_title { height:40px; margin-bottom:20px; }
    .dl_title .icon_list { background:url(http://fmz.qyggame.com/wp-content/themes/fmz/img/main_element.png?v=3) -304px -322px; width:27px; height:33px; color:#fff; float:left; text-align:center; line-height:25px; margin-top:5px; margin-right:10px; }
    .dl_title .txt { font-size:20px; float:left; }
    .dl_title a { float:right; margin-top:10px; color:#aea05d; }
    .dl_list { height:250px; margin-bottom:20px; }
    .dl_list li { float: left; width: 39.8%; padding-left:10%; }
    .btn_box_full { text-align:left; margin-bottom:15px; }
    .full_info { line-height: 25px; margin-bottom: 30px; }
    .full_info p { font-size: 12px; }
    .mt_dl_links { margin-bottom: 50px; overflow: hidden; }
    .mt_dl_links a { float: left; width: 20%; text-align: center; height: 31px; line-height: 31px; font-size: 12px; color: #000; }
    .mt_dl_links a:hover { text-decoration:underline; }
    .btn_box_mt { text-align:left; padding: 20px 0px  20px  85px; }
    .pz_box table { border-left: 1px solid #afb5bb; border-top: 1px solid #afb5bb; }
    .pz_box td { border-right: 1px solid #afb5bb; border-bottom: 1px solid #afb5bb; height: 31px; line-height: 31px; font-size: 12px; text-align: center;   }
    .pz_box .tit { background:#cad1d8; }
    .pz_box a { color:#aea05d; }
    .que { margin: 20px 0px; line-height: 31px; clear: both; font-weight: bold; }
    .ang { padding: 0px 18px 18px 0px; color: #000; font-size: 12px; line-height: 21px; border-bottom: 1px solid #CCC; }
    
    .btn_1{ display:block;width:283px; height:89px; background:url(http://fmz.qyggame.com/wp-content/themes/fmz/img/btn_dlb.jpg?v=2);}
    .btn_1:hover{background:url(http://fmz.qyggame.com/wp-content/themes/fmz/img/btn_dlb.jpg?v=2) left -89px;}
    .btn_2{ display:block;width:283px; height:89px; background:url(http://fmz.qyggame.com/wp-content/themes/fmz/img/btn_dlb.jpg?v=2) -283px top;}
    .btn_2:hover{background:url(http://fmz.qyggame.com/wp-content/themes/fmz/img/btn_dlb.jpg?v=2)  -283px -89px;}
    
    
    </style>
    <div class="article-main" >
    
      <div class="pub_block">
          <div class="dl_tab"> <a class="f">客户端下载</a>
            <!--<a href="path.html">补丁下载</a>-->
          </div>
          <div class="dl_title">
            <div class="icon_list">01</div>
            <div class="txt">最新客户端下载</div>
            <a href="http://www.17173.com" target="_blank">客户端常见问题解决办法&gt;&gt;</a> </div>
            
            <!--客户端下载-->
          <div class="dl_list">
            <ul>
            
              <li>
                <div class="btn_box_full"> <a href="http://www.baidu.com" class="btn_1" target="_blank"></a> </div>
                <div class="full_info">
                  <p>客户端版本:1.0.1</p>
                  <p>文件大小:10.5GB</p>
                  <p>更新日期:2016-10-88</p>
                 </div>
              </li>            
            
              <li>
                <div class="btn_box_full"> <a href="http://www.baidu.com" class="btn_1" target="_blank"></a> </div>
                <div class="full_info">
                  <p>客户端版本:1.2.1</p>
                  <p>文件大小:5.5GB</p>
                  <p>更新日期:2016-10-08</p>
                 </div>
              </li>            
    
            </ul>
          </div>
          
          
          <div class="dl_title">
            <div class="icon_list">02</div>
            <div class="txt">媒体分流</div>
          </div>
          <div class="btn_box_mt">
              <a href="http://www.17173.com" target="_blank">
                <img src="http://fmz.qyggame.com/wp-content/themes/fmz/img/btn_dl_173.jpg">
            </a>
          </div>
          
           <div class="dl_title" style="margin-top:50px">
            <div class="icon_list">03</div>
            <div class="txt">电脑配置</div>
          </div>
          <div class="pz_box">
            <table cellpadding="0" cellspacing="0" width="100%">
              <tbody>
                <tr class="tit">
                  <td width="24%">&nbsp;</td>
                  <td width="38%">最低流畅配置</td>
                  <td class="last" width="38%">推荐配置</td>
                </tr>
                <tr>
                  <td>CPU</td>
                  <td>双核2.5GHz上</td>
                  <td class="last">四核3.0GHz</td>
                </tr>
                <tr>
                  <td>显卡</td>
                  <td>256M独立显卡</td>
                  <td class="last">1G独立显卡</td>
                </tr>
                <tr>
                  <td>硬盘</td>
                  <td>4G空间</td>
                  <td class="last">4G空间</td>
                </tr>
                <tr>
                  <td>内存</td>
                  <td>2G 1333MHz</td>
                  <td class="last">4G 1666MHz</td>
                </tr>
                <tr>
                  <td>系统</td>
                  <td>Windows XP</td>
                  <td class="last">Windows 7</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
  • 相关阅读:
    vue指令(3)v-html
    vue指令(2)v-text
    vue基础(2)模板语法
    Struts2中在Action里面向前端页面传值的方法总结
    MySQL之字符串函数
    搜索关键字描红
    点击超链接执行js代码实现确认操作
    Java之线程同步的三种方法
    Java之线程的控制
    Java之线程的生命周期
  • 原文地址:https://www.cnblogs.com/roluce/p/6106621.html
Copyright © 2020-2023  润新知