첫 페이지 탐색 모음 ------ 계속 업데이트 중
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
<style>
*{
margin: 0px;padding: 0px;
}
div {
display: block;
}
a{
text-decoration: none;
}
ul li{
list-style: none;
float: left;
display: block;
}
#header{
background: #000000;
}
#nav{
width: 1200px;
height: 60px;
margin: 0px auto;
position:relative
}
#nav a{
-webkit-transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
transition: background-color 0.2s;
}
#nav .logo{
float: left;
}
#nav .logo a{
background: url(http://static.mukewang.com/static/img/common/logo.png) no-repeat center center;
width: 140px;
height: 60px;
overflow: hidden;
display: block;
}
.nav-item{
height: 60px;
width: 300px;
position: absolute;
left: 140px;
}
.nav-item a{
display: block;
color: #787d82;
text-align: center;
font-size: 14px;
height: 60px;
line-height: 60px;
}
.nav-item li{
width: 100px;
float: left;
}
li :hover{
background-color: #363C41;
color: #F8F8F2;
}
#login-area {
float: right;
position: relative;
}
#login-area li{
width: 60px;
height: 60px;
}
#login-area li :hover{
background-color: #363C41;
color: #F8F8F2;
}
.my_message a{
display: block;
height: 60px;
line-height: 60px;
width: 60px;
color: #787d82;
text-align: center;
background:url(http://static.mukewang.com/static/img/icon_msg.png) no-repeat center center;
}
.my_mp {
height: 60px;
width: 60px;
}
.my_mp a{
height: 60px;
width: 60px;
display: block;
}
.my_mp .mp {
padding-top: 12px;
font-size: 12px;
}
.my_mp span {
display: block;
line-height: 16px;
color: #6c7072;
}
.my_mp a{
text-align: center;
}
.set_btn{
position: relative;
}
.set_btn img {
border-radius: 22px;
border: 2px solid #adb0b1;
vertical-align: middle;
display: inline-block;
background: url(ttp://static.mukewang.com/static/img/menu_icon.png) no-repeat 0 0;
}
.set_btn a {
display: block;
height: 60px;
line-height: 60px;
width: 60px;
color: #787d82;
text-align: center;
}
li:hover #nav_list{
display: block;
}
#nav_list :hover .set_btn a{
background: #363C41;
}
#nav_list{
position:absolute;
margin-left:-100px;
background: #363C41;
display: none;
}
#nav_list li{
height: 39px;
width: 160px;
color: #F8F8F2;
}
#nav_list li a:hover{
}
#nav_list li a{
border-top: 1px solid #4a5153;
height: 39px;
line-height: 39px;
font-size: 14px;
background-image: url(http://static.mukewang.com/static/img/menu_icon.png);
background-repeat: no-repeat;
display: block;
color: #fff;
text-align: left;
padding: 0;
padding-left: 47px;
width: auto;
}
#nav_list #my_setting {
background-position: 19px -167px;
}
#nav_list #logout {
background-position: 19px -207px;
}
#search-area {
float: right;
position: relative;
height: 30px;
width: 240px;
margin: 15px 0;
margin-right: 20px;
background: #363c41;
}
*:focus{outline: none;}
#search-area #search-input {
padding: 5px 10px;
width: 190px;
height: 20px;
line-height: 20px;
font-size: 12px;
float: left;
border: 0;
border-style: none;
background: #363c41;
color: #14191e;
-webkit-transition: background-color 0.3s;
-moz-transition: background-color 0.3s;
transition: background-color 0.3s;
}
#search-area #search-btn{
background: url(http://static.mukewang.com/static/img/gsearch-sprite.png) no-repeat 0 0;
float: right;
cursor: pointer;
width: 30px;
height: 30px;
border: 0;
-webkit-transition: background-color 0.3s;
-moz-transition: background-color 0.3s;
transition: background-color 0.3s;
}
</style>
<script type="text/javascript">
function mOut(obj) {
var sbta=document.getElementById('set_btn');
sbta.style.backgroundColor="#000000";
}
function mOn(obj) {
var sbta=document.getElementById('set_btn');
sbta.style.backgroundColor="#363C41";
}
function myonfocus() {
document.getElementById('search-input').style.backgroundColor="#FFFFFF";
document.getElementById('search-btn').style.background="url(http://static.mukewang.com/static/img/gsearch-sprite.png) no-repeat 0 -40px";
document.getElementById('search-btn').style.backgroundColor="#FFFFFF";
}
function myonblur() {
document.getElementById('search-input').style.backgroundColor="#363C41";
document.getElementById('search-btn').style.background="url(http://static.mukewang.com/static/img/gsearch-sprite.png) no-repeat 0 0";
document.getElementById('search-btn').style.backgroundColor="#363C41";
}
</script>
</head>
<body>
<div id="header">
<div id="nav">
<div id="logo" class="logo">
<a href="" class=""></a>
</div>
<ul class="nav-item">
<li>
<a href=""> </a>
</li>
<li>
<a href=""> </a>
</li>
<li>
<a href=""> </a>
</li>
</ul>
<div id="login-area">
<ul>
<li class="my_message">
<a href=""></a>
</li>
<li class="my_mp" >
<a href="" title=" ">
<span class="mp"> </span>
<span class="mp_num">3356</span>
</a>
</li>
<li class="set_btn" id="set_btn">
<a href="">
<img src="" width="40" height="40"> <i class=""></i>
<span></span>
</a>
<ul id="nav_list" style="float:none" onmouseover ="mOn(this)" onmouseout ="mOut(this)">
<li>
<a id="my_space"href=""> </a>
</li>
<li>
<a id="my_setting" href=""> </a>
</li>
<li>
<a id="logout" href=""> </a>
</li>
</ul>
</li>
</ul>
</div>
<div id="search-area">
<form action="">
<input type="text" id="search-input" placeholder=" 、 " onfocus="myonfocus()" onblur="myonblur()">
<input type="button" id="search-btn"></form>
</div>
</div>
</div>
</body>
</html>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
