.net课后练习-html制作一个个人简历

最新推荐文章于 2022-11-17 10:30:00 发布

z_open

最新推荐文章于 2022-11-17 10:30:00 发布

阅读量1.3k

点赞数 2

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.csdn.net/z_open/article/details/101564947

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

html制作一个个人简历

分为三个模块header、content、footer和属性控制style
header包含：个人简历、头像、求职意向
content包含：一个基本信息表
footer包含：一个版本权的说明

header模块
img中src是图片的相对路径；title当鼠标放在图片上时，可显示说明；alt可在图片加载失败时显示文字；width/height控制图片大小。

    <div class="header">
        <h2>个人简历</h2>
        <hr>
        <img src="素材存放/Pictures/头像.jpg" title="本人一寸照片" alt="图片不见了" width="200" height="200">
        <p>叶殇同学</p>
        <p style="color:red">求职意向：软件开发</p>
    </div>

content模块
此模块内放入的是一个表
border="1"是画出表
tr是控制行数
td是控制行内列数
rowspan="5"是合并5行（包含本身的五个格子）
colspan="4"colspan="4"是合并5列（包含本身的五个格子）
a href=“链接”>需要连接的文字来控制连接
ol是有序列表标记
ul是无序列表标记
li是添加列表项目
video视频标签

<div class="content">
        <table border="1" width=800>
            <tr>
                <td rowspan="5" class="head">基本信息</td>
                <td class="con">姓名</td>
                <td class="con">叶殇</td>
                <td class="con">出生年月</td>
                <td class="con">1998.03</td>
            </tr>
            <tr>
                <td>年龄</td>
                <td>21</td>
                <td>政治面貌</td>
                <td>团员</td>
            </tr>
            <tr>
                <td class="con">学历</td>
                <td class="con">本科</td>
                <td class="con">籍贯</td>
                <td class="con">河南郸城</td>
            </tr>
            <tr>
                <td>电话</td>
                <td>15072450939</td>
                <td>邮箱</td>
                <td><a
                        href="https://mail.qq.com/cgi-bin/frame_html?sid=7X9POq5TSBKfMUca&r=6050c7c2104dddb4c70e8c841b4b4d56">1985647762@qq.com</a>
                </td>
            </tr>
            <tr>
                <td class="con">毕业院校</td>
                <td class="con" colspan="3"><a href="http://www.wust.edu.cn">武汉科技大学计算机学院</a></td>
            </tr>
            <tr>
                <td class="head">专业技能</td>
                <td colspan="4" class="lli">
                    <ul>
                        <li>语言类：CET4、6</li>
                        <li>
                            软件类：
                            <ol type="1" start="1">
                                <li>前端开发（html5/css3/js等）</li>
                                <li>移动开发（Android方向）</li>
                                <li>Web开发（asp.net）</li>
                            </ol>
                        </li>
                        <li>荣誉类：
                            <ol>
                                <li>特等奖学金</li>
                                <li>校级优秀人才</li>
                                <li>拔尖人才</li>
                            </ol>
                        </li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td class="head">个人风采</td>
                <td colspan="4">
                    <video src="素材存放\viode\《崩坏3》.mp4" width="300" height="200" controls="controls">
                        你的浏览器不支持video元素
                    </video>
                    <video src="素材存放\viode\QQ视频.mp4" width="300" height="200" controls="controls">
                        你的浏览器不支持video元素
                    </video>
                </td>
            </tr>
        </table>
    </div>

属性控制style

<style>
        div {
            text-align: center;
        }

        .header {
            background-color: lightblue;
            border-radius: 10px;/* 模块边角设置成圆滑的 */
            height: 360px;
        }

        .header h2 {
            padding: 10px;/* 设置内边距属性 */
            margin: 0px;
        }

        .header img {
            border-radius: 50%;/* 头像设置成圆形 */
        }

        .content {
            background-image: url(素材存放/Pictures/背景1.jpg);/* 加载本地图片设置成背景图 */
            background-repeat: no-repeat;
            background-size: 100%;/* 适应content模块大小 */
            border-radius: 10px;
            padding: 10px;
        }
        
        .content table {
            border-collapse: collapse;/* 边框合并成一条线 */
            width: 100%;
        }

        td.lli {
            text-align: left;/* 左对齐 */
        }

        td.head {
            background-color: darkgray;
        }

        td.con {
            background-color: aliceblue;
        }

        .footer {
            background-color: lightblue;
            border-radius: 10px;
            padding: 5px;
        }
    </style>

页面布局代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人简介</title>
    <style>
        div {
            text-align: center;
        }

        .header {
            background-color: lightblue;
            border-radius: 10px;/* 模块边角设置成圆滑的 */
            height: 360px;
        }

        .header h2 {
            padding: 10px;/* 设置内边距属性 */
            margin: 0px;
        }

        .header img {
            border-radius: 50%;/* 头像设置成圆形 */
        }

        .content {
            background-image: url(素材存放/Pictures/背景1.jpg);/* 加载本地图片设置成背景图 */
            background-repeat: no-repeat;
            background-size: 100%;/* 适应content模块大小 */
            border-radius: 10px;
            padding: 10px;
        }
        
        .content table {
            border-collapse: collapse;/* 边框合并成一条线 */
            width: 100%;
        }

        td.lli {
            text-align: left;/* 左对齐 */
        }

        td.head {
            background-color: darkgray;
        }

        td.con {
            background-color: aliceblue;
        }

        .footer {
            background-color: lightblue;
            border-radius: 10px;
            padding: 5px;
        }
    </style>
</head>

<body>
    <div class="header">
        <h2>个人简历</h2>
        <hr>
        <img src="素材存放/Pictures/头像.jpg" title="本人一寸照片" alt="图片不见了" width="200" height="200">
        <p>叶殇同学</p>
        <p style="color:red">求职意向：软件开发</p>
    </div>
    <div class="content">
        <table border="1" width=800>
            <tr>
                <td rowspan="5" class="head">基本信息</td>
                <td class="con">姓名</td>
                <td class="con">叶殇</td>
                <td class="con">出生年月</td>
                <td class="con">1998.03</td>
            </tr>
            <tr>
                <td>年龄</td>
                <td>21</td>
                <td>政治面貌</td>
                <td>团员</td>
            </tr>
            <tr>
                <td class="con">学历</td>
                <td class="con">本科</td>
                <td class="con">籍贯</td>
                <td class="con">河南郸城</td>
            </tr>
            <tr>
                <td>电话</td>
                <td>15072450939</td>
                <td>邮箱</td>
                <td><a
                        href="https://mail.qq.com/cgi-bin/frame_html?sid=7X9POq5TSBKfMUca&r=6050c7c2104dddb4c70e8c841b4b4d56">1985647762@qq.com</a>
                </td>
            </tr>
            <tr>
                <td class="con">毕业院校</td>
                <td class="con" colspan="3"><a href="http://www.wust.edu.cn">武汉科技大学计算机学院</a></td>
            </tr>
            <tr>
                <td class="head">专业技能</td>
                <td colspan="4" class="lli">
                    <ul>
                        <li>语言类：CET4、6</li>
                        <li>
                            软件类：
                            <ol type="1" start="1">
                                <li>前端开发（html5/css3/js等）</li>
                                <li>移动开发（Android方向）</li>
                                <li>Web开发（asp.net）</li>
                            </ol>
                        </li>
                        <li>荣誉类：
                            <ol>
                                <li>特等奖学金</li>
                                <li>校级优秀人才</li>
                                <li>拔尖人才</li>
                            </ol>
                        </li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td class="head">个人风采</td>
                <td colspan="4">
                    <video src="素材存放\viode\《崩坏3》.mp4" width="300" height="200" controls="controls">
                        你的浏览器不支持video元素
                    </video>
                    <video src="素材存放\viode\QQ视频.mp4" width="300" height="200" controls="controls">
                        你的浏览器不支持video元素
                    </video>
                </td>
            </tr>
        </table>
    </div>
    <div class="footer">
        <p>版权所有&copy2019.9</p>
    </div>
</body>

</html>

个人简介

基本信息	姓名	叶殇	出生年月	1998.03
	年龄	21	政治面貌	团员
	学历	本科	籍贯	河南郸城
	电话	15072450939	邮箱	1985647762@qq.com
	毕业院校	武汉科技大学计算机学院
专业技能	语言类：CET4、6 软件类：前端开发（html5/css3/js等）移动开发（Android方向） Web开发（asp.net）荣誉类：特等奖学金校级优秀人才拔尖人才
个人风采	你的浏览器不支持video元素你的浏览器不支持video元素

z_open

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
.net课后练习-html制作一个个人简历

html制作一个个人简历分为三个模块header、content、footer和属性控制styleheader包含：个人简历、头像、求职意向content包含：一个基本信息表footer包含：一个版本权的说明header模块img中src是图片的相对路径；title当鼠标放在图片上时，可显示说明；alt可在图片加载失败时显示文字；width/height控制图片大小。 <...
复制链接

扫一扫