使用HTML+CSS设计个人简历

使用HTML+CSS设计个人简历

  • 效果展示
  • 代码实现

效果展示

使用HTML+CSS设计个人简历_第1张图片

代码实现

resume.html

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简历title>
    <link href="../css/resume-css.css" rel="stylesheet" type="text/css">
head>
<body>
    <div class="box">
        <div class="left-box">
            <div class="me-img">
                <img src="../imgs/head.png">
                <h4>bennetth4>
                <h6>工作意向:Java全栈h6>
            div>
            <hr>
            <div class="basic-information">
                <h6>名族:汉族h6>
                <h6>现居:陕西西安h6>
                <h6>籍贯:甘肃兰州h6>
                <h6>电话:15594497111h6>
                <h6>邮箱:[email protected]h6>
                <h6>政治面貌:党员h6>
            div>
            <hr>
            <div class="honor-award">
                <table border="1px">
                    <tr>
                        <th>荣誉奖励th>
                    tr>
                table>

                <h6>获得校二等奖奖学金;h6>
                <h6>全国计算机等级三级证书;h6>
                <h6>全国英语六级;h6>

            div>
        div>
        <div class="right-box">
            
            <div class="self-assessment">
                <h4>自我评价h4>
               <p>       我为人友善、真诚,做事细致、专注,有很强的责任心,学习能力与适应能力强,
                    喜欢与他人交谈,热爱生活。最显著的性格标签是认真,有着沉静内敛、善于思
                    考和研究的特质,作为本硕皆为新闻学专业的文科生,与文字为伴多年,文字功
                    底扎实,文字编辑、把关、策划能力强,想要以文字工作为基础,加入向往已久
                    的互联网行业。
                p>
            div>
            
            <div class="professional-skills">
                <h4>专业技能h4>
                <ol>
                    <li>熟悉Java语言,有web项目开发经验;li>
                    <li>熟练使用JSP和Servlet;li>
                    <li>熟悉常用Java web项目开发框架:MyBatis、Spring、SpringMVC;li>
                    <li>熟悉MySQL数据库;li>
                    <li>有良好的文档编写习惯和沟通能力;li>
                ol>

            div>
            
            <div class="project-practice">
                <h4>项目实践h4>
                <h6>    大一h6>
                <ol>
                    <li>xxxxxli>
                    <li>xxxxxli>
                ol>
                <h6>    大二h6>
                <ol>
                    <li>xxxxxli>
                    <li>xxxxxli>
                ol>
                <h6>    大三h6>
                <ol>
                    <li>xxxxxli>
                    <li>xxxxxli>
                ol>
            div>
        div>
    div>
body>
html>

resume-css.css

html,body {
    margin: 0px;
    padding: 10px;
    }
.box{
    margin:0px auto; /*将div盒子居中*/
    width:595px;
    height:842px;
    background-color: blue;
    }
/*左侧内容*/
.left-box{
    background-color: #D9DADE;
    width: 33%;
    height: 100%;
    float:left;"
    }
.me-img{
    /*background-color: blue;*/
    text-align:center;
    margin-left:20%;
    width:60%;
    height:40%;
    }
.me-img img{
    margin-top:120px;
    width:110px;
    height:100px;
    }
.basic-information{
   /*background-color: blue;*/
    margin-left:30px;
    }
.honor-award{  /*荣誉奖励*/
    /*background-color: blue;*/
    margin:0px auto;
    margin-left:30px;
    width:80%;
    }
.honor-award table{
    margin-left:30px;
    }
 /*右侧内容*/
.right-box{
    background-color: #F0F0F0;
    width: 67%;
    height: 100%;
    float:right;
    }
.self-assessment{
    /*background-color: blue;*/
    padding-top:120px;
    margin-left:10px;
    margin-right:20px;
    }
.self-assessment p{
    font-size:10px;
    margin-left:30px;
    }
.professional-skills{
    /*background-color: blue;*/
    margin-left:10px;
    }
.professional-skills ol{
    /*background-color: blue;*/
   /* margin-left:10px;*/
    font-size:12px;
    }
.project-practice{
    background-color: blue;
    margin-left:10px;
    }

你可能感兴趣的:(前端三剑客,html,html5,css)