zoukankan      html  css  js  c++  java
  • 个人名片的网页

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>个人简介</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style>
    .content{
    90%;
    height: 800px;
    /**/
    }
    .information{
    float: left;
    }
    .personal{
    float: right;
    }
    .information div:nth-child(1){
    60px;
    height: 40px;
    color: blue;
    font-size: xx-large;
    }
    .btnleft{
    /*float: left;*/
    margin-top: 60px;
    400px;
    height: 320px;
    background-color: #dd4916;
    }
    .btnleft:hover{
    border:1px solid grey;
    }
    .text1{
    /*border-style: none;*/
    margin-top: 20px;
    border: 1px solid grey;
    text-align: center;
    90%;
    opacity: 0.6;
    }
    </style>

    </head>
    <body>
    <div class="container content">

    <div>
    <div class="top">
    <div class="information">
    <div>Terry&nbspJee</div>
    <div><span class="glyphicon glyphicon-paperclip" aria-hidden="true"></span>前端工程师&&UI设计师</div>
    </div>
    <div class="personal">
    <div><span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span>7652389718@qq.com</div>
    <div><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>15463748346</div>
    <div><span class="glyphicon glyphicon-search" aria-hidden="true"></span>成都市两河场抚顺街</div>
    <img src="img/logo.png" alt="加载失败"/>
    </div>
    </div>
    <div class="btnleft">
    <div class="">
    <br/><br/><br/>
    <div>个人技能</div>
    <div>HTML/CSS/Javascript</div>
    <div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style=" 60%;">
    60%
    </div>
    </div>
    <div>Java/J2EE</div>
    <div class="progress">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style=" 60%;">
    60%
    </div>
    </div>
    <div>MYSQL</div>
    <div class="progress">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style=" 80%;">
    80%
    </div>
    </div>
    <div>Photoshop/UI</div>
    <div class="progress">
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style=" 70%;">
    70%
    </div>
    </div>
    </div>
    </div>
    <div class="btnright"></div>
    <div class="text1 container">焦点距离
    .基本上是从镜头到胶片上所形成的清晰影像距离。
    .焦点越大,所形成的影像越大焦点距离
    .基本上是从镜头到胶片上所形成的清晰影像距离。
    .焦点越大,所形成的影像越大焦点距离
    .基本上是从镜头到胶片上所形成的清晰影像距离。
    .焦点越大,所形成的影像越大焦点距离
    .基本上是从镜头到胶片上所形成的清晰影像距离。
    .焦点越大,所形成的影像越大</div>
    </div>

    </div>

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    </body>
    </html>
  • 相关阅读:
    《研磨设计模式》阅读摘要
    心电图
    nodejs
    自动化测试
    Hook技术
    热修复原理
    理解ClassLoader
    Dalvik和ART
    Java虚拟机
    理解WindowManagerService
  • 原文地址:https://www.cnblogs.com/shujie/p/7074106.html
Copyright © 2011-2022 走看看