博客列表 >CSS基础-利用CCS美化HTML的表格2018年8月14日20时00分

CSS基础-利用CCS美化HTML的表格2018年8月14日20时00分

Kenxc2011的博客
Kenxc2011的博客原创
2018年08月17日 12:02:20835浏览

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

主要是PHP最后展现出来的结果都是通过HTML展现。所以必须要熟悉结果的展现,否则不知道结果怎么展现,前面的开发就等于没有用了。

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

主要还是PHP的开发非常快,有利于项目的快速开发、快速迭代,所以选择PHP。


下面是根据CSS学习的基础属性,设置HTML的table展现:

实例

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

	<style type="text/css">
		table {
			width: 700px;
			text-align: center;
			margin: 20px auto;
			border-collapse: collapse;
		}

		table caption {
			font-size: 3rem; /*1rem=10px*/
			font-weight: bolder;
			color: #666;
			margin-bottom: 20px;
		}

		table,th,td{
			border: 1px solid #666;
		}
			
		table tr:first-child {
			background-color: lightgreen;
		}	

		table tr:hover {
			background-color: #efefef;
			color:coral;
		}

		table tr td img {
			padding: 5px;
			border-radius: 10px;
		}
		/*将a标变成按钮*/
		table tr td a {
			/*去掉下划线*/
			text-decoration-line: none;
			width: 140px;
			height: 40px;

			padding: 5px;

			border: 1px solid black;

			background-color:white;
			color: black;

			border-radius: 8px;
		}
		table tr td a:hover
		{
			background-color: black;
			color: white;
		}

	</style>

	<table>
		<caption>购物清单</caption>
		<tr>
			<th>编号</th>
			<th>名称</th>
			<th>品q牌</th>
			<th>数量</th>
			<th>缩列图</th>
			<th>操作</th>
		</tr>
		<tr>
			<td>1</td>
			<td>牛奶</td>
			<td>伊利</td>
			<td>1箱</td>
			<td><img src="milk.jpg" width="100"></td>
			<td><a href="http://jd.com">点击购a买</a></td>
		</tr>
		<tr>
			<td>2</td>
			<td>苹a果</td>
			<td>红富士</td>
			<td>5斤</td>
			<td><img src="apple.jpg" width="100"></td>
			<td><a href=" 买</a></td>
		</tr>
		<tr>
			<td>3</td>
			<td>风扇</td>
			<td>美的</td>
			<td>一台</td>
			<td><img src="fan.jpg" width="100"></td>
			<td><a href="  买</a></td>
		</tr>

	</table>
</body>
</html>

运行实例 »

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

通过上面的编写,熟悉主要两种属性设置

(1)父到子元素的属性设置:table tr td a {属性}

(2)子元素的第一个属性设置:table tr:first-child{}


同时学习到一些特殊的属性作用:

text-decoration-line: none; 可以去超链接掉的下划线。

a:hover ;通过此属性,可以设置鼠标滑过的属性。

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