使用html和css制作静态网页版的个人简历

本文介绍: 使用 html和css 制作静态网页版的个人简历以上就是我写的简单的网页个人简历内容。

目录

前言

代码段：

css代码：

html代码：

效果图：

总结

前言

使用html和css制作静态网页版的个人简历

代码段：

css 代码：

body                               /*定义body样式*/
{
    border:#CCCC00 3px solid;
    margin:0 auto;                 /*边框颜色，大小实线*/
    margin-top:100px;              /*顶部边框大小*/
    margin-bottom:100px;           /*底部边框大小*/
    width:60%;
    height:1300px;
    padding:10px;
}
table                     /*定义table样式*/
{
    border-style: none;
    border-color: inherit;/*表格边框样式，颜色宽度*/
    border-width: 5px;
    width:100%;
    height:10%;
    padding:5px;          /*表格边距为5px*/
}
.h2                         /*定义h2样式*/
{
    color: #000000; background-color: #CCCC00;/*颜色黑色，背景颜色为橙黄*/
}
.style1                     /*class为style1的样式，字体大小为large，字体颜色为橙黄*/
{
    font-size: large;
    color: #CCCC00;
}
.style2
{
    color: #CCCC00;        /*class为style2的样式，字体颜色为橙黄*/
}
.style3                    /*class为style3的样式，宽度为500px，高度为240px*/
{
    width: 500px;
    height: 240px;
}
.style4                    /*class为style4的样式，宽度为1500px，高度为50px*/
{
    width: 1500px;
    height: 50px;
}
.style5                    /*class为style5的样式，字体类型为黑体*/
{
    font-family: 黑体;
}
.style6                    /*class为style6的样式，宽度为250px，高度为10px，子团体类型为黑体*/
{
    width: 250px;
    font-family: 黑体;
    height: 10px;
}

html 代码：

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>个人简历</title>
    <link href="StyleSheet.css"  rel="Stylesheet" type="text/css"/> 
</head>
<body style="height:1300; width: 1000px" >
    <h1><span class="style2">个人简历 </span> <span class="style1">Personal resume</span></h1>
    <h2 style="background-color: #CCCC00">基本信息</h2>
    <table class="style4">
        <tr>
            <td class="style6">
                姓名：bob</td>
            <td class="style6">
                出生年月：2001.09</td>
            <td class="style3" rowspan="5">
                <img alt="" src="bob.jpg"                     
                    style="height: 150px; width: 150px; text-align: justify;" /></td>
        </tr>
        <tr>
            <td class="style6">
                民族：汉</td>
            <td class="style6">
                身高：100cm</td>
        </tr>
        <tr>
            <td class="style6">
                电话：666666</td>
            <td class="style6">
                政治面貌：群众</td>
        </tr>
        <tr>
            <td class="style6">
                邮箱：88@88.com</td>
            <td class="style6">
                毕业院校：格鲁大学</td>
        </tr>
        <tr>
            <td class="style6">
                住址：格鲁公寓</td>
            <td class="style6">
                学历：本科</td>
        </tr>
    </table>
    <h2 style="color: #000000; background-color: #CCCC00">教育背景</h2>
    <p class="style5">
        2015.09-2018.06&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 格鲁大学&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
        物联网工程</p>
    <p class="style5">
        主修课程：</p>
    <p class="style5">
        计算机网络、离散数学、计算机组成原理、数据结构、C语言、操作系统、java程序设计、数据库、单片机等。</p>
    <h2 style="background-color: #CCCC00">实习经历</h2>
    <p class="style5">2018-04至今&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
        德鲁科技有限公司&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
        嵌入式开发工程师</p>
    <p class="style5">
        <span style="color: rgb(18, 18, 18); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">
        负责在操作系统的上层即应用层，利用操作系统提供的各种API或由API封装而来的库函数做各种各样的应用，实现嵌入式系统的功能。</span></p>
    <p class="style5">2015.03-2017.03&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
        格鲁科技有限公司&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
        软件工程师</p>
    <p class="style5">
        <span style="color: rgb(51, 51, 51); font-family: 黑体; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;line-height:30px;">
        1.基于单片机及飞思卡尔平台开发产品；2.独立完成需求分析、软件设计工作；3.负责独立完成软件系统代码的实现，编写代码，调试，测试等；4.负责嵌入式产品的应用开发，解决在产品使用中遇到的各种问题，并进行总结与改进。</span></p>
    <h2 style="background-color: #CCCC00">校园经历</h2>
    <p class="style5">2016.03-2017.06&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
        格鲁大学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
        <span style="color: rgb(51, 51, 51); font-family: 黑体; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: -webkit-left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">
        宣布鲍勃变法</span></p>
    <p class="style5">2015.09-2016.03&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
        格鲁大学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
        坏蛋俱乐部部长</p>
    <h2 style="background-color: #CCCC00">技能证书</h2>
    <p style="font-family: 黑体">小黄人语言一级；</p>
    <p style="font-family: 黑体">大学英语八级；</p>
    <p style="font-family: 黑体">计算机四级。</p>
    <h2 style="background-color: #CCCC00">自我评价</h2>
    <p><span style="color: rgb(51, 51, 51); font-family: 黑体; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: -webkit-left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">
        <span style="color: rgb(51, 51, 51); font-family: 黑体; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: -webkit-left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">
        找主人的小黄人；</span></span></p>
    <p style="letter-spacing: normal; color: #333333; font-family: 黑体; background-color: #FFFFFF">
        自信，开朗，友好，积极向上；</p>
    <p style="font-family: 黑体">爱哭，爱笑，爱吃香蕉；</p>
    <p><span style="color: rgb(51, 51, 51); font-family: 黑体; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: -webkit-left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">
        励志当大英帝国的国王。</span></p>
</body>
</html>