登录模块、个人简历

最新推荐文章于 2024-09-07 13:38:28 发布

LastNever�。

最新推荐文章于 2024-09-07 13:38:28 发布

阅读量760

点赞数

分类专栏：学生文章标签： javascript jquery html css

本文链接：https://blog.csdn.net/xff12306/article/details/100573533

版权

学生专栏收录该内容

3 篇文章 0 订阅

订阅专栏

百度登录注册

(1)html部分

<html>
    <head>
        <title>登录注册</title>
        <meta http-equiv="Content-Type" content="html/text" charset="utf-8"/>
        <link href="reg.css" rel="styleSheet" type="text/css"/>
        <script src="./reg.js">
        </script>
    </head>
    <body>
        <div class="tabs" id="container">
            <div class="tab-nav">
                <ul class="navBar">
                    <li id="denglu"style="float: left">注册</li>
                    <li id="zhuce"style="float: right">登录</li>
                </ul> 
            </div>
            <div class="tab-content">
                <div class="tab-content-box active" >
                    <form method="GET" style="margin-left: 100px">
                        <img src="https://passport.baidu.com/static/passpc-base/img/logo/baidu.gif"/><font style="font-size: 22px;">  注册百度账号</font><br/>
                        <label for="username">用户名</label>
                        <input type="text" id="username" value placeholder="请设置用户名"/><br/>
                        <label for="iphone">手机号</label>
                        <input type="text" id="iphone" value placeholder="可用于登录和找回密码"/><br/>
                        <label for="password">密&nbsp;&nbsp;&nbsp;&nbsp;码</label>
                        <input type="text" id="password"  style="margin: 10px 15px 10px 13px;"value placeholder="请设置登录密码"/><br/>
                        <label for="yanzheng">验证码</label>
                        <input type="text" id="yanzheng"  style="width:150px;" value placeholder="请输入验证码"/>
                        <input  class="yanzhengma" type="button" style="width:132px;height: 40px;" value="获取短信验证码"/><br/>
                        <input type="checkbox" autocomplete="off" style="margin-left: 70px">&nbsp;&nbsp;阅读并接受《<font color=#2e82ff >百度用户协议</font>》及《<font color=#2e82ff>百度隐私权保护声明</font>》<br/>
                        <input type="submit" value="注册"  /><br/>
                    </form>
                </div>
                <div class="tab-content-box" >
                    <form method="GET" style="margin-left: 100px">
                        <img src="https://passport.baidu.com/static/passpc-base/img/logo/baidu.gif"/><font style="font-size: 21px;">用户密码登录</font><br/>
                        <input type="text" value placeholder="手机/邮箱/用户名"/>
                        <input type="text" value placeholder="密码"/><br/>
                        <input style="margin-left: 20px" type="checkbox" autocomplete="off"/>&nbsp;&nbsp;下次自动登录<br/>
                        <input type="submit" style="margin-left: 16px" value="登录"/><br/>
                        <p style="color:#2e82ff;margin-left: 20px;">忘记密码？</p>
                    </form>

                </div>

            </div>

        </div>
    </body>

</html>

（2）css部分

* {
    margin: 0;
    padding: 0;
}
ul,
li {
    list-style: none;
}
.tabs{
    margin: 100px 400px;
}
.tabs li{
    margin: auto;
    width: 300px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
}
#denglu:hover,#zhuce:hover{
    color:#ffffff;
}
.tab-nav{
    width: 600px;
}
.tabs.tab-nav.navBar{
    overflow: hidden;
}
.tabs li:nth-child(1) {
    background-color: #3f89ec;
}
.tabs li:nth-child(2) {
    background-color: #3fecdd;
}
.tab-content div {
    border: 1px solid #ccc;
    width: 600px;
    height: 420px;
    display: none;
}
.tab-content div.active {
    display: block;
}
input[type=submit] {
    width: 300px;
    background-color: #3f89ec;
    color: white;
    padding: 11px 10px;
    margin: 10px 0 20px 65px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #3f98ec;
}
input[type=text] {
    position: relative;  
    height: 40px;
    width: 300px;
    padding: 11px 10px;
    margin: 10px 15px;
    border: 1px solid #ddd;
    font-size: 14px;
    color: #666;
    transition: .3s;          
}   
input[type=text]:hover {
    border-color: #1b66c7;
}
.yanzhengma:hover{
    background-color:#eee;
}

(3)javascript部分

window.onload = function () {
    let tabs = document.querySelector('.navBar')
    let box = document.querySelectorAll('.tab-content-box')
    tabs.onclick = function (e) {
      if (e.target.innerHTML === '注册') {
        box[0].setAttribute('class', 'active')
        box[1].removeAttribute('class', 'active')
      }else {
        box[0].removeAttribute('class', 'active')
        box[1].setAttribute('class', 'active')
        }
    }
  }

最后实现结果图：
在这里插入图片描述

个人简历

（1）html部分

<html>
    <head>
        <title>我的简历</title>
        <meta http-equiv="Contnet-Type" content="html/text" charset="utf-8">
        <link href="resume.css" rel="styleSheet" type="text/css"/>
    </head>
    <body>
        <div style="width: 1005px;margin:15px auto 0 180px;display: inline-block;">
            <div class="header">
                <div class="nag">
                    <div class="in">
                        <a href="https://www.51job.com"><img class="logo" width="90" height="40" src="https://img06.51jobcdn.com/im/2016/logo/logo_blue.png"/></a>
                            <img class="slogen" width="162" height="17" src="https://img04.51jobcdn.com/im/2016/header/slogen.png"/>
                        <p class="nlink n2" style="float: right">
                            <a href="https：//www.51job.com">首页</a>
                            <a href="https://i.51job.com/userset/my_51job.php">我的51job</a>
                            <a href="https://i.51job.com/resume/resume_center.php">简历中心</a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="nav">
                <div class="top_wrap" id="resume" style="position: relative">
                    <div class="nav_top"   style="padding: 5px 15px 0px">
                        <p class="nkt" style="position: relative;height:30px;line-height:30px">
                            <span class="name0" id="resume_nameview">我的简历1</span>
                        </p>      
                    </div>
                    <div class="cupBox" style="margin: 0px 15px 15px">
                        <div class="cup">更新：<span id="resume_lastupdate">2019-08-29</span></div>
                        <div class="cup dt">
                            公开：<span style="color: #666">对所有公开</span>
                        </div>
                        <div class="cup dt">
                            <span  class="star" style="width: 102px;"></span>
                        </div>
                        <div class="cup"><a style="color: #00457d">英文简历&gt;</a></div>
                    </div>
                    <div class="btnbox">
                        <span class="p_but ">刷新</span>
                        <span class="p_but" style="color: #ff6000;background-color:#fff2e3;border-color:#ffb865;margin: 0 15px 10px 7px;float: right;">预览</span>
                    </div>   
                </div>
                <div class="nav_body" style="border-left: 1px solid #ddd;border-right: 1px solid #ddd;">
                    <a  class="on">   
                        <span class="left" style="background-position: 0 0"></span>
                        基本信息
                        <span class="right" ></span>
                    </a>
                    <a  class="on">   
                        <span class="left" style="background-position: 0 -30px;"></span>
                        求职意向
                        <span class="right"></span>
                    </a>
                    <a  class="on">   
                        <span class="left" style="background-position: 0 -60px;"></span>
                        工作经验
                        <span class="right" ></span>
                    </a> 
                    <a  class="on">   
                        <span class="left" style="background-position: 0 -90px;"></span>
                        项目经验
                        <span class="right"></span>
                    </a> 
                    <a  class="on">   
                        <span class="left" style="background-position: 0 -120px;"></span>
                        教育经历
                        <span class="right"></span>
                    </a>
                    <a  class="on">   
                        <span class="left" style="background-position: 0 -150px;"></span>
                        在校情况
                        <span class="right" ></span>
                    </a>
                    <a  class="on">   
                        <span class="left" style="background-position: 0 -180px;"></span>
                        技能特长
                        <span class="right" ></span>
                    </a>
                    <a  class="on">   
                        <span class="left" style="background-position: 0 -210px;"></span>
                        附加信息
                        <span class="right" style="background:url(https://img01.51jobcdn.com/im/2016/form/form.png)  no-repeat 0 -122px;" ></span>
                    </a>   

                </div>
            </div>
            <div class="column" id="maincontent">
                <div class="box" id="basedetail" >
                    <div class="head" id="Basic">
                        <div class="face">
                            <img src="https://img01.51jobcdn.com/im/2016/resume/woman.png" width="85px" height="104px"/>
                        </div>
                        <div class="name">XX</div>
                        <p>现居住西安-雁塔区 │ 1年工作经验 │ 女 │ 22 岁 (1998/01/27) │ 目前正在找工作</p>
                        <div class="tab">
                            <img src="https://img01.51jobcdn.com/im/2016/resume/y3.png" style="vertical-align: middle;margin-right: 5px;">156540297@qq.com
                            <img src="https://img01.51jobcdn.com/im/2016/resume/y2.png" style="vertical-align: middle;margin-left: 115px;margin-right: 5px;">18829018054
                        </div>
                        <div class="abox" style="margin-left: -100px;position: relative;">
                            <div class="mbox"> 
                                <span class="icons">更多展开</span>
                            </div>
                        </div>
                        <span class="ed_icon_blue icons" id="basedetail_edit"></span>      
                    </div>   
                </div>
                <div class="box" id="salary">
                    <div class="hd">
                        <strong class="icons" style="display: inline-block;vertical-align: middle;font-size:16px;">
                            <em class="e0 icons"></em>
                            <font color=#ff6000>目前年收入</font>
                        </strong>
                        <span style="font-size: 16px;vertical-align: middle;">10万元</span>
                        <span style="font-size: 12px;color:#999;margin-left: 5px;vertical-align: middle;">（包含基本工资、补贴、奖金、股权收益等）</span>
                    </div>
                    <span class="ed_icon_blue icons" id="basedetail_edit"></span>
                </div>
                <div class="box" id="intention">
                    <div class="hd">
                        <strong class="icons" id="Career" style="display: inline-block;font-size: 16px;">
                            <em class="e1 icons"></em>
                            <font color=#ff6000>求职意向</font>
                        </strong>
                    </div>
                    <div class="bd"> 
                        <div class="con">
                            <div class="e e3">
                                <label>期望薪资</label>
                                <i style="position: absolute;font-style:normal;left:85px;"> :</i>
                                <div style="display: inline">6000-7999元/月</div>
                            </div>
                            <div class="e e3">
                                <label>地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;点</label>
                                <i style="position: absolute;font-style:normal;left:85px;">:</i>
                                <div>西安</div>
                            </div>
                            <div class="e e3">
                                <label style="width: 70px">职能/职位</label>
                                <i style="position: absolute;font-style:normal;left:85px;">:</i>
                                <div>软件工程师&nbsp;&nbsp;主管</div>
                            </div>
                            <div class="e e3">
                                <label>行&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;业</label>
                                <i style="position: absolute;font-style:normal;left:85px;">:</i>
                                <div>计算机软件</div>
                            </div>
                            <div class="e e3">
                                <label>工作类型</label>
                                <i style="position: absolute;font-style:normal;left:85px;">:</i>
                                <div>全职</div>
                            </div>
                        </div>   
                    </div>
                    <span class="ed_icon_blue icons" id="basedetail_edit"></span>
                </div>
                <div class="box">
                    <div class="hd">
                        <strong class="icons" style="display: inline-block;font: 16px;">
                            <em class="e2 icons"></em>
                            <font color=#ff6000>工作经验</font>
                        </strong>
                        <a class="add icons">新增工作</a>
                    </div>
                    <div class="bd" id="Work">
                        <div class="con" style="padding-right: 95px">
                            <div style="height: 30px">
                                <span style="padding: 0 15px;">2018/5-2018/9</span>
                                <strong style="margin-left:40px;position:absolute;display: inline">西安博彦信息技术有限公司</strong>
                                <strong style="width: 190px;margin-left:15px;float:right;">
                                    <span style="width: 100%;text-align:right;float:right;">测试员</span>
                                </strong>
                            </div>       
                                <p style="padding:0 15px; margin: 0">计算机软件  |  创业公司  |  测试部 </p>
                            <div class="e">
                                <label>工作描述</label>
                                <i style="position:absolute;font-style:normal;left:85px;">:</i>
                                <div style="display: inline">主要负责测试</div>
                            </div>
                        </div>    
                    </div>
                </div>
                <div class="box">
                    <div class="hd">
                        <strong class="icons" style="display: inline-block;font: 16px;">
                            <em class="e3 icons"></em>
                            <font color=#ff6000>项目经验</font>
                        </strong>
                        <a  class="add icons">新增项目</a>
                    </div>
                    <div class="bd" id="Project"  style="height: 92px;">
                        <div class="con" style="padding-right: 95px">
                            <div style="height: 30px">
                                <span style="padding: 0 15px;">2018/9-至今</span>
                                <strong style="margin-left:60px;position:absolute;display: inline;">房价预测</strong>
                            </div>
                            <div class="e" >
                                <label>项目描述</label>
                                <i style=" position:absolute;font-style:normal;left:85px;">:</i>
                                <div style="display: inline">利用数据挖掘，Python语言进行房价预测</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box">
                    <div class="hd">
                        <strong class="icons" id="Education" style="display: inline-block;font: 16px;">
                            <em class="e4 icons"></em>
                            <font color=#ff6000>教育经历</font>
                        </strong>
                        <a class="add icons">新增教育</a>
                    </div>
                    <div class="bd" style="height: 62px;">
                        <div class="con" id="school">
                            <div  style="height: 30px;">
                                <span style="padding: 0 15px">2018/9-至今</span>
                                <strong style="margin-left: 60px;position:absolute;display:inline">
                                    <span>西安石油大学</span>
                                </strong>
                                <strong style="margin-left: 300px;position:absolute;display:inline">
                                    <span>计算机应用</span>
                                </strong>  
                                <span style="width: 135px;margin-left:15px;float:right;color:#333;">硕士</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box">
                    <div class="hd">
                        <strong class="icons" id="Graduate" style="display: inline-block;font: 16px;">
                            <em class="e5 icons"></em>
                            <font color=#ff6000>在校情况</font>
                        </strong>
                    </div>
                    <div class="tit">
                        <span>校内荣誉</span>
                        <a class="add icons">新增荣誉</a>
                    </div>
                    <div class="bd" style="height: 62px">
                        <div class="con" id="scholarship">
                            <div style="height: 30px">
                                <span style="padding: 0 15px">2018/9</span>
                                <strong style="margin-left: 95px;position:absolute;display:inline;">
                                    <span>新生奖学金</span>
                                </strong>
                                <span style="width: 350px;margin-left:15px;text-align:left;float: right;color:#333;">二等奖</span> 
                            </div>
                        </div>
                    </div>
                    <div class="tit">
                        <span>校内职务</span>
                        <a class="add icons">新增职务</a>
                    </div>
                    <div class="bd" style="height: 62px">
                        <div class="con" id="scholarship">
                            <div style="height: 30px">
                                <span style="padding: 0 15px">2019/3-2019/7</span>
                                <strong style="margin-left: 40px;position:absolute;display:inline;">
                                    <span>学生助理</span>
                                </strong>
                            </div>
                        </div>
                    </div>
                </div> 
                <div class="box">
                    <div class="hd">
                        <strong class="icons" id="Technology" style="display: inline-block;font:16px">
                            <em class="e6 icons"></em>
                            <font color=#ff6000>技能特长</font>
                        </strong>
                        <span style="font-size: 12px;color:#999;margin-left: 5px;vertical-align: middle;">（包含IT技能、语言能力、证书、成绩、培训经历)</span>
                    </div>
                    <div class="tit">
                        <span>技能/语言</span>
                        <a class="add icons">新增技能/语言</a>
                    </div>
                    <div id="skilllanguage">
                        <div class="bd" id="skilllanguage1" style="height: 63px">
                            <div class="con" style="border: 1px solid transparent;">
                                <div class="cell" style="position: relative">
                                    <strong style="float: left;width:120px;margin:0 15px">Web前端</strong>
                                    <span><i style="width: 90px">一般</i></span>
                                </div>
                            </div>
                        </div>
                        <div class="bd" id="skilllanguage1" style="height: 63px">
                            <div class="con" style="border: 1px solid transparent;">
                                <div class="cell" style="position: relative">
                                    <strong style="float: left;width:120px;margin:0 15px">Java</strong>
                                    <span><i style="width: 190px">良好</i></span>
                                </div>
                            </div>
                        </div>
                        <div class="bd" id="skilllanguage1" style="height: 63px">
                                <div class="con" style="border: 1px solid transparent;">
                                    <div class="cell" style="position: relative">
                                        <strong style="float: left;width:120px;margin:0 15px">MySQL</strong>
                                        <span><i style="width: 290px">熟练</i></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tit">
                            <span>证书</span>
                            <a class="add icons">新增证书</a>
                        </div>
                        <div class="bd" style="height: 62px">
                            <div class="con" id="skilllanguage1">
                                <div style="height: 30px">
                                    <span style="padding: 0 15px">2019/2</span>
                                    <strong style="margin-left: 95px;position:absolute;display:inline;">
                                        <span>全国计算机等级四级</span>
                                    </strong>
                                    <span style="width: 295px;margin-left:15px;text-align:left;float: right;color:#333;">95</span> 
                                </div>
                            </div>
                        </div>
                        <div class="tit">
                            <span>培训经历</span>
                            <a class="add icons">新增培训</a>
                        </div>
                        <div class="bd" style="height: 62px">
                            <div class="con" id="skilllanguage1">
                                <div style="height: 30px">
                                    <span style="padding: 0 15px">2019/1-至今</span>
                                    <strong style="margin-left: 60px;position:absolute;display:inline;">
                                        <span>Java语言</span>
                                    </strong>
                                    <span style="width: 295px;margin-left:15px;text-align:left;float: right;color:#333;">传智播客</span> 
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="box">
                        <div class="hd">
                            <strong class="icons" id="Technology" style="display: inline-block;font:16px">
                                <em class="e7 icons"></em>
                                <font color=#ff600>附加信息</font>
                            </strong>
                        </div>
                        <div class="tit">
                            <span>附件</span>
                            <a class="add icons">新增附件</a>
                        </div>
                            <div class="none icons" >完善附件信息，展现专业能力，让HR更了解你！</div>
                        <div class="tit">
                            <span>其他</span>
                            <a id="addqita" class="add icons">新增其他</a>
                        </div>
                        <div class="none icons">完善其他信息，丰富简历，让HR更了解你！</div>    
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

(2)css部分

.header {
    position: relative;
    min-width: 1002px;
    font: 14px "Microsoft YaHei";
    z-index: 998;
}
.header .nag {
    position: relative;
    height: 56px;
    line-height: 56px;
    background-color: #fff;
    border-bottom: 1px solid #e8e8e8;
    z-index: 998;
}
.header .in {
    width: 1002px;
    margin: 0 auto;
}
.header p{
    margin: 0;
    padding: 0;
}
.header .nag .nlink.n2 a {
    font-size: 14px;
    margin-left: 30px;
}
.header .nag .nlink a {
    float: left;
    height: 56px;
}
.nav {
    float: left; 
    margin: 10px 10px 0 0;
    width: 210px;
    background-color: #fafafa;
    border-top: 2px solid #ff6000;
}
.nav .top_wrap {
    width: 208px;
    border: 1px solid #ddd;
    border-top: none;
}
.nav .nav_top .name0 {
    display: inline-block;
    /* max-width: 80px; */
    font-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav .cupBox .cup {
    position: relative;
    height: 22px;
    line-height: 22px;
    font-size: 12px;
    color: #999;
}
.nav .btnbox .p_but:first-child {
    margin: 0 7px 10px 15px;
}
.p_but {
    display: inline-block;
    min-width: 80px;
    height: 28px;
    line-height: 28px;
    font-size: 14px;
    font-family: "Microsoft YaHei";
    color: #fff;
    text-align: center;
    cursor: pointer;
    background-color: #ff6000;
    border: 1px solid #ff6000;
    border-radius: 2px;
}
.nav .nav_body a {
    position: relative;
    display: block;
    height: 50px;
    line-height: 50px;
    padding-left: 56px;
    border-bottom: 1px solid #e4eaee;
}

.nav .nav_body .left {
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    top: 50%;
    left: 20px;
    margin-top: -15px;
    background-image: url(https://img01.51jobcdn.com/im/2016/icon/icon_icons.png);
}
.nav .nav_body .right {
    position: absolute;
    display: block;
    width: 20px;
    height: 20px;
    top: 50%;
    right: 20px;
    margin-top: -10px;
    background:url(https://img01.51jobcdn.com/im/2016/icon/icon_righty.png) 3px 3px no-repeat;
}
.nav_body .on:hover{
    color: #ff6000;
}

.star{
    position: absolute;
    display: inline-block;
    height: 20px;
    /* background: url(https://img01.51jobcdn.com/im/2016/resume/icon_resume.png) no-repeat -120px -59px;; */
    top: 50%;
    left: 0;
    margin-top: -10px;
    z-index: 2;
    background: url(https://img01.51jobcdn.com/im/2016/resume/icon_resume.png) no-repeat -120px -59px;
}

body{
    line-height: 20px;
    font-size: 14px;
    font-family: "Microsoft YaHei" !important;
    background-color: #fff;
}
.column{
    float: right;
    /* margin: auto; */
    width: 780px;
  
    line-height: 20px;
    font-size: 14px;
    font-family: "Microsoft YaHei" !important;
    background-color: #fff;
    border: 1px red;
    padding: 10px 0px 50px 0px;
}
.box:first-child {
    border-top: 1px solid #fff;
}
.box{
    position: relative;

    border: 1px solid transparent;
    border-top:1px solid rgba(221, 221, 221, 0.788);
}
.face{
    position: absolute;
    width: 85px;
    color: #c3c3c3;
    text-align: center;
    top: 15px;
    left: 15px;
    float: left;
}
.name{
    height: 30px;
    line-height: 30px;
    font-size: 24px;
    margin-bottom: 18px;
    display: block;
}
.email,
.tel{
    margin-right: 76px;
    width: 180px;
    height: 20px;
    line-height: 20px;
    padding-left: 25px;
    display: inline-block; 
}
.box .mbox {
    position: absolute;
    height: 36px;
    line-height: 16px;
    top: -24px;
    right: 15px;
    cursor: pointer;
    z-index: 3;
}
.box .mbox span{
    height: 16px;
    line-height: 16px;
    font-size: 12px;
    color: #00457d;
    padding-right: 15px;
    background: url(https://img01.51jobcdn.com/im/2016/resume/icon_resume.png) no-repeat -435px -60px;
    cursor: pointer;
}
.mbox .icons:hover{
    color:#ff6000;
    background: url(https://img01.51jobcdn.com/im/2016/resume/icon_resume.png) no-repeat -435px -80px;
}
.box .add{
    position: absolute;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    color: #00457d;
    top: 50%;
    right: 30px;
    margin-top: -10px;
    padding-left: 20px;
    background: url(https://img01.51jobcdn.com/im/2016/resume/icon_resume.png) no-repeat -480px 0;
    cursor: pointer;
}

.box .add:hover{
    color: #ff6000;
    background: url(https://img01.51jobcdn.com/im/2016/resume/icon_resume.png) no-repeat -480px -20px;
}
.box .ed_icon_blue{
    position: absolute;
    /* background: url(https://img01.51jobcdn.com/im/2016/resume/icon_resume.png) no-repeat -260px -20px; */
    width: 20px;
    height: 20px;
    top: 20px;
    right: 30px; 
    cursor: pointer;
}
.box .ed_icon_blue:hover {
    background: url(https://img01.51jobcdn.com/im/2016/resume/icon_resume.png) no-repeat -260px -20px;

}

.box .hd{
    position: relative;
    height: 58px;
    line-height: 58px;
    background-color: #fff;
    display: block;
}
.box .hd .e0{
    background-position: -30px -272px;
}
.box .hd .e1 {
    background-position: -30px -32px;
}
.box .hd .e2 {
    background-position: -30px -62px;
}
.box .hd .e3 {
    background-position: -30px -92px;
}
.box .hd .e4{
    background-position: -30px -122px;
}
.box .hd .e5{
    background-position: -30px -152px;
}
.box .hd .e6{
    background-position: -30px -182px;
}
.box .hd .e7{
    background-position: -30px -212px;
}
.box .none {
    display: block;
    width: 380px;
    height: 30px;
    line-height: 30px;
    color: #b0b0b0;
    margin: 15px auto;
    padding-left: 35px;
    background: url(https://img01.51jobcdn.com/im/2016/resume/icon_resume.png) no-repeat -450px -240px;
}

.box .hd em {
    width: 30px;
    height: 30px;
    margin: 0 10px;
    background-image: url(https://img01.51jobcdn.com/im/2016/icon/icon_icons.png);
}

.icons {
    display: inline-block;
    vertical-align: middle;
    background: url(https://img01.51jobcdn.com/im/2016/resume/icon_icons.png) no-repeat;
}
.box .hd strong{
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    font-weight: bold;
    vertical-align: baseline;
    padding: 14px 0;
}
.head{
    position: relative;
    min-height: 108px;
    color: #333;
    padding: 15px 15px 15px 115px;
    display: block;
}

.tab{
    vertical-align: middle;
    display: inline-block;
    height: 30px;
    line-height: 30px;
   
}
.box .e{
    position: relative;
    float: left;
    width: 631px;
    line-height: 30px;
    color: #333;
    word-break: break-all;
    padding: 0 15px 0 100px;

}
.box .e label{
    position: absolute;
    width: 61px;
    color: #666;
    text-align: justify;
    text-align-last: justify;
    top: 0;
    left: 15px;
    cursor: default;
}
div.bd{
    height: 120px;
}
div.con{
    line-height: 120px;
    color: #666;
    padding: 15px;
    display: block;
}
div.e{
    position: relative;
    float: left;
    width: 631px;
    line-height: 30px;
    color: #333;
    word-break: break-all;
    padding: 0 15px 0 100px;
}
div.e.e3{
    min-width: 258px;
    width: auto;
 
}
.box .con{
    line-height: 30px;
    color: #666;
    padding: 15px;
}
.box .con strong{
    display: block;
    
    font-weight: bold;
    color: #333;
}
.box .tit{
    position: relative;
    height: 40px;
    line-height: 40px;
    color: #666;
    padding: 0 30px;
    background-color: #f5f5f5;
}
#basedetail:hover,#salary:hover,#intention:hover,#Project:hover,
#school:hover,#scholarship:hover,#Work:hover,
#skilllanguage1:hover,#resume:hover{
    border:1px solid #ff6000;

}
.box .cell span, .box .cell i {
    position: relative;
    display: inline-block;
    width: 400px;
    height: 18px;
    line-height: 18px;
    font-size: 12px;
    color: #fff;
    top: 4px;
    left: 11px;
    background-color: #ddd;
    border-radius: 20px;
}
.box .cell i {
    position: absolute;
    width: 390px;
    font-style: normal;
    text-align: right;
    top: 0;
    left: 0;
    padding-right: 10px;
    background-color: #ff9f20;
    z-index: 3;
}

点击页面跳转

（1）html部分

<html>
    <head>
        <title>点击事件</title>
        <meta http-equiv="Content-Type" content="html/text" charset="utf-8">
        <style>
            *{
                margin: 0px;
                padding: 0px;
            }
            .box{
                margin: 20px;
                width: 400px;
                height: 400px;
                border: 1px solid red;
                overflow: hidden;
            }
            .hd span{
                display: inline-block;
                height: 100px;
                width:130px;
                background: pink;
                line-height: 45px;
                text-align: center;
                cursor: pointer;
            } 
            .hd span:hover{
                color: #fff;
            }
            .bd li{
                height: 300px;
                background-color: rgb(50, 130, 205);
                display: none;
            }
            .bd li.show{
                display: block;
                font-size: 36px;
            }
        </style>
    </head>
    <body>
        <div class="box" id="box">
            <div class="hd">
                <span class="current">1</span>
                <span>2</span>
                <span>3</span>
                
            </div>
            <div class="bd">
                <ul style="list-style-type: none">
                    <li class="show">我是第一部分</li>
                    <li>我是第二部分</li>
                    <li>我是第三部分</li>
                    
                </ul>  
            </div>
        </div>  
    </body>
    <script src="./onlick.js">
    </script>
</html>

(2)javascript部分

        var spans=document.getElementById("box").getElementsByTagName("span");
        var lis=document.getElementsByTagName("li");
        for(var i=0;i<spans.length;i++){
            spans[i].index=i;
            spans[i].onclick=function(){
                for(var j=0;j<lis.length;j++){
                    spans[j].className='';
                    lis[j].className="";
                    if(this==spans[j]){
                        this.className='select';
                        lis[this.index].className="show";
                    }
                }
                
            }
        }

jquery编写

           var spans=$(".current1");
           var lis=$("li");
           $(document).ready(function(){
               for(var i=0;i<spans.length;i++){
                   $(".current1").eq(i).click(function(){
                       for(var j=0;j<lis.length;j++){
                           $(".current1").eq(j).attr("class",'current1');
                           $("li").eq(j).attr("class","");
                       
                           if($(this).index()==$(".current1").eq(j).index()){
                               $(this).attr("class","current1");
                               $("li").eq($(this).index()).attr("class","show");
                           }
                       }
               
                   })
               } 
           })

微博发布消息

###JavaScript编写


<html>
<head>
    <meta charset='utf-8'>
    <title>发布信息</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        .userInfo{
            overflow: hidden;
            margin: 20px;
        }
        .issueShow{
            border: 1px solid #ccc;
            width: 302px;
            height: 600px;
            overflow-y: scroll;
            margin-left: 20px;
        }
        .userImg{
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>   
</body>
<script>
    // 创建发布内容容器
    var userInfo=document.createElement("div");
        userInfo.style.width="302px";
        userInfo.className="userInfo";
    //创建发布内容文本域
    var textInput=document.createElement("textarea");
        textInput.style.width="300px";
        textInput.style.height="100px";
    //创建发布按钮
    var issueInput=document.createElement("input");
        issueInput.style.float="right";
        issueInput.type="button";
        issueInput.value="发布";

        userInfo.appendChild(textInput);
        userInfo.appendChild(issueInput);
    document.body.appendChild(userInfo);
    //创建接受内容容器
    var issueShow=document.createElement("div");
        issueShow.className="issueShow";
        document.body.appendChild(issueShow);

        issueInput.onclick=function(){
            
            //接受内容部分
            var userDl=document.createElement("dl");
                userDl.style.overflow="hidden";
                userDl.style.padding="5px";
                userDl.style.border="1px solid pink";
            //头像和用户名部分
            var imgDt=document.createElement("dt");
                imgDt.style.float="left";
                imgDt.style.width="20%";
            //头像
            var userImg=document.createElement("img");
                userImg.src="https://ss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/wisegame/wh%3D68%2C68/sign=907c525700b30f2435cfe405f0b9e77b/d000baa1cd11728bace57514c7fcc3cec3fd2c38.jpg";
                userImg.className="userImg";
            //用户名
            var userName=document.createElement("p");
            var userNameText=document.createTextNode("LastNever");

                userName.appendChild(userNameText);
                imgDt.appendChild(userImg);
                imgDt.appendChild(userName);
                userDl.appendChild(imgDt);
            //接受的内容部分包含删除按钮   
            var userDd=document.createElement("dd");
                userDd.style.width="80%";
                userDd.style.float="right";
            //主要是发送内容显示区
            var userP=document.createElement("p");
                userP.style.minHeight="50px";
                userP.style.paddingLeft="10px";
			var userText=textInput.value;
            var userTextNode=document.createTextNode(userText);
                userP.appendChild(userTextNode);
                userDd.appendChild(userP);
            //删除按钮
            var userDel=document.createElement("input");
                userDel.type="button";
                userDel.value="删除";
                userDel.style.float="right";
                userDl.appendChild(userDd);
                userDd.appendChild(userDel);

            var dls=document.getElementsByTagName("dl");
            //删除功能
            if(dls.length>=1){
                issueShow.insertBefore(userDl,dls[0]);
            }
            else{
                issueShow.appendChild(userDl);
            }
            userDel.onclick=function(){
                issueShow.removeChild(this.parentNode.parentNode);
            }

        }
</script>
</html>

##结果展示
在这里插入图片描述
###jquery编写


<html>
    <head>
        <title>sinajq实现</title>
        <meta http-equiv="Content-Type" content="html/text" charset="utf-8">
        <style>
            *{
            margin:0;
            padding: 0;
            }
           
        </style>
    </head>
    <body></body>
    <script  type="text/javascript" src="./jquery.min.js"></script>
    <script>
        var all=$("<div></div>");
        all.attr("class","all");
        all.css({width:"700px",margin:"auto 200px",display:"inline-block"});
        all.appendTo("body");
        //创建发布内容容器
        var userInfo=$("<div></div>");
        userInfo.attr("class","userInfo");
        userInfo.css({overflow:"hidden",margin:"20px",width:"320px",float:"left"});
        all.append(userInfo);
        
        //创建发布内容文本域
        var textInput=$("<textarea></textarea>");
        textInput.attr("class","textInput");
        textInput.css({width:"320px",height:"200px"});
        userInfo.append(textInput);
        //创建发布按钮
        var issueInput=$("<input></input>");
        issueInput.attr( "class","issueInput");
        issueInput.attr({type:"button",value:"发布"});
        issueInput.css({float:"right"}) ;   
        userInfo.append(issueInput);
        //创建接受内容容器
        var issueShow=$("<div></div>");
        issueShow.attr("class","issueShow");
        issueShow.css({ border:" 1px solid #aaa",width: "320px", height:"400px", overflowY:"scroll",float:"right",margin:" 20px auto "});
        all.append(issueShow);
            $(function(){
                issueInput.click(function(e){
                
                    //接受内容部分
                    var userDl=$("<dl></dl>");
                    userDl.attr("class","userDl");
                    userDl.css({overflow:"hidden",padding:"5px",border:"1px solid pink"});
                    //头像和用户名部分
                    var imgDt=$("<dt></dt>");
                    imgDt.attr("class","imgDt");
                    imgDt.css({float:"left",width:"20%"});
                    //头像
                    var userImg=$("<img></img>");
                    userImg.attr("class","userImg");
                    userImg.css({width: "50px",height: "50px"});
                    userImg.attr("src","https://ss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/wisegame/wh%3D68%2C68/sign=907c525700b30f2435cfe405f0b9e77b/d000baa1cd11728bace57514c7fcc3cec3fd2c38.jpg");
                    //用户名
                    var userName=$("<p>LasterNever</p>");
                    userName.attr("class","userName");

                    imgDt.append(userImg);
                    imgDt.append(userName);
                    userDl.append(imgDt);
                    //接受的内容部分包含删除按钮
                    var userDd=$("<dd></dd>");
                    userDd.attr("class","userDd");
                    userDd.css({width:"80%",float:"right"});
                    //主要是发送内容显示区
                    
                    var userP=$("<p></p>");
                    userP.attr("class","userP");
                    userP.css({minHeight:"50px",paddingLeft:"10px"});
                    var userText=textInput.val();
                    var userTextNode=userP.text(userText);
                    // userP.append(userTextNode);
                    // issueShow.append(userP);
                    
                    userDd.append(userP);
                    //删除按钮
                    var userDel=$("<input></input>");
                    userDel.attr("class","userDel");
                    userDel.attr({type:"button",value:"删除"});
                    userDel.css({float:"right"}) ;

                    userDl.append(userDd);
                    userDd.append(userDel);

                    //删除功能
                    if($("dl").length>=1){
                        userDl.insertBefore($("dl").eq(0));
                    }
                    else{
                        issueShow.append(userDl);
                    }
                    userDel.click(function(){
                        $(this).parent().parent().remove();
                    });


                })
            })
    </script>
</html>

easyui布局

<html>
    <head>
        <title>布局</title>
        <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
        <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
        <link rel="stylesheet" type="text/css" href="easyui/demo.css">
        <script type="text/javascript" src="easyui/jquery.min.js"></script>
        <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    </head>
    <body>
        <div class="easyui-layout" style="width:1280px;height:600px;margin: 15px auto">
            <div data-options="region:'north'" style="height:50px;background-color: lightblue"></div>
            <div data-options="region:'south',split:true" style="height:50px;background-color: lightskyblue"></div>
            <div data-options="region:'east',split:true" title="East" style="width:100px;background-color:lightskyblue"></div>
            <div data-options="region:'west',split:true" title="menu" style="width:100px;background-color: lightskyblue"></div>
            <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
                <table class="easyui-datagrid"
                        data-options="url:'datagrid_data1.json',method:'get',border:false,singleSelect:true,fit:true,fitColumns:true">
                    <thead>
                        <tr>
                            <th data-options="field:'itemid',align:'center'" width="80">Item ID</th>
                            <th data-options="field:'productid',align:'center'" width="100">Product ID</th>
                            <th data-options="field:'listprice',align:'center'" width="90">List Price</th>
                            <th data-options="field:'unitcost',align:'center'" width="90">Unit Cost</th>
                            <th data-options="field:'attr1',align:'center'" width="120">Attribute</th>
                            <th data-options="field:'status',align:'center'" width="90">Status</th>
                        </tr>
                    </thead>
                </table>
            </div>

        </div>
    </body>
</html>

##结果图
在这里插入图片描述

LastNever�。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
登录模块、个人简历

百度登录注册(1)html部分<html> <head> <title>登录注册</title> <meta http-equiv="Content-Type" content="html/text" charset="utf-8"/> <link href="reg.cs...
复制链接

扫一扫