-
常规三列布局 中间部分自适应的三列布局如何操作: 左侧右侧均使用position:absolute，设置使得两列分别停靠在左右侧 中间使用margin属性设置与两侧之间的距离，这样便实现了中间一列的自适应。查看全部
-
脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。查看全部
-
二、两列布局： 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）的形式查看全部
-
养成定义样式前清楚默认样式的好习惯 通过代码body{margin:0;padding:0}实现查看全部
-
<!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"> .mainbody{width:1500px;border:1px solid red;position:relative;} .left{width:200px;height:600px;background:#ccc;position:absolute;left:0;top:0;} .main{height:600px;background:#99CDFF;margin:0 310px 0 210px;} .right{width:300px;height:600px;background:#FECCCB;position:absolute;right:0;top:0;} </style> </head> <body> <div class="mainbody"> <div class="left">left</div> <div class="main">设计首页的第一步是设计版面布局。就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局。 虽然动态网页技术的发展使得我们开始趋向于学习场景编剧，但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的，你可以领会要点，举一反三。</div> <div class="right">right</div> </div> </body> </html>查看全部
-
分栏又称为分列。常见的布局分为： 一列布局、两列布局、三列布局和混合布局 灵活运用css:浮动、定位等方法完成UI设计图中的布局要求 前端-融合了艺术与技术查看全部
-
常见网页设计 头部 内容主题 底部查看全部
-
什么叫布局查看全部
-
1.混合布局：我们可以把一列布局加入“左”和“右”改造为混合布局。 2.在中部mian中加入子div 分别是（左，右）。 然后分别在style中加入“.left和.right”的样式！ 3.注“left和right”都要加浮动“float” 4.还可以在混合布局下进行更复杂的混合布局 5.可以将right定义为sub_right和sub_right 分为化为更为密集的混合布局查看全部
-
三列如果左右固定宽度 中间自适应 如果想在同一行 通过float使不行的 应该左侧{position:absolute;left 0;top 0;} 中间{margin:0 右侧宽度 0 左侧宽度} 右侧｛position:absolute;right 0;top 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【就是说也可以使用%粗略控制。】查看全部
-
<!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{height:100px;margin:0 auto;background:#ccc;} .main{height:600px;background:red;margin:0 auto;} .left{ width:20%;height:600px;background:black;margin:0 0 100px ;float:left;margin:0 auto;} .right{width:79%;height:600px;background:blue;float:right;margin:0 auto;} .foot{margin:0 auto;height:100px;background:#475;} </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>查看全部
-
清除元素：1.clear:both;2.overflow:hidden查看全部
-
1.混合布局：我们可以把一列布局加入“左”和“右”改造为混合布局。 2.在中部mian中加入子div 分别是（左，右）。 然后分别在style中加入“.left和.right”的样式！ 3.注“left和right”都要加浮动“float” 4.还可以在混合布局下进行更复杂的混合布局 5.可以将right定义为sub_right和sub_right 分为化为更为密集的混合布局查看全部
-
三列布局中间自适应: 两边固定宽度，中间不设定宽度 如果用float会破坏布局，因为中间宽度无线延伸。 用定位：左右position：absolute ;设置left ：0 right：0 中间margin：0 200px 0 200px 三列如果左右固定宽度 中间自适应 如果想在同一行 通过float使不行的 应该左侧{position:absolute;left 0;top 0;} 中间{margin:0 右侧宽度 0 左侧宽度} 右侧｛position:absolute;right 0;top 0｝ 如果中间距离左右咧需要一些空间 则将中间的左侧宽度右侧宽度多写点查看全部
举报
0/150
提交
取消