CSS 情况特性5个运用案例.

2021-03-14 08:32 jianzhan

1,Li目录 根据ul 和 li 的方法,大家能够结构出1些无编码序列表。根据ul+li,大家不但能够做出1些好看的菜单,还可以做出1些完善的树形构造。 ul+li默认设置款式在前面有个小斑点,具体新项目中大家能够根据情况来替代这个小斑点。
下面大家看2个案例:
http://demo.jb51.net/html/cssbackground/a1/demo1.html
http://demo.jb51.net/html/cssbackground/a1/demo2.html

2,文字更换 文字更换也是新项目中较为普遍的技术性。具体开发设计中常常必须应用照片来更换文字。根据情况来替代文字。
下面大家看3个案例:
http://demo.jb51.net/html/cssbackground/a2/demo1.html
http://demo.jb51.net/html/cssbackground/a2/demo2.html
http://demo.jb51.net/html/cssbackground/a2/demo3.html
自然我必须对前面的2个案例开展1下填补表明:
在例2中,根据text-indent:⑼999px;特性把 文本掩藏到看不见的地区。自然有1缺陷:严禁照片免费下载时,甚么都沒有了。
在例3中,根据加上附加标识,随后应用精准定位方法把情况精准定位在顶层,来遮挡住文本。也是有1缺陷:照片必须能彻底遮挡住文本,要实底的照片。

3,自融入按钮 自融入在具体中也常常应用,根据自融入,大家不必须做附加的照片。我之前看过1些老的新项目,给不一样文本的按钮做了许多不一样的照片,随后每一个按钮的款式有btn2word,btn4word,btn6word.... 可见十分不灵便。自融入按钮能从压根上处理这个难题。
大家看来1个案例:
http://demo.jb51.net/html/cssbackground/a3/demo1.html
你早已看到了,自融入必须最少2个闭合元素。根据1个情况左对齐和另外一个情况照片的右对齐 来做成自融入按钮。

4,圆角 之前许多新项目全是方角,不知道何时起,时兴起圆角了。就像轿车1样,之前的桑塔纳的边角全是方角的,如今的车全是圆角的了。
圆角的完成方法跟自融入有点相近,只但是情况的对齐方法有点差别而已。
http://demo.jb51.net/html/cssbackground/a4/demo1.html


5,等高栏 这个是近期在看 天衣无缝的Web设计方案 中的1个事例,确实作者也解读的十分非常好。并且之前在做新项目中,确实遇到过这个难题。但是处理方法貌似没作者这么简易。
话很少说,先看3个案例:
http://demo.jb51.net/html/cssbackground/a5/demo1.html
http://demo.jb51.net/html/cssbackground/a5/demo2.html
http://demo.jb51.net/html/cssbackground/a5/demo3.html
也许你早已看搞清楚了 我即将解读甚么。对了,便是侧面栏跟行为主体栏的高宽比难题。具体运用中,大家常常要使她们2个展现1样的高宽比。根据对最外层元素应用情况照片来做到了这类实际效果。
装包免费下载