提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

【web前端(十一)】html_盒模型——边框

WebHTML前端 模型 十一 边框
2023-09-11 14:20:37 时间

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>border(边框)</title>
		<style>
			/*只有一个属性，盒子是看不见的*/
			#abc{
				width: 300px;
				height: 300px;
				
				/*左边框样式*/
				/*border-left-width:3px;*/
				/*边框样式：线型*/
				/*border-left-style: double;*/
				/*border: 1px dotted #FF0000;*/
				
				
				/*右边框样式*/
				/*border-right-width:5px;*/
				/*边框样式：线型*/
				/*border-right-style: dotted;*/
				
				/*border: 1px dotted #FF0000;*/
				
				
				/**
				 * 顺序：上、右、下、左
				 * （四边框样式）
				 
				/*简化写法*/
				border-width: 1px 2px 6px 14px;
				border-color: #FF0000;
				border-style: dotted;
				
				
				/**
				 * 参数；border里只能设置三个参数。
				 */
				border:4px solid #8A2BE2;
				
				
				/**
				 * 圆角化边框
				 * /
				/*border-radius只对块有用，对表格没有作用。*/
				border-radius: 25px;
			}
			
			
			/*线边框是对表格进行设置的*/
			/**
			 * 外边框
			 */
			table{
				border:1px solid #8A2BE2;
				/*border-collapse: collapse，
				 * 作用是使两个像素合并成一个像素，
				 * 即使两个细边框合并成一个细边框*/
				border-collapse: collapse;
			}
			
			
			/**
			 * 内边框
			 */
			td{
				border: 1px solid #8A2BE2;
			}
		</style>
	</head>
	<body>
		<div id="abc">
			我的盒子
		</div>
		<table cellspacing="0" border="0">
			<tr>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
			</tr>
			<tr>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
			</tr>
			<tr>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
			</tr>
			<tr>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
			</tr>
			<tr>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
			</tr>
			<tr>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
			</tr>
			<tr>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
			</tr>
			<tr>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
			</tr>
			<tr>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
			</tr>
			<tr>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
				<td>liuyuan</td>
			</tr>
		</table>
	</body>
</html>

 

相关文章