请记住投稿邮箱是：203239351@qq.com 注册联系QQ203239351
前言：
今天给大家实现一下网站首页开发二，做网站首页内容部分的第二个内容，做个人简介基本信息列的内容
首页内容二功能：
1、添加背景颜色
2、table表格布局
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>宗波尘客-宗九尘博客www.zbck123.com</title>
<style>
.center2{
width: 100%;
height: 768px;
display: table;
text-align: center;
padding-top: 104px;
box-sizing: border-box;
/*box-sizing: border-box;让div添加内边距后不会使父div变大*/
background: linear-gradient(to bottom, #6f7275 0%, #31353a 100%);
}
.center2_top{
margin: 0 auto;
max-width: 1366px;
height: 460px;
}
.center2_top table{
margin: 0 auto;
text-align: center;
color: #eeeeee;
font-size: 25px;
}
.center2_top table tr td:nth-child(1){
color: goldenrod;
}
.center2_top table tr td:nth-child(3){
color: goldenrod;
}
.center2_top caption{
font-size: 32px;
color: #F4D03F;
}
.center2 table td{
width: 200px;
height: 80px;
}
.center2_top_img1 img{
width: 180px;
}
.center2_top_img2 img{
height: 150px;
}
.center2_bottom{
margin: 0 auto;
margin-top: 60px;
width: 70px;
height: 70px;
border: 2px solid rgba(255,255,255,.2);
border-radius: 35px!important;
font-size: 40px;
color: #F4D03F;
background: 0 0;
text-align: center;
}
.center2_bottom a{
text-decoration: none;
color: #F4D03F;
font-size: 70px;
line-height: 70px;
}
</style>
</head>
<body>
<div class="center2">
<div class="center2_top">
<table width="1000" border="1">
<caption>
宗波尘客-基本信息
</caption>
<tr>
<td width="200" height="80">姓名</td>
<td width="200">宗九尘</td>
<td width="200">性别</td>
<td width="200">男</td>
<td width="200" rowspan="3" class="center2_top_img1"><img src="img/gerentouxiang.jpg" alt=""></td>
</tr>
<tr>
<td height="80">民族</td>
<td>汉族</td>
<td>籍贯</td>
<td>四川省巴中市</td>
</tr>
<tr>
<td height="80">出生年月</td>
<td>1998.05</td>
<td>婚姻状况</td>
<td>未婚</td>
</tr>
<tr>
<td height="80">学历</td>
<td>专科</td>
<td>体重身高</td>
<td>171cm.52kg</td>
<td rowspan="2" class="center2_top_img2"><img src="img/weixin.png" alt=""></td>
</tr>
<tr>
<td height="80">专业</td>
<td>计算机网络技术</td>
<td>政治面貌</td>
<td>群众</td>
</tr>
</table>
</div>
<div class="center2_bottom">
<a href="#sxsj">⇩</a>
</div>
</div>
</body>
</html>代码解说：
本代码主要在于div布局和css样式的搭配，大家参考一下即可。
后面a href="#sxsj" 这个a标签是做锚点跳转使用的，#sxsj是下方用a标签建立的锚点，由于下方没有设置锚点所以没有作用，大家可以暂时不管这个a标签的作用，去过想了解锚点的使用方法，可以直接在宗波尘客网站内部搜索锚点的使用方法
大家有不懂的代码直接百度一下就可以了，或者在下方留言
效果图展示：
说明：
表格使用的是固定大小，因为表格宽度低于平板的最大宽度，平板是我们后期要做的自适应界面的第二种模式。自适应主要有pc、平板、手机端
宗波尘客(www.zbck123.com)宗九尘博客 联系QQ：203239351
