博客列表 ><table>标签制作表格+css属性修饰-8月14号

<table>标签制作表格+css属性修饰-8月14号

刘永鹏的博客
刘永鹏的博客原创
2018年08月15日 17:40:08931浏览

前言

经过这么多天以来,领悟了何为多练多写,我所理解的多练都写不是把代码一遍一遍的敲,而是熟悉代码内的标签运用,熟悉用什么标签实现什么功能。

作业内容:

运用<table>,<th>,<td>标签实现表格制作,再用css属性进行修饰

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<hr> 
<style type="text/css">
table {		
		border-collapse: collapse; /*折叠表格线* 不加这个会出现双线格*/
		width: 900px;
		text-align: center;
		margin: 20px auto;
	}
table caption {
	font-size: 2rem;
	font-weight: bolder;
	color: #666;
	margin-bottom: 10px;
}
	table, th, td {
		border: 1px solid #666;
	}
	table td img{
		width: 70px;
        height: 50px;
        border-radius:10px ;
        margin: 2px;
	}
	table p{
		display: block;
		width: 400px
	}
	 tr:first-child{
	 	background-color: pink;
	 }
	 tr:hover{
	 	background-color: #efefef;
	 	color: coral;
	 }
	 table td a{
	 	text-decoration: none;
	 	/*width:140px;
		height:40px;*/
		padding:5px;
	 	border:1px solid black;
	 	background: white;
		color:black;
		border-radius: 8px;

	 }
	 td a:hover
	 {
	 	font-size: 18px;
	 	background: black;
	 	color:white;
	 }
</style>
<p>用HTML标签制作表格</p>
<table >
<caption>购物清单</caption>
<tr>
<th>专辑名</th>
<th>作者</th>
<th>歌曲</th>
<th>简介</th>
<th>约略图</th>
<th>试听</th>
</tr>
<tr>
<td>自传</td>
<td>五月天</td>
<td><ul>
<li>如果我们不曾相遇</li>
<li>成名在望</li>
<li>兄弟</li>
</ul></td>
<td><p >五月天将专辑《自传》看作一部与青春有关的作品,将他们出道以来的人生感悟和心路历程写进了专辑中。同时,五月天也希望将专辑作为生活在21世纪的这一时代的人的自传,</p></td>
<td><img src="C:\Users\Administrator\Desktop\新建文件夹\a1.jpg"></td>
<td><a href="www.jd.com">点击试听</a></td>
</tr>

<tr>
<td>第二人生</td>
<td>五月天</td>
<td><ul>
<li>2012</li>
<li>仓颉</li>
<li>干杯</li>
</ul></td>
<td><p>五月天本来是不相信末世论的,五月天在电视上看见海啸翻卷,甚至引发核电厂爆炸,辐射外泄,这才惊觉,“末日”其实与我们生活的“平日”只有一线之隔,最终确定要采用末日作为专辑的主题。</p></td>
<td><img src="C:\Users\Administrator\Desktop\新建文件夹\a2.jpg"></td>
<td><a href="www.jd.com">点击试听</a></td>
</tr>

<tr>
<td>后青春的试</td>
<td>五月天</td>
<td><ul>
<li>突然好想你</li>
<li>生存以上生活以下</li>
<li>你不是真正的快乐</li>
</ul></td>
<td><p>褪去数不尽的纪录和成绩,五月天静下心回到了地下的录音室,就在专辑制作要正式开始的时候,五月天开会做了一个重大约定,接下来的这张新专辑,不论乐器音色、编曲、乐器弹奏,种种创作音乐的相关方式。</p></td>
<td><img src="C:\Users\Administrator\Desktop\新建文件夹\a3.jpg"></td>
<td><a href="www.jd.com">点击试听</a></td>
</tr>

</table>	



</body>
</html>

运行实例 »

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

QQ截图20180815171050.png

需要注意的地方是:用bodred属性时 要加上 solid 和border-collapse: collapse,不然的话表格的线会有两条

问题1:学习PHP为什么要掌握HTML

答:PHP是用来动态生成HTML代码的,PHP 的运行结果就是html

问题2:为什么选择PHP开发动态网页

答:因为PHP够快,上手快,开发快,更新快,迭代快

总结:

<caption>用来实现表格的标题

<th>是加粗

<td>是正常

hover可以实现鼠标的动画

用bodred属性时 要加上 solid 和border-collapse: collapse,不然的话表格的线会有两条

实现功能要有逻辑,要知道先做什么再做什么,逻辑清晰,代码就容易些了

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