发表于: 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浏览器

 


返回列表 返回列表
评论

    分享到