20180615-CSS-网页布局

最新推荐文章于 2024-10-16 19:56:07 发布

cutebright00

最新推荐文章于 2024-10-16 19:56:07 发布

阅读量131

点赞数

分类专栏： CSS 笔记文章标签：课堂笔记 CSS

笔记同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

CSS

14 篇文章 0 订阅

订阅专栏

写了半天竟然没了！！！！好气好气!

课程介绍：

认识布局：

-以最适合浏览的方式将图片和文字排放在页面的不同位置

-布局模式有多种，不同的制作者会有不同的布局设计

为什么要学习网页布局：

-制作一个网页的基础

课程包含内容：

-行布局

-多列布局

-圣杯布局

-双飞翼布局

学习本门课程需要掌握的知识：

-HTML和CSS基础

-会使用DIV+CSS进行排版

-熟悉float属性，position属性

经典的行布局：

-基础的行布局

-行布局自适应

-行布局自适应限制最大宽 max-width：xx px;

-行布局垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行布局</title>
    <style type="text/css">
        body{
            margin:0;padding:0;
            background:#fff;
            text-align:center;/*文字居中*/
        }
        .container{
           width:800px;
            height:200px;
            background:#4c77f2;
            position:absolute;
            top:50%;
            left:50%;/*以上只是div的左上角处于网页的最中间*/
            margin-top:-100px;/*height高度的一半*/
            margin-left:-400px;/*width宽度的一半*/
        }
    </style>
</head>
<body>
    <div class="container">这是页面内容</div>

</body>
</html>

经典的行布局：

-行布局固定宽

-行布局部位自适应

-行布局导航随屏幕滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行布局</title>
    <style type="text/css">
        body{
            margin:0;
            padding:0;
            color:#fff;
            text-align:center;
            font-size:16px;
        }
        .header{
            width:100%;
            height:50px;
            background:#333;
            margin:0 auto;
            line-height:50px;
            position:fixed;}
        .banner{
            width:800px;
            height:300px;
            background:#30a475;
            margin:0 auto;
            line-height:300px;
            padding-top:50px;}
        .container{
            width:800px;
            height:1000px;
            background:#4c77f2;
            margin:0 auto;
        }
        .footer{
            width:800px;
            height:50px;
            background:#333;
            margin:0 auto;
            line-height:50px;
        }
    </style>
</head>
<body>     
      <div class="header">这是页面的头部</div>
      <div class="banner">这是页面的banner图</div>
      <div class="container">这是页面的内容</div>
      <div class="footer">这是页面的底部</div>
</body>
</html>

经典的列布局：

-两列布局固定；

-两列布局自适应；

-三列布局固定；

-三列布局自适应；

两列：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行布局</title>
    <style type="text/css">
        body{
            margin:0;
            padding:0;
            color:#fff;
        }
        .container{
            width:1005px;
            height:1000px;
            margin:0 auto;
        }
        .left{
            width:600px;
            height:1000px;
            background:#1a5acd;
            float:left;
        }
        .right{
            width:400px;
            height:1000px;
            background:#5880f9;
            float:right;
        
    </style>
</head>
<body>
     <div class="container">
          <div class="left">这是页面的左侧</div>
          <div class="right">这是页面的右侧</div>
     </div>
</body>
</html>

三列：

中间那一列，可以放在right后，也可以放在左面，

float值为left。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行布局</title>
    <style type="text/css">
        body{
            margin:0;
            padding:0;
            color:#fff;
        }
        .container{
            width:80%;
            height:1000px;
            margin:0 auto;
        }
        .left{
            width:30%;
            height:1000px;
            background:#67b581;
            float:left;
        }
        .middle{
            width:40%;
            height:1000px;
            background:#175bd8;
            float:left;
        }
        .right{
            width:30%;
            height:1000px;
            background:#67b581;
            float:right;
        }
    </style>
</head>
<body>
     <div class="container">
          <div class="left">这是页面的左侧</div>
          <div class="middle">这是页面的中间</div>
          <div class="right">这是页面的右侧</div>
     </div>
</body>
</html>

混合布局：

-混合布局固定；

-混合布局自适应；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行布局</title>
    <style type="text/css">
        head{
            margin:0;
            padding:0;
            font-size:16px;
            color:#fff;
            text-align:center;
        }
        .header{
            width:800px;
            height:50px;
            background:#5880f9;
            margin:0 auto;
            line-height:50px;
        }
        .container{
            width:800px;
            height:1000px;
            margin:0 auto;
        }
        .left{
            width:200px;
            height:1000px;
            background:#67b581;
            float:left;
        }
        .right{
            width:600px;
            height:1000px;
            background:#d0d0d0;
            float:right;
        }
        .footer{
            width:800px;
            height:100px;
            background:#ed817e;
            margin:0 auto;
            line-height:100px;
        }

    </style>
</head>
<body>
      <div class="header">这是页面的头部</div>
      <div class="container">
          <div class=" left">这是页面的左侧</div>
          <div class="right">这是页面的右侧</div>
      </div>
      <div class="footer">这是页面的底部</div>

</body>
</html>