CSS + HTML导航栏效果

今天写了一个导航栏，需要的效果如下：

实现的代码思路如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>导航栏</title><style type="text/css">*{margin:0;padding: 0;}div{height: 40px;width:960px;background: #55a8ea;margin:0 auto;}span{display: inline-block;font:bold 14px/40px '微软雅黑';color:#fff;margin-left:40px;}span img{position: relative;top:-10px;left:40px;}</style>
</head>
<body><div><span style="display: inline-block;width:70px;background: #00619f;margin:0;padding-left: 40px">首 页</span><span>网站建设</span><span>程序开发</span><span>网络营销</span><span style="margin:0;"><img src="data:images/new.png" alt="new"> 企业VI</span><span>案例展示</span><span> 联系我们</span></div>
</body>
</html>

实现的效果如下:

以上代码仅供参考。

CSS + HTML导航栏效果相关推荐

HTML+JS+CSS筋斗云导航栏效果
要求: 1.鼠标经过某个li,筋斗云跟着到当前的位置 2.鼠标离开这个li,筋斗云回到原来的位置 3.鼠标点击了某个li,筋斗云就留在点击这个位置 <!DOCTYPE html> < ...
html导航图片滚动条,CSS实现导航栏底部动态滚动条效果
预习了CSS3部分的新知识,想着在不使用JS的情况下实现导航栏滚动条效果,如下: 实现滚动条效果,其实就是在标签中让元素的宽度由0变化到100%,代码很简单,如下所示: CSS样式部分: ul.na ...
css订单导航栏横线动画,小程序纯css 实现tab导航栏下划线跟随动画
很多时候在做tab导航的点击时我们都会要上一个过渡的动画,不然的话会显得生硬,用户没有达到比较佳的用户体验.如下图: 在开发者工具中预览效果 t3fyo-a07nj.gif 我们可以用两种方法实现这样 ...
html导航去下划线,纯CSS实现导航栏下划线跟随的示例代码
本篇文章主要介绍了纯CSS实现导航栏下划线跟随的示例代码,分享给大家,具体如下: 效果: 代码: html: aaaa bbbbbbb cccc dddd eeee css: ul { padding ...
利用 html 和 css 实现导航栏下拉(display block、display none)
利用 html 和 css 实现导航栏下拉(display block.display none) 需求设计并实现一个导航栏菜单,对某个项目比如你的个人书籍按类别(硬件类.软件类.语言类.网络类等分 ...
html js左侧导航栏,js实现简单分页导航栏效果
本文实例为大家分享了js实现分页导航栏效果的具体代码,供大家参考,具体内容如下最终的效果: 1. 分页需要的几个重要参数: 总记录条数: totalCount (查数据库) 每页记录数: pageS ...
html横向导航栏滑动效果,JavaScript实现滑动导航栏效果
本文实例为大家分享了js实现滑动导航栏效果的具体代码,供大家参考,具体内容如下 *{ margin: 0; padding: 0; } .navScroll{ position: relative; ...
HTML+CSS一级导航栏
大一学的都忘记了,有机会重新学习一遍,简单记录下(小傻猫),日常记录学习 HTML <!DOCTYPE html> <html lang="en"> &l ...
闪亮的玻璃图标悬浮导航栏效果
闪亮的玻璃图标悬浮导航栏效果 https://www.bilibili.com/video/BV1H44y157nr FROM :B站UP:艾恩小灰灰 <!DOCTYPE html> &l ...

CSS + HTML导航栏效果

CSS + HTML导航栏效果相关推荐

最新文章

热门文章