我爱编程

列表和图标

2018-04-11  本文已影响0人  能吃饭也能吃苦1236

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

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

/* html-body 部分 */
<div class="cat-pane">
  <div class="body">
    <ul>
      <li>
        <div class="cat-name">电子书阅读器</div>
        <ul>
          <li>Kindle</li>
          <li>Kindle X</li>
          <li>咪咕</li>
          <li>Kindle Paperwhite</li>
        </ul>
      </li>
      <li>
        <div class="cat-name">Kindle电子书</div>
        <ul>
          <li>排行榜</li>
          <li>特价书</li>
          <li>小说</li>
          <li>进口原版</li>
          <li>少儿</li>
          <li>杂志</li>
        </ul>
      </li>
      <li>
        <div class="cat-name">免费阅读软件</div>
        <ul>
          <li>安卓版</li>
          <li>iPhone版</li>
          <li>iPad版</li>
          <li>Mac版</li>
        </ul>
      </li>
    </ul>
  </div>
</div>

/* 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;

}
border-top: 1px solid gray; /* 加1px灰色上边框*/
border-bottom: 1px solid gray; /* 加1px灰色下边框*/
border-left: 1px solid gray; /* 加1px灰色左边框*/
border-right: 1px solid gray; /* 加1px灰色又边框*/
.cat-pane ul ul li:last-child {
  border-right: 0;
}
.cat-pane ul ul li:first-child {
  color: #00f;
}
.cat-pane ul ul li:nth-child(even) {
  font-size: 30px;
}

使用背景图制作图标

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

iconfont

2.png
3.png 4.png
/* 使用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中*/
<i class="iconfont">&#xe6e2;</i>
/* 使用Font class样式*/
/* 第一步:复制项目下面生成的fontclass代码到html中*/
<link rel="stylesheet" href="//at.alicdn.com/t/font_622526_0y55plehxuxo5hfr.css">
/* 第二步:复制相应图标并获取字体编码到html中*/
<i class="iconfont icon-addpeople"></i>

注意

问题

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

上一篇 下一篇

猜你喜欢

热点阅读