menu
  • 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

html+css布局

武飞扬头像
sh2001824
帮助3人

html css的布局方式

总共分为浮动布局、定位布局、flex布局、table-cll表格布局、网格布局

网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域

学新通

 一、display（flex）布局

display中的属性

 1.flex-direction:

  • row（默认值）：主轴为水平方向，起点在左端。
  • row-reverse：主轴为水平方向，起点在右端。
  • column：主轴为垂直方向，起点在上沿。
  • column-reverse：主轴为垂直方向，起点在下沿

 2.flex-wrap:

  • nowrap（默认）：不换行。
  • wrap：换行，第一行在上方。
  • wrap-reverse：换行，第一行在下方

 justify-content:

  • flex-start（默认值）：左对齐
  • flex-end：右对齐
  • center： 居中
  • space-between：两端对齐，项目之间的间隔都相等。
  • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

  • align-items:

  • flex-start：交叉轴的起点对齐。
  • flex-end：交叉轴的终点对齐。
  • center：交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

二、网格布局

网格布局就是把HTML 元素设置为 display， 属性为 grid 

  • grid-template-columns 属性在网格容器中创建列
  • grid-template-rows 属性在网格容器中设置行的高度

实例：

  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en">
  3.  
     
  4.  
    <head>
  5.  
    <meta charset="UTF-8">
  6.  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.  
    <title>Document</title>
  9.  
    <style>
  10.  
    main {
  11.  
    width: 800px;
  12.  
    height: 600px;
  13.  
    border: 1px solid darkcyan;
  14.  
    display: grid;
  15.  
    grid-template-columns: 1fr 2fr 1fr;
  16.  
    grid-template-rows: 50px auto 50px;
  17.  
    }
  18.  
     
  19.  
    .col1 {
  20.  
    border: 1px solid salmon;
  21.  
    grid-column-start: 1;
  22.  
    grid-column-end: 4;
  23.  
    }
  24.  
     
  25.  
    .col2 {
  26.  
    border: 1px solid seagreen;
  27.  
    grid-column-start: 1;
  28.  
    grid-column-end: 2;
  29.  
    }
  30.  
     
  31.  
    .col3 {
  32.  
    border: 1px solid red;
  33.  
    grid-column-start: 2;
  34.  
    grid-column-end: 4;
  35.  
    }
  36.  
     
  37.  
    .col4 {
  38.  
    border: 1px solid blue;
  39.  
    grid-column-start: 1;
  40.  
    grid-column-end: 4;
  41.  
    }
  42.  
    </style>
  43.  
    </head>
  44.  
     
  45.  
    <body>
  46.  
    <main>
  47.  
    <div class="col1"></div>
  48.  
    <div class="col2"></div>
  49.  
    <div class="col3"></div>
  50.  
    <div class="col4"></div>
  51.  
    </main>
  52.  
    </body>
  53.  
     
  54.  
    </html>
学新通

效果：

学新通

 使用网格布局做一个小的项目

html代码

  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en">
  3.  
     
  4.  
    <head>
  5.  
    <meta charset="UTF-8">
  6.  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.  
    <title>Document</title>
  9.  
    <link rel="stylesheet" href="css/index.min.css">
  10.  
    </head>
  11.  
     
  12.  
    <body>
  13.  
    <div class="box">
  14.  
    <div class="top">
  15.  
    <p class="s">手机</p>
  16.  
    <p class="a">查看更多</p>
  17.  
    </div>
  18.  
    <div class="content">
  19.  
    <div class="left">
  20.  
    <img src="img/left.jpg" alt="">
  21.  
    </div>
  22.  
    <div class="right">
  23.  
    <div class="top">
  24.  
    <img src="img/2.png" alt=""><br>
  25.  
    <p style="line-height: 0;">Xiaomi 12S Ultr</p><br>
  26.  
    <p style="line-height: 0;" class="text1">这镇来卡|专业莱卡影像</p><br>
  27.  
    <p style="line-height: 0;" class="text2">5999元起</p>
  28.  
    </div>
  29.  
    <div class="top2">
  30.  
    <img src="img/2.png" alt="">
  31.  
    <p>Xiaomi 12S Ultr</p>
  32.  
    <p class="text1">这镇来卡|专业莱卡影像</p>
  33.  
    <p class="text2">5999元起</p>
  34.  
     
  35.  
    </div>
  36.  
    <div class="top3">
  37.  
    <img src="img/3.png" alt="">
  38.  
    <p>Xiaomi 12S Ultr</p>
  39.  
    <p class="text1">这镇来卡|专业莱卡影像</p>
  40.  
    <p class="text2">5999元起</p>
  41.  
    </div>
  42.  
    <div class="top4">
  43.  
    <img src="img/4.png" alt="">
  44.  
    <p style="line-height: 0;">Xiaomi 12S Ultr</p>
  45.  
    <p class="text1">这镇来卡|专业莱卡影像</p>
  46.  
    <p class="text2">5999元起</p>
  47.  
    </div>
  48.  
    <div class="footer">
  49.  
    <img src="img/5.png" alt="">
  50.  
    <p style="line-height: 0;">Xiaomi 12S Ultr</p>
  51.  
    <p class="text1">这镇来卡|专业莱卡影像</p>
  52.  
    <p class="text2">5999元起</p>
  53.  
    </div>
  54.  
    <div class="footer1">
  55.  
    <img src="img/6.png" alt="">
  56.  
    <p>Xiaomi 12S Ultr</p>
  57.  
    <p class="text1">这镇来卡|专业莱卡影像</p>
  58.  
    <p class="text2">5999元起</p>
  59.  
    </div>
  60.  
    <div class="footer2">
  61.  
    <img src="img/7.png" alt="">
  62.  
    <p>Xiaomi 12S Ultr</p>
  63.  
    <p class="text1">这镇来卡|专业莱卡影像</p>
  64.  
    <p class="text2">5999元起</p>
  65.  
    </div>
  66.  
    <div class="footer3">
  67.  
    <img src="img/8.png" alt="">
  68.  
    <p>Xiaomi 12S Ultr</p>
  69.  
    <p class="text1">这镇来卡|专业莱卡影像</p>
  70.  
    <p class="text2">5999元起</p>
  71.  
    </div>
  72.  
    </div>
  73.  
    </div>
  74.  
    </div>
  75.  
    </body>
  76.  
     
  77.  
    </html>
学新通

scss代码

  1.  
    .box {
  2.  
    width: 1200px;
  3.  
    margin: 0 auto;
  4.  
    background-color: #F5F5F5;
  5.  
    display: grid;
  6.  
    grid-template-columns: 1fr 3fr;
  7.  
    .top {
  8.  
    grid-column-start: 1;
  9.  
    grid-column-end: 4;
  10.  
    display: grid;
  11.  
    grid-template-columns: 1fr 3fr;
  12.  
    .s {
  13.  
    grid-column-start: 1;
  14.  
    grid-column-end: 2;
  15.  
    margin-left: 10px;
  16.  
    font-size: 20px;
  17.  
    margin-top: 10px;
  18.  
    }
  19.  
    .a {
  20.  
    grid-column-start: 3;
  21.  
    grid-column-end: 4;
  22.  
    margin-right: 10px;
  23.  
    font-size: 14px;
  24.  
    color: #666;
  25.  
    cursor: pointer;
  26.  
    }
  27.  
    }
  28.  
    .content {
  29.  
    width: 1200px;
  30.  
    display: grid;
  31.  
    grid-template-columns: 1fr 3fr;
  32.  
    grid-template-rows: auto;
  33.  
    .left {
  34.  
    grid-column-start: 1;
  35.  
    grid-column-end: 2;
  36.  
    img {
  37.  
    width: 100%;
  38.  
    height: 600px;
  39.  
    }
  40.  
    }
  41.  
    .right {
  42.  
    grid-column-start: 2;
  43.  
    grid-column-end: 4;
  44.  
    display: grid;
  45.  
    grid-template-columns: 1fr 1fr 1fr 1fr;
  46.  
    grid-template-rows: 300px 300px;
  47.  
    .top,
  48.  
    .footer {
  49.  
    margin-top: 10px;
  50.  
    grid-column-start: 1;
  51.  
    grid-column-end: 2;
  52.  
    margin-right: 10px;
  53.  
    background-color: #fff;
  54.  
    margin-left: 10px;
  55.  
    img {
  56.  
    width: 200px;
  57.  
    }
  58.  
    p {
  59.  
    text-align: center;
  60.  
    font-size: 14px;
  61.  
    }
  62.  
    .text1 {
  63.  
    color: #999;
  64.  
    }
  65.  
    .text2 {
  66.  
    color: #F96429;
  67.  
    }
  68.  
    }
  69.  
    .top2,
  70.  
    .footer1 {
  71.  
    grid-column-start: 2;
  72.  
    grid-column-end: 3;
  73.  
    margin-right: 10px;
  74.  
    margin-top: 10px;
  75.  
    background-color: #fff;
  76.  
    img {
  77.  
    width: 200px;
  78.  
    }
  79.  
    p {
  80.  
    line-height: 10px;
  81.  
    text-align: center;
  82.  
    font-size: 14px;
  83.  
    }
  84.  
    .text1 {
  85.  
    color: #999;
  86.  
    }
  87.  
    .text2 {
  88.  
    color: #F96429;
  89.  
    }
  90.  
    }
  91.  
    .top3,
  92.  
    .footer2 {
  93.  
    margin-top: 10px;
  94.  
    grid-column-start: 3;
  95.  
    grid-column-end: 4;
  96.  
    margin-right: 10px;
  97.  
    background-color: #fff;
  98.  
    img {
  99.  
    width: 200px;
  100.  
    }
  101.  
    p {
  102.  
    line-height: 10px;
  103.  
    text-align: center;
  104.  
    font-size: 14px;
  105.  
    }
  106.  
    .text1 {
  107.  
    color: #999;
  108.  
    }
  109.  
    .text2 {
  110.  
    color: #F96429;
  111.  
    }
  112.  
    }
  113.  
    .top4,
  114.  
    .footer3 {
  115.  
    margin-top: 10px;
  116.  
    grid-column-start: 4;
  117.  
    grid-column-end: 5;
  118.  
    margin-right: 10px;
  119.  
    background-color: #fff;
  120.  
    img {
  121.  
    width: 200px;
  122.  
    }
  123.  
    p {
  124.  
    line-height: 10px;
  125.  
    text-align: center;
  126.  
    font-size: 14px;
  127.  
    }
  128.  
    .text1 {
  129.  
    color: #999;
  130.  
    }
  131.  
    .text2 {
  132.  
    color: #F96429;
  133.  
    }
  134.  
    }
  135.  
    }
  136.  
    }
  137.  
    }
学新通

效果：

学新通

这篇好文章是转载于：学新通技术网

  • 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
  • 本站站名： 学新通技术网
  • 本文地址： /boutique/detail/tanhfffgii
系列文章
更多 icon
同类精品
更多 icon
继续加载
友情链接: 申请要求：权重≥3，IP≥1000，内容属同类网站; 申请邮件： luke.wu●vfv.cc 友情链接交换群： 友情链接交换群
外链价格: 【首页 30/月 - 300/年】【内页 50/月 - 500/年】【全站 70/月 - 700/年】 购买外链请加QQ群： 站长交流群