预览加载中，请您耐心等待几秒...

CSS+DIV布局.ppt

预览
1/10
2/10
3/10
4/10
5/10
6/10
7/10
8/10
9/10
10/10

亲，该文档总共41页，到这已经超出免费预览范围，如果喜欢就直接下载吧～

下载提示 文本预览

如果您无法下载资料，请参考说明：

1、部分资料下载需要金币，请确保您的账户上有足够的金币

2、已购买过的文档，再次下载不重复扣费

3、资料包下载后请先用软件解压，在使用对应软件打开

CSS+DIV布局及实例分析内容:是页面实际要传达的真正信息，包含数据、文档或者图片等。注意这里强调的“真正信息”，是指纯粹的数据信息本身。 结构:是由文档中的主体部分，再加上结构化标记。 表现:是你赋予内容的一种样式，就是文档看起来的样子。 行为:行为就是对内容的交互及操作效果。 CSS+DIV布局中，CSS作为一种表现而单独存在，它实现了表现与结构的分离。对于网页的修改，可以只对CSS的修改而带来网页样式的变化。<div>标签定义（fromw3cschoool)（1）深入理解CSS盒子模型 盒子模型是CSS的核心概念之一，它指定元素如何显示以及如何相互交互。页面中所有元素都可以看成一个盒子，占据着一定的页面空间。一个页面就是由很多这样的盒子组成,这些盒子之间会互相影响，共同构成复杂的网页效果。 在CSS中，一个独立的盒子（DIV）模型由margin(外边距)、border(边框)、padding(内边距)、content（内容）4个部分组成，如下所示。margin(外边距)：指层边框以外留的空白（相对于所在容器），用于页边距或与其它层之间的间距。如magin:10px10px10px10px分别表示上右下左四个外边距值为10px，如四个外边距一样，可缩写成magin:10px；如上下一样，左右一样，可缩写成magin:10px5px，表示上下外边距为10px；左右边距为5px；marign是透明元素。在IE中body默认margin是20px。 border(边框)：和margin一样，有上右下左四个边框的值。border:solid定义边框为实线；border:dotted定义边框为虚线。单独定义某一边可以写成border-left:2px;border-color:#FF0000定义边框为红色。 padding(内边距)：是指层的边框到层的内容之间的空白。和margin一样，分别指定上右下左边框到内容的距离。如果都一样，可以缩写成padding:10px;单独定义左边可以写成padding-left:10px;padding也是透明元素，不能定义颜色。对于td而言padding默认值为1，对其他对象的默认值为0。/72要将box2放入box1中，<body>标记中的代码修改如下： <divclass="box1">这里是盒子模型box1 <divclass="box2">这里是盒子模型box2</div> </div> 则显示效果如下。与table比较总结/72实际布局图如下所示：3.块级元素与内联元素 ① block块状元素：该元素是矩形的，有自己的高度和宽度。默认情况下，在父容器中占据一行，同一行无法容纳其他元素及文本。其他的元素将显示在其下一行，可以看作被块级元素“挤”下去的。块状元素就是一个矩形容器，CSS设置了高度和宽度后，形状无法被改变。 <div>，<p>，<hi>，<form>，<ul>，<li>等都是块级元素。 ② in-line内联元素：和块级元素相反，内联元素没有固定形状，也无法设置宽度和高度。内联元素形状由其内容决定，所以在宽度足够的情况下，一行能容纳多个内联元素。 <span>，<a>，<label>，<input>，<img>，<strong>，<em>，<inline>等都是内联元素。③块级元素和内联元素之间的转换：用display:inline可将块级元素转换为内联元素；用display:block可将内联元素转换为块级无形素。如下所示：/725.float浮动布局 在前面我们利用float属性实现了定位，实际上当你把它用到<div>标签上时，浮动就变成了一个强大的网页布局工具。基于浮动的布局利用了float属性来并排定位元素，我们只需设定一个宽度，将元素设为左浮动和右浮动就可以了。 CSS允许任何元素浮动float，不论是图像，段落还是列表。无论先前元素是什么状态，浮动后都成为块级元素。浮动元素的宽度默认为auto。 注意： ①浮动元素的外边缘不会超过其父元素的内边缘。 ②浮动元素不会互相重叠。 ③浮动元素不会上下浮动。 ④如果一个浮动元素在另一个浮动元素之后显示，而且会超出容纳块，则它下降到低于先前任何浮动元素的位置（即被顶到下一行）。6.两列的浮动布局 将两个DIV块放在另外一个DIV块中，分别设置左右浮动来实现。例如： <html><head> <style> #container{margin:0pxauto; padding:10px;width:450px; height:260px;border:1pxsolid#000000;} #box1{width:300px;height:260px; border:1pxsolid#000000;float:left;}