博客列表 >HTML表格-2018年8月14日-23:00

HTML表格-2018年8月14日-23:00

EmonXu的博客
EmonXu的博客原创
2018年08月15日 01:03:15478浏览

首先来看两个问题:

一、学习PHP为什么必须要掌握HTML?

答:前端开发主要是静态页面的编写,三个工具:html,CSS,JavaScript。前端直接由浏览器负责解释并执行。

后端运行在服务器环境中,也称服务器端。后端需要特殊程序编译运行。

php就是用来动态生成HTML代码的。

因为PHP程序的运行结果就是html,所以要学好html。

二、为什么选择PHP开发动态网站?

答:天下武功,唯快不破。后端开发语言和工具有很多,除了php,还有java,python,asp。。。

php流行的原因,就一个字:快,上手快,开发快,迭代快。


下面介绍HTML中表格的用法。

先看代码:

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格</title>

	<style type='text/css'>
		h2{
			font-size: 30px;
			background: lightgray;
			line-height: 50px;
			text-align: center;
		}


		p{
			text-indent:2em;
		}
		
		table,th,td{
			border: 1px solid #666;
		}

		table{
			margin: 20px auto;
			border-collapse: collapse;
		}

		table tr:first-child{
			background-color: lightgreen;
			font-size:20px;
		}

		table tr td img{
			padding: 5px;
			border-radius: 10px;
			width: 120px;
			height: 120px;
		}

		table tr td a{
			text-decoration-line: none;
			padding: 5px;
			border:1px solid black;
			background:lightblue;
			color:white;
			border-radius: 8px;
		}

		table tr td a:hover{
			background: white;
			color:lightblue;
		}

		table tr:hover{
			background-color: lightpink;
			color: orange;
		}

	</style>
</head>
<body>
	<h2>小米手机推荐</h2>

		<p>8月16日,既是小米手机的生日,也是MIUI的生日,为庆祝这历史性的时刻,小米即将开启816狂欢盛典,回馈一直以来支持小米公司的米粉和用户们。今年的小米816狂欢盛典以“换机好时候”为主题,时间从8月14日延续至8月16日,为期3天。</p>
		<p>以下推荐三款机型:</p>
		<ul>
			<li>小米8  </li>
			<li>小米mix2S  </li>
			<li>小米8SE  </li>
		</ul>

	<table>
		<tr>
			<th>型号</th>
			<th>卖点</th>
			<th>价格</th>
			<th>图片</th>
			<th>选购</th>
		</tr>
		<tr>
			<td>小米8</td>
			<td>全球首款双频GPS,骁龙845</td>
			<td>¥2699起</td>
			<td><img src="https://img13.360buyimg.com/n7/jfs/t19912/33/927199229/297549/8c269ff0/5b0fca0fN8d5600df.jpg"></td>
			<td><a href="http://mi.com" target="blank">点击下单</a></td>
		</tr>
		<tr>
			<td>小米mix2s</td>
			<td>陶 瓷机身 手机中的艺术品</td>
			<td>¥2899起</td>
			<td><img src="https://img10.360buyimg.com/n7/jfs/t16915/296/1042950134/187306/da89b445/5ab9e638N96c296a0.jpg"></td>
			<td><a href="http://mi.com" target="blank">点击下单</a></td>
		</tr>
		<tr>
			<td>小米8 SE</td>
			<td>三星 AMOLED 全面屏 小屏旗舰</td>
			<td>¥1799起</td>
			<td><img src="https://img12.360buyimg.com/n7/jfs/t21133/35/525701293/191915/b4b7659f/5b0fc897Naf7e843c.jpg"></td>
			<td><a href="http://mi.com" target="blank">点击下单</a></td>
		</tr>
	</table>
</body>
</html>

运行实例 »

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

以下为预览图片

作业预览.jpg

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