zoukankan      html  css  js  c++  java
  • 浮动法布局

    1、效果图

    2、代码

     2.1 jsp

     1 <%--
     2   Created by IntelliJ IDEA.
     3   User: wcy
     4   Date: 2016/11/15
     5   Time: 21:16
     6   To change this template use File | Settings | File Templates.
     7 --%>
     8 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
     9 <html>
    10 <head>
    11     <title>浮动法</title>
    12     <link href="css/site.css" rel="stylesheet" type="text/css"/>
    13 </head>
    14 <body>
    15 <div id="head">head</div>
    16 <div id="container">
    17     <div id="content">content</div>
    18     <div id="side">side</div>
    19 </div>
    20 <div id="foot">foot</div>
    21 </body>
    22 </html>

    2.2 css

     1 body{
     2     text-align: center;
     3 }
     4 
     5 #head,#container,#content,#side,#foot{
     6     margin: 20px auto 20px auto;
     7     padding: 20px 0px 20px 0px;
     8     border: 1px red solid;
     9 }
    10 
    11 #head,#container,#foot{
    12     width: 900px;
    13 }
    14 
    15 #container{
    16     height: 320px;
    17     border: 0px;
    18 }
    19 
    20 #content{
    21     float: left;
    22     height: 240px;
    23     width: 700px;
    24 }
    25 
    26 #side{
    27     float: right;
    28     height: 150px;
    29     width: 140px;
    30 }
  • 相关阅读:
    单元测试
    python gdb
    圣诞树
    网络是怎样连接的 读书笔记
    POJ2104 K-th Number(整体二分)
    [SDOI2011]消耗战
    [HNOI2011]XOR和路径
    [HNOI2013]游走
    [JSOI2008]球形空间产生器
    POJ2728 Desert King
  • 原文地址:https://www.cnblogs.com/wangchaoyuan/p/6067508.html
Copyright © 2011-2022 走看看