.nav {
height: 30px;
background: #e3e4e5;
border-bottom: 1px solid #ddd;
}
.nav-box {
margin: 0px auto;
width: 1190px;
text-align: right;
}
.nav-box ul li {
display: inline-block;
padding: 0px 10px;
font-size: 12px;
height: 30px;
line-height: 30px;
position: relative; /*相对定位*/
}
.nav-box ul li a {
color: #999999;
text-decoration: none;
}
.nav-box ul li:not(:last-child):after {
content: "";
width: 1px;
height: 14px;
background: #cccccc;
position: absolute; /*绝对定位*/
top: 8px;
right: 0px;
display: block;
position没有写,布局不生效
效果肯定是有的,这个字体是继承的,这个背景是自身元素的
什么代码,从哪打开?问问题说清楚一点呀。
html发出来看一下
代码保没保存
没有编译器,因为html不是编译语言,直接用浏览器打开;代码编辑器用的VScode,你可以在VScode里面添加名为Live Server的扩展更方便的在浏览器里面查看更改效果
可以但是不好看
css伪类元素,相当于用css弄出来一个假元素,固定在每个li的右侧。竖线本质是用它的背景显示出来的,背景黑色宽度1px看起来就是一根竖线