做成下面的效果该如何来做呢？
代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>行内块元素练习</title><style>.box {margin: 211px auto;text-align: center;color: #333;}.box a {display: inline-block;height: 36px;width: 36px;border: 1px solid #ccc;text-align: center;line-height: 36px;background-color: #f7f7f7;text-decoration: none;color: #333;}.box .prev,.box .next {width: 72px;}input{width: 40px;height: 34px;outline: none;border: 1px solid #ccc;}button{width:72px;height: 36px;line-height: 36px;border: 1px solid #ccc;background-color: #f7f7f7;}.box .current{border: none;background-color: #fff;}</style></head><body><div class="box"><a href="#" class="prev"><<上一页</a><a href="#">1</a><a href="#" class="current">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#">6</a><a href="#">7</a><a href="#">8</a><a href="#" class="next">>>下一页</a>到第<input type="text">页<button>确定</button></div></body></html>
总结：主要用到行内元素与行内块元素的转换问题、和一些基础的问题。
