您的位置：首页 > Web前端 > CSS

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

2017-08-03 10:32 676 查看

第一部分：效果展示（默认是白色的横条，当鼠标移到某一块，该块变为黄色，并向上凸起）



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

<!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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html css 导航条案例
相关文章推荐
新的分享
章节导航