使用html和css创建静态网页版的个人简历

2024-03-22 19:32:58
个人学习过程的记录之静态网页简历制作。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>张三的简历</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        
        .page {
            margin-top: 50px;
            margin-left: 200px;
            background-color: white;
            border: 2px solid lightblue;
            height: 1200px;
            width: 900px;
        }
        
        .left {
            margin-top: 20px;
            background-color: #F9F9F9;
            height: 1050px;
            width: 225px;
        }
        
        h3 img {
            width: 25px;
            height: 25px;
        }
        
        .i1 {
            height: 120px;
            widows: 100px;
            margin-top: 20px;
            margin-left: 50px;
        }
        
        .right {
            margin-left: 245px;
            width: 630px;
            height: 730px;
            margin-top: -1035px;
        }
        
        .s1 {
            font: 400 12px 宋体;
            color: #239AD6;
            width: 50px;
            height: 20px;
            border-radius: 28%;
            background-color: #DFF5F6;
            line-height: 20px;
            margin-top: 10px;
        }
        
        h3 {
            vertical-align: middle;
        }
        
        .name {
            font: 700 25px 宋体;
            margin-top: 20px;
            margin-left: 75px;
        }
        
        .sex {
            font: 400 20px;
            margin-top: 8px;
            margin-left: 98px;
        }
        
        h2 {
            font: 400 15px 微软雅黑;
            margin: 10px 20px;
        }
        
        .contact {
            font: 400 14px 微软雅黑;
            margin-top: 15px;
            line-height: 25px;
            /*定义行间距 */
        }
        
        .base {
            margin-left: 20px;
        }
        
        .base dt {
            padding-top: 15px;
        }
        
        .base dd {
            padding-top: 8px;
            font: 400 15px 微软雅黑;
        }
        
        .right dt {
            padding-top: 15px;
        }
        
        .judge {
            font: 400 13px 微软雅黑;
            margin-top: 10px;
        }
        
        .right dd {
            margin-left: 22px;
            font: 400 15px 微软雅黑;
            line-height: 25px;
            color: #332e3d;
            padding-top: 5px;
        }
        
        .school p {
            font: 700 17px 微软雅黑;
        }
        
        .school p span {
            font: 400 10px 微软雅黑;
            color: #ACB3C2;
            margin-left: 10px;
        }
        
        .ec {
            font: 700 15px 微软雅黑;
        }
        
        .xiaohui {
            width: 60px;
            height: 50px;
            margin-left: 590px;
        }
        
        .grade {
            margin-top: -25px;
        }
        
        .use {
            margin-top: -45px;
        }
    </style>
</head>

<body>
    <div class="page">
        <div class="left">
            <img class="i1" src="zhangsan.jpg" alt="">
            <p class="name">张三</p>
            <p class="sex">男</p>
            <h2>求职意向：Java开发工程师</h2>
            <dl class="base">
                <p class="contact">手机 &nbsp&nbsp 123-3454-3980<br>邮箱 &nbsp&nbsp zhangsan@163.com</p>
                <dt><h3><img src="base.jpg" alt="">基本信息</h3></dt>
                <dd>居住地 某省 某市 某区</dd>
                <dd>政治面貌 共青团员</dd>
                <dd>民族 汉族</dd>
                <dt><h3><img src="bility.jpg" alt="">职业技能</h3></dt>
                <dd>JAVA语言 熟练</dd>
                <dd> c语言 熟练</dd>
                <dd>SQL 熟练</dd>
                <dd>HTML 掌握</dd>
                <dd>css 掌握</dd>
                <dd>C++ 熟练</dd>
                <dt><h3><img src="hobby.jpg" alt="">兴趣爱好</h3></dt>
                <dd>读书</dd>
                <dd>唱歌</dd>
            </dl>
        </div>
        <div class=right>
            <dl>
                <dt><h3><img src="selfjudge.jpg" alt="">自我评价</h3></dt>
                <dd class="judge">求职意向：Java开发工程师<br>4个相关项目经验，熟悉JAVA SpringBoot，MySQL和前端框架技术 有较好 的编程基础，有较强的分析、组织和解决问题的能力 有快速学习能力和较高 承压能力。
                </dd>
                <dt> <h3><img src="education.jpg" alt="">教育背景</h3></dt><img class="xiaohui" src="校徽.jpg" alt="">

                <dd class="school">
                    <p class="use">中国某某大学<span>2018-09 至 2022-06</span></p>
                </dd>

                <dd class="grade">计算机学院 软件工程 本科 4.7/5.0（专业前5％）</dd>
                <dd><span class="ec">教育经历：</span></dd>
                <dd>国家励志奖学金（2019.2020）<br>校级优秀共青团*（2019.5.4）<br>优秀学生*（2019.12,2020.12）<br>三好学生（2020.12）</dd><br>
                <dd>
                    <span class="ec">相关课程：</span>
                    <span> JAVA程序设计 / 数据结构 / 数据库原理与应用 / 计算机组成原 理 / 操作系统 / 计算机网络 / 离散数学 / 软件建模技术 / 面向对象程序设计 / 概率论与数理统计 / 数字逻辑</span>
                </dd>

                <dt> <h3><img src="school.jpg" alt="">在校经历</h3></dt>
                <div class="s1">社团经历</div>
                <dd class="school">
                    <p>新闻协会<span>2019-11 至 2020-10</span></p>
                </dd>
                <dd>宣传部部长</dd>
                <dd>担任新闻协会宣传部部长，设计宣传海报和书签，协会举办的活动在校园内 累计参加人次超过3000人。 </dd>
                <div class="s1">学生职务</div>
                <dd class="school">
                    <p>班长<span>2018-09 至今</span></p>
                </dd>
                <dd>担任班长一职 ，多次组织班级活动，与同学沟通顺利，协作融洽，在班级收 到不错的反响，并获得优秀学生*荣誉。
                </dd>
                <div class="s1">奖学金</div>
                <dd class="school">
                    <p>国家励志奖学金<span>2020-11</span></p>
                </dd>
                <dt><h3><img src="zhengshu.jpg" alt="">资格证书</h3></dt>
                <dd class="school">
                    <p>CET-6</p>
                </dd>
                <dd>能够熟练阅读英文的专业技术文档</dd>
            </dl>
        </div>
    </div>
</body>

</html>
效果图
码农公寓

相关文章
