*{
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}
/* 头部width设置为100%适应屏幕宽度，使用CSS3的flex布局，flex布局中的水平方向对齐方式，让弹性子元素平均分布，即每个项目两侧的间隔相等 */
#top{
  width: 100%;
  height: 50px;
  display: flex; /* 第(5)空 */
  align-items: center;
  justify-content: space-around; /* 第(6)空 space-between两端对齐 */
}
.brand{font-size: 22px;}
/* 使用CSS3的属性选择器设置搜索框的尺寸 */
#top input[type=search]{width: 160px;} /* 第(7)空 */
.content{
  width: 90%;
  margin: 10px auto;
  padding: 5px;
  border: 1px #eeeeee solid;
  /* 边框圆角 */
  border-radius: 15px; /* 第(8)空 */
  /* 边框阴影:水平位置 垂直位置 模糊距离 阴影大小 阴影颜色 */
  box-shadow: 0px 0px 8px 0px #eeeeee; /* 第(9)空 */
}
.pic_info img{
  border-radius: 15px;
  /* 设置图片的宽度，使其适应父元素的宽度 */
  width: 100%;
}
.pic_info{
  /* 设置父元素为弹性盒模型容器 */
  display: flex;
  align-items: center;
}
.pic_box{
  /* 使用flex属性分配弹性子元素占有的区域大小 */
  flex: 0.7;
}
.pic_info ul{
  flex: 1;
}
/* 自定义字体 */
@font-face{ /* 第(10)空 */
  /* 自定义字体的名字 */
  font-family: myFont;
  /* 自定义字体路径 */
  src: url('../ziti/1.TTF');
}
.pic_info li{
  padding-left: 20px;
  line-height: 20px;
  font-size: 18px;
  /* 使用自定义字体 第(11)空 */
  font-family: 'myFont';
}
/* 选择器匹配父元素中的第n个子元素，可以为公式 */
.pic_info li:nth-child(2n-1){
  opacity: 0.6; /* 设置背景或背景颜色，以及字体颜色的透明度 */
  color: red;
}
