博客列表 >表格布局及常用CSS样式实例探索——20180814(第03课)

表格布局及常用CSS样式实例探索——20180814(第03课)

PHP作业本
PHP作业本原创
2018年08月17日 18:50:14660浏览

问答题:

1. 学习PHP为什么要掌握HTML?

    因为PHP是用来动态生成HTML的编程语言,HTML是基础,所以必须先学好HTML,才能更好学习PHP。

2. 为什么选择PHP开发动态网站?

    因为目前为止,PHP语言来开发动态网站效率最高,且PHP更新迭代速度快,符合现在的潮流趋势。


编程题:制作一张表格

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>歌单</title>
	<style type="text/css">
		body{
			background-color:#555;
		}
		table{
			border-collapse:collapse;
			width:1000px;
			font-family: Arial;
			text-align: center;
			margin:20px auto;
			background-color: #eee;
			border: 3px solid #eee;
		}
		table caption {
			font-size:1.5rem;
			color:#FFF;
			margin-bottom: 20px;

		}

		table tr{
			border:1px solid #FFF;
		}
		th,td{
			border:0px solid #FFF;
			font-size: 12px;
		}
		table tr td{
			color: #444;
		}

		table tr:hover{
			background-color:#aaa;
			color: white;
		}
                table tr:first-child{
			background-color: rgb(192,18,25);

			height: 40px;
			color:#FFF;
		}
		
		table tr td img{
			width: 60px;
			height: 60px;
		}
		table tr td a{
			text-decoration: none; /*没有下划线*/
			width:40px;
			height:15px;
			padding: 5px;
			background: rgb(192,18,25);
			color:white;
			border-radius: 5px;

		}
		table tr td a:hover{
			
			background: white;
			color:rgb(192,18,25);
			border-radius: 5px;

		}
	</style>
</head>
<body>
	<table>
		<caption>已选歌曲</caption>
		<tr>
			<th width="60px">封面</th>
			<th width="400px">歌名</th>
			<th width="100px">歌手</th>
			<th>专辑名</th>
			<th>选择</th>
		</tr>
		<tr>
			<td><img src="http://milishidai.com/wp-content/uploads/2018/08/hejiong.jpg"/></td>
			<td>《栀子花开》</td>
			<td>何炅</td>
			<td>《栀子花开》</td>
			<td><a href="https://music.163.com/#/song?id=32922790">收听</a></td>
		</tr>
		<tr>
			<td><img src="http://milishidai.com/wp-content/uploads/2018/08/canglangxiongdi.jpg"/> </td>
			<td>《传情达意小夜曲》</td>
			<td>不靠谱组合</td>
			<td>《传情达意小夜曲》</td>
			<td><a href="https://music.163.com/#/song?id=526267472">收听</a></td>
		</tr>
		<tr>
			<td><img src="http://milishidai.com/wp-content/uploads/2018/08/xuezhiqian.jpg"/></td>
			<td>《别》</td>
			<td>薛之谦</td>
			<td>《渡》</td>
			<td><a href="https://music.163.com/#/song?id=515803379">收听</a></td>
		</tr>
		<tr>
			<td><img src="http://milishidai.com/wp-content/uploads/2018/08/xuhao.jpg"/> </td>
			<td>《远方的你》</td>
			<td>许蒿</td>
			<td>《南疆小城》</td>
			<td><a href="https://music.163.com/#/song?id=459601733">收听</a></td>
		</tr>
		<tr>
			<td><img src="http://milishidai.com/wp-content/uploads/2018/08/zhangkun.jpg"/> </td>
			<td>《你走吧》</td>
			<td>张坤</td>
			<td>《你走吧》</td>
			<td><a href="https://music.163.com/#/song?id=417859770">收听</a></td>
		</tr>
	</table>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

运行截图:

7.25.28.jpg



声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议