发表于: 2018-08-16 22:35:39
1 705
今天完成的事情:改了bootstrap导航栏的样式
去掉了轮播图的阴影,修改了轮播图的样式
写了为什么要让孩子学编程部分的样式,加了文字和图片
明天计划的事情:写编程王为什么选择编程王部分
遇到的问题:不知道怎么去掉轮播图左右两边的阴影,用浏览器检查了一波,看到了一些没有见过的代码,把这些代码去掉,轮播图的阴影就没有了。
收获:使用inline-block,不仅可以使元素排列在一行,而且可以为元素设置宽高,和浮动比起来,inline-block好用多了。然而,不足的是,使用inline-block时,会留下一个问题,就是使用inline-block的元素之间会存在“4px”的空白间距。 这样的空白间距可能会对页面造成影响,所以需要去掉这些空白间距。有几种方法可以解决这个问题。
1.改变HTML结构
结构1:
<ul>
<li>
item1</li><li>
item2</li><li>
item3</li><li>
item4</li><li>
item5</li>
</ul>
这种方法接近标签换行格式的写法,也更趋近阅读。
结构2:
<ul>
<li>item1</li
><li>item2</li
><li>item3</li
><li>item4</li
><li>item5</li>
</ul>
结构2和结构1几乎是一样,结束标签的“>”成了另一行的起始标签。
结构3:
<ul>
<li>item1</li><!--
--><li>item2</li><!--
--><li>item3</li><!--
--><li>item4</li><!--
--><li>item5</li>
</ul>
结构3的方法采用的是html的注释的方法。
结构4:
<ul><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li></ul>
全部在一行
2.设置父元素字体为0
设置父元素的字体为“0”,然后在“inline-block”元素上重置字体需要的大小。
这种方法也很好用,就是不能兼容Safari浏览器
评论