西安做网站时网页布局常见的方式和方法详解

<p> 西安做网站时网页布局常见的方式和方法详解，网页制作的时候，不仅仅要考虑网页布局的效果和方式更多的还需要考虑网页的整体效果和版面的结构特征，只有将这个细小的东西进行合理的布局和调整，达到预想的平衡效果的时候，<a href="http://www.jiaruide.net" target="_blank"><strong>西安网站制作</strong></a>出来给人们的视觉感觉才会更加的完美的，当然了，一般网站布局是有讲究的，并不是随便的去摆放就可以了，一定要根据网站的主次，网站的重点和次要的顺序进行合理的安排，只有这样子制作出来的网站更加的符合人们的浏览习惯和预期的，接下来我们来听听<a href="http://www.jiaruide.net" target="_blank"><strong>西安做网站的</strong></a>公司是如何做的网站的时候排版布局的。 </p> <p> 1.标准流<br /> 标准流时浏览器的默认排版方式，在标准流中CSS元素分为以下三类元素<br /> 块级元素<br /> 独占一行（所以垂直排版），可以设置宽度和高度,如p,div,h,ul,ol,ul<br /> 行内元素<br /> 在同一行显示（所以水平排版），不能设置宽度和高度 a,img,select,input<br /> 行内块级元素<br /> 在同一行显示（水平排版），可以设置宽度和高度。<br /> 标准流里面主要是根据设置元素的display为inline，block，inline-block来改变元素的显示模式。可以很方便的控制元素的水平和垂直排版的，也能够控制元素的大小。但是仅仅依靠标准流，许多网页布局效果无法实现。<br /> 2. 浮动流排版<br /> 浮动流只有水平排版，只能设置某个元素左对齐或者右对齐，是一种半脱离标准流的排版方式，可以通过设置元素的float属性设置浮动方向，当某一个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了一样，如果前面一个元素浮动了, 而后面一个元素没有浮动 , 那么这个时候前面一个元就会盖住后面一个元素。<br /> 1.浮动流中没有居中对齐, 也就是没有center这个取值<br /> 2.在浮动流中是不可以使用margin: 0 auto;<br /> 特点:<br /> 1.在浮动流中是不区分块级元素/行内元素/行内块级元素的无论是级元素/行内元素/行内块级元素都可以水平排版<br /> 2.在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高<br /> 3.综上所述, 浮动流中的元素和标准流中的行内块级元素很像<br /> 实现案例<br /> 2.1 浮动元素贴靠现象<br /> 规则<br /> 如果父元素的宽度能够显示所有浮动元素, 那么浮动的元素会并排显示<br /> 如果父元素的宽度不能显示所有浮动元素, 那么会从最后一个元开始往前贴靠<br /> 如果贴靠了前面所有浮动元素之后都不能显示, 最终会贴靠到父元素的左边或者右边<br /> 2.2 文字环绕现象<br /> 浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象。<br /> 2.3 浮动元素的高度<br /> 在标准流中内容的高度可以撑起父元素的高度，在浮动流中浮动的元素是不可以撑起父元素的高度的。<br /> 清除浮动影响<br /> 浮动的元素在标准流中默认不占位置，但是有点时候确实需要浮动的元素占据位置，否则页面会塌陷，有以下几种方式解决浮动带来的问题。<br /> 给浮动元素的一个父标签设置高度，比如给上段代码的div设置个高度。这个方法不常用，尽量不写高度。<br /> clear属性<br /> 可以给浮动元素的后面的盒子添加clear属性。<br /> none: 默认取值, 按照浮动元素的排序规则来排序(左浮动找左浮动, 右浮动找右浮动)<br /> left: 不要找前面的左浮动元素<br /> right: 不要找前面的右浮动元素<br /> both: 不要找前面的左浮动元素和右浮动元素<br /> 3.设置overflow属性<br /> 1overflow: hidden的作用很多不局限于解决浮动的元素在标准流中不占位置的问题。<br /> 可以将超出标签范围的内容裁剪掉<br /> 清除浮动<br /> 可以通过overflow: hidden;让里面的盒子设置margin-top之后, 外面的盒子不被顶下来<br /> 3.定位流排版<br /> 3.1 相对定位<br /> 相对定位就是相对于自己以前在标准流中的位置来移动,4用于对元素进行微调或者配合绝对定位来使用。<br /> 相对定位是不脱离标准流的, 会继续在标准流中占用一份空间<br /> 在相对定位中同一个方向上的定位属性只能使用一个，<br /> 由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素<br /> 由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局。<br /> 3.2绝对定位<br /> 绝对定位的元素脱离标准流，不区分块级元素/行内元素/行内块级元素。<br /> 3.2.1 参考点选取规则<br /> 默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以body作为参考点如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点只要是这个绝对定位元素的祖先元素都可以<br /> 指的定位流是指绝对定位/相对定位/固定定位定位流中只有静态定位不行如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 而且祖先元素中有多个元素都是定位流, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点<br /> 3.3固定定位<br /> 固定定位和前面学习的背景关联方式很像, 背景定位可以让背景图片不随着滚动条的滚动而滚动, 而固定定位可以让某个盒子不随着滚动条的滚动而滚动<br /> 1.固定定位的元素是脱离标准流的, 不会占用标准流中的空间<br /> 2.固定定位和绝对定位一样不区分行内/块级/行内块级 </p> <p> 一般来讲，导航栏要在“第一屏”能显示出来，但是有时第一屏可能会小于上面所说的435px，积于这点考虑，那种横向放置的导航栏要优于纵向的导航栏考虑，原因很简单：如果浏览者的第一屏很矮，横向的仍能全部看到，而纵向的就很难说了，因为窗口的宽度一般是不会受浏览器设置影响的，而纵向的则不确定性要大的多。 </p> <p> 1.“国”字型： <a href="http://www.jiaruide.net" target="_blank"><strong>西安网页设计</strong></a>也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。<br /> 2.拐角型： 这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。<br /> 3.标题正文型： 这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。<br /> 4.左右框架型： 这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文。我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。<br /> 5.上下框架型： 与上面类似，区别仅仅在于是一种上下分为两页的框架。<br /> 6.综合框架型： 上页两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构。<br /> 7.封面型： 这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。<br /> 8.Flash型：<a href="http://www.jiaruide.net" target="_blank"><strong>西安做网页</strong></a>其实这与封面型结构是类似的，只是这种类型采用了目前非常游戏行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。<br /> 9.变化型：<a href="http://www.jiaruide.net" target="_blank"><strong>西安制作网页</strong></a>即上面几种类型的结合与变化，比如本站在视觉上是很接近拐角型的，但所实现的功能的实质是那种上、左、右结构的综合框架型。 </p>