html 商品展示框
<!doctype html> <html> <head> <meta charset="utf-8"> <title>LNG罐车</title> <style> body, ul, li { margin: 0px; padding: 0px; } .wrapper { width: 1000px; margin: 0 auto; position: relative; } .nav-mod { position: relative; z-index: 15; } h3.topic_title { border-bottom: 2px solid #BDCFDC; font-size: 14px; padding-left: 18px; margin-bottom: 20px; } .categoryhd { border-bottom: 2px solid #0759C4;} .categoryhd { position:relative; height:40px; line-height:40px; } .categoryhd { border-bottom:2px solid #0759c4; } .more-mod { position: absolute; bottom: 6px; right: 0px; padding: 0px 30px 0px 20px; height: 20px; line-height: 20px; display: block; font-family: simsun; color: #333; } .goods_request{ height: 293px; border-right: 1px solid #E3E3E3; border-width: 0px 1px 1px; border-style: none solid solid; border-color: -moz-use-text-color #E3E3E3 #E3E3E3; -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; border-image: none; } .goods_request.first{ width: 233px; border-left: 0px none; } .goods_request li { float: left; width: 234px; border-left: 1px solid #E3E3E3; } </style> </head> <body> <div class="wrapper"> <div class="nav-mod categoryhd"> <h3>LNG罐车需求</h3> <a href="#" target="_blank" class="more-mod">更多><i></i></a> </div> <ul class="goods_request"> <li class="first"> <img src="LNG罐车/tu.png"/> </li> <li> <div> <img src="LNG罐车/tu.png"/> </div> </li> <li> <div> <img src="LNG罐车/tu.png"/> </div> </li> <li> <div> <img src="LNG罐车/tu.png"/> </div> </li> </ul> </div> </body> </html>
展示图: