美文网首页
css-项目布局 - 草稿

css-项目布局 - 草稿

作者: 杰伊_约翰 | 来源:发表于2018-10-26 16:54 被阅读28次

页面布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        
        .box{
            width: 800px;
            height: 100px;
            background-color: blue;
            margin: 10px auto;

        }
        .box1{
            width: 800px;
            height:600px;
            background-color: pink;
            margin:10px auto;
        }
        .box3{
            width: 170px;
            height: 300px;
            background-color: gold;
            float: left;
            margin: 10px;

        }
        .box4{
            width: 170px;
            height: 300px;
            background-color: gold;
            float: left;
            margin: 10px;

        }
        .box5{
            width: 400px;
            height: 300px;
            background-color: green;
            float: left;
            margin: 10px;

        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class='box1'>
        <div class="box3"></div>
        <div class="box5"></div>
        <div class="box4"></div>

    </div>
</body>
</html>
image.png

相关文章

  • css-项目布局 - 草稿

    页面布局

  • css-布局

    css基础的知识看完后,我们就要学习如何布局,这里详细的总结一下最近了解的布局方式。 一 单列水平居中 1.子元素...

  • css-布局

    关于css布局里,主要的有浮动(float)关键词,可以设置为left/right/;再一个是overflow解决...

  • css-布局

  • css-布局

    历史 1 .table布局2 .float布局3 .fllex布局 默认:正常流布局 1 .在不对页面进行任何布局...

  • CSS-居中布局

    html 结构: css代码: 水平居中 inline-block + text-align table + ma...

  • CSS-弹性布局

        弹性布局对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性在响应式开发中可以发挥极大的作用。主...

  • css-特殊布局

    作业:上下页切换布局,设置外边距margin的值和内边距的值,在div盒子里面添加列表ul,里层包含li,并且每个...

  • css-左右布局

    一、左边固定,右边自适应的布局 1、左边左浮动,右边加个overflow:hidden; 2. 左边左浮动,右边加...

  • css-布局详解

    正常的默认文档流方式布局就不说了。主要说以下几种布局: table布局 float布局 position定位布局 ...

网友评论

      本文标题:css-项目布局 - 草稿

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