使用Dreamweaver MX制作基础简易6行8列个人简历表格。

什么？带我一个

已于 2022-12-12 16:01:13 修改

阅读量5.1k

点赞数 8

文章标签： dreamweaver html

于 2022-12-12 16:00:31 首次发布

本文链接：https://blog.csdn.net/m0_68154641/article/details/128287522

版权

（1）打开Dreamweaver MX。

（2）在【插入面板】的【常用】对象组中单击【表格】图标，生成6行8列的表格。

（3）调整表格各栏的高度和宽度，部分单元格需要合并。

（4）在单元格中设置字体、字号、字形、颜色和大小等，根据需要添加超链接和列表标记点。

（5）插入图片或其他图片，调整图片大小，固定的约束比及宽高。

（6）输出为html文件，用浏览器打开即可。

详解：首先建一个文件夹命名，比如命名为个人简历，然后把需要编写的html文件放在这个文件夹下，再重新建一个文件夹image放入所需照片。这样做的目的是方便查找，不会因为照片路径不同什么的再做困扰，整个文件夹就是一个单独的小空间。

然后是软件方面，其实用什么软件都无所谓的，只要能编html就行。

接下来是代码，里边的数据什么可以根据个人想要的效果加以改动。刚学这东西，希望大佬们不要见笑。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 750px;
           
            border-collapse: collapse;
            padding: 20px 20px;
        }
        
        tr :hover{
            background-color: #f5f5f5;
        }
        
         ul {
            list-style-position: outside;
        }
        
        caption {
            padding: 40px ;
        }
        td {
            height: 50px;
        }
        .igg {
            background-image: url("image/369.jpg");
            background-size: cover;
            background-position: center;
            width: 175px;
            height: 200px;
        }
        
    </style>
</head>
<body>
    <table  border="2" align="center" >
        <caption><strong>个人简历样表</strong></caption>
        <tbody>
            <tr align="center">
                <td><strong>姓名</strong></td>
                <td>小A</td>
                <td><strong>出生日期</strong></td>
                <td>2001.07.08</td>
                <td><strong>性别</strong></td>
                <td>女</td>
                <td><strong>籍贯</strong></td>
                <td>****</td>
               
            </tr>
            <tr align="center">
                <td><strong>学历</strong></td>
                <td>**</td>
                <td><strong>毕业院校</strong></td>
                <td>******</td>
                <td><strong>专业</strong></td>
                <td colspan="3">***</td>
            </tr>
            <tr align="center">
                <td ><strong>联系地址</strong></td>
                <td colspan="7">*************</td>
            </tr>
            <tr>
                <td align="center"><strong>格言</strong></td>
                <td colspan="7">
                    <p>
                    大地丰盈，人间并不寂寥。 
                    </p>
                </td>
            </tr>
            <tr>
                    <td align="center"><strong>信息</strong></td>
                    <td colspan="6" >
                        <ul>
                            <li>电话：4567891562</li>
                            <li>
                                邮件地址：
                                <a href="#" target="_blank">789456214@qq.com</a>
                            </li>
                            <li>QQ：7895546955</li>
                        </ul>
                    </td>
                    <td rowspan="5" class="igg"></td>
            </tr>
            <tr>
                <td align="center"><strong>备注</strong></td>
                <td colspan="6">
                    <ul>
                        <li>个人主页：<a href="#" target="_blank">https://aiwe.com.edu/</a></li>
                        <li>本班同学名单：<a href="#" target="_blank">www.sudia.com.cn/</a></li>
                    </ul>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

这是展示图：