分布式文件系统概述

HDFS概念

HDFS原理演示

.detail_list_icon {   border-bottom: 1px solid lightgrey;  height:48px;  width:220px; } .detail_list_icon:hover{  background: #F0F0F0;}

------------------------------------------------------------------------------------------------

<!--num 1-->
  <div class="_initiate_outline_icon" >
      <div class="_initiate_outline_num">
          <a >1</a>
      </div>
      <div class="_initiate_outline_character">背景</div>
  </div>
  <!--num 2-->
  <div class="_initiate_outline_icon">
      <div class="_initiate_outline_num">
          <a>2</a>
      </div>
      <div class="_initiate_outline_character">分布式存储系统HDFS</div>
  </div>
  <!--num 3-->
  <div class="_initiate_outline_icon">
      <div class="_initiate_outline_num">
          <a>3</a>
      </div>
      <div class="_initiate_outline_character">MapReduce计算框架</div>
  </div>

._initiate_outline_icon {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  float:right;
  height:73px;
  /*left: 10px;*/
  top: 20px;
  padding-top: 22px;
  font-size:18px;
  width:100%;
  color: #FFFFFF;
}

._initiate_outline_icon a {
  color:white ;
}

._initiate_outline_icon:hover{
  background: white;
  color: #3D9DC5;
}

下面为什么这么写，要在._initiate_outline_icon:hover后再

写一个._initiate_outline_num？？？？？？？？？？

._initiate_outline_icon:hover ._initiate_outline_num{
  background: #3D9DC5;
}

._initiate_outline_icon:hover ._initiate_outline_num a {
  color: #FFFFFF!important;
}

两个伪元素的配合使用

​​html​​

​​::after​​ 和 ​​::before​​ 就是我们今天来探讨的 ​​css​​ 伪元素之二 - ​​:before && :after​​。

伪元素

​​css​​

selector:pseudo-element {property:value;}

selector:pseudo-element {property:value;}

​​property​​ 是指伪元素的属性。此外，​​css​​

selector.class:pseudo-element {property:value;}

selector.class:pseudo-element {property:value;}

伪元素就是这样通过赋值给自己属性从而给指定的选择器添加上样式的效果。

:before

​​:before​​

.before:before{content:'you before'; color:red;}

<div class="before"> me</div>

​​:before​​ 添加了属性 ​​content​​，并赋值为 ​​you before​​。我们来看效果：

 //在指定元素的内容 ​​me​​ 前添加了新内容 ​​you before​​​​:before​​ 添加的新内容区域默认的 ​​display​​ 属性值为 ​​inline​​，那么我们可不可以修改新内容区域的属性，答案是肯定的。你可以像修改其他元素一样修改它的样式，我们来将它的 ​​display​​ 属性值来改为​​block​​。

.before:before{content:'you before'; display:block; color:red;}
<div class="before"> me</div>

现在我们再来看下效果：

 　//由伪元素 ​​:before​​

content 属性

​​:before​​ 和 ​​:after​​ 而言，属性 ​​content​​ 是否为必选项呢？我们尝试把 ​​content​​

.before:before{display:block; color:red;}
<div class="before"> me</div>

 //没有了 ​​content​​ 属性，新内容自然是为空的

 //同时我们查看 ​​html​​ 源码会发现，​​:before​​

那么我们设为空呢？

.before:before{content:''; display:block; color:red;}
<div class="before"> me</div>

 //新内容依然为空

 //此时 ​​:before​​​​:before​​ 和 ​​:after​​ 而言，属性 ​​content​​ 是必须设置的，那么在上面的例子，我们知道属性的值可以为字符串，那么还可以为其他形式吗？答案是可以的，它还可以是指向一张图片的 ​​URL​​:

content: url( "img/icon.png" )

配合伪类使用

​​:before​​ 还可以配合伪类使用，这里举经常与 ​​:before​​ 配合使用的伪类 ​​:hover​​

.before:hover:before{content:'you before'; color:red;}
<div class="before"> me</div>

 //无内容

 //鼠标移至 ​​div​​​​.before:before:hover​​

配合取值函数 attr() 使用

​​attr()​​

a::before{content: attr(title)}
<a href= title="专业面向开发者的中文技术问答社区"></a>

此时达到的效果相当于：

全选 复制 放进笔记

<a href=>专业面向开发者的中文技术问答社区</a>

:after

​​:after​​ 与 伪元素 ​​:before​​ 类型相同，只不过它指定的属性 ​​content​​

.after:after{content:'after you'; color:#F00;}
<div class="after">I </div>

 //伪元素 ​​:after​​​​:after​​ 其他特征与 ​​:before​​