zoukankan      html  css  js  c++  java
  • CSS排版页面

    创建CSS文件如下:

     1 @charset "utf-8";
     2 /* CSS Document */
     3 *{
     4     margin:0px;
     5     padding:0px;
     6     border:0px;
     7 }
     8 #box{
     9     width:1100px;
    10     height:760px;
    11     margin:auto;
    12 }
    13 #hen
    14 {
    15     width:1100px;
    16     height:160px;
    17     background-color:#936;
    18 }
    19 #zuo{
    20     width:250px;
    21     height:500px;
    22     margin-top:10px;
    23     background-color:#03C;
    24     float:left;
    25     margin-bottom:10px;
    26 }
    27 #zhong-1{
    28     width:262px;
    29     height:300px;
    30     margin-top:10px;
    31     margin-left:10px;
    32     float:left;
    33     background-color:#000;
    34 }
    35 #zhong-2{
    36     width:262px;
    37     height:300px;
    38     margin-top:10px;
    39     margin-left:10px;
    40     float:left;
    41     background-color:#000;
    42 }
    43 #xia{
    44     width:544px;
    45     height:190px;
    46     background-color:#03C;
    47     margin-top:10px;
    48     float:left;
    49     margin-bottom:10px;
    50 }
    51 #you{
    52     width:295px;
    53     height:500px;
    54     margin-left:10px;
    55     margin-top:10px;
    56     background-color:#3F6;
    57     float:right;
    58     margin-bottom:10px;
    59 }
    60 #dibu
    61 {
    62     width:1100px;
    63     height:50px;
    64     margin-top:10px;
    65     background-color:#CF3;
    66     clear:both;
    67 }

    html文件如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS排版页面</title>
    <link href="css/63301.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <div id="box">
        <div id="hen"></div>
        <div id="zuo"></div>
        <div id="zhong-1"></div>
        <div id="zhong-2"></div>
        <div id="you"></div>
        <div id="xia"></div>
        <div id="dibu"></div>
       
    </div>
    </body>
    </html>
    

      最终实现效果如图:

  • 相关阅读:
    更新user的方法
    django里的http协议
    django的第一个问题
    一台机器上配置多个ip地址;访问宿主机上的容器
    virtio 之后的数据直连
    virtio是啥子
    perf的采样模式和统计模式
    perf的统计模式: 突破口: x86_perf_event_update
    arp_filter的验证,使用net namespace
    阿里云Windows 2008一键安装包配置php web环境图文安装教程(IIS+Php+Mysql)
  • 原文地址:https://www.cnblogs.com/yulian/p/4766767.html
Copyright © 2011-2022 走看看