1:视图层
<head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.css"> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> </head> <style> #pageBar { text-align: right; padding: 0 20px 20px 0; } .pageBtn a { display: inline-block; border: 1px solid #aaa; padding: 2px 5px; margin: 0 3px; font-size: 13px; background: #ECECEC; color: black; text-decoration: none; -moz-border-radius: 2px; -webkit-border-radius: 3px; } .pageBtn-selected a { display: inline-block; border: 1px solid #aaa; padding: 2px 5px; margin: 0 3px; font-size: 13px; background: #187BBD; color: white; text-decoration: none; -moz-border-radius: 2px; -webkit-border-radius: 3px; } .pageBtn a:hover { background: #187BBD; color: white; } </style>
<!--商品列表开始--> <div class="jumbotron"> <div id="data-area"> <!--这里添加分页数据--> <ul>