前端页面原生php+H5 视频播放一专辑列表页（专辑页list）

本文链接：https://blog.youkuaiyun.com/github_38854224/article/details/87083700

1.专辑页（分类页）

<?php
header("content-type:text/html;charset=utf-8");
include_once('/*******inc/global.php');//配置文件
$ms     = new Mysqls();
$sql    = "select * from ******* order by id desc limit 20" ;//获取视频数据（数据少未分页）
$data   = $ms->getRows($sql);
foreach($data as $k=>$v){
        //查找作者
        $sql    = "select * from `user` where `id`={$v['user_id']} limit 1" ;
        $user   = $ms->getRow($sql);
        $data[$k]['head'] = $user['avatar'];
        $data[$k]['nickname'] = $user['nickname'];
}
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0,telephone=no" />
<meta name="format-detection" content="telephone=no" />
<title>早教故事列表</title>
<script language="javascript">
var phoneWidth = parseInt(window.screen.width);var iwidth = 750;var phoneScale = phoneWidth/iwidth;var ua = navigator.userAgent;var os = 1;if (/Android (\d+\.\d+)/.test(ua)){var version = parseFloat(RegExp.$1);os = 2;if(version>2.3){document.write('<meta name="viewport" content="width='+iwidth+', minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">')}else{document.write('<meta name="viewport" content="width='+iwidth+', target-densitydpi=device-dpi">')}} else {document.write('<meta name="viewport" content="width='+iwidth+', user-scalable=no, target-densitydpi=device-dpi">')}
</script>
<style type="text/css">
body{margin:0;padding:0;font-family:Arial;font-size:24px;background:#f3f3f3;}
ul,li,dl,dt,dd,p,div{margin:0;padding:0;list-style:none}
@font-face{font-family:'iconfont';src:url('font/iconfont.woff') format('woff'),url('font/iconfont.ttf') format('truetype');}

li{float:left;width:340px;border-radius:13px;overflow:hidden;background:#fff;margin:28px 0 0 23px;}
.pic{position:relative;}
.pic img{width:340px;height:340px;}
.out{position:absolute;top:0;left:0;width:324px;height:52px;border-radius:13px 13px 0 0;background:rgba(0,0,0,0.3);font-family:"iconfont" !important;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:0.2px;-moz-osx-font-smoothing:grayscale;color:#fff;font-size:20px;text-align:right;padding:288px 16px 0 0;}
.out span{font-size:24px;}
.name{font-size:26px;color:#2c2d2e;padding:20px 0 0 16px;}
.head{float:left;width:41px;height:41px;border-radius:100%;overflow:hidden;margin:20px 13px 28px 16px;}
.head img{width:41px;height:41px;}
.signer{float:left;font-size:21px;color:#2c2d2e;margin-top:30px;}
</style>
</head>
<body>
<ul>
        <?php foreach($data as $v): ?>
        <li onclick="window.location.href='index.php?action=goto_box&album_id='+<?php echo $v['id']; ?>">
                <div class="pic">
                        <img src="<?php echo $v['pic']; ?>" />
                        <div class="out"><span>&#xe696;</span>&nbsp;&nbsp;<?php echo $v['num']; ?></div>
                </div>
                <div class="name"><?php echo $v['name']; ?></div>
                <div class="head"><img src="http://www.qubaobei.com/<?php echo $v['head']; ?>" /></div>
                <div class="signer"><?php echo $v['nickname']; ?></div>
        </li>
        <?php endforeach; ?>
</ul>
</body>
</html>