#top { width:100%; background:greenyellow; height:150px; padding:20px; } #main { width:100%; margin:0 auto; background:#ddd; } #main ul { width:960px; height:1330px; overflow:hidden; padding-top:30px; margin:0 auto; } #main ul li { list-style:none; width:160px; height:300px; border:1px orange solid; float:left; margin-right:10px; margin-bottom:10px; padding:10px; background:#fff; } #list li img { width:160px; height:180px; } #list li p { height:36px; overflow:hidden; } #text { width:200px; height:35px; border-radius:10px; box-shadow:inset 0px 0px 5px #000; font-size:25px; line-height:35px; text-indent:10px; outline:none; } #btn { width:80px; height:35px; vertical-align:top; } #total { color:#000; font-size:20px; } #bottom { height:100px; background:greenyellow; } #tip { margin-left:200px } #tip li { width:30px; height:30px; border-radius:50%; background:blue; margin-right:10px; margin-top:20px; float:left; list-style:none; text-align:center; line-height:30px; color:#fff; cursor:pointer; } #tip li.active { background:orange; }