首页 > 代码库 > （模板）网页游戏用的“内容区”的“图赏影音”模板

（模板）网页游戏用的“内容区”的“图赏影音”模板

2024-08-23 15:07:42   224人阅读

网页游戏，没图赏影音用到的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<style>
div,ul,li{
    margin:0; padding:0
}

/*news list start */
.news_web_box { overflow: hidden; _overflow:visible; margin: 0 auto; padding:15px 25px; min-height: 789px; _height: 789px; width: 845px;  }
.news_web_tit { }
.news_web_tit .con_title { height: 41px;}
.news_web_tit .con_title li a { height: 39px; line-height: 30px;}
.news_web_tit .con_title li a:hover { color: #e86656;}
.news_web_list { padding:15px 0;}
.news_web_list li { height: 40px; line-height: 40px; border-bottom: #2c2f36 dotted 1px; font-size: 14px;}
.news_web_list .article_list li span { margin-top: 15px;}
/*news list end */

/*hd start*/
.hd_web_box { overflow: hidden;margin: 0 auto; _overflow: visible; padding:15px 25px; width: 845px; background-color: #fff;
min-height:890px; _height: 890px; }
.hd_web_tit { }
.hd_web_tit .con_title li { width: 95px;}
.hd_web_list { padding:5px 0 15px;}
.hd_web_con { overflow: hidden; padding:25px 0 14px; width: 100%; border-bottom: #2c2f36 dotted 1px; }
.hd_web_c_l { float: left; border: #2c2f36 solid 1px; width: 270px; height: 200px; margin-right:7px; margin-bottom:10px;}
.hd_web_c_r { float: right; overflow: hidden; width: 420px; height: 150px;}
.hd_web_c_h3 { overflow: hidden; height: 28px; font-size: 20px; line-height: 28px; white-space: nowrap; color: #444;}
.hd_web_c_h3 a, .hd_web_c_h3 a:visited { color: #444;}
.hd_web_c_time { margin: 0; padding:5px 0 8px; color: #e86656; line-height: 18px;}
.hd_web_c_text { overflow: hidden; height: 78px; color: #777; line-height: 20px;}
/*hd end*/

li {
    list-style: none;
}
.con_title {
    width: 100%;
    height: 30px;
    border-bottom: #2c2f36 solid 1px;
}

.con_title li a {
    display: block;
    height: 29px;
    line-height: 18px;
    text-align: center;
    color:#969db0
}

.con_title { width: 100%; height: 30px; border-bottom: #2c2f36 solid 1px;}
.con_title ul { position: relative; float: left; bottom:-1px; height: 30px;}
.con_title li { float: left; width: 90px; font-size: 16px; color: #5e5e5e;}
.con_title li a { display: block; height: 29px; line-height: 18px; text-align: center;}
.con_title li a.default { cursor: default;}
.con_title li .line { display: block;  width: 0; font-size: 0; line-height: 0;  height: 2px;  margin: 0 auto;
  background-color:#e86656;  -webkit-transition: all 0.2s linear 0s;  -moz-transition: all 0.2s linear 0s; 
   -o-transition: all 0.2s linear 0s;  -ms-transition: all 0.2s linear 0s;  transition: all 0.2s linear 0s;}
.con_title li.thistab .line { width: 100%; background-color:#e86656; }
.con_title li.thistab a, .con_title li.thistab a:visited { color: #e86656;}
.con_title li a:hover { text-decoration: none;}

</style>
<div class="article-main">
  <div class="news_web_box"> 
    <!-- title start -->
    <div class="news_web_tit">
      <div class="con_title">
        <ul>
          
          <!--输出父类下的各自定义分类--->
          <div class="hd">
            <ul class="list">
              <li class="thistab"> <a href="http://fmz.qyggame.com/?cat_media=%e6%b8%b8%e6%88%8f%e6%88%aa%e5%9b%be"> 游戏截图 </a> <span class="line"></span> </li>
              <li class=""> <a href="http://fmz.qyggame.com/?cat_media=%e6%b8%b8%e6%88%8f%e5%a3%81%e7%ba%b8"> 游戏壁纸 </a> <span class="line"></span> </li>
              <li class=""> <a href="http://fmz.qyggame.com/?cat_media=%e6%b8%b8%e6%88%8f%e8%a7%86%e9%a2%91"> 游戏视频 </a> <span class="line"></span> </li>
            </ul>
          </div>
        </ul>
      </div>
    </div>
    <!-- title end --> 
    <!-- list start -->
    <div class="news_web_list">
      <div class="article_list">
        <ul>
          <article class="hd_web_con">
            <div class="hd_web_c_l"> <a target="_blank" href="http://fmz.qyggame.com/wp-content/uploads/2016/11/1.jpg"> <img width="270" height="200" src="http://fmz.qyggame.com/wp-content/uploads/2016/11/1.jpg"> </a> </div>
            <div class="hd_web_c_l"> <a target="_blank" href="http://fmz.qyggame.com/wp-content/uploads/2016/11/2.jpg"> <img width="270" height="200" src="http://fmz.qyggame.com/wp-content/uploads/2016/11/2.jpg"> </a> </div>
            <div class="hd_web_c_l"> <a target="_blank" href="http://fmz.qyggame.com/wp-content/uploads/2016/11/3.jpg"> <img width="270" height="200" src="http://fmz.qyggame.com/wp-content/uploads/2016/11/3.jpg"> </a> </div>
          </article>
          <article class="hd_web_con">
            <div class="hd_web_c_l"> <a target="_blank" href="http://fmz.qyggame.com/wp-content/uploads/2016/11/4.jpg"> <img width="270" height="200" src="http://fmz.qyggame.com/wp-content/uploads/2016/11/4.jpg"> </a> </div>
            <div class="hd_web_c_l"> <a target="_blank" href="http://fmz.qyggame.com/wp-content/uploads/2016/11/1.jpg"> <img width="270" height="200" src="http://fmz.qyggame.com/wp-content/uploads/2016/11/1.jpg"> </a> </div>
          </article>
        </ul>
      </div>
    </div>
  </div>
</div>
</body>
</html>

 

（模板）网页游戏用的“内容区”的“图赏影音”模板


联系
我们