﻿#divMain{
  background: -webkit-linear-gradient(90deg, rgba(195, 221, 255, 1) 0%, rgba(81, 153, 250, 1) 100%);
 /* background: -moz-linear-gradient(0deg, rgba(195, 221, 255, 1) 0%, rgba(81, 153, 250, 1) 100%);
  background: linear-gradient(0deg, rgba(195, 221, 255, 1) 0%, rgba(81, 153, 250, 1) 100%); */
  width: 1000px;
  height: 500px;

  margin: 5% auto;
  margin-top: 0%;
}
.picture{
  position: relative;
  height: 400px;
}
.picture ul{
  list-style-type:none ;
}
.picture ul>li{
  width: 200px;
  height: 300px;
  position: absolute;
  transition: 1s;
  opacity: 0;
}
.picture ul>li img{
  width: 200px;
  height: 465px;
  border-radius: 0%;    /*调整边框是否椭圆*/
  border: 15px solid #fffbd6;
}
.picture ul li span {
    border: 0px solid green;
    display:block;
    color:red;
    position: absolute;       /*相对于父位置中的决定定位*/
	  top:100px;
      left:380px;
	  width:380px;
	  height:300px;
}
#divMain ol {
  position: relative;
  display:  grid;
  grid-template-columns: repeat(4,35px);
  grid-template-rows: auto; 
  grid-gap: 2em;
  gap: 1em;
  float: right;
  margin-top: 450px;
  list-style: none;
  top:0;left:0;
}
#divMain ol li {
  width: 10px;
  height: 10px;
  font-size: 10px;
  line-height: 10px;
  float: left;
  text-align: center;
  border-radius: 1em;
  border: 1px solid #999999;
}