纯CSS+DIV实现的竖向菜单（简单例子，提供学CSS的朋友学习）

最新推荐文章于 2022-10-31 16:36:13 发布

一把编程的菜刀

最新推荐文章于 2022-10-31 16:36:13 发布

阅读量2.5k

点赞数

分类专栏： CSS技术与兼容文章标签： css div border menu 产品

本文链接：https://blog.csdn.net/chinmo/article/details/3437134

版权

CSS技术与兼容专栏收录该内容

12 篇文章 0 订阅

订阅专栏

 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>纯CSS+DIV实现的竖向菜单</title>
<style>
.menu{
width:200px;
}
.menu a,.menu a:visited{
text-decoration:none;/*文字无下滑线*/
text-align:center;/*文字水平居中对齐*/
color:#c00;/*红色文字*/
display:block;/*设置为块状元素*/
padding:4px;/*内边距*/
background:#FFF;/*背景色*/
border: 1px solid #fff;/*与背景色相同边框，防止跳动*/
width:130px;
position:relative;/*使用相对定位*/
}
.menu a:hover{
border:solid 1px #c00;/*边框颜色红色*/
}
.menu a span{
display:block;/*设置为块状元素*/
position:absolute;/*使用绝对定位*/
width:0px;/*宽度为0*/
height:0px;/*高度为0*/
border:solid 8px #fff;/*设置默认边框样式*/
top:4px;/*竖直方向的定位*/
overflow:hidden;
}
.menu a span.left{
border-left-color:#c00;
left:8px;
}
.menu a span.right{
border-right-color:#c00;
right:8px;
}
</style>
</head>
<body>
<div class="menu">
    <a href="#">
      <span class="left"></span>
      首页
      <span class="right"></span>
    </a>
        <a href="#">
          <span class="left"></span>
          新闻
          <span class="right"></span>          </a>
        <a href="#">
          <span class="left"></span>
          产品  
          <span class="right"></span> 
          </a>
</div>
</body>
</html>
 