html和CSS基础学习（十四）_html strcss-优快云博客

本文链接：https://blog.youkuaiyun.com/MsStrbig/article/details/78185860

本文介绍了HTML和CSS的基础应用，包括图片按钮的制作，使用`background`属性设置背景样式，以及CSS解决高度塌陷和外边距问题的方法。还探讨了表格的创建，如`tr`, `td`, `rowspan`, `colspan`等属性的用法，强调了不推荐使用表格进行布局，建议采用CSS+DIV进行布局。" 113056059,10542248,工程制图详解：视图与剖视图的应用,"['工程制图', '视图绘制', '剖视技术']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（1）图片素材。图片按钮的一个练习

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<styletype="text/css">

/*变成块元素*/

display:block;

width:170px;

height:170px;

background-image:url(img/botton/6.png);

background-repeat:no-repeat;

}

a:hover{

background-position:-180px 0px;

}

a:active{

background-position:-360px 0px;

}

</style>

</head>

<body>

<ahref="#"></a>

</body>

</html>

可以通过图片的定位，移动来显示我们所需要的背景，或者图片

background: center center fixed url(img/botton/6.png) no-repeat;

通过background可以一起设置背景的样式没有先后顺序。

background-position: -180px 0px;通常使用负数是为了更好效果。

PS中如果在图层面板显示的图层为索引那先要图像——模式——改为RGB/CMYK等然后再双击该图层，解锁。

（二）

Table标签创建一个表格，tr表示行，td表示列，rowspan表示纵向合并，coslspan表示横向合并，border设置边框，border-collapase设置边框合并。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			table{
				width: 60%;
				/*设置边框宽度*/
				border: solid 1px black;
				/*可以设置边框合并*/
				border-collapse: collapse;
				/*设置边框间距*/
				border-spacing: 0px;
				
				
				
			}
			tr{
				border: solid 1px black;
			}
			/*设置隔行变色*/
			tr:nth-child(even)
			{
				background-color:#bfa ;
			}
			/*设置鼠标移入的样式*/
			tr:hover{
				background-color: yellow;
			}
			
		</style>
	</head>
	<body>
		<table border="" cellspacing="" cellpadding="">
			<tr>
				<th>学号</th>
				<th>姓名</th>
				<th>年级</th>
				<th>班级</th>
			
			</tr>
			    <td>1</td>
			    <td>王小明</td>
			    <td>高三</td>
			    <td>四班</td>
			
			
			<tr>
			   <td>1</td>
			    <td>王小明</td>
			    <td>高三</td>
			    <td>四班</td>
			
			</tr>
				</tr>
			    <td>1</td>
			    <td>王小明</td>
			    <td>高三</td>
			    <td>四班</td>
			
			
			<tr>
			   <td>1</td>
			    <td>王小明</td>
			    <td>高三</td>
			    <td>四班</td>
			
			</tr>
			</tr>
			    <td>1</td>
			    <td>王小明</td>
			    <td>高三</td>
			    <td>四班</td>
			
			
			<tr>
			   <td>1</td>
			    <td>王小明</td>
			    <td>高三</td>
			    <td>四班</td>
			
			</tr>
				</tr>
			    <td>1</td>
			    <td>王小明</td>
			    <td>高三</td>
			    <td>四班</td>
			
			
			<tr>
			   <td>1</td>
			    <td>王小明</td>
			    <td>高三</td>
			    <td>四班</td>
			
			</tr></tr>
			    <td>1</td>
			    <td>王小明</td>
			    <td>高三</td>
			    <td>四班</td>
			
			
			<tr>
			   <td>1</td>
			    <td>王小明</td>
			    <td>高三</td>
			    <td>四班</td>
			
			</tr>
				</tr>
			    <td>1</td>
			    <td>王小明</td>
			    <td>高三</td>
			    <td>四班</td>
			
			
			<tr>
			   <td>1</td>
			    <td>王小明</td>
			    <td>高三</td>
			    <td>四班</td>
			
			</tr>
		</table>
		
		
		
	</body>
</html>

IE6不支持a标签以为的hover。

tr并不是table的子元素，游览器会默认加入一个他body一个标签，

thead,tbody,tfoot将表格分为三个部分，分别表示表头，主体，和底部。

（三）

使用表格进行布局，但是并不推荐使用。CSS+DIV进行布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table width="100%" height="500px" border="1px ">
			<tr height="20%">
				<td colspan="2"></td>
				
			</tr>
			<tr height="60%">
				<td width="20%"></td>
				<td width="80%">
					<table border="1px" width="100%" height="100%">
						<tr>
							<td></td>
							
						</tr>
						<tr>
							<td></td>
						</tr>
					</table>
					
					
					
				</td>	
				
			</tr>
			<tr height="20%">
					<td colspan="2"></td>
				
			</tr>
			
			
			
		</table>
		
		
		
	</body>
</html>

同时解决高度塌陷，和垂直外边距的问题

.clearfix:before,.clearfix:after{

content:"";

display:table;

clear:both;

}

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<styletype="text/css">

.box1{