div css图文混排序表设计方案中的基本难题总结

日期:2020-09-24 类型:科技新闻 

关键词:在线网页制作,建网页,个人简介网页制作,简单网页,建立网页

近期业务流程必须,想设计方案1个较为通用性的图文混排的目录。結果设计方案的全过程中遇到了很多难题,尽管全是1些css设计方案中较为基本的难题,可是自身觉得必须总结下,期待能够帮到1些css设计方案的初学者,另外也想扩张下自身blog的专业知识量o(^_^)o。
1.最后设计方案的結果
 
HTML(一部分,后边的li也有被省略了,自然外面的div也是应当关掉的,大伙儿留意。)编码

拷贝编码
编码以下:

<div id="jingdian" class="span24 gmodule g-box">
<div class="g-box-hd">
<h3>景点爆棚</h3>
</div>
<div class="g-box-bd">
<ul class="gfixlist gclearfix">
<li>
<div class="gfixlist-hd">
<h3><a href="http://www.tudou.com/programs/view/V542ersQ6rA?FR=LIAN">浙江66万游客争睹海宁潮</a></h3>
</div>
<div class="gfixlist-bd gclearfix">
<div class="pic">
<a href="http://www.tudou.com/programs/view/V542ersQ6rA?FR=LIAN">
<img src="http://p1.qhimg.com/d/_hao360/2012/shuangjie/baopeng1.jpg" alt="浙江66万游客争睹海宁潮">
</a>
</div>
<div class="txt">
<a class="title" href="http://www.tudou.com/programs/view/V542ersQ6rA?FR=LIAN">浙江66万游客争睹海宁潮浙江66万游客争睹海宁潮</a>
<a class="gray" href="http://www.tudou.com/programs/view/V542ersQ6rA?FR=LIAN">“8月108潮,壮观天地无”,十分壮观的海宁潮引来66.5万人次的游客。“8月108潮,壮观天地无”,十分壮观的海宁潮引来66.5万人次的游客。</a>
<a class="more red" href="http://www.tudou.com/programs/view/V542ersQ6rA?FR=LIAN" >[详尽]</a>
</div>
</div>
<div class="gfixlist-ft">
<h3><a href="http://www.tudou.com/programs/view/V542ersQ6rA?FR=LIAN">浙江66万游客争睹海宁潮</a></h3>
</div>
</li>

CSS(关键的ul一部分)编码

拷贝编码
编码以下:

@charset utf⑻;
/* comm gfixlist*/
.gfixlist{padding-bottom: 20px;}
/* 下面的li中的display:inline;纯碎是以便处理IE6下的双边距难题 */
.gfixlist li{_display: inline;float: left;margin: 20px 0 0 20px;text-align: center;width: 290px;}
.gfixlist li .pic{float: left;margin-right: 10px;width: 120px;height: 95px;}
.gfixlist li .txt{float: left;width: 160px;height:92px;overflow: hidden;text-align: left;}
.gfixlist li .txt .title{display: block;color: #16387C;font-weight: bold;white-space: nowrap;}
.gfixlist li .txt .title:hover{color: #F60;}
.gfixlist li .txt .more:hover{text-decoration: underline;}

2.float的几个重要难题
常常应用float,可是有几个重要点是务必要表明的。
float1刚开始是以便完成文字围绕的实际效果。它与position的肯定精准定位是有差别的,关键的地区在于,float的元素依然处在“流”中,而肯定精准定位摆脱了“流”。这样的危害便是:假如你改动了波动元素的css,它将会会危害到周边的元素显示信息,而肯定精准定位的元素改动后不危害周边元素。
设定了float后元素就变为了块级元素。波动的元素自始至终是块级元素,即便将款式改动为display:inline也不容易使它的方法产生更改。
float的波动实际效果其实不1定始终是适合的,要了解何时应用float,何时要消除float。实际上这个能够从float设计方案的实质来考虑到,它1刚开始是以便让周边的元素围绕自身。因此当你不想让后边的元素再围绕包围着float元素的情况下就要考虑到消除float了(解释了为何要消除波动)。
一些情况下,大家消除float只是以便防止“潜伏”的对别的元素的危害(因此有时你会发现:有的编码中去掉消除波动的编码,网页页面显示信息实际效果也是1样的),可是消除波动肯定是1种很好的习惯性。
3.消除波动的方法
波动元素后加上消除元素:
这类方式是出外围div底部加上1个元素,随后给它界定clear:both的款式。它必须加上附加的html编码,应用起来并不是很便捷。
让外围元素也波动:
这类方式是让外围的元素也波动起来,让它包括全部的波动元素,可是它必须在后边的元素中加上clear的款式,還是要加上附加编码。
应用overflow:hidden:
你能够出外围元素上加上上这样的款式,它会强制性让外围的元素包括里边的波动元素。假如你遇到过ul的情况拓宽不到里边全部float的li元素的状况,那末你应当对这类应用方式很熟习了。可是这类方法也是有难题,便是假如li有个往下拉菜单甚么的肯定精准定位的元素时,它极可能就显示信息不出来了,不幸。。。
“简易消除法”:
编码中的.gclearfix类便是应用这样的方式,实际编码在网上早已详细介绍很清晰了,假如你还不上解能够去搜索更实际的“简易消除法”的详细介绍。
尽管它也提升了附加的html,可是十分靠谱,能够确保适配性的消除波动。因此我强烈推荐你也应用这样的方式。
4.IE6下的“双边距”难题
“双边距”难题造成的标准:IE6下,给波动元素在波动方位上设定了margin值,而且波动元素的边距碰到了外围块的边缘。
以上3个标准缺1不能,前两个较为好了解,后1个必须留意下,假如波动元素的前面也是有1个同样方位的波动元素,那末后边的波动元素是不容易开启“双边距”难题的。
IE6下的“双边距”状况


从上图能够显著看出最左侧的两个li的margin-left要显著超过别的的li。更比较严重的难题,假如每一个li是用心设定正好站好1行的话,那末“双边距”将会把一些li“挤到”下面1行去,致使float drop的难题。
处理的方法也很简易,要是给float的元素加上1个display:inline的款式便可以了。
我在上面的css编码中应用了1个hack(并做了注解),只让IE6来鉴别,防止”双边距“难题,别的访问器不鉴别这个款式。
5.总结
编码中的1一部分html的标识设计方案的其实不是非常好,后续想方法不断改善吧。非常是在写款式表的情况下,发现优良的html构造是提升设计方案css高效率的关键层面。
实际上这个设计方案较为简易,可是自身看看還是有较为多的地区(float、适配性、标识词义化等)必须留意,并且越去深挖,越是感觉必须要mark下,说不确定何时自身就1一不小心掉进”坑“里了。