当前位置: 网站建设 > 网页设计 > 建站经验 >

巧用CSS换行让网站更美观

时间:2013-03-02 04:02来源:未知 作者:admin 点击:

标签:巧用CSS换行让网站更美观 网站(482)瑕疵(1)有个(1)歌手(1)美观(4)上图(4)换行(12)就是(19)CSS(655)巧用(5)
上图有个小瑕疵,就是歌手名被分行,会给浏览者带来不高兴的感到。这时候我们需要把每个歌手看做整体,并强制文字在这个整体中不换行,而是让这个块状的整体自动换行,如下图。 案例阐明:在实际利用中咱们常碰到这样的问题, 巧用cssText属性批量操作样式 ,就是一段文本,有了明白的宽度,需要文本自动换行。(如下图) 总结: 为什么有这个盘算。当初良多站,尤其是CMS建起来的,往往页面优化不够,造成阅读速度不够快。许多站长埋怨空间速度不行,想花大价格买好空间。实在完整能够从页面优化入手。 一般文本段落的换行 li
巧用CSS换行让网站更美观》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302341512013.htm

上图有个小瑕疵,就是歌手名被分行,会给浏览者带来不高兴的感到。这时候我们需要把每个歌手看做整体,并强制文字在这个整体中不换行,而是让这个块状的整体自动换行,如下图。

案例阐明:在实际利用中咱们常碰到这样的问题,巧用cssText属性批量操作样式,就是一段文本,有了明白的宽度,需要文本自动换行。(如下图)

总结:

为什么有这个盘算。当初良多站,尤其是CMS建起来的,往往页面优化不够,造成阅读速度不够快。许多站长埋怨空间速度不行,想花大价格买好空间。实在完整能够从页面优化入手。

一般文本段落的换行

li { display:inline; float:left}
a { padding: 0 1.2em; display: block; white-space:nowrap}

CSS换行可以使你的页面看起来更加美观。如下图

案例分析:上面两个图,没有应用任何排版的CSS属性,也就是默认情况下,块元素里的文本,达到边沿当前会自动换行。但是这里有个特例:就是内容全体为英文字母(不单词句子,没有词跟词之间的空格),此时文本就不自动换行了(见下图)

--> [网站建设之]巧用CSS换行让网站更雅观

除此之外,还有其他解决计划,好比让上面的 【a】也浮动,这样它的宽度,就变成自适应。

li { display: inline }
a { padding: 0 1.2em }

案例剖析:上图采取了大家常用的列表来排版文本。只要要把 li 的显示属性设为行内,就可以到达自动换行。然而这样会有一点小瑕疵。不知大家留神到没,屏蔽网页图片工具栏的两种方法,原来标签a有左右padding,第二行确是顶头显示。因为这是一个链接被分行了,显示并没错,但显示效果并不够完善。 持续往下看

对同样的后果,通过CSS可以有很多种实现方式,到底哪种更优良,屏幕分辨率和网页布局简述,须要长时光教训积聚。

代码说明:display:inline用意在于打消IE6双倍margin的bug,white-space:nowrap疏忽所有空格回车等元素,目标是强迫&ldquo,尼尔森的F型网页浏览模式;文字在该块里”不换行。假如不强制换行,当宽度分歧适时就会呈现下图症状。

多行链接或文本的换行

Tag:CSS   换行   网站   CSS   换行   网站  ,少写一个`var`是如何毁掉我们网站的;

这样看起来美观过了,是怎么做到的呢,看下代码:

特别情形:有时候你写的东东,默认情况下并不主动换行,这多半是因为你在其余的CSS属性设置里,无意中关系了那个段话。比方你的 p 元素无意中有了 white-space: nowrap

下一篇我正在谋划“CSS体系布局和排版”,意思就是站在全部网站层面上,同一布局,而不单是针对一个页面。

上图代码:


(责任编辑:网站建设)
巧用CSS换行让网站更美观相关文章
上一篇:巧用cssText属性批量操作样式 下一篇:巧用label标签和CSS美化文件上传表单(不兼容IE6)
回到顶部