欧美精品v国产精品v日韩精品,а√天堂地址在线

首頁 > 博客列表 > table仿QQ音樂

博主信息

博文 65

粉絲 3

評論 4

訪問量 79729

專題推薦

更多>

相關(guān)推薦

熱門教程

更多>

相關(guān)教程

最新下載

更多>

網(wǎng)站特效

網(wǎng)站源碼

網(wǎng)站素材

前端模板

table仿QQ音樂

無恥的魚

原創(chuàng)

1135人瀏覽過

border=1
cellspacing=0
cellpadding=1  內(nèi)填充（呼吸）
colspan 列合并
rowspan 行合并
span 設(shè)置列的顏色

其他實際的看我的代碼

效果圖：

table仿QQ音樂.png

代碼如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="keywords" content="張建武設(shè)計table格式的QQ音樂">
	<meta name="description" content="張建武設(shè)計table格式的QQ音樂">

	<title>table表格</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="4" bgcolor="#ecf1f3" align="center"> 
	<caption><h1>table-仿qq音樂</h1></caption>
	<thead>
		<tr>
			<!-- 左邊側(cè)邊欄 -->
			<th colspan="4" >QQ音樂播放器</th>
			<!-- 主體 -->
			<th colspan="6">搜索  <input type="text" name="" style="border-radius: 3px"></th>
			<th colspan="2">
				<a href="">信息</a>
				<a href="">設(shè)置</a>
				<a href="">外觀</a>
				
			</th>
			<th colspan="1">VIP</th>
			<th><a href="">X</a></th>
		</tr>
	</thead>

	<tbody>
		<tr>
			<td colspan="4" rowspan="3" >
				<img src="image/modie (2).png" width="150" alt="播放圖標" align="center">
				<p align="center">
					<a href="">
						<strong>登錄</strong>
					</a>
				</p>
			</td>
			<td colspan="10" rowspan="2">
				<img src="image/1.jpeg" width="100" style="display: inline-block; float: left;">
				<p>
				<h3 style="text-indent: 2em">  弓長劍舞</h3>
				<strong>  音樂口味：流行、重金屬、歐美電子</strong><br>
				<strong>粉絲：0 /關(guān)注：12 / 好友：23</strong></p>
			</td>
		</tr>
		<tr>
			
		</tr>
		<tr bgcolor="#fff">
			<td colspan="2">我喜歡</td>
			<td colspan="2">創(chuàng)建的歌單</td>
			<td colspan="6">上傳視頻</td>
		</tr>
		<tr>
			<td colspan="4" >音樂館</td>
			<td colspan="3" bgcolor="#fff">播放全部</td>
			<td colspan="3" bgcolor="#fff">下載</td>
			<td colspan="3" bgcolor="#fff">搜索</td>
			<td bgcolor="#fff">排序</td>
		</tr>
		<tr bgcolor="#fff">
			<td colspan="4" bgcolor="#ecf1f3"><strong>在線音樂</strong></td>
			<td colspan="3">歌曲</td>
			<td colspan="3">歌手</td>
			<td colspan="3">專輯</td>
			<td><a href="">刪除</a></td>
		</tr>
		<tr bgcolor="#fff">
			<td colspan="4" bgcolor="#ecf1f3"><strong>個性電臺</strong></td>
			<td colspan="3">空空如也</td>
			<td colspan="3">胡66</td>
			<td colspan="3">空空如也</td>
			<td><a href="">刪除</a></td>
		</tr>
		<tr bgcolor="#fff">
			<td colspan="4" bgcolor="#ecf1f3">我的音樂</td>
			<td colspan="3">林中鳥</td>
			<td colspan="3">葛林</td>
			<td colspan="3">林中鳥</td>
			<td><a href="">刪除</a></td>
		</tr>
		<tr bgcolor="#fff">
			<td colspan="4" bgcolor="#ecf1f3"><strong>我的歌單</strong></td>
			<td colspan="3">空城</td>
			<td colspan="3">楊坤</td>
			<td colspan="3">空城</td>
			<td><a href="">刪除</a></td>
		</tr>
	</tbody>

	<tfoot bgcolor="#fff">
		<tr>
			<td colspan="4" rowspan="2" bgcolor="#fff">
				<p align="center">
					<a href="#"><img src="image/3.png" width="30" alt="圖標"></a>
					<a href="#"><img src="image/5.png" width="50" alt="圖標"></a>
					<a href="#"><img src="image/2.png" width="30" alt="圖標"></a>
				</p>
			</td>
			<td colspan="2" rowspan="2" bgcolor="#fff" align="center">
				<img src="image/6.png" cellpadding="0" width="50">
			</td>
			<td rowspan="2" colspan="6">				
				<p>
					<h5>林中鳥<small>葛林</small></h5> 
					<hr>
				</p>
			</td>
			<td colspan="2" rowspan="2" align="center"><a href="#"><img src="image/4.png" width="50" alt="圖標"></a></td>
		</tr>
		<tr>
		</tr>
	</tfoot>
</table>
</body>
</html>

本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！

全部評論文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務協(xié)議

0條評論

作者最新博文

javascript中delete的運用

1970-01-01 08:00:00

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱