美文网首页
CSS页面布局

CSS页面布局

作者: Citrus柑橘味气息 | 来源:发表于2018-11-21 15:43 被阅读0次
image.png
image.png

代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<style type="text/css">
.zhu{
display: block;
width: 1349px;
height: 4725px;
/background-color: green;/
}
.S1{
width: 1349px;
height: 180px;
background-color: red;
margin: 0 auto;
}
.s1{
width: 1200px;
height: 130px;
background-color: blue;
margin-left: 25px;
margin-right: 25px;
margin: 0 auto;
}
.s2{
width: 1349px;
height: 50px;
background-color: orange;

    }
    .S2{
        width: 1200px;
        height: 980px;
        background-color: red;
        margin: 0 auto;
    }
    .z1{
        width: 530px;
        height: 900px;
        background-color: yellow;
        float: left;
    }
    .z2{
        width: 650px;
        height: 410px;
        background-color: blue;
        float: right;
    }
    .z3{
        width: 650px;
        height: 550px;
        float: right;
        background-color: skyblue;
    }
    .S3{
        width: 1200px;
        height: 565px;
        background-color: #faf;
        margin: 0 auto;
    }
    .title{
        width: 1200px;
        height: 38px;
        margin-bottom: 40px;
    }
    .sh1{
        width: 1200px;
        height: 400px;
        background-color: red;
    }
    .d1{
        width: 1200px;
        height: 57px;
        margin-top: 30px;
        background-color: blue;
    }
    .S4{
        width: 1200px;
        height: 630px;
        background-color: yellow;
        margin: 0 auto;
    }
    .S5{
        width: 1200px;
        height: 300px;
        background-color: red;
        margin: 0 auto;
    }
    .S6{
        width: 1200px;
        height: 600px;
        margin-bottom: 40px;
        background-color: skyblue;
        margin: 0 auto;
    }
    .S7{
        width: 1349px;
        height: 724px;
        background-color: yellow;
        margin: 0 auto;
    }
    .S8{
        width: 1349px;
        height: 530px;
        background-color: #ffb81c;
        padding-top: 40px;
        margin: 0 auto;
    }
</style>

</head>
<body class="zhu">
<div class="S1">
<div class="s1"></div>
<div class="s2"></div>
</div>
<div class="S2">
<div class="z1"></div>
<div class="z2"></div>
<div class="z3"></div>
</div>
<div class="S3">
<h3 class="title"></h3>
<div class="sh1"></div>
<div class="d1"></div>
</div>
<div class="S4">
</div>
<div class="S5"></div>
<ul class="S6"></ul>
<div class="S7"></div>
<div class="S8"></div>
</body>
</html>

相关文章

  • 前端面试试题

    HTML 和 CSS 页面布局 css盒模型 BFC 页面布局 有5中可以解决: ​ 第一种:浮动 ....

  • web前端程序员必看之浮动布局与弹性布局的区别

    Web页面布局技术主要css2.0中主要出现了浮动布局与定位,以及css3中新的布局方式弹性布局。 对于web页面...

  • web前端程序员必看之浮动布局与弹性布局的区别

    Web页面布局技术主要css2.0中主要出现了浮动布局与定位,以及css3中新的布局方式弹性布局。 对于web页面...

  • Day08--CSS

    CSS:页面美化和布局控制

  • 【图片版】学习CSS网格布局

    简言 CSS网格布局(Grid)是一套二维的页面布局系统,它的出现将完全颠覆页面布局的传统方式。传统的CSS页面布...

  • 2019-04-04

    关于如何使用css布局 左右布局 在页面开发过程中要对页面进行左右布局排版,如何使用css的相关知识来做到呢? 以...

  • 006_布局任务与答案第一期(四川师范大学JavaWeb)

    试验目的 了解页面常用布局结构; 掌握 DIV+CSS 布局的基本方法; 3) 掌握用 CSS 改变页面样式的方法...

  • Css

    CSS:页面美化和布局控制 案例:

  • 布局

    CSS网格布局引入了二维网格布局系统,可用于布局页面主要的区域布局或小型组件。本文介绍了CSS网格布局 与 CSS...

  • html+css布局

    页面首部布局 首部布局预览图: html布局代码: CSS样式代码: Javascript特效代码: 效果图 页面...

网友评论

      本文标题:CSS页面布局

      本文链接:https://www.haomeiwen.com/subject/isscqqtx.html