博主信息
博文 15
粉丝 0
评论 0
访问量 12470
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
CSS基础-利用CCS美化HTML的表格2018年8月14日20时00分
Kenxc2011的博客
原创
1032人浏览过

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举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学