html水平导航栏代码连接状态,水平导航栏1.html

简单的水平导航栏

*{margin: 0;padding: 0;font-size: 16px;}

body{

background-image: url(4.jpg);

}

.ul{

list-style: none;

border-bottom: 5px orange solid;

height: 50px;/*li浮动后，脱离文档流，所以要给ul定义宽度(自适应)和高度。*/

padding-left: 50px;/*将表格整体向左偏移。*/

position: relative;

}/*去掉ul的宽度不然无法浮动成一行。*/

.ul a{

background-color: #005CAF;

color: #F4A7B9;

height: 30px;

line-height: 30px;

width: 100px;

display: block;/*重要点，设置为块级元素，这样可以直接对a设置样式，而不用对li设置。*/

margin-right: 10px;

text-decoration: none;

text-align: center;/*a标签文本居中对齐。*/

border:2px solid #a1a1a1;/*圆角矩形框*/

border-radius:25px;

}

a:hover{

background-color: #FFC408;

color: white;

}

.ul>li{

float: left;

margin-top: 18px;

}

.ul2{

position:absolute;

left: 50px;

top: 50px;

height: 0;/*设置高度为零，才能隐藏起来。*/

overflow: hidden;

}

.ul li:hover .ul2{

overflow: visible;

}

首页
- T.O.P
- GDragon
- TaeYoung
新闻
博客
照片
留言

一键复制

编辑

Web IDE

原始数据

按行查看

历史

html水平导航栏代码连接状态,水平导航栏1.html相关推荐

html的水平分割线颜色代码,html中水平分割线的九种特效_百科369
html中水平分割线的九种特效_百科369 2018-09-14 2. CSS方法 HTML中水平分割线的九种特效 1. 右边渐变透明或本例使用了CSS的alpha滤镜. 2. 左边渐变透明或 ...
html导航栏圆角,纯css实现蓝色圆角效果水平导航菜单代码
纯css实现蓝色圆角效果水平导航菜单代码这是一款可爱的蓝色圆角水平导航菜单,用到几张背景图片,我觉得这款菜单挺实用,特别是用在个人博客中非常合适.在兼容性方面做的'也很好,几乎兼容所有的浏览器. 运 ...
产品图片无缝水平滚动效果代码
产品图片无缝水平滚动效果代码: 在众多的网站都有这样的效果,那就是产品图片可以不间断的无缝滚动,效果挺美观的,也给静态的页面增加了几分动感,也便利了浏览者查看产品,算是比较好的效果吧,下面就介绍一下如 ...
【CSS】课程网站 Banner 制作 ② ( Banner 栏版心盒子测量 | Banner 版心盒子模型左侧导航栏代码示例 )
文章目录一.Banner 栏版心盒子测量 1.测量版心元素尺寸 2.课程表测量二.Banner 版心盒子模型左侧导航栏代码示例 1.HTML 标签结构 2.CSS 样式 3.展示效果一.Bann ...
html水平进度轴代码,水平时间轴 html + css
比较粗糙,效果如图这个是写微信页面时写的,pc 也是一样的效果代码如下: 预约行家确认付款见面评价付款剩余时间:: css: .time_line_box{ position: rela ...
SpringBoot代码复用——thymeleaf提取导航栏并插入或替换元素
文章目录创建通用文件commons 提取导航栏 1.找到导航栏所在代码块 2.把导航栏的前端代码块移入commons并命名 3.在各个有需求的html文件中使用导航栏组件创建通用文件commons ...
Flutter底部导航栏BottomNavigationBar页面状态保持解决方案
网易云[玩转大前端]配套课程 EDU配套教程 Flutter开发的点滴积累系列文章一行代代码置灰应用?对就是这么干在实际应用开发中,一般应用的首页面会有这种结构,在Flutter应用开发中,有多 ...
直播系统代码，自行更改导航栏样式
直播系统代码,自行更改导航栏样式实现的相关代码 1.添加导航栏的UI引用 app.module.tsimport { MatToolbarModule } from '@angular/materia ...
单片机只会调库和复制别人的代码是什么水平？
单片机只会调库和复制别人的代码是什么水平? 前言什么是调库? 如何不调库点亮一个LED 调库与不调库的区别为什么要操作寄存器结语前言相信对于学习过单片机的同学对于调库这个操作都不陌生,大家都 ...
如何预期计算cuda kernel代码的性能水平
CGMA(Compute to Global Memory Access) CGMA的定义是在CUDA程序的某一个区域内每次访问全局存储器时,执行浮点运算的次数,通过对某一个区域代码计算CGMA值,大 ...

html水平导航栏代码连接状态,水平导航栏1.html

html水平导航栏代码连接状态,水平导航栏1.html相关推荐

最新文章

热门文章