|
初识div div标签是双标签，即以<div></div>的形式存在，其间可以放置任何内容， 包括其他的div标签。也就是说，div标签是一个没有任何特性的容器。XHTML中的块状元素和内联元素 XHTML的标签默认为两种元素：(1)、块状元素：该元素是矩形的，有自己的高度和宽度。块状元素就是一个矩形形容器。 (2)、内联元素：和块级元素相反，内联元素没有固定形状，也无法设置宽度和高度。 内联元素形状由其内含的内容决定，所以在宽度足够的情况下，一行能容纳多个内联元素。有人说相对于块状元素是一个硬盒子，内联元素就是一个软软的布袋子（形状由内容决定）。 块状元素适合于大块的区域排版，所以常用来布局页面。而内联元素适合于局部元素的样式设置，所以常用于局部的文字样式设置。 由于网页大多数为计算机显示屏幕作媒介，所以常用像素作为固定尺寸单位，即px 注意：在HTML元素中设置样式不需要填写单位，默认为像素 布局页面的宽度： 浏览者常见显示分辨率（单位：像素）为 800*600、1024*768、 1280*1024、 1440*960 等。所以在页面布局页面时，要充分考虑页面内容的布局宽度，一旦内容宽度超过显示宽度，页面将出现水平滚动条。过去浏览者用户的显示分辨率最小为800*600( 15寸CRT显示器 )，其最小宽度为800像素，浏览器的边框及滚动条部分约占24像素左右。 布局页面水平居中： HTML表格布局页面时，只需要设置布局表格的align属性为center即可。而div居中没有属性可以设置，只能通过CSS控制其位置 在布局页面前，网页制作者一定要把页面的默认边距清除。为了方便操作，常用的方法是使用通配选择符 “*”将所有对象的边距清除，即margin属性和padding 属性 说明：尽量保证网页只有垂直滚动条，才符合浏览者的习惯，所以高度不需要考虑，由页面内容决定网页高度 使div元素水平居中的方法有很多种，常用的方法是用CSS设置div的左右边距，即margin-left属性和margin-right属性。当设置div左外边距和右外边距的值为auto，即自动时，左外边距和右外边距将相等，即达到了div水平居中效果。 居中程序： <head> <meta http-equiv="content-Type" content="text/html; charset=gb2312"/> <title>设置div水平居中</title> <style type=text/css> * { margin:0px; padding:0px; } #all{ width:75%; height:200px; background-color:red; border:1px solid blue; margin-left:auto; margin-right:auto; } </style> </head> <body> <div id="all">布局页面内容</div> </body> 注意：上面居中程序中margin属性值前面的"0"代表上边距和下边距为 "0"像素,auto代表左边距和右边距为auto,即自动设置。 说明：在页面布局时尽量少嵌套，因为XHTML元素多重嵌套将影响浏览器对代码的解析速度 div元素的浮动 通过div布局网页，css设置其属性，完全符合内容与表现分离。不过一个div标签占据一行，块状元素有一个很重要的foalt属性，可以使多个块状元素并列于一行 float属性的值有left、right、none和inherit。很多对象都有inhreit属性，这是继承属性。代表继承父容器的属性。float属性值为none时，块状元素不会附送，这也是块状元素的默认值 一个典型的网页布局实例 这个例子要求页面有上下4行区域，分别用做广告区(#top)、导航区(#nav)、主题区(#mid)、和版权区(footer) 案例程序： <head> < mate http-equiv="content-Type" content="text/html;charset=gb2312"> <title>网页布局实例</title> <style type="text/css"> *{ margin:0px; padding:auto; } #top,#nav,#footer{ width:500px; margin:0px auto; } #top{ height:80px; background-color:#ddd; } #nav{ height:25px; background-color:#fc0; } #mid{ height:300px; } #left{ width:98px; height:298px; border:1px solid #999; float:left; background-color:#ddd; } #right{ height:298px; background-color:#ccc; } .content{ width:98px; height:148px; background-color:#c000; border:1px solid #999; float:left; } #content2{ background-color:#fc0; } </head> <body> <div id="top">顶部广告区</div> <div id="nav">导航区</div> <div id="mid"> <div id="left">纵行导航区</div> <div id="right"> <div class="content">内容A</div> <div class="content" id="content2">内容B</div> <div class="content">内容C</div> <div class="content" id="content2">内容D</div> <div class="content" id="content2">内容E</div> <div class="content">内容F</div> <div class="content" id="content2">内容G</div> <div class="content">内容H</div> </div> <div id="footer">底部版权区</div> </body> 说明：主体内容区宽度=纵向导航区宽度+具体内容区宽度*4 主体内容区高度=纵向导航区高度=具体内容区高度*2 纵向导航区宽度+具体内容区宽度*4=490(像素) 纵向导航区高度=298(像素) 具体内容区高度*2=296(像素) 注意：在跨度和高度计算中，IE6.0以前版本的浏览器解析div的宽度和高度设置值包括边框 导航条制作：为了增加导航条的互动，列表元素常常配合超级链接元素一起使用，超级链接有为类选择符，可以呈现链接文字和用户互动的4个状态，即： a:link {color: #FF0000} /* 未访问的链接 a:visited {color: #00FF00} /* 已访问的链接 a:hover {color: #FF00FF} /* 鼠标移动到链接上 a:active {color: #0000FF} /* 鼠标单击时的链接 互动导航条程序： <head> <mate http-equiv="content-type" content="text/html ; charset= gb2312" > <title>导航条制作</title> <style type="text/css"> * { margin:0px; padding:0px; } ul{ list-style:none } #nav{ width:425px; height:22px; margin:0px auto; background-color:#ddd; } li{ float:left; } li a { display:block; width:98px; height:20px; border:1px solid #d00; margin-left:5px; font-weight:bold; text-decorration:none; text-align:center; } li a:link{ background-color:#cf3; color:#333; } li a:hover{ background-color:#69c; color:#fff; } li a:active{ background-color:#f00; } li a:visited{ background-color:#cf3; color:#333; } </style> </head> <body> <ul id="nav"> <li> <a href="#" title="这是首页的链接">首页</a> </li> <li> <a href="#" title="这是产品的链接">产品</a> </li> <li> <a href="#" title="这是企业文化的链接">企业文化</a> </li> <li> <a href="#" title="这是留言板的链接">留言板</a> </li> </ul> </body> 心得：虽然超级链接块没有设置浮动属性，但其直属的父容器，即li元素设置了浮动属性，所以实例中的4个li元素会出现并列。通过引入超级链接的伪类选择符，导航条有了互动性。 本例中使用的属性： font-weight:bolid (文本加粗) text-decoration:none (除去超级链接默认的下画线) margin-left:5px; (是每个超级连接块都有了5个像素的左边距) 注意：通常网页设计中很少使用ul元素的列表符号，所以把ul标签选择符的list-style属性设置为none，表示页面中任何ul列表结构都没有列表符号。 CSS盒子模型 “盒”模型是CSS定位布局的核心内容 什么是CSS盒模型： XHTML中大部分的元素(特别是块状元素)都可以看做一个盒子，而网页元素的定位实际就是这些大大小小的盒子在页面中的定位。而这些盒子是"流动"的,当某个块状元素被CSS设置了浮动属性，这个盒子就会"流动"的，当某个块状元素被CSS设置了浮动属性，这个盒子就会 "流"到上一行。 边框的样式设置： 边框(border)作为盒模型的组成部分之一，其样式非常受重视。边框的CSS样式设置不但影响到盒子的尺寸，还影响到盒子的外观。边框(border)属性的值有3中，即边框尺寸(像素)、边框类型和边框颜色 ( 十六进制 )。 border的4条边框： border-top:顶部边框 border-bottom:底部边框 border-left:左边框 border-right:右边框 修改不同样子的边框线条： solid:实线 dashed:虚线 dotted:点状线 groove：立体线 double：双线 outset:浮雕线 内边距(padding)和外边距(margin)都是不可见的盒子组成部分，只不过它们俩之间夹有一条可见的边框(border) 盒子兼容问题 DTD(文档类型声明) <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml/DTD/xhtml1-transitional.dtd " > <html xmlns= " http://www./1999/xhtml " > 代表XHTML的文档类型声明 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www./TR/ html4/ strict.dtd"> <html xmlns= " http://www./1999/xhtml " > 代表HTML4.0的严格类型的文档类型声明 元素的非常规定位方式： position的原意为位置、状态、安置 position属性非常重，很多特殊容器的定位必须用position来完成 position属性有4个值，分别是static、absolute、fixed、relative， static是默认值，代表无定位(一般用于取消特殊定位的继承，回复默认) absolute:绝对定位 relative：相对定位 fixed：固定定位（定位的容器不会随着滚动条的拖动而变化位置） 注意：绝对定位的容器也会有上下的关系，在同一个位置只会显示最上面的容器。在计算机显示中把垂直显示屏幕平面的方向称为 "z" 方向，CSS绝对定位的容器的 z-index属性对应这个方向，z-index属性值越大，容器越靠上。即同一个位置的两个绝对定位的容器只会显示z-index属性值较大的。 |
|
|
