css的border和clear特性应用方式和示例

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

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

最先,假如你曾用过table制做网页页面,你就应当了解,假如要在报表中绘图1条虚线该怎样做,那必须制做1个很小的照片来填充,实际上大家也有更简易的方法,要是在<td></td>中添加这么1段便可以了,你能够试试:

拷贝编码
编码以下:

<div style="border-bottom:1px dashed #ccc"></div>


大伙儿能够再度参照手册,随后你就可以搞清楚dashed、solid、dotted...等的功效,运用它们你能够制做出很多实际效果来,实线、虚线、双线、黑影线这些。


拷贝编码
编码以下:

<div id="banner"></div>


以上编码即可以完成设计方案草图中的banner,在css.css中添加下列款式:

拷贝编码
编码以下:

#banner {
background:url(banner.jpg) 0 30px no-repeat; /*添加情况照片*/
width:730px; /*设置层的宽度*/
margin:auto; /*层垂直居中*/
height:240px; /*设置高宽比*/
border-bottom:5px solid #EFEFEF; /*画1条浅灰色实线*/
clear:both /*消除波动*/
}


根据border很非常容易就绘图出1条实线了,而且降低了照片免费下载所占有的互联网資源,使得网页页面加载速率变得更快。

另外一个要表明的便是clear:both,表明消除左、右全部的波动,在接下来的合理布局中大家还会用这个特性:clear:left/right。在这里加上clear:both是因为以前的ul、li元素设定了波动,假如不消除则会危害banner层部位的设置。

拷贝编码
编码以下:

<div id="pagebody"><!--网页页面行为主体--> <div id="sidebar"><!--侧面栏--> </div> <div id="mainbody"><!--行为主体內容--> </div> </div>

以上是网页页面行为主体一部分,大家在css.css中加上下列款式:

拷贝编码
编码以下:

#pagebody {
width:730px; /*设置宽度*/
margin:8px auto; /*垂直居中*/
}
#sidebar {
width:160px; /*设置宽度*/
text-align:left; /*文本左对齐*/
float:left; /*波动居左*/
clear:left; /*不容许左边存在波动*/
overflow:hidden; /*超过宽度一部分掩藏*/
}
#mainbody {
width:570px;
text-align:left;
float:right; /*波动居右*/
clear:right; /*不容许右边存在波动*/
overflow:hidden
}

以便能够查询到实际效果,提议在#sidebar和#mainbody中添加下列编码,预览进行后能够删掉这段编码:

拷贝编码
编码以下:

border:1px solid #E00;
height:200px

储存预览实际效果,能够发现这两个层完善的波动,在做到了大家合理布局的规定,而两个层的具体宽度应当160+2(border)+570+2=734px,早已超过了父层的宽度,因为clear的缘故,这两个层才不容易出現移位的状况,这样可使大家合理布局的网页页面不容易由于內容过长(比如照片)而致使移位。

而以后加上的overflow:hidden则可使內容过长(比如照片)的部分全自动被掩藏。一般大家会看到1些网页页面在加载时,因为照片太大,致使合理布局被撑开,直至网页页面免费下载进行才修复一切正常,根据加上overflow:hidden便可以处理这个难题。
CSS中每个特性应用恰当,便可以处理很多难题,也许它们与你在合理布局的页并沒有太大的关联,可是你务必了解这些特性的功效,在遇到困难的情况下,能够尝试应用这些特性去处理难题。