#bodyInfo { width: 830px; height: 620px; overflow: hidden; } img { border-color: white; } .imgShow { padding: 10px; background-color: #F4F4F4; height: 100%; clear: both; position:relative; } .imgShow .plus { height: 32px; margin: 4px auto; width: 100%; } .imgShow .bigImg { height: 440px; width: 810px; overflow: hidden; background-color: #e0e0e0; position: relative; } .imgShow .plus img { height: 32px; width: 32px; float: right; margin-right: 10px; cursor:pointer; } .imgShow .bigImg img { width: 810px; height: 440px; cursor:move; position:absolute; /*top:0; left:0;*/ } .imgShow .smallImg { height: 120px; overflow: hidden; padding-bottom: 20px; } .imgShow .smallImg .center { width: 635px; height: 120px; float: left; overflow: hidden; } .imgShow .smallImg .center ul { width: 10000px; height: 120px; } .imgShow .smallImg .center li { width: 90px; height: 120px; float: left; margin-right: 5px; margin-left: 10px; } .imgShow .smallImg .center li img { display: block; width: 100%; height: 80px; margin-top: 20px; /*border: 2px solid white;*/ border-width: 2px; border-style: solid; /*border:2px solid #047CC8;*/ border-radius: 5px; cursor: pointer; } .imgShow .smallImg .left { float: left; height: 100%; width: 87px; cursor: pointer; } .imgShow .smallImg .left img, .imgShow .smallImg .right img { vertical-align: middle; display: block; margin-top: 46px; margin-left: 26px; display: none; } .imgShow .smallImg .right { float: right; height: 100%; width: 88px; cursor: pointer; } .imgShow .smallImg .center li img:hover { border-color: #047CC8; } .borderColor { border-color: #047CC8; } .borderWhite { border-color: white; }