DIV+CSS网页布局(新手必备) |
您所在的位置:网站首页 › css用什么标记构建网页布局 › DIV+CSS网页布局(新手必备) |
文章目录
一:网页布局的目的二:如何布局(1):确定“版心”(2):分析模块
三:页面元素的定位机制(1)流式布局(2)浮动-float(3)绝对定位(position:absolute)(4)相对定位(position:relative)
四:布局中的常用属性(1)浮动属性(float)(2)清除属性(clear)(3)溢出属性(overflow)
五:元素的定位六:偏移量七:层叠属性八:语义标签九:命名规范
一:网页布局的目的
通过网页布局,可以使网页的内容更加清晰,有条理,同时更加易读。 二:如何布局 (1):确定“版心”所谓“版心”是页面主体内容的所在位置,一般为居中。 (2):分析模块页面通常由五大块组成:头部(header)—导航(nav)—焦点图(banner)—内容(content)—版权(footer) 按元素类型和在HTML文件中出现的顺序定位。 A:block块状布局:从上至下一个接一个排列。 B:inline水平布局:在一行中水平布局。 (2)浮动-float当元素浮动时,它将不再处于普通文档流中,相当于浮在文档之上,不占据空间,但是会缩短行框,产生文字环绕的效果。 (3)绝对定位(position:absolute)通过页面坐标(页面左上角)的方式来定位元素。使用绝对定位后元素不会占用普通流空间 (4)相对定位(position:relative)如果一个元素进行相对定位,它将以它所在的位置(即它在普通流中的位置)为初始点,然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的初始点进行移动。 注意:与定位相关的属性有left、top、right、bottom,这四个属性只有在使用了定位属性(position)后才有效;只能同时使用相邻的两个属性,不能同时使用相对的两个属性。 四:布局中的常用属性 (1)浮动属性(float) 选择器{ float: 属性值; }float的属性值有三个:left;right;none(默认值) 例一:一列固定宽度并自动居中 选择器{ height: 120px; width: 1000px; background: red; margin: auto; }例二:一列自适应宽度 #d2{ height: 200px; background: greenyellow; margin: auto; }例三:例3:两列自适应宽度 选择器{ height: 350px; width: 120px; background: red; float: left; } 选择器{ height: 350px; width: 70%; background: blue; } (2)清除属性(clear)clear的取值有四个: none:允许元素两边都有浮动元素 left:不允许元素左边有浮动的元素 right:不允许元素右边有浮动的元素 both:不允许两边有浮动的元素 例如: .leftText{ margin: 3px; height: 180px; width: 170px; background-color: red; float: left; } .footText{ height: 185px; background-color:blue; } .Clear{ clear: both; } 区块1 区块2 区块3下图是加入clear属性前后显示: 当内容溢出元素边框的时候,选择溢出属性overflow,有四个取值。 scroll提供滚动机制(带有滚动条)visible默认值,内容溢出到边框以外hidden内容被修剪。溢出的部分看不见auto如果内容被修剪,则显示器会显示滚动条以便查看其余的内容使用DIV+CSS进行布局时要注意的问题: div、ul、ol、p、li都是块级标签,它们和周围的元素都有边界(margin),在块级标签嵌套的时候,要注意处理这些边界。 五:元素的定位 选择器{ position:属性值; }position有四个取值: static自动定位(默认的定位方式)relative相对于元素在文档流中的位置进行定位absolute相对于已经定义好的父元素的位置进行定位fixed相对于浏览器窗口进行的定位 六:偏移量精确定位元素的位置,取值是数值或百分比。 top顶端偏移量left左边偏移量right右边偏移量bottom下边偏移量 七:层叠属性当对元素进行定位时,可能会出现堆叠现象;可以使用z-index属性来设置元素的堆叠顺序。z-index的取值是整数(0、正整数、负整数)。取值越小,层叠顺序越在下面。 八:语义标签1、:表示表格的头部 2、:表示表格的主体 3、:表示页面的头部 4、:表示导航栏 5、:表示页面或区域的底部 6、:表示页面中独立的文档内容 7、:用于对页面内容进行分块 8、:表示页面的附属信息(侧边栏、广告等) 九:命名规范1、避免使用中文命名;不能以数字开头;不能占用关键字;用最少的字母达到最好理解的意义(见名知义) 2、驼峰式命名:除第一个单词之外,其他单词首字母大写; 帕斯卡命名:每个单词之间用"_"连接。 3、CSS文件的命名: 文件命名主样式文件master.css模块样式module.css字体样式font.css基本样式base.css布局样式(版面)layout.css表单样式forms.css |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |