HTML标签ul、li、和div布局工具的妙用

今天针对不同的网页编写布局写下自己的心得:

按F12键,我们可以看到不同的网页布局形式。即使是淘宝、京东等大牌电商的网站,也能看到网页布局的不足。

主要就是代码结构混乱,不能很好的让人一眼知道编写人员的布局思路,以致给后续的程序员的代码维护带来困难。

一般的网页UI设计师在设计网页的时候,内容块之间都是按照某种设计规范设计的。

那么我们在将网页实现的过程中,最好能够与UI的设计思路保持一致。


下面针对ul、li、和div工具做一个阐述:

1、对于ul 和 li列表工具,web前端工程师应该很熟悉了,如果能够巧妙运用它们的原生样式将会使代码更加简洁高效。

先说ul、li的原生样式:l

style: ist-style(竖向排布、li标签内容前都自带大黑点等);

position: padding和margin。

这是每个标签最重要的两个方面,一个就是原生样式,另一个就是位置关系。

一般情况下,我们会先设定:

ul{ padding:0;margin:0} ; li{ list-style:none}去掉ul和li的原生样式。

接下来ul和li就可以大展身手啦!!!

碰到竖向排布的元素,我们直接采用li{ display:list-item;}即可将li变为竖向列表元素,作用完全和div类似。

碰到横向排布的元素,我们直接采用li{ display:inline-block; vertical-align:""    ;}即可将li变为横向排布元素,

而且可以避免使用div{ float:left;}带来的高度塌陷问题,相当好用!!

需要注意的几点:li在采用inline-block的时候,如果li标签没有紧挨在一起,将会在li元素之间自动插入空格。

这样的好处是碰到一般的文字情况,避免了自己去设置margin;

这样的坏处是采用自己的样式,可能margin等数据会不精确,那有没有解决办法??

当然有啦!!读者可以尝试在ul元素中设置 font-size:0;然后在li元素中再次定义font-size为自己希望的字体大小,即可完美解决问题。


2、对于div工具,大家肯定不陌生。div仅仅拥有换行样式作为原生样式。简单性巩固了div在网页布局中的基础性地位,你在设计网页的时候,

完全不用考虑原生样式对布局的影响,可谓最最基础的工具了。

这里我就提醒下:float产生的高度塌陷问题的解决方法。

我一般采用两种方法:1、<div style="clear:both"></div>完美清除浮动;2、Element : after{ content:"",height:0px;display:block;clear:both}

后者采用伪类方法让代码会看起来更高级一点,我比较喜欢用。读者自己可以选择喜欢的方法。

====================================================

最近公司的产品快上线了,有点忙。可能这篇文章有些细节没有讲的很深入,还是希望能够有所裨益吧~



阅读更多
换一批

没有更多推荐了,返回首页