全国咨询热线:18720358503

网页页面设计方案的合理布局及架构设计方案五

类别:媒体报道 发布时间:2021-03-26 浏览人次:

网页页面设计方案的合理布局及架构设计方案五

下列为引入的內容:

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

根据border非常容易就绘图出一条实线了,而且降低了照片免费下载所占有的互联网資源,促使网页页面加载速率越来越迅速。

 

另外一个说起明的便是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

 

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

预览效果

而以后加上的overflow:hidden则可使內容过长(比如照片)的部分全自动被掩藏。一般大家会见到一些网页页面在加载时,因为照片很大,造成合理布局被撑开,直至网页页面免费下载进行才修复一切正常,根据加上overflow:hidden便可以处理这一难题。

CSS中每个特性应用恰当,便可以处理很多难题,也许他们与你一直在合理布局的页并沒有很大的关联,可是你务必了解这种特性的功效,在碰到难点的情况下,能够试着应用这种特性去处理难题。

编写:

推荐阅读

网页页面设计方案的合理布局及架构设计方案五

网页页面设计方案的合理布局及架构设计方案五 下列为引入的內容: #banner { background:url(banner.jpg) 0 30px no-repeat; /*添加情况照片*/ width:730px; /*设置层的总宽*/ margin:auto; /*层垂直居中...

2021-03-26
公司建立网站不能贪便宜挑选便宜网络服务器

公司建立网站不能贪便宜挑选便宜网络服务器 中小型型公司在建立网站的情况下,应当将眼光放长久一些。当您的公司发展壮大以后,您的站点可能遭受大量的关心。在这里种情况下...

2021-03-26
互联网知名品牌广告宣传设计方案类网站织梦c

温暖提示:此模版为完全免费模版,模版有演试,如模版有侵害您的权益,随时欢迎们线上工作中工作人员解决!织梦cms全新核心开发设计的模版,该模版归属于公司通用性、HTML5响应...

2021-03-26
APP原生态开发设计与混和开发设计的差别?

APP原生态开发设计与混和开发设计的差别?最终升级::59 创作者:佚名 访问:75两次APP原生态开发设计与混和开发设计的差别?原生态APP开发设计和混和开发设计有哪些差别?​一.AP...

2021-03-26
织梦cms评价小助手智能版

温暖提示:选购软件以前,如软件有演试,请一定要首先看演试,接纳演试软件的外型和作用以后即可提交订单!织梦cms评价小助手是一款评价软件,安裝后能够取代原来的织梦cms评价...

2021-03-25
取得成功签订“好想到国”香港移民自适应网站

取得成功签订“好想到国”香港移民自适应网站基本建设服务最终升级::35 创作者:佚名 访问:4676次二00九年,有史以来第一支由美国华尔街的岗位新项目主管人精英团队管理方法的...

2021-03-25
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信