表格

最新推荐文章于 2024-06-18 09:40:23 发布

aloom-cly

最新推荐文章于 2024-06-18 09:40:23 发布

阅读量199

点赞数

分类专栏：前端文章标签：表格

本文链接：https://blog.youkuaiyun.com/BOZAIer/article/details/84076440

版权

前端专栏收录该内容

1 篇文章

订阅专栏

<body>
	<nav class="mui-bar mui-bar-tab">
	    <a class="mui-tab-item mui-active">
	        <span class="mui-icon mui-icon-home"></span>
	        <span class="mui-tab-label">首页</span>
	    </a>
	    <a class="mui-tab-item">
	        <span class="mui-icon mui-icon-phone"></span>
	        <span class="mui-tab-label">文件</span>
	    </a>
	    <a class="mui-tab-item">
	        <span class="mui-icon mui-icon-email"></span>
	        <span class="mui-tab-label">邮件</span>
	    </a>
	    <a class="mui-tab-item">
	        <span class="mui-icon mui-icon-gear"></span>
	        <span class="mui-tab-label">设置</span>
	    </a>
	</nav>
	<div class="mui-content">
		<div class="oInfo" >
			<div class="photo mui-text-center" >
				<span class="mui-icon mui-icon-person " style="font-size: 100px;line-height: 100px;"></span>
			</div>
			<div class="baseInfo">
				<p>姓名: <span id="uname">曹莉英</span></p>
				<p>工号: <span id="uno">C3005860</span></p>
				<p>性别: <span id="usex">女</span></p>
				<p>岗位: <span id="uposite">开发</span></p>
			</div>
		</div>
		<div class="video" style="float: right;position: relative;">
			<video width="260" height="" style="border: 1px solid #ccc; border-radius: 5px;">
				<source src="myvideo.mp4" type="video/mp4"></source>
				<source src="myvideo.ogv" type="video/ogg"></source>
				<source src="myvideo.webm" type="video/webm"></source>
				<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
					<param name="movie" value="myvideo.swf" />
					<param name="flashvars" value="autostart=true&amp;file=myvideo.swf" />
				</object>
				当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
			</video>
			<p style="position: absolute;text-align:center;top: 45%;bottom: 50%;left: 30%;">标准规范操作视频</p>
		</div>
		<div class="mui-clearfix"></div>
		<div style="margin-top: 30px;position: absolute;bottom: 60px;margin-left: -10px;">
			<table border="0" cellspacing="" cellpadding="">
				<tr>
					<th class="mui-col-sm-2">Header</th>
					<th class="mui-col-sm-2">Header</th>
					<th class="mui-col-sm-2">Header</th>
					<th class="mui-col-sm-2">Header</th>
					<th class="mui-col-sm-2">Header</th>
					<th class="mui-col-sm-2">Header</th>
					<th class="mui-col-sm-2">Header</th>
				</tr>
				<tr>
					<td class="mui-col-sm-2 mui-text-center">Data</td>
					<td class="mui-col-sm-2 mui-text-center">Data</td>
					<td class="mui-col-sm-2 mui-text-center">Data</td>
					<td class="mui-col-sm-2 mui-text-center">Data</td>
					<td class="mui-col-sm-2 mui-text-center">Data</td>
					<td class="mui-col-sm-2 mui-text-center">Data</td>
					<td class="mui-col-sm-2 mui-text-center">Data</td>
				</tr>
				<tr>
					<td class="mui-col-sm-2 mui-text-center">Data</td>
					<td class="mui-col-sm-2 mui-text-center">Data</td>
					<td class="mui-col-sm-2 mui-text-center">Data</td>
					<td class="mui-col-sm-2 mui-text-center">Data</td>
					<td class="mui-col-sm-2 mui-text-center">Data</td>
					<td class="mui-col-sm-2 mui-text-center">Data</td>
					<td class="mui-col-sm-2 mui-text-center">Data</td>
				</tr>
				<tr>
					<td class="mui-col-sm-2 mui-text-center">Data</td>
					<td class="mui-col-sm-2 mui-text-center">Data</td>
					<td class="mui-col-sm-2 mui-text-center">Data</td>
					<td class="mui-col-sm-2 mui-text-center">Data</td>
					<td class="mui-col-sm-2 mui-text-center">Data</td>
					<td class="mui-col-sm-2 mui-text-center">Data</td>
					<td class="mui-col-sm-2 mui-text-center">Data</td>
				</tr>
			</table>
		</div>
	</div>
	
	<script src="../js/mui.min.js"></script>
	<script type="text/javascript">
		mui.init()
	</script>
</body>