-
两列布局：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、main不用相对定位 .main{background-color:red;height:500px;} .left{ position:absolute;top:100px;left:0;width:200px;background-color:blue;height:500px;} 2、main设置相对定位 .main{background-color:red;height:500px;position:relative;} .left{ position:absolute;top:0;left:0;width:200px;background-color:blue;height:500px;}查看全部
-
上右下左查看全部
-
布局居中常用：margin: 0 auto查看全部
-
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>查看全部
-
网页布局：又称版式布局，是网页UI设计师将有限的视觉元素进行有机的排列组合，将理性的思维个性化的表现出来，是一种具有个人艺术特色的视觉传达方式。传达信息的同时有美感。 网页设计特点（相对纸媒来说） 1、网页可以自适应宽度(百分比自适应宽度） 2、网页的长度理论上可以无限延长（高度自适应） 一般是头部，主体，底部。主体一般再根据需要分栏，一般两栏或者三栏，还有可能分为更多的栏目。常见分栏方式：一、二、三、列布局，混合布局。查看全部
-
网页布局：又称版式布局，是网页UI设计师将有限的视觉元素进行有机的排列组合，将理性的思维个性化的表现出来，是一种具有个人艺术特色的视觉传达方式。传达信息的同时有美感。 网页设计特点（相对纸媒来说） 1、网页可以自适应宽度(百分比自适应宽度） 2、网页的长度理论上可以无限延长（高度自适应） 一般是头部，主体，底部。主体一般再根据需要分栏，一般两栏或者三栏，还有可能分为更多的栏目。常见分栏方式：一、二、三、列布局，混合布局。查看全部
-
布局居中常用：margin: 0 auto查看全部
-
布局：即页面间元素的关系(块与块之间的关系)： 块挨着块 块嵌套着块 块叠压着块查看全部
-
感觉还是不太熟。查看全部
-
相对定位（position：relative），不可以脱离文本流查看全部
-
其实有自己的想法才好，上面的例子让我们很好的理解查看全部
-
body{margin:0;padding:0;} .left{width:200px;height:500px;background:#ccc;position:absolute;left:0;top:0;} .middle{height:500px;background:#999;margin:0 300px 0 200px;} .right{width:300px;height:500px;background:#ddd;position:absolute;right:0;top:0;} <body> <div class="left"></div> <div class="middle"></div> <div class="right"></div> </body>查看全部
-
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>查看全部
-
1.三列布局 代码如下 <head> <style type="text/css"> body{margin:0;padding:0} .left{width:33.33%;height:500px;float:left;background:#ccc} .middle{width:33.33%;height:500px;float:left;background:#999} .right{width:33.33%;height:500px;float:right;background:#ddd} </style> </head> <body> <div class="left"></div> <div class="middle"></div> <div class="right"></div> </body> </html> 2.特殊的三列布局 如下代码 body{margin:0;padding:0} .left{width:200px;height:500px;background:#ccc;position:absolute;left:0;top:0} .middle{height:500px;background:#999;margin:0 300px 0 200px} .right{width:300px;height:500px;background:#ddd;position:absolute;right:0;top:0} </style> </head> <body> <div class="left">200px</div> <div class="middle"></div> <div class="right">300px</div> </body> </html>查看全部
举报
0/150
提交
取消