zoukankan      html  css  js  c++  java
  • 前端整理(一)

    1.

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    <style>
      #wrap {
        display: table;width: 100%;
      }
      #content ,#sidebar {
       display: table-cell;
      }
      #content {
        background-color: yellow;
        width: 200px;
      }
      #sidebar{
          background-color: red;
    
      }
    </style>
    </head>
    <body>
    <div id="wrap">
      <div id="content" style="height:340px;">固定</div>
      <div id="sidebar" style="height:240px;">自适应</div>
    </div>
    <div id="footer">后面的一个DIV,以确保前面的定位不会导致后面的变形</div>
    
    </body>
    </html>

    2.

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    <style>
      #content {
        background-color: #eee; 
      }
      #sidebar {
        width: 300px;
        float: left;
        height: 400px;
      }
      #content {
        margin-left: 300px;
        height: 400px;
      }
    </style>
    </head>
    <body>
    <div id="wrap">
      <div id="sidebar"><img src="big_1.jpg"></div>
      <div id="content">自适应区</div>
    </div>
    </body>
    </html>

     3.

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    <style>
      #wrap {
        display: -webkit-box;
        width: 100%;
      }
      #sidebar {
        width: 300px; 
        -webkit-box-flex:0;
        background-color: yellow;
      }
      #content {
        -webkit-box-flex:1;
        background-color: #eee;
      }
    
    
    </style>
    </head>
    <body>
    <div id="wrap">
      <div id="sidebar" style="height:540px;">固定宽度区</div>
      <div id="content" style="height:340px;">自适应区</div>
    </div>
    </body>
    </html>
  • 相关阅读:
    python学习之路-day1-python基础1
    JSON.NET基本使用
    tortoiseSVN 设置ignore
    一个简单的身份证校验
    一个HttpWebRequest工具类
    linq to NHibernate
    python-plot and networkx绘制网络关系图
    DDoS攻击及防御措施
    白帽子原则
    认识特洛伊木马
  • 原文地址:https://www.cnblogs.com/HMin/p/4776815.html
Copyright © 2011-2022 走看看