样式表的布局

《样式表的布局》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、专题——样式表的布局统一网站风格、制作基本特效页面的基本制作流程1、分析效果图给效果图分区，如头部、内容和底部2、切图3、制成HTML页面2CSS样式表目录1、元素定位基础知识2、定位属性及其应用3、页面的背景设定4、浮动及清除浮动5、ul和li6、CSS的容器属性7、CSS的布局3CSS样式表1、元素定位基础知识（1）块元素（2）内联元素（3）浮动属性的应用html中元素是可以被分为块状元素和内联元素，块状元素的默认display属性为block，内联元素默认display属性为inline。4CSS

2、样式表（1）块元素（blockelement）块元素（例如div、p、form、table等元素）一般是其他元素（包括块和内联元素）的容器元素在没有任何布局属性作用时，默认排列方式为换行排列。可以将块元素想象成box。剪贴文摘和网页布局模式的联系。实例：block.html定义了类div1和类div2观察div1和div2的相对位置特点：总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度。5CSS样式表（2）内联元素（inlineelement）内联元素（例如

3、a、img、span、input等元素）只能容纳文本或其他内联元素。在没有任何布局属性作用时，默认排列方式为同行排列。实例：inline.html定义了类span1和类span2观察span1和span2的相对位置特点：和其他元素都在一行上高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。6CSS样式表两类元素的划分块元素(blockelement)◎address-地址◎blockquote-块引用◎center-举中对齐块◎dir-目录列表◎div-常用块级容易，也是cssla

4、yout的主要标签◎dl-定义列表◎fieldset-form控制组◎form-交互表单◎h1-大标题◎h2-副标题◎h3-3级标题◎h4-4级标题◎h5-5级标题◎h6-6级标题◎hr-水平分隔线◎isindex-inputprompt◎menu-菜单列表◎noframes-frames可选内容，（对于不支持frame的浏览器显示此区块内容）◎noscript-可选脚本内容（对于不支持script的浏览器显示此内容）◎ol-排序表单◎p-段落◎pre-格式化文本◎table-表

5、格◎ul-非排序列表（无序列表）7CSS样式表内联元素(inlineelement)◎a-锚点◎abbr-缩写◎acronym-首字◎b-粗体(不推荐)◎bdo-bidioverride◎big-大字体◎br-换行◎cite-引用◎code-计算机代码(在引用源码的时候需要)◎dfn-定义字段◎em-强调◎font-字体设定(不推荐)◎i-斜体◎img-图片◎input-输入框◎kbd-定义键盘文本◎label-表格标签◎q-短引用◎s-中划线(不推荐)◎samp-定义

6、范例计算机代码◎select-项目选择◎small-小字体文本◎span-常用内联容器，定义文本内区块◎strike-中划线◎strong-粗体强调◎sub-下标◎sup-上标◎textarea-多行文本输入框◎tt-电传文本◎u-下划线◎var-定义变量8CSS样式表块和内联元素的混合默认排列当页面中既有块又有内联时，由于块元素不允许任何元素排列在其两边，所以每当遇到块元素就会另起一行实例：blockAndInline.html9CSS样式表(3)可以通过浮动属性改变块的位置浮动属

7、性即CSS中的float属性，其值为auto、left、right。浮动属性不继承。通过浮动属性可以改变原有块的位置。实例：block-float.html10CSS样式表2、定位属性及其应用(1)、定位属性的内容(2)、绝对定位(3)、相对定位(4)、固定定位11CSS样式表(1)、定位属性的内容－position定位模式（position属性）不可继承，其取值可以为：static、relative、absolute、fixed。Static：元素按普通方式即按照html的规则进行定位。Relative

8、：元素保持原来的大小偏移一定的位置Absolute：元素从页面元素中被独立出来，利用边偏移进行定位。Fixed：元素从页面元素中独立出来，其位置相对于屏幕本身而不是文档本身。12CSS样式表边偏移属性Top——定义元素相对于其父元素上边线的距离Right——………………………………………右…………………….Left——…………………………………………左……………………