-
margin:0 auto（居中） float:left（使div左浮动） float:right（使div右浮动） clear:both(清除浮动)查看全部
-
5-1 要点回顾 Bullet Points 什么叫做布局？ 又称版式布局，是网页UI设计师将有限的视觉元素进行有机的排列组合。 一列布局、二列布局、三列布局、混合布局 在网页制作当中，页面上的元素就是块儿与块儿之间的关系，它们存在于三种状态：块儿挨着块儿、块儿嵌套着块儿、块儿叠压着块儿。查看全部
-
4-1 三列布局 <!DOCTYPE> <html> <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} .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">there is something gonna happen</div> <div class="right">300px</div> </body> </html>查看全部
-
3-1 二列布局 <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>布局</title> <style type="text/css"> body{margin:0;padding:0;} .main{width:800px;margin:0 auto;} .left{width:20%;height:500px;float:left;background:#ccc;}/*元素的自适应宽度并不常用，一般还是在外层固定宽度的基础上，内层也固定宽度~ 比如width:220px;*/ .right{width:80%;height:500px;float:right;background:#ddd} </style> </head> <body> <div class="main"> <div class="left"></div> <div class="right"></div> </div> </body> </html>查看全部
-
2-1 一列布局 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>布局</title> <style type="text/css"> body{margin:0;padding:0;} .top{height:100px;background:blue;} .main{width:800px;height:300;background:#ccc;margin:0 auto;} .top{width:800px;height:100px;background:#900;margin:0 auto;} </style> </head> <body> <div class="top"></div> <div class="main"></div> <div class="foot"></div> </body> </html>查看全部
-
1-1 内容简介 分栏又称为分列，常见的布局分为：一列布局 二列布局 三列布局 混合布局。 利用CSS（浮动、定位等属性操作）实现UI 前端工程师，就是将艺术和技术完美结合关键岗位查看全部
-
三列布局，左右浮动，中间元素通过margin左右的距离，使其居中查看全部
-
clear:both; 清除浮动查看全部
-
网页布局：又称版式布局，是网页UI设计师将有限的视觉元素进行有机的排列组合，将理性的思维个性化的表现出来，是一种具有个人艺术特色的视觉传达方式。传达信息的同时有美感。 网页设计特点（相对纸媒来说） 1、网页可以自适应宽度(百分比自适应宽度） 2、网页的长度理论上可以无限延长（高度自适应） 一般是头部，主体，底部。主体一般再根据需要分栏，一般两栏或者三栏，还有可能分为更多的栏目。常见分栏方式：一、二、三、列布局，混合布局。查看全部
-
1、宽度自适应：不设置宽度； 2、样式加载：样式按从上往下排序，写在前面的先加载； 3、兼容ie6：不能用浮动float，只能先设置父元素main为相对定位relative作为参照定位，后设置其子元素(right、left)为绝对定位absolute，并设置其具体位置。 1、如不给right设置外边距margin，则其自适应宽度会与其中的文字同宽； 2、由于left的width为200px，则right的margin-left为210px，因此right与left的间隔为10px； 3、由于right为main的首个子元素，因此默认叠加在main上面，无需设置绝对定位。查看全部
-
float\absolute可以脱离文档流查看全部
-
父级固定，子div自适应，则大小由父级查看全部
-
文档流：将窗口自上而下分成一行一行，并在每行中按从左至右的依次排放元素，即为文档流。 有三种情况使得元素离开文档流而存在，分别是浮动 绝对布局 固定定位查看全部
-
1、宽度自适应：不设置宽度； 2、样式加载：样式按从上往下排序，写在前面的先加载； 3、兼容ie6：不能用浮动float，只能先设置父元素main为相对定位relative作为参照定位，后设置其子元素(right、left)为绝对定位absolute，并设置其具体位置。 1、如不给right设置外边距margin，则其自适应宽度会与其中的文字同宽； 2、由于left的width为200px，则right的margin-left为210px，因此right与left的间隔为10px； 3、由于right为main的首个子元素，因此默认叠加在main上面，无需设置绝对定位。查看全部
-
清除浮动：clear：both；查看全部
举报
0/150
提交
取消