Chinaunix首页 | 论坛 | 博客

泉水南

首页　| 　博文目录　| 　关于我

小闹腾

  • 博客访问： 314559
  • 博文数量： 69
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 759
  • 用 户 组： 普通用户
  • 注册时间： 2014-09-09 14:15
个人简介

〆 人生就是拼命地奔跑，和华丽的跌倒。 つ

文章分类

全部博文（69）

文章存档

2017年（2）

2016年（16）

2015年（21）

2014年（30）

我的朋友
最近访客
推荐博文
float布局

分类： Html/Css

2016-04-26 08:58:52

Sublime编写源代码：

点击(此处)折叠或打开

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4.    <meta charset="utf-8">
  5.    <title>float布局</title>
  6.    <link rel="stylesheet" type="text/css" href="../css/float2.css">
  7. </head>
  8. <body>
  9.     <div id="content">
  10.         <div id="head">
  11.             <div>1</div>
  12.             <div>2</div>
  13.             <div>3</div>
  14.             <div>4</div>
  15.             <div>5</div>
  16.         </div>
  17.         
  18.         <div class=clear""></div>
  19.         <div id="middle">

  21.             <div id="lside">
  22.                 <div class="lside1">6</div>
  23.                 <div class="lside2">
  24.                     <div class="lone">8</div>
  25.                     <div class="ltwo">9</div>
  26.                 </div>
  27.                 <div class="lside3">11</div>
  28.             </div>
  29.             <div id="rside">
  30.                 <div class="rone">7</div>
  31.                 <div class="rtwo">10</div>
  32.             </div>
  33.         </div>
  34.         
  35.         <div class=clear""></div>

  37.         <div id="foot">
  38.             <div>12footer</div>
  39.         </div>

  41.     </div>
  42. </body>
  43. </html>
写入css文件：

点击(此处)折叠或打开

  1. /*
  2. * @Author: IT - Pony
  3. * @Date: 2016-04-23 14:09:05
  4. * @Last Modified by: IT - Pony
  5. * @Last Modified time: 2016-04-23 14:55:24
  6. */
  7. @charset "utf-8";
  8. *{margin: 0;padding: 0;}

  10. #content{
  11.     margin: 0 auto;
  12.     width: 1010px;
  13.     height: 600px;
  14.     border: 1px solid black;
  15.     text-align: center;
  16. }

  18. #head div{
  19.     width: 200px;
  20.     height: 100px;
  21.     border: 1px solid red;
  22.     float: left;
  23. }

  25. #middle{
  26.     width: 1008px;
  27.     height: 400px;
  28.     border: 1px solid black;
  29.     float: left;
  30. }

  32. #lside{
  33.     width: 746px;
  34.     height: 400px;
  35.     border: 1px solid green;
  36.     float: left;
  37. }

  39. #rside{
  40.     width: 258px;
  41.     height: 400px;
  42.     border: 1px solid green;
  43.     float: left;
  44. }

  46. .lside1{
  47.     width: 744px;
  48.     height: 100px;
  49.     border: 1px solid green;
  50. }

  52. .lside2{
  53.     width: 744px;
  54.     height: 198px;
  55.     border: 1px solid green;
  56. }

  58. .lside3{
  59.     width: 744px;
  60.     height: 98px;
  61.     border: 1px solid green;
  62. }

  64. .lone{
  65.     width: 370px;
  66.     height: 198px;
  67.     border: 1px solid gray;
  68.     float: left;
  69. }

  71. .ltwo{
  72.     width: 370px;
  73.     height: 198px;
  74.     border: 1px solid gray;
  75.     float: left;
  76. }

  78. .rone{
  79.     width: 256px;
  80.     height: 198px;
  81.     border: 1px solid purple;
  82. }

  84. .rtwo{
  85.     width: 256px;
  86.     height: 198px;
  87.     border: 1px solid purple;
  88. }

  90. #foot div{
  91.     width: 1008px;
  92.     height: 96px;
  93.     border: 1px solid purple;
  94.     float: left;
  95. }

  97. .clear{
  98.     clear: both;
  99. }
运行结果：
阅读(1539) | 评论(0) | 转发(0) |
0

上一篇：必应页面

下一篇：BLOG页面

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6