博客列表 >html和css基础知识(表格的练习)—2018年8月15日12:06:00

html和css基础知识(表格的练习)—2018年8月15日12:06:00

Hi的博客
Hi的博客原创
2018年08月15日 12:20:21478浏览

1.       学习php为什么必须要掌握html

答:php是动态生成htnl代码的,他的运行结果就是html,所以必须要学好html代码。不然当你写出来的php生成的代码你都看不懂这就很尴尬了。

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

答:因为php运行的结果就是html的代码,其次他的开发速度快。输出控制灵活,可以和html嵌套,迭代快,可以实现模板化,逻辑与用户界面的分离。

根据昨晚所学的知识。我进行了表格的设计。以下是我的代码。↓

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>这是一个表格</title>
	<style type="text/css">
		ul {
			margin: 0 0;
			padding: 0 0;
			
		}
		li{
			
			list-style-type: none;/*去掉序号*/
		}
		table{
			width: 500px;
			margin: 0 auto;
			border: 1px solid black;
			border-collapse: collapse; /*折叠表格线*/
			text-align: center;


		}
		tr{			
			height: 60px;
			
		}
		tr:first-child{
						background:lightblue;
						border: 1px solid black

		}
		tr:hover{
			background:pink;
		}
		th{
			
			border: 1px solid black;
		}
		td{
			border: 1px solid black;
		
			
		}
		a {
		text-decoration-line: none; /*去掉下划线*/
		width: 140px;
		height: 20px;
		padding: 5px;
		border: 1px solid black;
		background-color: white;
		color: black;
		border-radius: 8px;
	}
	a:hover{
		background-color: black;
		color: white;
		}

	</style>
</head>
<body>
	<table>
		<caption><h2>购书清单</h2></caption>
		<tr>
			<th>书名</th>
			<th>价格</th>
			<th>数量</th>
			<th>样式图</th>
			<th>goumai</th>
		</tr>
		<tr>
			<td>PHP手册</td>
			<td>80</td>
			<td>1</td>
			<td><img src="images/php.jpg"></td>
			<td><a href="http://www.baidu.com">点击goumai</a></td>
		</tr>
		<tr>
			<td>css手册</td>
			<td>64</td>
			<td>1</td>
			<td><img src="images/css.jpg"></td>
			<td><a href="http://www.baidu.com">点击goumai</a></td>
		</tr>
		<tr>
			<td>c++手册</td>
			<td>75</td>
			<td>1</td>
			<td><img src="images/c++.jpg"></td>
			<td><a href="http://www.baidu.com">点击goumai</a></td>
		</tr>
		<tr>
			<td>
				<ul>
					<li>java手册</li>					
				</ul>
			</td>
			<td>
				<ul>
					<li>88</li>					
				</ul>
			</td>
			<td>
				<ul>
					<li>1</li>					
				</ul>
			</td>
			<td>
				<ul>
					<li><img src="images/java.jpg"></li>				
				</ul>
			</td>
			<td>
				<ul>
					<li><a href="http://www.baidu.com">点击goumai</a></li>		
				</ul>
			</td>
		</tr>
		<tr>
			<td>
				<p>html手册</p>
			</td>
			<td>
				<p>66</p>
			</td>
			<td>
				<p>1</p>
			</td>
			<td>
				<p><img src="images/html.jpg"></p>
			</td>
			<td>
				<p><a href="http://www.baidu.com">点击goumai</a></p>
			</td>
		</tr>
	</table>
</body>
</html>

					

运行实例 »

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


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