作者:zccst
[b][size=large]3,position布局[/size][/b]
#wrap { position:relative; }//相当于父元素的左上角进行定位
#left { position:absolute; top:0px; left:0px; width:120px; }
#middle {margin:20px 190px 20px 190px; }
#right {position:absolute; top:0px; right:0px; width:120px;}
绝对定位布局:
设置居中效果
left:50%; margin-left:-(width/2)
[b][size=large]2,margin等于-100%布局[/size][/b]
有margin-left:-100%和margin-right:-100%两种情况,淘宝都有用。
使用margin-left的有:screen-hd .head 里面包括logo、搜索框和二维码。
使用margin-right的有:screen-hd .cont 里面包括导航菜单右侧的部分。
2015-05-04更新
[img]http://dl2.iteye.com/upload/attachment/0108/3090/04f4c94b-710c-35d0-bb06-d993946de116.png[/img]
批注:margin-right的含义是什么?是右边元素跟自己的距离。
如果大于0表示,将右边元素往右挤
如果等于0表示挨着,
如果小于0表示,将右边元素向左移动,-100%表示,回到该元素的最左边。
由于本例中,自身(关键词:)的宽度是屏幕宽度的-23%,所以当margin-right:-23%的时候,右侧的元素已经从下一行回到当前行了
参考文档:[url]http://www.w3cplus.com/css/two-cloumn-width-one-fixed-width-one-fluid-width[/url]
我自己实现的例子:
[size=large][b]1,float布局[/b][/size]
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
[img]http://dl2.iteye.com/upload/attachment/0109/0668/fb266dfa-95ca-3d09-b41e-5f04a19ba9a1.png[/img]
[b][size=large]3,position布局[/size][/b]
#wrap { position:relative; }//相当于父元素的左上角进行定位
#left { position:absolute; top:0px; left:0px; width:120px; }
#middle {margin:20px 190px 20px 190px; }
#right {position:absolute; top:0px; right:0px; width:120px;}
绝对定位布局:
设置居中效果
left:50%; margin-left:-(width/2)
[b][size=large]2,margin等于-100%布局[/size][/b]
有margin-left:-100%和margin-right:-100%两种情况,淘宝都有用。
使用margin-left的有:screen-hd .head 里面包括logo、搜索框和二维码。
使用margin-right的有:screen-hd .cont 里面包括导航菜单右侧的部分。
2015-05-04更新
[img]http://dl2.iteye.com/upload/attachment/0108/3090/04f4c94b-710c-35d0-bb06-d993946de116.png[/img]
<div class="container">
<div class="left">关键词:</div>
<div class="right">
<ul>
<li><a href="###">五一节</a></li>
<li><a href="###">国庆节</a></li>
<li><a href="###">春节</a></li>
<li><a href="###">春节</a></li>
<li><a href="###">春节</a></li>
<li><a href="###">春节</a></li>
</ul>
</div>
</div>
.container .left{float:left;margin-left:30px;margin-right:-100%;line-height:28px;color:#333;font-size:16px;}
.container .right{float:left;width:100%;}
.container ul{margin:0;padding:0;list-style:none;overflow:hidden;margin-left:26%;width:70%;}
批注:margin-right的含义是什么?是右边元素跟自己的距离。
如果大于0表示,将右边元素往右挤
如果等于0表示挨着,
如果小于0表示,将右边元素向左移动,-100%表示,回到该元素的最左边。
由于本例中,自身(关键词:)的宽度是屏幕宽度的-23%,所以当margin-right:-23%的时候,右侧的元素已经从下一行回到当前行了
参考文档:[url]http://www.w3cplus.com/css/two-cloumn-width-one-fixed-width-one-fluid-width[/url]
<div id="center" class="column">
<h1>This is the main content.</h1>
</div>
<div id="left" class="column">
<h2>This is the left sidebar.</h2>
</div>
<div id="right" class="column">
<h2>This is the right sidebar.</h2>
</div>
<style>
body {margin: 0;padding-left: 200px;padding-right: 190px;min-width: 240px;}
.column {position: relative;float: left;}
#center {width: 100%;}
#left {width: 180px; right: 240px;margin-left: -100%;}
#right {width: 130px;margin-right: -100%;}
</style>
我自己实现的例子:
<div class="wrap">
<div class="l">lllllll</div>
<div class="c"><div class="c-wrap">cccccccccccccccccc</div></div>
<div class="r">r</div>
</div>
<style>
.wrap{width: 600px; height: 300px; background: #eee;}
.l{display:inline;float:left; width:180px; background:red; margin-right:-100%;}
.c{display:inline; float:left; width:100%; overflow:hidden;}
.c .c-wrap{margin: 0 180px 0 180px; background:blue; }
.r{display:inline;float:left;width:180px; background:yellow; margin-left:-180px;}
</style>
[size=large][b]1,float布局[/b][/size]
<div id="warp">
<div id="column">
<div id="column1">这里是第一列</div>
<div id="column2">这里是第二列</div>
<div class="clear"></div>
</div>
<div id="column3">这里是第三列</div>
<div class="clear"></div>
</div>
<style>
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}
</style>
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
[img]http://dl2.iteye.com/upload/attachment/0109/0668/fb266dfa-95ca-3d09-b41e-5f04a19ba9a1.png[/img]