html怎么导航栏中加边框,html – 使用CSS在导航栏中显示边框三角形

我正在尝试创建一个带有箭头的导航栏,该项目位于项目上方.这是我想要做的：

对于箭头,我使用了之前和之后的伪元素.以下是一些代码：

body {

background: #FFFFFF;

color: #FFFFFF;

margin: 0px;

padding: 0px;

height: 100%;

}

.clear {

clear: both;

}

.page-wrap {

width: 980px;

margin: 0px auto;

height: 100%;

}

#main-menu {

background: white;

height: 55px;

width: 100%;

padding: 0px;

margin: 0px;

border-bottom: 1px solid black;

}

ul {

font-family: Arial, Verdana;

font-size: 18px;

margin: 0;

padding: 0;

list-style: none;

}

ul li {

display: block;

position: relative;

float: left;

}

li ul {

display: none;

}

ul li a {

display: block;

text-decoration: none;

color: black;

padding: 0 9px 0 9px;

background: white;

margin-left: 1px;

white-space: nowrap;

line-height: 55px;

font: 18px;

font-family: Arial, Helvetica, sans-serif;

outline: none;

}

ul li a:hover {

color: black;

}

#menu a:hover:after {

content: "";

position: absolute;

top: 40px;

left: 50%;

margin-left: -15px;

width: 0px;

height 0px;

xxmargin: 0px auto;

border-left: 15px solid transparent;

border-right: 15px solid transparent;

border-bottom: 15px solid black;

}

Recommended
Recent

由于边框颜色,箭头为黑色.如何只显示箭头的边框？

html怎么导航栏中加边框,html – 使用CSS在导航栏中显示边框三角形相关推荐

html在边框线中加文本框,怎么设置幻灯片里的文本框边框线？
通过设置文本框格式来实现选中刚刚插入的文本框,右键,选择"设置自选图形/图片格式": 在文本框格式中的颜色与线条界面中,将线条的颜色改为无颜色,然后点击保存. 可以用border ...
css制作动态按钮导航栏,巧妙使用checkbox制作纯css动态导航栏
前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked ...
在php中加css_php学习之css入门（一）
1.css的介绍 css:层叠样式表,它是cascading style sheets的缩写,作用就是给html标签加表现形式(样式显示) 如:字体.图片.列表.位置等在浏览器中可以看到部分: ht ...
如何在表格数据中加同一个数_怎么在excel表格中的数字前统一加一个字母
怎么在excel表格中的数字前统一加一个字母以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! 怎么在excel表格中的数字 ...
android在xml中加载大图,android – 如何在布局xml中添加循环视图
您无法将aar文件添加到Eclipse中的libs文件夹(它不是jar文件) 目前,使用新的RecyclerView的最佳方式是切换到Android Studio并将此依赖项添加到build.grad ...
html中加hover啥意思,css中hover是什么意思
css中:hover是一个伪类选择器,:hover伪类选择器在鼠标移到元素上时向此元素添加特殊的样式.:hover选择器适用于所有元素. 要使用css对HTML页面中的元素实现一对一,一对多或者多对一 ...
html div 虚线边框样式,纯CSS实现渐变虚线框和边框滚动动画
渐变虚线边框如果对边框的样式细节不是很在意,我们可以借助反向镂空的方法实现,也就是虚线原本实色的地方和周围颜色融为一体,看上去透明,而原来虚框透明的部分透出渐变背景色,于是看上去像是渐变色. 以下是 ...
html边框有箭头,css简单实现带箭头的边框
css简单实现带箭头的边框普通边框 .border { width: 100px; height: 50px; border: 1px solid red; } 实现由四个三角形组成的正方形 .tr ...
html5鼠标滑过边框内外发亮,JS实现鼠标滑过显示边框的菜单效果
本文实例讲述了JS实现鼠标滑过显示边框的菜单效果.分享给大家供大家参考,具体如下: JS鼠标滑过显示边框菜单 .menulines{ border:1px solid white; } .menuli ...
go语言html css,html – 在Golang中加载图像和CSS
我在项目根目录的package main中的server.js中设置了一个路由 http.HandleFunc( "/",route.IndexHandler) IndexHand ...

html怎么导航栏中加边框,html – 使用CSS在导航栏中显示边框三角形

html怎么导航栏中加边框,html – 使用CSS在导航栏中显示边框三角形相关推荐

最新文章

热门文章