html 之一个简单的导航栏

仅仅只是模仿淘宝的导航栏而已

效果图如下：

简单介绍一下：

两个div，子元素的div居中显示，鼠标浮动上去会改变字体的颜色和背景图

完整代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<style type="text/css">* {margin: 0;padding: 0;font-family: Arial, Helvetica, sans-serif;}.red {background-color: pink;height: 50px;opacity: 0.6;}.wheat {height: 50px;width: 1200px;background-color: wheat;margin: 0 auto;}.wheat::after {content: "";display: block;clear: both;}.wheat ul {list-style: none;}.wheat ul li {float: left;margin: 0 20px;font-size: 25px;line-height: 50px;}.wheat ul li a {text-decoration: none;display: inline-block;color: tomato;padding: 0 15px;}.wheat ul li a:hover {background-color: orangered;color: white;border-radius: 15px;}
</style><body><div class="red"><div class="wheat"><ul><li class="item"><a href="#">天猫</a></li><li class="item"><a href="#">聚划算</a></li><li class="item"><a href="#">双十一</a></li><li class="item"><a href="#">儿童节</a></li></ul></div></div>
</body></html>

html 之一个简单的导航栏相关推荐

android仿微信的activity平滑水平切换动画,Android实现简单底部导航栏 Android仿微信滑动切换效果...
Android实现简单底部导航栏 Android仿微信滑动切换效果发布时间:2020-10-09 19:48:00 来源:脚本之家阅读:96 作者:丶白泽 Android仿微信滑动切换最终实现效果 ...
使用html，css实现简单的导航栏
标题:使用html,css实现简单的导航栏一.实现过程首先通过ul,li实现一个无序列表,添加背景得到如图所示的样式[文档流] 让li浮动,使得垂直排列–>水平排列,[注意需要开启bfc,让 ...
【游戏面包屑】简单的导航栏设计
前言为了便于UI的开发,设计了一个简单的导航栏结构.目前版本的导航栏抽象类简化了导航栏选项的事件监听.移除.后续根据需求再丰富功能.结构. 本次实例用于设计角色·技能UI窗口的左侧导航栏以及右下角的 ...
html+css简单立体导航栏
html+css简单立体导航栏一.简单立体导航栏效果二.代码实现 1.html 2.css 一.简单立体导航栏效果二.代码实现 1.html 代码如下(示例): <!DOCTYPE htm ...
HTML 制作简单的导航栏
一个简单的导航栏 <style> ul li {list-style:none; /*去掉li显示的前面的圆点*/width: 120px;text-align: center;float ...
简单浮动导航栏（HTML+CSS实现）
简单浮动导航栏,鼠标移上去自动展开下拉菜单,使用HTML+CSS实现. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...
前端-01-编写简单的导航栏
导航栏基础的HTML语法我就不讲了,这些在W3C.菜鸟教程.壹佰教程等都能找到,下边我就分享一个前端导航栏是怎么写出来的: 1.工具俗话说,工欲善其事,必先利其器,分享一个写前端的利器,Hbuil ...
HTML css web简单的导航栏
html web简单的导航栏 Emm.. 本人的第一篇博客,不知写点什么.. 也不会写什么,哈哈.由于实习工作所需接触了一些前端的知识.下面是平时工作时无聊学习的css.做一个简单的导航栏. body ...
HTML：1分钟实现简单网站导航栏
hello,大家好,我是wangzirui32,今天我们来学习如何实现简单网站首页. 开始学习吧! 网站首页代码 <!DOCTYPE html> <html lang="e ...

html 之一个简单的导航栏

html 之一个简单的导航栏相关推荐

最新文章

热门文章