每天看优设、站酷、UI中国的时间已经多过了前端网的时间了,难道我要转行UI吗?虽然我挺喜欢UI的,可是我还是恋恋不舍我的前端,总觉得自己用代码来表现效果更顺手呢。
仿了一个UI中国的头部导航,但是改变了它搜索框的效果。
万博manbext3.0首页登录下载↓
链接:http://pan.baidu.com/s/1geFljA7 密码:0im8
一、万博manbext3.0首页登录知识点
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;
}
以前看设计类的万博manbext备用网址都在站酷和优设,昨天才发现UI中国其实也有很多很好的设计万博manbext备用网址。除了看万博manbext备用网址之外,是时候买一些设计书好好系统的看看了。
发表评论:
◎请发表你卖萌撒娇或一针见血的评论,严禁小广告。