利用CSS3实现现代头部导航



57 225 76



特效描述:利用CSS3实现 现代 头部导航,利用CSS3实现现代头部导航

代码结构

1. 引入CSS

<link href="css/main.css" rel="stylesheet" type="text/css" />

2. HTML代码

        <div id="header">
            <!-- logo -->
            <a href="#" id="logo"><img src="images/logo.png"></a>
            <!-- extra top links -->
            <div id="links">
                <a href="#">About us</a>
                <a href="#">Help</a>
                <a href="#">Contact Us</a>
            </div>
            <!-- navigation menu -->
            <div id="navmenu">
                <nav id="menu">
                    <ul>
                        <li class="active"><a href="index.php">Home</a>
                            <ul>
                                <li><a href="#"><span class="icon elem1"></span>
								Facebook</a></li>
                                <li><a href="#"><span class="icon elem2"></span>
								Google</a></li>
                                <li><a href="#"><span class="icon elem3"></span>
								RSS</a></li>
                                <li><a href="#"><span class="icon elem4"></span>
								Skype</a></li>
                                <li><a href="#"><span class="icon elem5"></span>
								Stumbleupon</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Faces</a>
                            <ul>
                                <li><a href="#"><span class="icon elem0"></span>
								menu element 1</a></li>
                                <li><a href="#"><span class="icon elem0"></span>
								menu element 2</a></li>
                                <li><a href="#"><span class="icon elem0"></span>
								menu element 3</a></li>
                                <li><a href="#"><span class="icon elem0"></span>
								menu element 4</a></li>
                                <li><a href="#"><span class="icon elem0"></span>
								menu element 5</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Clubs</a>
                            <ul>
                                <li><a href="#"><span class="icon elem0"></span>
								menu element 1</a></li>
                                <li><a href="#"><span class="icon elem0"></span>
								menu element 2</a></li>
                                <li><a href="#"><span class="icon elem0"></span>
								menu element 3</a></li>
                                <li><a href="#"><span class="icon elem0"></span>
								menu element 4</a></li>
                                <li><a href="#"><span class="icon elem0"></span>
								menu element 5</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Photos</a>
                            <ul>
                                <li><a href="#"><span class="icon elem0"></span>
								menu element 1</a></li>
                                <li><a href="#"><span class="icon elem0"></span>
								menu element 2</a></li>
                                <li><a href="#"><span class="icon elem0"></span>
								menu element 3</a></li>
                                <li><a href="#"><span class="icon elem0"></span>
								menu element 4</a></li>
                                <li><a href="#"><span class="icon elem0"></span>
								menu element 5</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Videos</a></li>
                        <li><a href="#">Games</a></li>
                        <li><a href="#">Blog</a>
                            <ul>
                                <li><a href="#"><span class="icon elem0"></span>
								menu element 1</a></li>
                                <li><a href="#"><span class="icon elem0"></span>
								menu element 2</a></li>
                                <li><a href="#"><span class="icon elem0"></span>
								menu element 3</a></li>
                                <li><a href="#"><span class="icon elem0"></span>
								menu element 4</a></li>
                                <li><a href="#"><span class="icon elem0"></span>
								menu element 5</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Classifieds</a></li>
                    </ul>
                </nav>
                <!-- search form -->
                <div id="search">
                    <form role="search" method="get">
                        <input type="text" placeholder="search..." name="s" value="" autocomplete="off" />
                    </form>
                </div>
            </div>
        </div>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<div style="text-align:center;clear:both">
<font color="#444444"><br>
</font>
</div>



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


热门标签: 图片头像上传 二级导航菜单 文件上传 下拉导航菜单 文本框 竖直导航菜单 下拉框 图标导航菜单 复选 固定导航菜单 单选 侧边导航菜单 登录框 树形导航菜单 注册框 网址导航菜单 搜索框 导航菜单插件 验证码 文字导航菜单 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 切换按钮 form表单 导航菜单导航条

×
×
51前端

注册

官方QQ群
qq群

扫描上面二维码加微信群

官方QQ群

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

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