HTML/css理解before：after：学习之-导航条案例2

来源：互联网发布：数学画图软件编辑：程序博客网时间：2024/06/17 14:06
第一部分：效果展示（默认是白色的横条，当鼠标移到某一块，该块变为黄色，并向上凸起）

第二部分：整体代码(在代码中有相关重点知识的解析)

<!DOCTYPE html><html>   <head>      <meta charset='utf-8'/>      <title>css3突出显示动画导航 - 52dvd素材网</title>      <style>         * {             /* Basic CSS reset */            margin:0;             padding:0;         }         body {            /* These styles have nothing to do with the ribbon */            background:url(Images/dark_wood.png) 0 0 repeat;            padding:35px 0 0;            margin:auto;            text-align:center;            /*text-align表示把文本排列到中间。*/         }         .ribbon {            display:inline-block;            /*方式样式化列表时，既可使得列表元素能按行挨个排列，同时元素还能保持其块属性，*/            /*比如高和宽、上下边距等。但是对有不同高度内容的元素时，通常要设置对齐方式如*/            /*vertical-align: top;来使元素顶部对齐。*/         }         .ribbon:after, .ribbon:before {            margin-top:0.5em;            content: "";            float:left;            border:1.5em solid #fff;         }         .ribbon:after {            border-right-color:transparent;         }         .ribbon:before {            border-left-color:transparent;            /*!*transparent表示默认值。边框颜色为透明。*!*/         }         .ribbon a:link, .ribbon a:visited {            color:#000;            /*设置字体颜色为黑色*/            text-decoration:none;            /*默认。定义标准的文本。*/             float:left;             height:3.5em;            overflow:hidden;         }         /*在span标签的字上添加白色背景，并添加向上的动画*/         .ribbon span {            background:#fff;            display:inline-block;            line-height:3em;            /*设置span标签的高为3em*/            padding:0 1em;            /*设置a与span标签之间左右的距离分别为1em,其中1em等于16px*/            margin-top:0.5em;            /*设置span标签离整个div的高8px*/            position:relative;            /*position分类 ：*/            /*1、absolute*/                  /*生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。*/                  /*元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。*/            /*2、fixed*/                  /*生成绝对定位的元素，相对于浏览器窗口进行定位。*/                  /*元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。*/            /*3、relative*/                  /*生成相对定位的元素，相对于其正常位置进行定位。*/            /*因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。*/            /*4、static */                  /*默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。*/            /*5、inherit    */                  /*规定应该从父元素继承 position 属性的值。*/            -webkit-transition: background-color 0.2s, margin-top 0.2s;  /* Saf3.2+, Chrome */            -moz-transition: background-color 0.2s, margin-top 0.2s;  /* FF4+ */            -ms-transition: background-color 0.2s, margin-top 0.2s;  /* IE10 */            -o-transition: background-color 0.2s, margin-top 0.2s;  /* Opera 10.5+ */            transition: background-color 0.2s, margin-top 0.2s;         }         /*鼠标移到a标签上span标签背景色变成黄色，向上移动*/         /*只要是a标签，有链接的就会自动设置鼠标移上去箭头变成手*/         .ribbon a:hover span {            background:#FFD204;            margin-top:0;         }         .ribbon span:before {            content: "";            position:absolute;            top:3em;            left:0;            border-right:0.5em solid #9B8651;            border-bottom:0.5em solid #fff;         }         .ribbon span:after {            content: "";            position:absolute;            top:3em;            right:0;            border-left:0.5em solid #9B8651;            border-bottom:0.5em solid #fff;         }      </style>   </head>   <body>   <br><br><br><br><br><br><br><br><br>      <div class='ribbon'>         <a href='#'><span>Home</span></a>         <a href='#'><span>About</span></a>         <a href='#'><span>Services</span></a>         <a href='#'><span>Contact</span></a>      </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div style="text-align:center;clear:both">   <!--clear:both表示清除全部样式--><p><font color="#FFFFFF">适用浏览器：FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、360、世界之窗。</font></p><br><p><font color="#FFFFFF">来源：</font><a href="http://www.52dvd.com/" target="_blank"><font color="#FFFFFF">52dvd素材网</font></a></p></div>   </body></html>
非常神奇的befor，after

阅读全文
0 0