-
二、两列布局： 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）的形式查看全部
-
讲的不错查看全部
-
clear:both; //清除两边元素的浮动对他的影响 overflow: hidden; // 用在浮动元素本身清除对父元素的影响查看全部
-
<html> <head> <title>混合布局自适应</title> <link rel="stylesheet" href=""> <style type="text/css"> body{text-align: center;font-size: 2em;margin: 0;padding: 0} .head,.main,.footer{width: 80%; margin:0 auto;} .head{background-color: #ccc; height: 100px} .footer{background-color: #9cc; height: 100px} .main{position: relative;} .left{width: 20%;height: 900px; background-color: #eee;position: absolute;top: 0;left: 0; overflow: hidden;} .middle{height: 900px; background-color: #fcc; margin: 0 20%; overflow: hidden;} .right{width: 20%; height: 900px; background-color: #eee;position: absolute; top: 0; right: 0;overflow: hidden;} </style> </head> <body> <div class="head">head</div> <div class="main"> <div class="left">left</div> <div class="middle">middle</div> <div class="right">right</div> </div> <div class="footer">footer</div> </body> </html>查看全部
-
三、三列布局 1. 左右定宽 body{text-align: center;font-size: 2em;margin: 0;padding: 0} .main{height: 900px;background-color: #ddd;margin: 0 240px;} .left{width: 240px;height: 900px;background-color: #eee;position: absolute;top: 0;left: 0} .right{width: 240px;height: 900px;background-color: #999;position:absolute;top: 0;right: 0} 这里最主要的是用到了绝对定位，并且让中间的 margin 左右为两边的宽度。 2. 自适应 body{text-align: center;font-size: 2em;margin: 0;padding: 0} .main{height: 900px;background-color: #ddd;margin: 0 20%;} .left{width: 20%;height: 900px;background-color: #eee;position: absolute;top: 0;left: 0} .right{width: 20%;height: 900px;background-color: #999;position:absolute;top: 0;right: 0} 同理，其换成百分比的形式。查看全部
-
2. 自适应 将 width 属性的值替换成百分比，就是这么简单。 body{text-align: center;font-size: 2em;} .main{width: 80%;height: 900px;margin: 0 auto;} .left{width: 30%;height: 900px;background-color: #eee;float: left} .right{width: 70%;height: 900px;background-color: #999;float: right;} 注意：父元素也要设置成百分比。 #让浏览器自动计算元素的宽度。查看全部
-
1. 定宽 这个应该也没什么难度，只需设置好相应的宽度就好了。这里贴出代码： body{text-align: center;font-size: 2em;} .main{width: 960px;height: 900px;margin: 0 auto;} .left{width: 300px;height: 900px;background-color: #eee;float: left} .right{width: 660px;height: 900px;background-color: #999;float: right;} 这里涉及到了 float 属性，也就是常说的浮动了。一个向左浮动，一个向右浮动，恰好能实现两列布局。‘查看全部
-
1. 居中定宽 这算是最简单且最容易实现的布局了吧。列出最核心的 CSS 代码： 1 2 3 4 body{text-align: center;font-size: 2em;} .head,.main,.footer{width: 960px;margin: 0 auto;} .main{background-color: #666666;height: 600px;} .footer{background-color: #999999;height: 200px;} 其中，最主要的还是 margin 属性，当为元素设置了宽度，margin:0 auto 就能自动让元素居中。查看全部
-
文档流：将窗口自上而下分成一行一行，并在每行中按从左至右的依次排放元素，即为文档流。 有三种情况使得元素离开文档流而存在，分别是浮动 绝对布局 固定定位查看全部
-
水平居中，margin：0 auto查看全部
-
三列布局：不能使用float，左右两列绝对定位，分别靠左和靠右，中间列为相对定位，左右margin分别设置为左右两列的宽度即可，如果列与列之间需要间隔，则增加相应的margin值。查看全部
-
1：网页布局：又称版式布局，是网页UI设计师将有限的视觉元素进行有机的排列组合，将理性的思维个性的化的表现出来，是一种具有个人艺术特色的视觉传达方式。传达信息的同时有美感。 网页设计特点（相对纸媒来说） 1、网页可以自适应宽度 2、网页的长度理论上可以无限延长 3：页面为：头部，主体部分，底部。 分栏又称为分列：一列布局 二列布局 三列布局 以及混合布局（用的最多） 布局通过 浮动和定位来完成(实现ui界面效果)查看全部
-
1.混合布局：我们可以把一列布局加入“左”和“右”改造为混合布局。 2.在中部mian中加入子div 分别是（左，右）。 然后分别在style中加入“.left和.right”的样式！ 3.注“left和right”都要加浮动“float” 4.还可以在混合布局下进行更复杂的混合布局 5.可以将right定义为sub_right和sub_right 分为化为更为密集的混合布局查看全部
-
网页布局：三列布局： 1：两边固定宽度中间自适应： 两边设置宽度、绝对定位，中间设置左右外边距； 2：.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:#000; position:absolute; right:0; top:0;}查看全部
-
1、文档流：将窗口自上而下分成一行一行，并在每行中按从左至右的依次排放元素，即为文档流。 2、有三种情况使得元素离开文档流而存在，分别是浮动 绝对布局 固定定位查看全部
举报
0/150
提交
取消