Chinaunix首页 | 论坛 | 博客

泉水南

首页　| 　博文目录　| 　关于我

小闹腾

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

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

文章分类

全部博文（69）

文章存档

2017年（2）

2016年（16）

2015年（21）

2014年（30）

我的朋友
最近访客
推荐博文
div首页布局

分类： Html/Css

2015-10-20 11:11:05

Sublime编写源代码：

点击(此处)折叠或打开

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset=utf-8>
  5.     <title></title>
  6.     <style type="text/css">
  7.     #container {
  8.         /*整体的宽度，自适应居中*/
  9.         width: 1002px;
  10.         margin: 0px auto;
  11.     }

  13.     #header {
  14.         /*设定头部的高度和颜色*/
  15.         height: 100px;
  16.         background: orange;
  17.     }

  19.     #main {
  20.         /*中间部分的高度和背景颜色*/
  21.         height: 400px;
  22.         background: white;
  23.     }

  25.     #lside {
  26.         /*中间部分又分出两个模块，分别设定长度宽度*/
  27.         width: 700px;
  28.         height: 400px;
  29.         background: pink;
  30.         float:left;
  31.     }

  33.     .four {
  34.         /*中间部分的lside划分为四个div，class为类，margin设定外边距离为10像素，padding为内边距10像素*/
  35.         width: 310px;
  36.         height: 160px;
  37.         background: white;
  38.         float: left;
  39.         margin: 10px;
  40.         padding: 10px;
  41.     }

  43.     #rside {
  44.         width: 302px;
  45.         height: 400px;
  46.         background: purple;
  47.         float:right;
  48.     }

  50.     .two {
  51.         /*中间部分的rside分出两个div，class为类*/
  52.         width: 262px;
  53.         height: 165px;
  54.         background: white;
  55.         margin: 10px;
  56.         padding: 10px;
  57.     }

  59.     #footer {
  60.         height: 100px;
  61.         background: blue;
  62.     }
  63.     </style>
  64. </head>
  65. <body>
  66.     <div id="container">
  67.         <div id="header"></div>
  68.         <div id="main">
  69.             <div id="lside">
  70.                 <div class="four">
  71.                     [北京学员]19岁小伙子与6K月薪的故事
  72. [湖南学员]22岁程序员在长沙薪资5K
  73. [强女生]工作1年,工资升至13K
  74. [求职定位]找工作的报价技术
  75.                 </div>
  76.                 <div class="four">
  77.                     [北京学员]19岁小伙子与6K月薪的故事
  78. [湖南学员]22岁程序员在长沙薪资5K
  79. [强女生]工作1年,工资升至13K
  80. [求职定位]找工作的报价技术
  81.                 </div>
  82.                 <div class="four">
  83.                     [北京学员]19岁小伙子与6K月薪的故事
  84. [湖南学员]22岁程序员在长沙薪资5K
  85. [强女生]工作1年,工资升至13K
  86. [求职定位]找工作的报价技术
  87.                 </div>
  88.                 <div class="four">
  89.                     [北京学员]19岁小伙子与6K月薪的故事
  90. [湖南学员]22岁程序员在长沙薪资5K
  91. [强女生]工作1年,工资升至13K
  92. [求职定位]找工作的报价技术
  93.                 </div>
  94.             </div>
  95.             <div id="rside">
  96.                 <div class="two">
  97.                     [北京学员]19岁小伙子与6K月薪的故事
  98. [湖南学员]22岁程序员在长沙薪资5K
  99. [强女生]工作1年,工资升至13K
  100. [求职定位]找工作的报价技术
  101.                 </div>
  102.                 <div class="two">
  103.                     [北京学员]19岁小伙子与6K月薪的故事
  104. [湖南学员]22岁程序员在长沙薪资5K
  105. [强女生]工作1年,工资升至13K
  106. [求职定位]找工作的报价技术
  107.                 </div>
  108.             </div>
  109.         </div>
  110.         <div id="footer"></div>
  111.     </div>
  112. </body>
  113. </html>

运行结果（火狐浏览器）：
阅读(1330) | 评论(0) | 转发(0) |
1

上一篇：51单片机项目实战（一）

下一篇：Java---一个数的n次方

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

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

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

16024965号-6