行内块元素如何进行巧妙运用呢?(57)

想要做成下面这个效果该如何进行做呢?咱们是直接给浮动,让所有的li再设置边距和居中呢?

其实最巧妙的做法是利用行内块元素来做是更好的呀! 

行内块元素如何进行巧妙运用呢?(57)

 究竟怎么做呢?使其转换成行内块元素,这样就可以加入宽高了呀!

行内块元素如何进行巧妙运用呢?(57)

行内块元素如何进行巧妙运用呢?(57)

初步效果出来了!可是呢,需要许多完善的地方呀! 

行内块元素如何进行巧妙运用呢?(57)

改变颜色和使其文本居中,加入行高呀 ,再去掉下划线就可以了

行内块元素如何进行巧妙运用呢?(57)

行内块元素如何进行巧妙运用呢?(57)

怎样使其整个盒子居中呢? 

行内块元素如何进行巧妙运用呢?(57)

行内块元素如何进行巧妙运用呢?(57)

第一个和最后一个设置成上一页和下一页呀! 

行内块元素如何进行巧妙运用呢?(57)

效果如下图:为什么成这个样子呀? 原来是li的宽度小于字体的宽度了!那我们可以设置第一个和最后一个的li的宽度,进行层叠性来代替上面的就可以了呀!

行内块元素如何进行巧妙运用呢?(57)

行内块元素如何进行巧妙运用呢?(57)

行内块元素如何进行巧妙运用呢?(57)

行内块元素如何进行巧妙运用呢?(57)

为什么还是没效果呀!原来呢,权重不够,设置的并没有起到作用呀! 提高它的权重就可以了呀!

行内块元素如何进行巧妙运用呢?(57)

现在效果就很明显了呢! 

行内块元素如何进行巧妙运用呢?(57)

数字太大了,该怎么办呢?我们可以设置一下字号呀! 

行内块元素如何进行巧妙运用呢?(57)

现在就比较好了,再设置第二个和第七个 成我们想要的效果就可以了呀!

行内块元素如何进行巧妙运用呢?(57)

行内块元素如何进行巧妙运用呢?(57)

行内块元素如何进行巧妙运用呢?(57)

也即是去点border和颜色变成白色不就可以了呀! 

行内块元素如何进行巧妙运用呢?(57)

行内块元素如何进行巧妙运用呢?(57)

再加入到第几页的框就可以了 

行内块元素如何进行巧妙运用呢?(57)

行内块元素如何进行巧妙运用呢?(57)

设置一下宽度和去掉外框的轮廓就可以了呀! 

行内块元素如何进行巧妙运用呢?(57)

行内块元素如何进行巧妙运用呢?(57)

包含确定的框太小了,需要设置一下呀!

行内块元素如何进行巧妙运用呢?(57)u

行内块元素如何进行巧妙运用呢?(57)

可是有上外边距,那我们在全局开始时就可以去掉内外边距不就行了呀! 

行内块元素如何进行巧妙运用呢?(57)

终于大功告成,晚上可以赏自己一个鸡腿呀! 

行内块元素如何进行巧妙运用呢?(57)