每天看优设、站酷、UI中国的时间已经多过了前端网的时间了，难道我要转行UI吗？虽然我挺喜欢UI的，可是我还是恋恋不舍我的前端，总觉得自己用代码来表现效果更顺手呢。

仿了一个UI中国的头部导航，但是改变了它搜索框的效果。

查看效果

案例下载↓

链接：http://pan.baidu.com/s/1geFljA7 密码：0im8

一、案例知识点

1、下拉菜单的做法，子元素选择器的使用

2、iconfont图标字体的使用方法

3、表单的:focus的伪类动画效果

二、主体代码

1、HTML代码

<div id="wrap">
	<header>
    	<div class="bg-white">
        	<div class="top clearfix">
            	<h1><a href="#" title="UI中国" class="logo"><i class="iconfont icon-ui"></i><span>UI中国</span></a></h1>
                <nav>
                	<ul class="nav clearfix">
                    	<li><a href="#" class="current">首页</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="#">更多 <i class="iconfont icon-down"></i></a>
                        	<ul class="sub-nav">
                            	<li><a href="#">话题</a></li>
                                <li><a href="#">工具</a></li>
                                <li><a href="#">灵感</a></li>
                                <li><a href="#">主题学院</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav> 
                <div class="r clearfix">
                    <div class="search l">
                        <form name="search" action="" method="get">	
                           
                                <input type="text" class="keywords" name="keywords" placeholder="请输入关键字" autocomplete="off"  />
                                
                                <i class="iconfont icon-search icon-btn"></i>
                        </form>
                    </div>
                    <div class="login l">
                    	<a href="#"><i class="iconfont icon-user"></i>登录</a>
                    </div>
                </div>
            </div>
        </div>
    </header>    
</div>

2、CSS主要代码

.bg-white{
	width:100%;
	height:70px;
	background-color:#fff;
	}
.top{
	width:1180px;
	margin:0 auto;}
.top span{
	display:none;}
.top h1{
	float:left;
	width:60px;
	height:70px;
	line-height:70px;
	margin-right:10px;}
.logo{
	color:#3498db;
	}
.logo:hover{
	color:#297dba;}
.logo i{
	font-size:3rem;}
.nav{
	float:left;
	height:70px;
	max-width:600px;}
.nav>li{
	float:left;}
.nav>li>a{
	display:block;
	font-size:1rem;
	width:80px;
	height:30px;
	text-align:center;
	line-height:30px;
	padding:16px 0 20px 0;
	border-top:4px solid transparent;}
.nav>li>a:hover,.nav a.current,.nav>li:hover>a,.login a:hover{
	border-top-color:#3498db;
	color:#3498db;
	box-shadow:0 0 2px rgba(0,0,0,.1);}
.sub-nav{
	position:absolute;
	min-width:80px;
	display:none;
	background-color:#fff;
	}
.nav>li:hover .sub-nav{
	display:block;}
.sub-nav a{
	display:block;
	font-size:0.875rem;
	height:40px;
	line-height:40px;
	padding:0 10px;}
.sub-nav a:hover{
	background-color:#eff3f5;
	box-shadow:0 0 2px rgba(0,0,0,.1);}
.r{
	float:right;
	}
.l{
	float:left;}
.search{
	position:relative;
	height:70px;
	margin-right:10px;
	}
.keywords{
	width:150px;
	height:28px;
	line-height:29px;
	font-size:0.75rem;
	color:#666;
	padding:0 35px 0 17px;
	border-radius:15px;
	border:1px solid rgba(0,0,0,.5);
	outline:none;
	margin:20px 0;
	transition:all .2s ease-out;}
.search:hover .keywords{
	border-color:#3498db;}
.search:hover .icon-btn{
	color:#3498db;}
.keywords:focus{
	width:300px;}
.icon-btn{
	position:absolute;
	right:15px;
	top:20px;
	color:rgba(0,0,0,.5);
	font-size:1.5rem;
	cursor:pointer;}

.login a{
	display:block;
	width:80px;
	height:66px;
	border-top:4px solid transparent;
	font-size:0.875rem;
	text-align:center;
	line-height:60px;
	color:#3498db;
	}
.login i{
	font-size:1.25rem;
	}

以前看设计类的教程都在站酷和优设，昨天才发现UI中国其实也有很多很好的设计教程。除了看教程之外，是时候买一些设计书好好系统的看看了。