移动web开发（五）

1.结构性选着器

1.1

div+p{ 
    background-color:yellow;
}

代码演示：

欢迎来到我到的主页


我是唐老鸭。
我住在 Duckburg。


我最好的朋友是米老鼠。

我的样式不会改变。

效果演示：

20170214095949.png

1.2

p~ul
{
background:#ff0000;
}

代码演示：

一个 div 元素。

  
咖啡
  
牛奶
  
茶


第一段。

  
咖啡
  
牛奶
  
茶


另一个列表

  
咖啡
  
牛奶
  
茶

效果演示：

![Uploading 20170214095949_438810.png . . .]
](http://upload-images.jianshu.io/upload_images/2906565-10b45b767805dd3a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

2.字体图标

2.1：使用方式

   @font-face{
       font-family: "wjs";
       src:
            url(../fonts/MiFie-Web-Font.eot) format("embedded-opentype"),
            url(../fonts/MiFie-Web-Font.svg) format("svg"),
            url(../fonts/MiFie-Web-Font.ttf) format("truetype"),
            url(../fonts/MiFie-Web-Font.woff) format("woff");
   }
   .wjs_icon{
       font-family: wjs;
   }


    /*通过伪类来定义一个字体图标*/
    /*字体图标设计出来的时候一般都会有文档参考*/
    .wjs_icon_phone::before{
        content: "\e908";
    }
    .wjs_icon_tel::before{
       content: "\e909";
    }

2.2：如何制作字体图标

可以用软件AI生成字体图标，也可以百度在线生成字体图标。