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>
  • 相关阅读:
    BZOJ2337 [HNOI2011]XOR和路径
    「学习笔记」3.31代码学习
    uva live 12846 A Daisy Puzzle Game
    Cannot use ImageField because Pillow is not installed
    Android点击Button水波纹效果
    hdu 1241 Oil Deposits
    c++ 字符输入读取
    clutter recoder
    C/C++获取数组长度
    vector array and normal stanard array
  • 原文地址:https://www.cnblogs.com/HMin/p/4776815.html
Copyright © 2011-2022 走看看