利用css3实现文字阴影导航



48 188 63



特效描述:利用css3实现 文字 阴影导航,利用css3实现文字阴影导航

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/base.css" media="all" />

2. HTML代码

<div class="page">
	<header id="header">
		<hgroup class="white blank">
          </hgroup>
	</header>
	<section class="demo clearfix">
<div class="main-menu">
	<div class="brand">
		<div class="btn-group">
			<button type="button" class="sign-in">Sign in</button>
            <button type="button" class="register">Register</button>
		</div>
		<a href="#" class="logo">YOUR LOGO</a>
		<div class="search-field">
			<input type="search" placeholder="Search" />
			<a class="search-icon">s</a>
		</div>
	</div>
	<ul class="nav clearfix">
		<li><a href="#">NFL</a></li>
		<li><a href="#">MBL</a></li>
		<li><a href="#">NBA</a></li>
		<li><a href="#">NHL</a></li>
		<li><a href="#">NCAAF</a></li>
		<li><a href="#">NCAAB</a></li>
		<li><a href="#">NASCAR</a></li>
		<li><a href="#">GOLF</a></li>
		<li><a href="#">SOCCER</a></li>
		<li><a href="#">TENNIS</a></li>
		<li>
			<a href="#">MORE</a>
			<ul class="more-sport">
				<span class="header">Sports</span>
				<li>
					<a href="#">Aussie Football</a>
					<a href="#">MSL</a>
					<a href="#">CFL</a>
					<a href="#">NCAA Baseball</a>
					<a href="#">Cricket</a>
					<a href="#">Olympics</a>
				</li>
				<li>
					<a href="#">Cycling</a>
					<a href="#">Rugby</a>
					<a href="#">Formula One</a>
					<a href="#">Rugby World Cup</a>
					<a href="#">Horse Racing</a>
					<a href="#">Tennis</a>
				</li>
				<li>
					<a href="#">Indycar</a>
					<a href="#">Winter Sports</a>
					<a href="#">Investigations</a>
					<a href="#">WNBA</a>
					<a href="#">Junior Hockey</a>
				</li>
				<span class="footer"> Last update: Today,28 September,12 minutes 
					ago <a href="#">ALL SPORTS</a> </span>
			</ul>
		</li>
	</ul>
</div>
	</section>
</div>
<div style="text-align:center;clear:both">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 二级导航菜单 下拉导航菜单 竖直导航菜单 图标导航菜单 固定导航菜单 侧边导航菜单 树形导航菜单 网址导航菜单 导航菜单插件 文字导航菜单 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 导航菜单导航条

×
×
51前端

注册

官方QQ群
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到