码迷,mamicode.com
首页 > 其他好文 > 详细

浮动法布局

时间:2016-11-15 23:14:41      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:back   tty   sheet   settings   creat   http   lang   time   tle   

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 }

 

浮动法布局

标签:back   tty   sheet   settings   creat   http   lang   time   tle   

原文地址:http://www.cnblogs.com/wangchaoyuan/p/6067508.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!