/* image change css */ div { margin: 0; padding: 0; } .img-change { position: relative; width: 80%; height: 300px; background-color: pink; border: 1px solid #bbb; } .img-change .img-list { width: 100%; height: 100%; overflow:hidden; background-color: gray; } .img-change .img-list .block { display: none; width: 100%; height: 100%; padding: 1px 0; background-color: #90BBF6; } .img-change .img-list .block-show { display: block; } .img-change .img-list .block .block-title { margin-top: 5%; margin-left: 5%; font-size: 32px; font-weight: bold; color: #fff; } .img-change .img-list .block .block-content { margin-top: 10px; margin-left: 8%; font-size: 20px; color: #fff; } .img-change .img-list .block .block-btn { margin-top: 10px; } .img-change .img-list .block .block-btn a { display: block; margin-left: 5%; width: 150px; height: 42px; line-height: 42px; text-align:center; text-decoration:none; color: #fff; /* font-weight: bold; */ background-color:none; border: 1px solid #fff; } .img-change .img-list .block .block-btn a:hover { background-color: #fff; color: #000; } .img-change .img-list-btn:before, .img-change .img-list-btn:after { display: table; content: " "; } .img-change .img-list-btn:after { clear: both; } .img-change .img-list-btn { position: absolute; width: 160px; right: 0; bottom: 0; padding-bottom: 20px; background-color: none; } .img-change .img-list-btn .btn-list { float: left; width: 50px; height: 10px; background-color: #757272; margin-left: 10px; cursor: pointer; } .img-change .img-list-btn .btn-list:hover { background-color: #fff; color: #000; } .img-change .img-list-btn .btn-list.active { background-color: #fff; color: #000; }