HTML字母导航栏怎么做,如何用css做导航栏?
如何用css做导航栏?
1、新建一个html文件,在head部分,编写css样式
○ list-style-type: none;是除掉导航前面默认带的点
○ li a,li a.active ,li a:hover:not(.active) 设置鼠标滑到导航栏的颜色变化,如下图所示:
2、在html页面body里面编写导航栏内容
○ 通过
来实现导航栏,完整代码如下图所示:
(相关课程推荐:css视频教程)
3、在浏览器中打开页面,可以看到已经制作成了一个比较美观的垂直导航栏,如下图所示:
4、将鼠标滑向垂直导航栏的列表项上,可以看到列表项颜色发生变化,如下图所示:
5、也可以制作成水平导航栏
○ overflow: hidden; 代码的意思是超出高度和宽度的部分自动隐藏
○ float: left;使导航栏水平显示,完整代码如下图所示:
6、在浏览器中打开页面,可以看到制作出美观的水平导航栏,如下图所示:
本文来自css3答疑栏目,欢迎学习!
HTML字母导航栏怎么做,如何用css做导航栏?相关推荐
- css响应式布局_Web前端新手怎么入门 如何用CSS做响应式布局
Web前端新手怎么入门?如何用CSS做响应式布局?很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清,简单来说响应式布局相当于流动网格布局,而自适应布局等于使用固定分割点来进行布局.接 ...
- window safari 怎么进入响应式_Web前端新手怎么入门 如何用CSS做响应式布局
Web前端新手怎么入门?如何用CSS做响应式布局?很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清,简单来说响应式布局相当于流动网格布局,而自适应布局等于使用固定分割点来进行布局.接 ...
- 如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...
- 【CSS】如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...
- 如何用CSS做百叶窗特效
今天就教大家如何用css来实现百叶窗特效 基本原理就是 background-size: cover; 定位的使用 话不多说看代码 下面是HTML的代码 <div class="cov ...
- 如何用CSS做倒计时/圆形进度条效果
前言:有时,我们会见一些圆形的进度条,随着进度条的推进,进行倒计时的变化. 若是只实现一个圆环的话,只用border和border-radius就能画出来. 但是这样的圆环不能动,产生进度条效果的重要 ...
- html纵向导航,【练习实例】HTML+CSS制作导航栏(横向与纵向)
纵向导航栏 建立一个列表 主页 新闻 联系 关于 2. 定义列表基本样式 ul{ /*去掉列表的样式*/ list-style-type: none; width: 200px; background ...
- 如何用CSS做六边形图片/蜂巢形图集(详解)
目标效果: 要达到蜂巢形的图集展示,实质上就是做六边形图片. 实现思路: 1.一个大div内有两个子div,分别将两个div顺时针和逆时针旋转60度,形成六边形: 2.给三个div加同一个背景,调节背 ...
- 如何用css做一个正方形(自适应屏幕宽度)
DOM结构 <div class="img-container"><div class="img-box"><img src=&q ...
最新文章
- python画画代码大全_太赞了,微软正式推出 Python 零基础教程!
- oracle服务端用sql查看连接到数据库的IP
- jvm性能调优实战 - 31从测试到上线_如何分析JVM运行状况及合理优化
- Echarts中Option属性设置
- 【瞎搞】 Codeforces Round 276 DIV 2 C.Bits
- java弹出虚拟键盘_JS实现电脑虚拟键盘的操作
- 1006 换个格式输出整数 (15分)
- 简单的LRU Cache设计与实现
- 重新实现unity3d的Mecanim动画混合 (2) 2D Freeform Cartesian
- php中 $_cfg,php 中 get_cfg_var() 与 ini_get() 的异同
- uniapp连接蓝牙电子秤
- SIM800L透传模式配置
- 用友软件用友二次开发用友单据导入用友凭证导入工具用友EXCEL导入工具EXCEL导入凭证
- matlab n次贝塞尔曲线
- 14.hibernate的入门
- gprs java_GPRS类型一览
- sat考试用计算机,SAT考试怎么选择计算器
- dango models and database ---- verbose name
- 怎么做HTML焦点图+实例练习
- 我对袁萌老先生的一些偏见