zoukankan      html  css  js  c++  java
  • 十天学会DIV+CSS(DIV布局)

    一列布局:

    一列固定宽度、一列固定宽度居中、一列自适应宽度、一列自适应宽度居中

    一列固定宽度

    <head>

    <style type="text/css">

    #layout { height: 300px; 400px; background: #99FFcc; }
    </style>

    </head>

    一列固定宽度居中

    <head>

    <style type="text/css">

    #layout { height: 300px; 400px; background: #99FFcc; margin: auto; }

    </style>

    </head>

    一列自适应宽度

     <head>

    <style type="text/css">

    #layout { height: 300px; background: #99FFcc;}

    </style>

    </head>

    一列自适应宽度居中

     <head>

    <style type="text/css">

    body { margin: 0px; }
    #layout { margin:auto; height: 300px; background: #99FFcc; 80%; }

    </style>

    </head>

    两列布局

    二列自适应宽度、两列固定宽度、两列固定宽度居中、float属性。

    二列自适应宽度

    <head>
    <style type="text/css">
    #side { background: #99FF99; height: 300px; 120px; float: left; }
    #main { background: #99FFFF; height: 300px; 70%; margin-left: 120px; }
    </style>
    </head>

     两列固定宽度

    <head>
    <style type="text/css">
    #side { background: #99FF99; height: 300px; 120px; float: left; }
    #main { background: #99FFFF; height: 300px; 350px; margin-left: 120px; }
    </style>
    </head>

    两列固定宽度居中

    <head>
    <style type="text/css">
    #content { 470px; margin:0 auto;}
    #side { background: #99FF99; height: 300px; 120px; float: left; }
    #main { background: #99FFFF; height: 300px; 350px; margin-left: 120px; }
    </style>
    </head>

    float属性

    <head>

    <style type="text/css">

    body { font-size:18px; line-height:200%; }
    #side { float:left;202px;}

    #main { margin-left:202px;}

    </style>

    </head>

    三列布局

    三列自适应宽度、三列固定宽度、三列固定宽度居中、

    IE6的3像素bug

    三列自适应宽度

    <head>

    <style type="text/css">
    body { margin:0;}
    #side { background: #99FF99; height: 300px; 120px; float: left; }
    #side1 { background: #99FF99; height: 300px; 120px; float: right; }
    #main { background: #99FFFF; height: 300px; margin:0 120px; }
    </style>
    </head>
    三列固定宽度

    <head>

    <style>
    body { margin:0;}
    #content { 470px; margin:0 auto;}
    #side { background: #99FF99; height: 300px; 120px; float: left; }
    #side1 { background: #99FF99; height: 300px; 120px; float: right; }
    #main { background: #99FFFF; height: 300px; margin:0 120px; }
    </style>
    </head>

    三列固定宽度居中

    <head>
    <style>
    body { margin:0;}
    #content { 470px; margin:0 auto;}
    #side { background: #99FF99; height: 300px; 120px; float: left; }
    #side1 { background: #99FF99; height: 300px; 120px; float: right; }
    #main { background: #99FFFF; height: 300px; margin:0 120px; }
    </style>
    </head>

     

  • 相关阅读:
    Security and Cryptography in Python
    Security and Cryptography in Python
    Security and Cryptography in Python
    Security and Cryptography in Python
    Security and Cryptography in Python
    Security and Cryptography in Python
    基于分布式锁解决定时任务重复问题
    基于Redis的Setnx实现分布式锁
    基于数据库悲观锁的分布式锁
    使用锁解决电商中的超卖
  • 原文地址:https://www.cnblogs.com/lichanghui/p/4806538.html
Copyright © 2011-2022 走看看