`
好好学习-天天向上
  • 浏览: 34364 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

用css进行网页布局

 
阅读更多

 第一部分

<style type="text/css">
      body{margin:0;padding:0}
      .top{height:100px;background:blue}
      .main{width:800px;height:300px;background:black;margin:0 auto}
      .foot{width:800px;height:100px;background:red;margin:0 auto}
</style>
<body>
     <div class="top"></div>
     <div class="main"></div>
     <div class="foot"></div>
</body>
    上面代码是网页的一列布局，其中有几个点和大家分享一下。

         

<div class="top"></div>
<div class="main"></div>
<div class="foot"></div>
   一般网页都是分上中下三部分，即代码中的“top”，“main”，“foot”

 

 

body{margin:0;padding:0}
   这句话是为了让布局和html页面没有边距。
margin:0 auto

   是为了让“main”，"foot"居中，0 是指上下的距离，auto指左右自适应

 

 第二部分  

<style type="text/css">
      body{margin:0;padding:0}
      .main{width:800px;margin:0 auto}
      .left{width:30%;height:500px;float：left；background:red}
      .right{width:70%;height:500px;float：right；background:blue}
</style>
<body>
     <div class="main">
     <div class="left"></div>
     <div class="right"></div>
     </div>
</body>
   这第二部分是网页的二列布局。

 

   与第一部分大体相同但主要是中间部分“main”，分成了两部分“left”，“right”。
   二列布局最重要的是控制其宽度，即
.left{width:30%;}
    设置可以是百分比，也可以是具体的数据如 300px，但左右总值是800px。
    为了实现能分成两列，咱们需要用到float属性，即
float：left   right
   用于控制元素的位置(位于左，还是右)。
   
分享到：
| js 面向对象继承的两种方式及封装
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics