首页 > 网站建设 >

网站制作公司常见的CSS+DIV布局类型

发布时间:2019-10-25 作者:网站制作

  以前常用表格来布局,而现在一些比较知名的网页设计全部采用的DIV+CSS来排版布局。DIV+CSS的好处可以使HTML代码更整齐,更容易使人理解,而且在浏览时的速度也比传统的布局方式快,最重要的是它的可控性要比表格强得多。下面网站制作公司介绍常见的布局类型。
1.使用CSS定位单行单列固定宽度
  单行单列固定宽度也就是1列固定宽度布局,它是所有布局的基础,也是最简单的布局形式。一列固定宽度中,宽度的属性值是固定像素。
2.一列自适应
  自适应布局是在网页设计中常见的一种布局形式,自适应的布局能够根据浏览器窗口的大小,自动改变其宽度或高度值,是一种非常灵活的布局形式,良好的自适应布局网站对不同分辨率的显示器都能提供最好的显示效果。自适应布局需要将宽度由固定值改为百分比。
3.两列固定宽度
  有了一列固定宽度作为基础,两列固定宽度就非常简单,我们知道DIV用于对某一个区域的标识,而两列的布局,自然需要用到两个DIV。两列固定宽度非常简单,两列的布局需要用到两个DIV,分别把两个DIV的id设置为left与right,表示两个DIV的名称。首先为它们设置宽度,然后让两个DIV在水平线中并排显示,从而形成两列式布局。
4.两列宽度自适应
  使用两列宽度自适应性,来实现左右栏宽度能够做到自动适应,设置自适应主要通过宽度的百分比值设置。
5.三列浮动中间宽度自适应
  使用浮动定位方式,从一列到多列的固定宽度和自适应,基本上可以简单完成,包括三列的固定宽度。而在这里给我们提出了一个新的要求,希望有一个三列式布局,其中左栏要求固定宽度并居左显示,右栏要求固定宽度并居右显示,而中间栏需要在左栏和右栏的中间,根据左右栏的间距变化自动适应。
  在开始这样的三列布局之前,有必要了解一个新的定位方式——绝对定位。前面的浮动定位方式主要由浏览器根据对象的内容自动进行浮动方向的调整,但是这种方式不能满足定位需求时,就需要新的方法来实现。CSS提供的除浮动定位之外的另一种定位方式就是绝对定位,绝对定位使用position属性来实现。深圳网站制作公司本文关于“网站制作公司常见的CSS+DIV布局类型”的知识就介绍分享到这里,谢谢关注,博纳网络编辑整理。
 
文章标题:网站制作公司常见的CSS+DIV布局类型
本文地址:https://www.198bona.com/news/4406.html
如果您觉得案例还不错请帮忙分享:

网站建设

网络推广

解决方案

域名主机

建站行业资讯