網頁設計個人簡介

本文轉載自查看原文 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個人簡介【郎鳳娥專題】郎鳳娥個人簡介如何設計個人網頁網頁設計的標准尺寸對網頁設計的個人理解網頁設計與制作