百度登录注册
(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">密 码</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"> 阅读并接受《<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"/> 下次自动登录<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">英文简历></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>地 点</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>软件工程师 主管</div>
</div>
<div class="e e3">
<label>行 业</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>
##结果图