网页设计个人简介

本文转载自查看原文 2019-03-14 19:02 1252

代码链接:https://gitee.com/hujunc/codes/jz4m3kbpwhqyle982gicx90

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人简历</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul{
           list-style: none;
        }
        div{
        text-align: center;
        line-height: 100px;
        }
        .backg{
            width: 1000px;
            height: 1000px;
            position: relative;
            left:0;
            top:0;
            margin: 50px auto;
            /*border:2px solid red;*/
        }
        .left{
            width:30%;
            height: 100%;
            background-color: black;
            font-size: 18px;
            font-weight: bold;
            color: white;
            line-height: 50px;
            position:absolute ;
            left:0;
            top:0;
            /*border: dashed 2px red;*/
        }

         .l1{
            width:300px;
            height:10%;
            float:left;
            background-color: green;
            left:0;
            top:0px;
            border: 1px solid red;
        }
        .l2{
            width:300px;
            height:10%;
            float:left;
            background-color: green;
            left:0;
            top:100px;
            border: 1px solid red;
        }
        .l3{
            width:300px;
            height:10%;
            float:left;
            background-color: green;
            left:0;
            top:200px;
            border: 1px solid red;
        }
        .l4{
            width:300px;
            height:10%;
            float:left;
            background-color: green;
            left:0;
            top:300px;
            border: 1px solid red;
        }
        .l5{
            width:300px;
            height:10%;
            float:left;
            background-color: green;
            left:0;
            top:400px;
            border: 1px solid red;
        }
        .l6{
            width:300px;
            height:10%;
            float:left;
            background-color:green;
            left:0;
            top:500px;
            border: 1px solid red;
        }
        .l7{
            width:300px;
            height:10%;
            float:left;
            background-color: green;
            left:0;
            top:600px;
            border: 1px solid red;
        }
        .l8{
            width:300px;
            height:10%;
            float:left;
            background-color: green;
            left:0;
            top:700px;
            border: 1px solid red;
        }
        .l9{
            width:300px;
            height:10%;
            float:left;
            background-color:green;
            left:0;
            top:800px;
            border: 1px solid red;
        }
        .l10{
            width:300px;
            height:10%;
            float:left;
            background-color: green;
            left:0;
            top:900px;
            border: 1px solid red;
        }
        .right {
            width:70%;
            height: 100%;
            /*border: dashed 1px green;*/
            position: absolute;
            left:300px;
            top:0;
        }
        .r1{
            width:700px;
            height:204px;
            float:left;
            background-color: peru;
            left:0;
            top:0px;
            border: 1px solid red;
        }
        .r3{
            float:left;
            width:700px;
            height:102px;
            background-color: peru;
            position: absolute;
            left: 0;
            top:204px;
            border: 1px solid red
        }
        .r4{
            float:left;
            width:700px;
            height:102px;
            background-color: peru;
            position: absolute;
            left: 0;
            top:306px;border: 1px solid red
        }
        .r5{
            float:left;
            width:700px;
            height:102px;
            background-color: peru;
            position: absolute;
            left: 0;
            top:408px;border: 1px solid red
        }
        .r6{
            float:left;
            width:700px;
            height:204px;
            background-color: peru;
            position: absolute;
            left: 0;
            top:510px;border: 1px solid red
        }
        .r8{
            float:left;
            width:700px;
            height:102px;
            background-color: peru;
            position: absolute;
            left: 0;
            top:714px;border: 1px solid red
        }
        .r9{
            float:left;
            width:700px;
            height:102px;
            background-color: peru;
            position: absolute;
            left: 0;
            top:816px;border: 1px solid red
        }
        .r10{
            float:left;
            width:700px;
            height:102px;
            background-color: peru;
            position: absolute;
            left: 0;
            top:918px;border: 1px solid red
        }
        .backg .right img{
            width:172.5px;
            height:230px;
            float:left;
            margin-top:0;

}

        .backg .right .r1 div{
            width:172.5px;
            height: 230px;
            float:left;
            background: #8A2BE2;
            border: 1px solid red;

        }
        .backg .right .r1 div div{
            width:172.5px;
            height: 100px;
            float:left;
            background: #8A2BE2;
            border: 1px solid red;

        }
        .r61{
        width:393px;
            height: 230px;
            float:left;
            background: #8A2BE2;
            border: 1px solid red;
        }
        .r61 div{
        width:393px;
            height: 100px;
            float:left;
            background: #8A2BE2;
            border: 1px solid red;
        }
        .r62{
        width:100px;
            height: 230px;
            float:left;
            background: #8A2BE2;
            border: 1px solid red;
        }
        .r63{
        width:200px;
            height: 230px;
            float:left;
            background: #8A2BE2;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<h1 align="center">个人简介</h1>
<div class="backg" align="absbottom">
    <div class="left">
        <div class="l1">
        姓名
        </div>
        <div class="l2">
        曾用名
        </div>
        <div class="l3">
        家庭出身
        </div>
        <div class="l4">
        籍贯
        </div>
        <div class="l5">
        现在家庭住址详细地址确切地址
        </div>
        <div class="l6">
        现在任职
        </div>
        <div class="l7">
        家庭收入来源
        </div>
        <div class="l8">
        身份
        </div>
        <div class="l9">
        受过的处分严重轻微以及从小到大所受到的处分
        </div>
        <div class="l10">
        是否结婚，是否生子，是否有房有车有贷款
        </div>
    </div>
    <div class="right">
        <div class="r1">
        <div>
          <div>胡俊驰</div>
          <div>胡俊驰</div>
        </div>
        <div>
          <div>性别</div>
          <div>出生年月</div>
        </div>
        <div>
          <div>男</div>
          <div>2000-6-11</div>
        </div>
        <div>
          <img src="img/1.jpg" />
        </div>
        </div>
        <div class="r3">
        经商
        </div>
        <div class="r4">
        湖北省仙桃市
        </div>
        <div class="r5">
        湖北省仙桃市杨林尾镇古阳村一组3号
        </div>
        <div class="r6">
        <div class="r61">
          <div>学生</div>
          <div>经商</div>
        </div>
        <div class="r62">本人<br />身体状况</div>
        <div class="r63">良好没有任何<br />身体异常之处</div>
        </div>
        <div class="r8">普通学生</div>
        <div class="r9">未受过<br />任何处分啊</div>
        <div class="r10">未结婚生子没房没车有贷款</div>
    </div>
</div>
<footer>
<a href="#">回到顶部</a>
</footer>
</body>
</html>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 Java swing 界面设计个人简介（上）个人简介 HTML个人简介谢启鸿个人简介 HTML个人简介【郎凤娥专题】郎凤娥个人简介如何设计个人网页网页设计的标准尺寸对网页设计的个人理解网页设计与制作