用html和css写的个人简介

写来完成老师的作业，哈哈写的非常简单<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>个人简介</title><style>body{background: url("image/bg.jpg")no-repeat center;}

阿喵酱ovo

3989人浏览 · 2021-09-20 22:01:41

阿喵酱ovo · 2021-09-20 22:01:41 发布

写来完成老师的作业，哈哈

写的非常简单

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>个人简介</title>
    <style>
        body{
            background: url("image/bg.jpg")no-repeat center;
        }
        .bg_layout{
            border: 1px solid #FFFFFF;
            margin: auto;
            /*background-color: white;*/
            width:700px;
            height:600px;
        }
        table {
            border-collapse: collapse;
        }
        table, th, td {
            border: 1px solid black;
            text-align: left;
        }

        th{
            width: 100px;
            text-align: center;
        }
        td{
            width:120px;
            padding: 15px;
        }
        .t1{
            font-size: 30px;
            letter-spacing: 30px;
            height: 80px;
        }
        img{
            width:200px;
            height:200px;
        }
        ul.a{
            list-style-type: square;
        }
        ul.b{
            list-style-type: circle;
        }
        ol.c{
            list-style-type:decimal;
        }
    </style>
</head>
<body>
<div>
        <p>请不要拿来直接去交老师的作业</p>
    <table class="bg_layout">
        <tr>
            <th colspan="7" class="t1">个人简介</th>
        </tr>
        <tr>
            <th>姓名</th><td> 小pj</td>
            <th>性别</th><td >女</td>
            <td rowspan="3"> <img src="./image/touxiang.jpg" alt="头像" ></td>
        </tr>
        <tr>
            <th>生日</th><td>2001.01</td>
            <th>民族</th><td>汉族</td>
        </tr>
        <tr>
            <th>籍贯</th><td>江苏</td>
            <th>政治面貌</th><td>共青团员</td>
        </tr>
        <tr>
            <th>联系电话</th><td>12345678912</td>
            <th>电子邮件</th>
            <td colspan="2">
                <a href="#">2692890272@qq.com</a>
            </td>
        </tr>
        <tr>
            <th>现居住地</th><td colspan="6">江苏省南通市</td>
        </tr>
        <tr>
            <th>兴趣爱好</th>
            <td colspan="6">
                <ul class="a">
                    <li>唱歌</li>
                    <li>听音乐</li>
                    <li>看电视</li>
                </ul>
            </td>
        </tr>
        <tr>
            <th>专业技能</th>
            <td colspan="6">
                <ol class="c">
                    <li>c语言</li>
                    <li>c++</li>
                    <li>Java语言</li>
                </ol>
            </td>
        </tr>
        <tr>
            <th>自我评价</th>
            <td colspan="6">
                <ul class="b">
                    <li>热情善良</li>
                    <li>诚实守信</li>
                    <li>吃苦耐劳</li>
                </ul>
            </td>
        </tr>
        

    </table>
</div>
</body>
</html>

最后完成的效果如图所示