-
通过css的浮动float 、定位position（静态定位static、相对定位relative、绝对定位absolute）查看全部
-
网页布局查看全部
-
foot使用clear:both可以清除紧挨着它的上面的浮动元素查看全部
-
块与块之间的关系：1.块挨着块 2.块嵌套块 3.块压着块 CSS就是把块摆放正确！查看全部
-
针对： <div class="top">top</div> <div class="main"> <div class="right">right</div> <div class="left">left</div> </div> <div class="foot">foot</div> 方法一： 宽度自适应，左侧固定宽度右侧自适应，父盒子position:relative;左侧子盒子position:absolute;右侧margin-left <style type="text/css"> body{ margin:0; padding:0; font-size:30px; color:#fff} .top{height:100px;background:#ccc;} .main{height:300px;background:red;position:relative;} .left{ width:200px;height:300px;background:blue;position:absolute; left:0; top:0;} .right{height:300px;margin-left:210px;background:green;} .foot{height:50px;background:#f60;} </style> 方法二： <style type="text/css"> body{ margin:0; padding:0; font-size:30px; color:#fff} .top{height:100px;background:#ccc;} .main{height:300px;background:red;} .left{ width:200px;height:300px;background:blue;position:absolute; left:0; top:100px;} .right{height:300px;margin-left:210px;background:green;} .foot{height:50px;background:#f60;} </style>查看全部
-
混合布局查看全部
-
盒子之间的三种关系： 1、相邻 2、嵌套 3、层叠 我们要做的就是摆放好盒子的位置。查看全部
-
三列布局 左右为固定宽度，中间为自适应宽度的情况，需通过绝对定位方式实现。 三列布局：左侧和右侧固定，中间自适应： 左侧{position：absolute；left:0;top:0} 右侧{position：absolute；top:0；right：0} 中间{margin-left:100px;margin-right:100px;}查看全部
-
浮动（float）和 绝对定位（position：absolute）可以让元素脱离文档流查看全部
-
两列布局：自适应的两列布局：width用百分比+float； 两列布局的自适应布局一般用的比较少，用固定的比较多 固定宽度的两列布局：width：具体值/父级元素的宽度确定，width+百分比；+float; 如果没有加float的话，不能实现并排的两列布局。 div作为外联元素独占一行，使后面的元素在下一行（设置display：inline/inline-block可以达到float效果） 另外一种设置两列布局（固定宽度+自适应宽度）的方法： position：relative——父元素：相对定位（因为不设置偏移量时，它还是在原来的位置，不影响其位置） position：absolute——子元素：绝对定位（通过设置top :0;margin/left设置其与另一边的位置使其位于同行的另一侧） 注意：固定宽度的列的高度>自适应的列的高度查看全部
-
一列布局不适于存放文本，太长容易看走眼。 一列布局： 1.通常作为网页头部。固定宽度。 2.正真开发，高度设置自动的。 两列布局自适应，使用百分比。 三列布局，使用绝对定位和margin。 盒子之间的三种关系： 1、相邻 2、嵌套 3、叠加 我们要做的就是摆放好盒子的位置。 关于页面上元素的加载顺序： 元素是从前往后依次加载的，要想先加载就要写在前面。 通常left部分是作为菜单，right部分作为主体内容，我们打开网页，都希望先看到 主体内容，所以有意把right部分写在left部分前面，然后把right部分右浮动，left部分左浮动， 这样布局不会出现问题，而且还解决了IE6下右浮动换行的问题。查看全部
-
网页布局：又称版式布局，是网页UI设计师将有限的视觉元素进行有机的排列组合，将理性的思维个性的化的表现出来，是一种具有个人艺术特色的视觉传达方式。 排版布局：float:right/left;常用于两列布局（还是在正常的文档流中，并没有脱离文档流）；position:absolute(相对于浏览器窗口视图进行绝对定位）/relative(相对于原来位置进行移动）/fixed(相对于视图的绝对定位，且不随滚动而发生改变 网页设计特点（相对纸媒来说） 1、网页可以自适应宽度 2、网页的长度理论上可以无限延长查看全部
-
三列布局 左右为固定宽度，中间为自适应宽度的情况，需通过绝对定位方式实现。 <!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;} .left{width:200px; height:500px; background:#CCC; position:absolute; left:0;top:0;} .center{height:500xp; background:#99C; margin:0 320px 0 220px; } .right{height:500px; width:300px; background:#933; position:absolute; right:0; top:0;} </style> </head> <body> <div class="left"></div> <div class="center">据央视14日消息,流失海外近200年的"明朝永乐御制红閰摩敌刺绣唐卡",近日由上海藏家刘益谦以2.8亿元人民币拍下回到祖国。已知存世的永乐款刺绣唐卡仅3件,其余两件藏于西藏大昭寺。去年7月,刘益谦2.2亿拍回明代鸡缸杯,此前还拍得皇帝龙椅等多件国宝。(央视记者张成)</div> <div class="right"></div> </body> </html>查看全部
-
Div{width:800px; height:500px; margin:0 auto}居中查看全部
-
方法2 .top{height:100px; background-color:#ccc;} .main{height:400px; background-color:red;} .left{height:400px; width:200px; background-color:blue;position:absolute; left:0; top:100px;} .right{height:400px;margin-left:210px; background-color:green;} .foot{height:60px; background-color:orange;}查看全部
举报
0/150
提交
取消