-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>混合布局编程挑战</title> <style type="text/css"> body{ margin:0; padding:0; font-size:30px; color:#fff} .top{width:100%; height:100px; background:#ccc;} .main{width:100%; height:600px; background:#999;} .left{width:200px; height:600px; background:#9ac; float:left;} .right{width:300px; height:600px; background:#9be;float:right;} .foot{width:100%; height:50px; background:#897;} </style> </head> <body> <div class="top">top</div> <div class="main"> <div class="right">right</div> <div class="left">left</div> </div> <div class="foot">foot</div> </body> </html>查看全部
-
块挨着块 块嵌套着块 块叠加着块查看全部
-
兼容性较好的三种清除浮动方法：<br> 一、设置父级高度<br> 二、使用overflow:hidden<br> 三、使用clear:both div是块状元素，它会很霸道的占一行，从代码可以看出啊，整个的main内容块没有指定高度的，只有它的子内容块指定了高度，但是它的子内容块是浮动的，所以子内容块的高度不能影响成为main的高度，那么浏览器就默认了把footer的div显示在top的下一行，这个时候添加clear:both清除了上面模块的浮动特性，那么此时main的高度就是和子内容块的高度是一样的，因此浏览器就会把footer的div显示在main的下一行查看全部
-
1.混合布局：我们可以把一列布局加入“左”和“右”改造为混合布局。 2.在中部mian中加入子div 分别是（左，右）。 然后分别在style中加入“.left和.right”的样式！ 3.注“left和right”都要加浮动“float” 4.还可以在混合布局下进行更复杂的混合布局 5.可以将right定义为sub_right和sub_right 分为化为更为密集的混合布局 布局有一列、二列、三列和混合布局 混合布局： 将一列布局改造就变成了混合布局。 即主体部分加上子div 要点回顾： 其实在网页制作当中，页面中的元素就是块与块之间的关系： 块挨着块；块嵌套着块；块叠压着块 通过css将这些块摆放正确，网页布局就自然完美了。 1、margin:0 auto 自动居中 2、两种分成三栏的方式： 1）两边position：absolute，left：0/right：0，top:0， 中间margin｛0 右边 0 左边｝ 2）先分两栏 左右float 再分两栏左右float查看全部
-
clear:both清除浮动，因为上面的main没有设置高度查看全部
-
自适应宽度就是设置块的宽度百分比，设置成具体数值就是固定宽度，不设置宽度就是随着内容增多而变大。<br> <br> 三列布局中想要两边固定宽度，中间列自适应宽度——就把两边设置成绝对定位，左边的position:absolute;left=0; to:0;右边的position;absolute; right:0; top :0; 中间宽度不设置具体宽度或者百分比，并设置左右外边距分别为左右两列的宽度，如果想要间隔可适当加大margin值。查看全部
-
一、清除默认样式body{margin：0；padding：0} 二、两列布局： 1、宽度自适应（用的比较少）， 1.1因为宽度要自适应，所以要设置左侧left的width:xx%；1.2，需要左右排列，所以设置float:left；1.3另一侧right也设置width和float(left和right都可以吧，再微调) 2、固定宽度（☆☆☆☆☆）left和right增加一个父div#main,设置这个main的width，以及margin 0 auto；2.1如果要精确控制left和right的宽度，可以使用px【就是说也可以使用%粗略控制。】 如下代码 （这就是自适应宽度的布局，拖动页面的窗口可以“缩小或放大”页面的内容 宽度自适应（用的比较少），1.1因为宽度要自适应，） <head> <style type="text/css"> body{margin:0;pading:0} .left{width:20%;height:500px;float:left;background:#ccc} .right{width:80%;height:500px;float:right;background:#ddd} </style> </head> <body> <div class="left"></div> <div class="right"></div> </body> </html> 若果想更确切的控制它的宽度可以将（%）改为像素（px）的形式查看全部
-
1.一列布局不适于存放文本，太长容易看走眼 一列布局： 1.通常作为网页头部。固定宽度。 2.真正开发，高度设置自动的。 两列布局自适应，使用百分比。 三列布局，使用绝对定位和margin。 盒子之间的三种关系： 1、相邻 2、嵌套 3、叠加 我们要做的就是摆放好盒子的位置。 关于页面上元素的加载顺序： 元素是从前往后依次加载的，要想先加载就要写在前面。 通常left部分是作为菜单，right部分作为主体内容，我们打开网页，都希望先看到 主体内容，所以有意把right部分写在left部分前面，然后把right部分右浮动，left部分左浮动， 这样布局不会出现问题，而且还解决了IE6下右浮动换行的问题。 ------------------------------ <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>一列布局</title> <style type="text/css"> body{margin:0;padding:0;} .main{width: 800px;height:600px;background-color: #ccc;margin: 0 auto;} .top{height:100px;background-color: blue;} .foot{width: 800px;height:100px; background-color: #900;margin: 0 auto;} </style> </head> <body> <div class="top"></div> <div class="main"></div> <div class="foot"></div> </body> </html>查看全部
-
css布局编程练习！查看全部
-
重要：用position定位方法实现自适应查看全部
-
清除浮动：clear:both;查看全部
-
float 浮点类型查看全部
-
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。 注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。 替换元素： 替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。 比如：<input /> type="text" 的是，这是一个文本输入框，换一个其他的时候，浏览器显示就不一样 (X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素，这些元素都没有实际的内容。 非替换元素： (X)HTML 的大多数元素是不可替换元素，他们将内容直接告诉浏览器，将其显示出来。 比如<p>wanmei.com</p> 浏览器将把这段内容直接显示出来。 除了这两字，还有两种非常属性的元素，显示元素，他分为两种情况，一种是‘块及元素’ ‘block’，还有一种是“行内元素”inline，大家也叫“内联元素”。 块及元素 他最明显的特征就是独自占领一行，自动充满父级元素的内容区域，绝不会让别人“侵略”（当然可以通过其他方式去改变他）。 常见的有：div，p..等等。 通过CSS设定了浮动（float属性，可向左浮动或向右浮动）以及设定显示（display）属性为“block”或“list-item”的元素都是块级元素。这个地方浮动是一个比较特殊的情况，可以详查浮动这个知识 行内元素： 上面说块及元素独自占领一行，行内元素就没这么霸道了，他可以左右都允许有元素，最常见的就是<a></a>查看全部
-
body{margin:0;padding:0;} 主要是为了清除样式 float：left 代表浮动查看全部
-
margin:垂直 水平<br> margin:0 auto //水平居中<br>查看全部
举报
0/150
提交
取消