html+css导航栏制作——20160313

水平导航栏(一)

HTML部分:

<ul>

<li><a href="#"><span>个人首页</span></a></li>

<li><a href="#"><span>个人首页</span></a></li>

<li><a href="#"><span>个人首页</span></a></li>

<li><a href="#"><span>个人首页</span></a></li>

<li><a href="#"><span>个人首页</span></a></li>

<li><a href="#"><span style="border-right:none;">个人首页</span></a></li>

</ul>

CSS部分:

*{

margin:0px;  padding:0px;

}

ul{

margin:20px auto 0px auto;

list-style:none;

width:1000px;

background-color:#rgba(1, 114, 65, 0.95);

}

li{

position:relative;

display:inline-block;

margin-left:-8px;

}

a{

color:#fff;

text-decoration:none;

}

a:hover{

background-color:rgba(234, 234, 234, 0.54);

}

span{

line-height:40px;

padding:0px 20px;

border-right:1px solid #fff;

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 8,385评论 0 11
  • 不会用代码框,所以看着有些乱套,,,,html部分 <!DOCTYPE html> 迅雷看看 ...
    这就是个帅气的名字阅读 5,453评论 0 0
  • 1.CSS简介 Cascading Style Sheet 层叠样式表 主要用来定义页面中的表现,HTML 描述页...
    hyt222阅读 4,377评论 0 0
  • 南通是紧邻长江中下游的一座小城,紧依长江,与苏州、常熟隔江相望,地理位置的特殊性赋予了这座城市既南既北的气息。因为...
    来自沙之海洋阅读 2,839评论 0 2
  • 时间漂浮在微微湿润的空气里,困倦的梦儿在流光中缱绻。 ——题记 我做了一场梦。 在白茫茫的梦里,我只身一人站在一排...
    诗人与王阅读 2,750评论 0 3