页面布局

    xiaoxiao2025-06-11  37

    1)静态布局 CSS中对静态网页的布局和定位已经较为成熟  现在运用CSS(层叠样式表)已经可以对静态网页的色彩搭配 、图片点击效果、列表外观进行设置 较使用时间较长的JS有了很大提升  而HTML5在图片和基本的点击事件以及动画上面也有了很多提升   使HTML5超前完成了JS可以完成的工作任务 要使网页页面美观  我们需要对网页进行大小 、背景图片(或背景颜色)、以及网页内的文字和网页的所属小的版块位置的设置 1.网页基本属性的构成 border:延用HTML中对外框的设置  利用border可以对页面的框体进行设置 例如框体的线条样式 线条颜色  以及线条的像素大小 eg:<border  style="1px solid red"> 代码所示为一个1像素且为红色的实线框 当设置好一个具体的线框  我们需要的就是将内容填充到所设置的内容框体里 background-image或background-color就是将框内填充可见的元素 background-image意为背景图片  后接URL地址连接 background-color意为背景颜色  两者使用都较为简单  没有特别需要注意的事项 text-indent 使用此属性可以将文本的间距缩小   后接像素值  (改变的是浏览器默认的文字间隙) 使文字美观  还需要对文字的字体进行设置 需要加入的属性是font-family   将所要的字体的加在font-family后面  如果要导入外部字体  则需要加入属性font-face 设置文字与边框的距离需要设置文字的内外边框  padding 和margin padding: 其基本属性 padding-top padding-right padding-botton padding-left margin: 其基本属性 margin-top margin-right margin-bottom margin-left 使用margin来设置文字与边框的距离可以在很大程度上减少定位的难题 2、定位概述 需要理解的是CSS是在重叠的布局中发挥作用  所以把页面的所有元素视为框 而区分这些框的是块级元素和行内元素 而定位就是利用块级和行级元素的特性对页面进行排版、来达到使你能够自由移动你想要移动的区域  让元素出现在合适的位置 position: 包含的元素有: static: 元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。 relative: 元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。 absolute: 元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。 fixed: 元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。 运用position元素需要注意元素是相对于视窗的哪一个点进行位移 float: 此元素可将元素脱离到原来的文档流 可用值有 float-left float-right 可实现将文字围绕图片、创建水平菜单、段落字母浮动左侧的效果 (2)自适应页面 <body>     <div>         移动端网页的自适应布局。 这样可以使屏幕大小不一的手机展示的页面布局比例一致。 我们先不用css3的box-flex属性,而是用百分比设置。     </div>     <div class="div_block">         <div>绝对定位的参考标准</div>         <div class="absolute_father">             <div class="absolute_son">                 我是绝对定位块,可以看到子元素的left是参照父元素的宽W,top是参照父元素的高H。子元素的宽参照W,高参照父元素的H。子元素的margin-left参照W,<span style="color:red;">margin-top也是参照W</span>。这是因为margin:10px 10px 10px 10px;,可以缩写成一个margin:10px,为了数值的统一,也就只参考了父元素的W。padding是一样的道理。             </div>         </div>     </div>     <div class="div_block">         <div>float元素的参考标准</div>         <div class="float_father">             <div class="float_son">我是float块,子元素的宽参照W,高参照父元素的H</div>         </div>     </div>     <div class="div_block">         <div>static元素的参考标准</div>         <div class="static_father">             <div class="static_son">我是static块,子元素的宽参照W,高参照父元素的H。如果父元素的父height是auto,那么父元素的height就是靠content撑起,子元素设置height的百分比无效。</div>         </div>     </div>     <div class="div_block">         <div>自适应图片的定高</div>         <div>             有时候,某个区块的高度是靠内容撑起,并没有设置高度。那么如何统一设置图片的高度呢?解决思路是,用定宽高比的透明图来撑起高度。因为只对图片设置宽度,高度会按照宽高比进行定高。         </div>     </div> 为了演示的需要,首先限定下示例的布局结构:左中右三栏布局,左右两栏宽度固定(要想不固定将宽度值改为百分值即可),中间栏宽度自适应。左右两栏的宽度为200像素。 1、绝对定位法 这或许是三种方法里最直观,最容易理解的:左右两栏采用绝对定位,分别固定于页面的左右两侧,中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。     <div class="div_block">         <div>文字自适应大小</div>         <div class="text_block">             请看demo2         </div>     </div> </body> </html>
    转载请注明原文地址: https://ju.6miu.com/read-1299832.html
    最新回复(0)