欢迎来到天天文库
浏览记录
ID:13380741
大小:35.00 KB
页数:6页
时间:2018-07-22
《运用div+css网页布局的方法》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库。
运用DIV+CSS网页布局的方法摘要:在网页设计中网页各元素的布局是一项十分重要的内容之一,在传统的网页布局中是运用table进行调理网页各元素,而对于复杂的布局来说,它远远不能适应网页设计的要求,由此div+css技术就可以很好的解决复杂网页的布局。关键词:div;css;布局0引言在传统的网页制作方法中是运用table进行布局,它学习起来方便而且很简单,并且布局具有搭建速度快、容易控制的特点,所以现在对于网页制作初学者来说,table布局仍然是一种很好的方式。但是如今的网页设计的布局都十分的复杂,并且适应网页的美观度,运用div+css进行网页布局比运用table布局有很多的优势。可是由于css对于不同的浏览器存在着兼容性问题,所以在运用div+css设计网页时可能会出现这样或那样的问题,为此在这里给讨论几点运用div+css设计网面的方法。1网页中的列布局在网页设计的过程中,列的布局是十分重要的,它布局是否合理是断定网页是否美观的一项重要的要素之一。1.1一列固定宽度在网页中一列的固定是最简单的布局方式,在插入一个div标签之后运用css代码就可以控制div标签的样式。css代码:#line{width:500px;height:700px; background-color:#00ee00;border:1pxsolid#88cc88;}1.2一列固定宽度居中在以往的页面设计中,运用table来进行居中布局时,运用table中的属性align=”center”来实现,而css中的margin属性来设计就可以解决这一问题。在网页中插入一个div标签之后运用css代码就可以控制div标签的样式。采用如下代码来实现:css代码:#line{width:500px;height:700px;background-color:#00ee00;border:1pxsolid#88cc88;margin:auto;}1.3一列自适应宽度由于浏览器的大小不同,所以设计出的网页也应该适应浏览器的大小,在网页设计中也是一项重要的内容。div+css中的自适应的布局能够根据浏览器窗口的大小自动改变其宽度和高度值,是网页设计中一种非常灵活的布局形式,在网页中插入一个div标签之后运用css代码就可以控制div标签的样式。css代码:#line{width:80%;height:95%;background-color:#00ee00;border:1pxsolid#88cc88;}1.4一列、多块布局一般的网页布局分为上中下结构,即:头部、中间主体和脚部。我们可以用三块div来对网页进行划分,分别给它们起名为:头部(header)、主体(maincontent)、脚部(footer)。css代码:#header{margin:5pxauto;width:500px; height:80px;background:#00ee00;}#main{margin:5pxauto;width:500px;height:400px;background:#00ee00;}#footer{margin:5pxauto;width:500px;height:80px;background:#00ee00;}这里只说明了这四种常用的布局方法,但不管多么复杂的页面设计,运用div+css网页布局中,均是以div为基础,通过一列、二列、多列这些基础的布局方法的相互组合和嵌套使用来实现复杂的布局。使得网页的布局更加的合理和美观。2运用css来兼容不同的浏览器由于浏览器层出不穷,css在不同浏览器就会出现存在兼容性的问题,所以在使用div+css布局中,可能导致相同的内容在不同浏览器中出现不同的显示效果,为解决这些方面的问题,提出以下几点解决方法。2.1运用!important来实现ie和firefox的css的兼容相同宽度和高度的层在有边框的情况下,其显示方式就有区别。在ie浏览器中显示为css所定义的宽度和高度,而firefox中显示的是css中定义的宽度和高度加上边框的大小,css代码如下:#wrapper{width:100px!important;/*ie7+firfox*/width:80px;/*ie6*/}这样就可以解决ie和firfox的兼容问题。2.2页面居中问题在ie浏览器下,页面居中可以通过body{text-align: center;}来实现或者在div中设置align属性来设置,而firefox浏览器下此属性就失效了,可以通过margin来设置页面的居中。css代码如下:body{text-align:center;}#center{margin-right:auto;margin-left:auto;}2.3运用javascript判断浏览器来选择不同的css文件用户在浏览网页时会选择不同的浏览器,所以对于网页设计者就必须考虑使用什么样的css样式来满足不同的浏览器。用户使用不同的浏览器查看网页时,只需根据设计者提供的样式表文件来达到理想的显示效果,但这对设计者来说却不是件轻松的事,可以在网页文件的html代码中之间加上判断语句:2.4padding属性对于不同的浏览器其显示也不一样,当设置div的padding属性后,在firefox浏览器中会导致width和height增加,原因如以第一个问题一样即div的实际宽度=div宽+padding,但在ie浏览器中width和height不会增加,这就导致相同的内容在不同浏览器中出现不同的显示效果。解决办法:可以为div设定ie、firefox两个宽度,在ie的宽度前加上ie特有标记”*”号。例如:#divwidth{padding:5px;width:100px;*width:105px;}这比!important更安全可靠。2.5 关于手形光标要将页面内容的光标显示为手形,通常的做法是使css属性cursor:hand;但这于做法只适用于ie解决办法:cursor:pointer。2.6浮动ie6产生的双倍距离例如:#box{float:left;width:100px;margin:000100px;}这种情况之下ie6会产生200px的距离。解决办法:在以上属性的基础上,加上display:inline,使浮动忽略。2.7ul和form标签的padding与marginul标签在firefox中默认是有padding值的,而在ie中只有margin默认有值。form标签在ie中,将会自动margin一些边距,而在firefox中margin则是0;解决办法:css中首先都使用这样的样式ul,form{margin:0;padding:0;}。3 总结以上讨论的div+css网页布局的方法只是在网页设计中所遇到的常见问题。在网页设计的过程中运用各种方法来实现网页的合理布局是网站建设过程中的重要内容之一。如何更有效、更合理的运用web2.0设计标准,这需要很长时间的学习和实践。通过设计和制作不同的网页来积累网页设计的经验,这样才能更好的掌握网页设计的这门技术,设计出更美观的网页。参考文献:[1]王大远,《div+css》,电子工业出版社,2011.07.[2]武上富,《网页制作技巧与设计原则》,广东科技,2006.[3]冉晓旻,《网页制作技术课程改革探索》,中国职业技术教育,2007.
此文档下载收益归作者所有
举报原因
联系方式
详细说明
内容无法转码请点击此处