列表和图标

子代选择器-以嵌套ul为例，给第一层的li加边框

子代选择器：选择相邻的后代，能减少代码重复，用>符号连接。

/* html-body 部分 */

  

    

      

        
电子书阅读器
        

          
Kindle
          
Kindle X
          
咪咕
          
Kindle Paperwhite
        
      
      

        
Kindle电子书
        

          
排行榜
          
特价书
          
小说
          
进口原版
          
少儿
          
杂志
        
      
      

        
免费阅读软件
        

          
安卓版
          
iPhone版
          
iPad版
          
Mac版
        
      
    
  


/* css */
.cat-pane .body > ul>li { /* 选择cat-pane里面的body的直接ul直接li */
  border: 1px solid red; 
}
/* 或者*/
.cat-pane .body>ul>li {
   border: 1px solid red; 
}

列表相关的为类选择器(以上面的嵌套列表为例)

first-child /* 选择父元素的第一个节点*/
last-child /* 选择父元素的最后一个节点*/
nth-child(even) /* 先择父元素的偶数节点*/
nth-child(odd) /* 选择父元素的奇数节点*/

• 清除浮动的两种方式

/* 第一种:分别在html和css中加clearfix*/
html：
在添加浮动的父节点的class里加clearfix
css:
.clearfix:after {
  content: '';
  display: block;
  clear: both;

/* 第二种：直接在css写clearfix*/
.clearfix:after {
  content: '';
  display: block;
  clear: both;

添加浮动的父节点:after {
  content: '';
  display: block;
  clear: both;

}

• 样式一样内容不一样使用列表（ul）表示,复杂的使用嵌套列表。
• CSS实现起装饰作用的分隔线

border-top: 1px solid gray; /* 加1px灰色上边框*/
border-bottom: 1px solid gray; /* 加1px灰色下边框*/
border-left: 1px solid gray; /* 加1px灰色左边框*/
border-right: 1px solid gray; /* 加1px灰色又边框*/

• 用last-child伪类选择器去掉嵌套列表第二层li的最后一个节点右边框

.cat-pane ul ul li:last-child {
  border-right: 0;
}

• 用first-child伪类选择器给嵌套列表第二层li的第一个节点设置颜色

.cat-pane ul ul li:first-child {
  color: #00f;
}

• 用nth-child(even)伪类选择器给嵌套列表第二层li的偶数节点设置字体大小

.cat-pane ul ul li:nth-child(even) {
  font-size: 30px;
}

使用背景图制作图标

• CSS Sprites:用一张图做图标，节省内存和带宽

.tools .icon {
  background: url(https://img.alicdn.com/tfs/TB1tyFSXm_I8KJjy0FoXXaFnVXa-48-1194.png) no-repeat 0 0; /* 首先设置背景图片，no-repeat，正确的位置*/
  background-size: 24px auto;
}  /* 然后设置正确的图片大小*/

• 不同的图标位置不同，只需要设置正确的background-position，如:

.tools .game .icon {
  background-position: 0 -220px;
}

• CSS Sprites生成工具
  网址：http://www.cssportal.com/
  生成步骤：
  1.找到[CSS Generators]中的[CSS Sprite Generator];
  2.上传需要合成的图标；
  3.下载CSS Sprites使用。

iconfont

• 一种图标技术，同样可以节省内存和带宽，还可以对图标进行大小（不会失真）、颜色等设置。
• 使用步骤：
  1.进入http://www.iconfont.cn网站；
  2，将需要的图标加入购物车，添加至项目，命名，点击确定，生成项目和代码；
  
  

  1.png

2.png

3.png

4.png

• 使用Unicode或Font class样式做图标

/* 使用Unicode样式*/
/* 第一步：将项目下面生成的font-face复制到css文件中*/
@font-face {
  font-family: 'iconfont';  /* project id 622526 */
  src: url('//at.alicdn.com/t/font_622526_pl532mc0sgmeipb9.eot');
  src: url('//at.alicdn.com/t/font_622526_pl532mc0sgmeipb9.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_622526_pl532mc0sgmeipb9.woff') format('woff'),
  url('//at.alicdn.com/t/font_622526_pl532mc0sgmeipb9.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_622526_pl532mc0sgmeipb9.svg#iconfont') format('svg');
}
/* 第二步：在css文件中定义使用iconfont的样式*/
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}
/* 第三步：复制相应图标并获取字体编码到html中*/


/* 使用Font class样式*/
/* 第一步：复制项目下面生成的fontclass代码到html中*/

/* 第二步：复制相应图标并获取字体编码到html中*/

注意

• 找真实的案例练习
• css放到独立的文件中，分离css和html
• 多练习，多模仿怎么把案列写成html
• 使用英文命名，不用拼音命名

问题

1.子代选择器只有在嵌套列表才能使用吗？
2.理解了盒模型，但是平时对怎么设置margin、padding这些还是不熟悉，都是靠感觉来。