当前位置:首页 > 开发 > Web前端 > Css > 正文

收集的css布局

发表于: 2015-11-13   作者:互联网   来源:转载   浏览次数:
css
摘要: 1 <title>左定宽,右自动</title> 2 <style> 3 body{margin:0px;padding:0px;} 4 .box .left,.box .right{ 5 height:200px;line-height: 200px;text-align: center; 6 } 7 .box .left{
 1 <title>左定宽,右自动</title>

 2 <style>

 3 body{margin:0px;padding:0px;}

 4 .box .left,.box .right{

 5     height:200px;line-height: 200px;text-align: center;

 6 }

 7 .box .left{

 8     float:left;width:200px;background-color:red;

 9 }

10 .box .right{

11     margin-left:210px;background-color: blue;

12 }

13 </style>

14 <body>

15     <div class="box">

16         <div class="left">左</div>

17         <div class="right">右</div>

18     </div>

19 </body>

 

 

 

 1 <title>左定宽,右自动(position+margin)</title>

 2 <style>

 3 body{margin:0px;padding:0px;}

 4 .box .left,.box .right{

 5     height:200px;line-height: 200px;text-align: center;

 6 }

 7 .box .left{

 8     position: absolute;width:200px;background-color:red;

 9 }

10 .box .right{

11     margin-left:210px;background-color: yellow;

12 }

13 </style>

14 <body>

15     <div class="box">

16         <div class="left">左</div>

17         <div class="right">右</div>

18     </div>

19 </body>

 

 1 <title>(两侧定宽,中间自适应)</title>

 2 <style>

 3 body{margin:0px;padding:0px;}

 4 .center,.left,.right{

 5     height:200px;line-height: 200px;text-align:center;

 6 }

 7 .left{

 8     float:left;width:200px;background-color:red;

 9 }

10 .right{

11     float:right;width:200px;background-color:yellow;

12 }

13 .center{

14     margin:0px 210px;background-color:blue;

15 }

16 </style>

17 <body>

18         <div class="left">左</div>

19         <div class="right">右</div>

20         <div class="center">中</div>

21 </body>

 

 1 <title>(两侧定宽,中间自适应)</title>

 2 <style>

 3 body{margin:0px;padding:0px;}

 4 .center,.left,.right{

 5     height:200px;line-height: 200px;text-align:center;

 6 }

 7 .left{

 8     position:absolute;top:0px;left:0px;width:200px;background-color:red;

 9 }

10 .right{

11     position:absolute;top:0px;right:0px;width:200px;background-color:yellow;

12 }

13 .center{

14     margin:0px 210px;background-color:blue;

15 }

16 </style>

17 <body>

18         <div class="left">左</div>

19         <div class="right">右</div>

20         <div class="center">中</div>

21 </body

 


收集的css布局

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
1:背景平铺 资源 bg.png: body{background:url(../img/bg.png);background-repeat:repeat-x;} 效果
如果你想尝试一下不用表格来排版网页,而是用CSS来排版你的网页,也就是常听的用DIV来编排你的网页
整理了一下之前用到过的css代码,实现一种效果或许有许多种写法,我这里整理了一下我个人认为兼容性
登录用的用户名和密码框: <style type="text/css"> .title{font-family: verdana, tahoma, s
每次和同事朋友谈到前端,谈到CSS,总会听到他们说用哪个哪个框架,很方便很快捷地就完成前端设计,
本文出自:http://blog.csdn.net/svitter 1. 创建一个HTML页面, 其内容为一个无序列表,列表中至
本文出自:http://blog.csdn.net/svitter 1. 创建一个HTML页面, 其内容为一个无序列表,列表中至
1.HTML元素分类 HTML元素大题可分为内联(inline)元素和块(block)元素。 1.1 内联元素(inline) ①元
1.页面标准文档流、浮动层、float属性 1.1 文档流 HTML页面的标准文档流(默认布局)是:从上到下,从
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号