第一步创建一个表格 设置宽、高 以及边距,在表格行中放一个<img>标签,并设置图片的宽高 无边框
第二步引入facs.css样式<link href="css/face.css" rel="stylesheet">
第三步 在web网页上运行html代码,完成所有步骤。
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link rel="stylesheet" href="css/face.css" />
</head>
<!--主体内容-->
<body >
<table width="200" height="125" cellpadding="10" cellspacing="3">
<tr>
<td><img src="images/face.png" width="128" height="128" border="0"></td>
</tr>
</table>
</body>
</html>
face.css
@charset "utf-8";
设置table跟每一行上下左右边框以及颜色 、相数大小。
table{
border-top: #CCCCCC solid 7px;
border-left: #CCCCCC solid 7px;
border-right: #F0AD4E solid 7px;
border-bottom: #F0AD4E solid 7px;
}
td{
border-top: #CCCCCC solid 10px;
border-left: #CCCCCC solid 10px;
border-right: #F3F3F3 solid 10px;
border-bottom: #F3F3F3 solid 10px;
}
效果如图所示