官网类常用结构（html+css）

1、发展历程左右结构从上到下排列

<ul class="history-list-s3">
    <li>
       <div class="con pr">
           <div class="yuan_l pa">
                <span class="num f20">2015</span><span class="font f12">年</span>
           </div>
           <div class="txt f12">***********************</div>
        </div>
    </li>
    <li>
       <div class="con pr">
           <div class="yuan_r pa">
                <span class="num f20">2016</span><span class="font f12">年</span>
           </div>
           <div class="txt f12">*******************************</div>
        </div>
     </li>
</ul>

.pr{
  position: relative;
}

.pa{
  position: absolute;
}

.history-list-s3 li {
  margin-top: 10px;
  position: relative;
  font-size: 0;
  z-index: 10;
}

.history-list-s3 li:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 15px;
  /* background: url(../images/s3_circle1.png) center center no-repeat; */
  background-color: rgba(136, 221, 255, 0.558);
  border-radius: 50%;
  background-size: cover;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.history-list-s3 li:nth-child(even) {
  text-align: right;
}

.history-list-s3 .con {
  padding: 34px 40px;
  display: inline-block;
  vertical-align: middle;
  width: 46.3%;
  background: #EFEFEF;
  border: 1px solid #D0D0D0;
  position: relative;
  min-height: 88px;
  border-radius: 3px;
}

.history-list-s3 li:nth-child(even) .con {
  text-align: left;
}

.history-list-s3 .con:after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid #EFEFEF;
}

.history-list-s3 li:nth-child(even) .con:after {
  left: auto;
  right: 100%;
  border-left: unset;
  border-right: 15px solid #EFEFEF;
}

.history-list-s3:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #1A6CFE;
}


.yuan_l,
.yuan_r {
  width: 70px;
  height: 70px;
  background: #1A6CFE;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  line-height: 70px;
  z-index: 1;
  bottom: 81%;
}

.yuan_l {
  right: 4%;
}

.yuan_r {
  left: 4%;
}

2、京东、淘宝等商品详情图片放大镜

<script src="https://www.jq22.com/jquery/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/jquery.agilebins-v1.0.4.min.js"></script>
<script type="text/javascript" src="js/jquery.abPicZoom.min.js">

<div class="abPicZoom-preview" style="float:left; margin-right:30px;">
  <div class="bigImg">
    <ul>
      <li>
        <img src="../images/mid/1.jpg" preview="../images/big/1.jpg" width="450" height="380" />
       </li>
    </ul>
  </div>
  <div style="clear:both"></div>
  <div class="smallImg">
    <div class="smallList">
      <ul>
        <li>
            <a href="javascript:;">
                <img src="../images/small/1.jpg" width="50" height="48" />
            </a>
        </li>
      </ul>
    </div>
    <a href="javascript:;" class="sPrev">&lsaquo;</a>
    <a href="javascript:;" class="sNext">&rsaquo;</a>
  </div>
</div>

 <style type="text/css">
        .demo-body {
            width: 760px;
            margin: 0 auto;
        }

        .abPicZoom-preview {
            width: 342px;
        }

        /* 预览图 */
        .abPicZoom-preview .bigImg {
            width: 310px;
            height: 380px;
            padding: 5px;
            border: 1px solid #E4E4E4;
            box-shadow: 0 6px 20px #107cc3;
            border-radius: 30px;
            background: #fff;
            overflow: hidden;
        }

        .abPicZoom-preview .bigImg li {
            width: 310px;
            height: 380px;
            overflow: hidden;
        }

        .abPicZoom-preview .preview,
        .abPicZoom-preview .bigImg li img {
            border-radius: 30px;
        }

        /*选择器*/
        .abPicZoom-preview .selector {
            cursor: move;
            filter: alpha(opacity=20);
            -moz-opacity: 0.2;
            opacity: 0.2;
            background-color: #000;
            border: 1px solid #eee;
            width: 160px;
            height: 160px;
            background-image: url(images/selector_bg.png);
            border-radius: 30px;
        }

        /* 缩略图 */
        .abPicZoom-preview .smallImg {
            position: relative;
            width: 322px;
            height: 75px;
            overflow: hidden;
        }

        .abPicZoom-preview .smallImg .smallList {
            width: 248px;
            margin: 0 auto;
            overflow: hidden;
        }

        .abPicZoom-preview .smallImg li {
            float: left;
            width: 52px;
            padding: 15px 5px 10px 5px;
        }

        .abPicZoom-preview .smallImg li img {
            border-radius: 8px;
            width: 50px;
            height: 48px;
            cursor: pointer;
        }

        .abPicZoom-preview .smallImg li a {
            background: #0c91e8;
            border: 1px solid #0c91e8;
            border-radius: 8px;
            width: 50px;
            height: 48px;
            box-shadow: 0 2px 6px #107cc3;
            display: block;
        }

        .abPicZoom-preview .smallImg li.on a {
            background: #4ad585;
            border: 1px solid #4ad585;
            border-radius: 8px;
            width: 50px;
            height: 48px;
            display: block;
        }

        .abPicZoom-preview .smallImg li a:hover,
        .abPicZoom-preview .smallImg li.on a:hover {
            border: 1px solid #3dc878;
        }

        /*上下按钮*/
        .abPicZoom-preview .sPrev,
        .abPicZoom-preview .sNext {
            border-radius: 10px;
            box-shadow: 0 2px 6px #107cc3;
            z-index: 2;
            position: absolute;
            top: 17px;
            width: 18px;
            height: 48px;
            background: #212121;
            font-size: 18px;
            line-height: 48px;
            color: #ccc;
            text-align: center;
            display: block;
        }

        .abPicZoom-preview .sPrev {
            left: 10px;
        }

        .abPicZoom-preview .sNext {
            right: 10px;
        }

        .abPicZoom-preview .sPrev:hover,
        .abPicZoom-preview .sNext:hover {
            color: #fff;
            background: #000;
        }
    </style>