<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/main.css">
<script src="js/main.js"></script>
</head>
<body>
<header>
<div class="head-top">
<div class="logo"><a href="#"><img src="http://t-1.tuzhan.com/96d9c7894f8f/p-2/l/2015/05/07/20/89738f25e8a448afa1ebeb5d3ec2bacc.gif" alt="若邻网"></a></div>
<div class="search">
<form action="#">
<div id="dropdown-toggle" class="dropdown-toggle">
<div id="dropdown-default" class="dropdown-default">职位</div>
<ul id="diropdown-menu" class="diropdown-menu">
<li>职位</li>
<li>伯乐</li>
<li>人脉</li>
<li>公司</li>
<li>面经</li>
<li>工资</li>
</ul>
</div>
<div class="search-ipt">
<input type="text" placeholder="请输入职位、公司关键字">
</div>
<div class="search-btn">
<button type="submit">搜索</button>
</div>
</form>
</div>
<div class="ucenter">
<a href="#">登录</a> | <a href="#">求职者注册</a> | <a href="#">招聘方注册</a>
</div>
<div class="clearfloat"></div>
</div>
<nav>
<ul>
<li class="current"><a href="#">首页</a></li>
<li><a href="#">职位</a></li>
<li><a href="#">伯乐</a></li>
<li><a href="#">人脉</a></li>
<li><a href="#">公司</a></li>
<li><a href="#">面经</a></li>
<li><a href="#">工资</a></li>
</ul>
<a href="#" class="phone-link">手机版</a>
</nav>
</header>
<div class="content">
<div class="content-left"></div>
<div class="content-right"></div>
</div>
<footer>
</footer>
<script>
</script>
</body>
</html>
* {
margin: 0;
padding:0;
}
body {
background: #f5f7fa;
font: 12px/1.5 'Microsoft Yahei',tahoma, arial, 'Hiragino Sans GB', sans-serif;
}
a {
color: #08c;
text-decoration: none;
}
ul,li {
list-style-type: none;
}
header {
width: 960px;
height: auto;
margin: 0 auto;
padding-top: 20px;
}
header .logo {
width: 311px;
height: 48px;
float: left;
}
header .search {
float: left;
height: 34px;
line-height: 34px;
background: #6dd373;
/*border:3px solid #6dd373;*/
margin: 5px 0 0 25px;
padding:3px 0 3px 3px;
position: relative;
}
header .dropdown-toggle, header .search-ipt, header .search-btn { float: left;}
header .dropdown-toggle { background: #fff; }
header .dropdown-toggle .dropdown-default {
width: 56px;
height: 34px;
/*line-height: 34px;*/
color: #666;
font-size: 14px;
margin-left: 8px;
border-right: 1px solid #6dd373;
background: url(http://f-1.tuzhan.com/6e8060b66027/p-2/m/2015/05/07/20/7d94225e959c47c482aa01f2a6f1a59f.jpg) no-repeat 38px -226px;
cursor: pointer;
}
header .dropdown-toggle .diropdown-menu { display: none; position: absolute; top: 37px; left: 0px; width: 64px; border:3px solid #65b769; border-top: none;}
header .dropdown-toggle .diropdown-menu li { height: 30px; line-height: 30px; background: #fff; padding-left: 8px; font-size: 14px; color: #666; cursor: pointer;}
header .dropdown-toggle .diropdown-menu li:hover { background: #eee;}
header .search-ipt { width: 220px; padding: 0 15px; background: #fff;}
header .search-ipt input { height: 20px; border:none; outline: none; line-height: 20px; font-family: 'Microsoft Yahei';}
header .search-btn { }
header .search-btn button { width: 70px; height: 34px; outline: none; background: none; color: #fff; font-family: 'Microsoft Yahei'; font-size: 18px; text-align: center; border:none; cursor: pointer; }
header .search:hover { background: #65b769;}
header .head-top .ucenter { float: right; margin-top: 15px;}
header .head-top .ucenter a { color: #08c; text-decoration: none;}
header .clearfloat { clear: both;}
nav { height: 40px; background: #6dd373; margin-top: 15px; border-radius: 2px; line-height: 40px; }
nav ul li { float: left;}
nav ul li a { width: 90px; color: #fff; text-align: center;font-size: 16px; display: block;}
nav ul li.current a{ background: #25af60;}
nav ul li a:hover { background: #25af60;}
nav .phone-link { color: #fff; font-size: 16px; float: right; background: url(http://f-1.tuzhan.com/998a2a2cfde9/p-2/m/2015/05/07/20/85740ad4b22240c9912d999091039c79.jpg) no-repeat 55px 12px; padding-right: 30px;}
window.onload = function(){
var dropdownDef = document.getElementById('dropdown-default');
var diropdownMenu = document.getElementById('diropdown-menu');
var dropdown = document.getElementById('dropdown-toggle');
dropdownDef.onclick= function(){
diropdownMenu.style.display = "block";
};
dropdown.onmouseout=function(){
diropdownMenu.style.display = "none";
};
};
Output
This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account
Dismiss xKeyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |