hmtl5，css 导航栏header

已于 2024-03-11 11:27:25 修改
阅读量466 收藏 10
点赞数 11
文章标签： css 前端
于 2024-03-11 11:19:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/usqqs/article/details/136618695
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航栏</title>
</head>
<body>
<!--header 导航栏-->
<div class="header">
    <div class="container">
        <nav class="navbar navbar-default" role="navigation">
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#">首页</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            商品分类
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu multi-column columns-2">
                            <li>
                                <div class="row">
                                    <div class="col-sm-12">
                                        <h4>商品分类</h4>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">热销</a></li>
                    <li><a href="#">新品</a></li>
                    <li><a href="#" class="active">注册</a></li>
                    <li><a href="#">登录</a></li>
                </ul>
            </div>
        </nav>
        <div class="header-info">
            <div class="header-right search-box">
                <a href="javascript:;">
                    <span class="glyphicon glyphicon-search" aria-hidden="true">
                    </span>
                </a>
                <div class="search">
                    <form class="navbar-form" action="/good_search">
                        <input type="text" class="form-control" name="keyword">
                        <button type="submit" class="btn btn-default" aria-label="Left Align">搜索</button>
                    </form>
                </div>
            </div>
            <div class="header-right cart">
                <a href="goods_cart.jsp">
                    <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true">
                        <span class="card_num"></span>
                    </span>
                </a>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="clearfix"></div>
    </div>
</div>

<!--//header-->

</body>
</html>
不吃青椒先生
关注
  • 11
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3 +HTML5入门到精通
07-01
《HTML+5+从入门到精通》-中文学习教程
HTML5 CSS3 ： 3D立方体旋转动画实例源码
07-12
代码为博客实例代码：http://blog.csdn.net/lmj623565791/article/details/34120047 有问题博客中留言
HTML5+CSS3 精美登陆界面源码
01-19
3个很精美的登陆界面，全都是用HTML5+CSS3开发的，所以可能不适合低版本IE浏览器。大家可以下来看看，做的超级漂亮的。
25 个免费的 HTML5 CSS3 jQuery 下拉菜单
02-19
25 个免费的 HTML5 CSS3 jQuery 下拉菜单
HTML5 CSS3 专题 ：诱人的实例 3D旋转木马效果相册实例源码
07-12
代码为博客实例代码 http://blog.csdn.net/lmj623565791/article/details/32964301 有问题博客中留言
HTML+CSS - 导航栏下拉菜单
weixin_45959965的博客
12-17 1712
【代码】HTML+CSS - 导航栏下拉菜单。
CSS — 导航栏篇（二）
畅谈、
01-05 2334
CSS 和 HTML 综合应用之导航栏。让你初步了解导航栏的组成和写法
Html5+CSS3 实现网站头部 导航栏和二级导航栏
热门推荐
小绵杨
11-03 1万+
需求 利用html5和css3来做一个网站头部，以及包含二级菜单的导航栏。 实现图如下：悬浮导航栏展开二级导航栏 实现 css代码：index.css /* css样式初始化 */ * { font-family: 'Poppins', sans-serif; margin: 0; padding: 0; box-sizing: border-box; outline: none; border: none; text-decoration: non
HTML+CSS一级导航栏
Tina_dl的博客
03-26 3466
大一学的都忘记了，有机会重新学习一遍，简单记录下（小傻猫），日常 记录学习 HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-...
HTML5 CSS3 ： 进度条的实现实例源码
07-12
代码为博客实例代码：http://blog.csdn.net/lmj623565791/article/details/34825865 有问题，博客中留言
CSS利用伪元素实现导航栏斜线分隔
12-30
先看看效果： 开始切第一张图了，第一个遇到的问题是顶部导航栏这里，用斜线分割。想到的思路是用伪类:before或者:after实现 先写html结构。 XML/HTML Code复制内容到剪贴板 <!– 导航栏begin –>       <div u00a0class=header_right fr>       <a>Home</a>       <a>About</a>       <a>Features</a>  
HTML5 CSS3 专题 ：3D展示商品信息项目完整实例源码
07-12
代码为博客实例代码：http://blog.csdn.net/lmj623565791/article/details/32974051 有问题博客中留言
HTML5 CSS3 ：canvas 模拟实现电子彩票刮刮乐实例代码
07-12
代码为博客实例代码http://blog.csdn.net/lmj623565791/article/details/34089553 有问题博客中留言
HTML5 CSS3 ：无插件拖拽上传图片实例源码
07-12
代码为博客实例代码：http://blog.csdn.net/lmj623565791/article/details/31513065 有问题博客中留言
一步步教大家编写酷炫的导航栏js+css实现
12-28
一步一步的学习制作导航栏，文章末尾再做个综合页面，分享给大家一个炫酷的导航栏供大家参考，具体内容如下 1.当前页面高亮显示的导航栏 首先是HTML代码,很简单,ul+li实现菜单 <!DOCTYPE html> <html lang=en...
HTML+CSS大作业-静态网页设计大作业HTML+CSS的美食静态网页设计项目源码.zip
最新发布
01-14
3. 页面结构设计：在HTML文件中使用语义化标签（如header、nav、section、footer等）来划分页面的结构，考虑导航栏、页头、页脚和主体内容等部分。 4. 样式设计：在CSS文件中设置全局的样式，包括字体、颜色、背景...
html+css+js实现班级网页
03-19
2. body部分主要由导航栏和具体内容构成，内容包含班级动态、班级介绍、班级相册三部分。下图班级动态，展示有关学院和班级的新闻，活动和公告，便于同学们实时地了解班内外的事件。3. 班级介绍。班级的小资料站，...
使用 HTML/CSS 实现-顶部导航栏
04-14
您可以在HTML页面的header区域放置一个导航栏的容器，然后使用CSS样式来设计导航栏的外观和布局。您可以使用CSS的flexbox属性来设置导航栏的布局和位置，也可以使用CSS的hover伪类属性来增加导航栏的交互效果，使...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值