盒子的浮动

最新推荐文章于 2024-05-05 20:36:35 发布

dengpan1889

最新推荐文章于 2024-05-05 20:36:35 发布

阅读量1k

点赞数 1

原文链接：http://www.cnblogs.com/shoulinniao/p/10779577.html

版权

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>sy5-2</title>
</head>
    <style type="text/css">
        .box1{
            width: 100px;
            height: 100px;
            background-color:blue;
            border:1px black solid;
            float:left;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: red;
            float:left;
            border:1px black solid;
        }
    </style>
    
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    
</body>
</html>

sy5-1

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>sy5-2</title>
</head>
    <style type="text/css">
        .box1{
            width: 200px;
            height: 200px;
            background-color:#C41BE9;
            
        }
        .box2{
            width: 300px;
            background-color: gray;
            border:10px black solid;
            margin: 0 auto;/*上下边距为0 左右边距自动适应 */
            /*float:center; 错误，只有左右浮动，没有居中浮动*/
        }
    </style>
    
<body>
    <div class="box2">
        <div class="box1"></div>
    </div>
    
</body>
</html>

sy5-21

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>sy5-3</title>
</head>
    <style type="text/css">
        .box1{
            
            width: 200px;
            height: 200px;
            background-color:#C41BE9;
            float:left;
        }
        .box2{
            width: 300px;
            height: 200px;/*坑爹啊，没有定位高度，看不到父盒子的背景颜色*/
            background-color: gray;
            border:10px black solid;
            margin: 0 auto;/*上下边距为0 左右边距自动适应 */
        }
    </style>
    
<body>
    <div class="box2">
        <div class="box1"></div>
    </div>
    
</body>
</html>

sy5-22

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>sy5-3</title>
</head>
    <style type="text/css">
        .box1{
            width: 1000px;
            height: 800px;
            margin: 0 auto;
        }
        .box2{
            width:auto;
            height: 200px;
            background-color: gray;
            border:red 3px dashed;
            
        }
        .box3{
            width:1000px;
            height: 400px;
            border:blue 3px solid;
            margin: 0 auto;
        }
        .box31{
            width:300px;
            height: 400px;
            float:left;
            background-color: pink;
        }
        .box32{
            width:700px;
            height:400px;
            background-color:#C41BE9;
            float:left;
        }
        .box4{
            width:1000px;
            height: 200px;
            background-color: blue;
            border:dotted 3px red;
        }
    </style>
    
<body>
    <div class="box1">
        <div class="box2">
        </div>
        
        <div class="box3">
            <div class="box31">
            </div>
            <div class="box32">
            </div>
        </div>
        
        <div class="box4">
        </div>
    
    </div>
    
</body>
</html>

sy5-3

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>sy5-4</title>
</head>
    <style type="text/css">
        .box0{
            width: 1100px;
            height: 700px;
            margin: 0 auto;
        }
        .box1{
            width: 150px;
            height: 700px;
            float:left;
            
        }
        .box11{
            width: 150px;
            height: 550px;
            background-color:#1093E4;
            display: flex;
        }
        .box12{
            width: 150px;
            height: 150px;
            background-image: url(颐和园图片.jpg);
            background-size: cover;
        }
        .box2{
            width: 950px;
            height: 700px;
            float:left;
            
        }
        .box3{
            width: 950px;
            height: 130px;
            
        }
        .box31{
            width: 800px;
            height: 130px;
            background-color:#DF5DED;
            float:left;
            font-size:20px;
        }
        .box32{
            width: 150px;
            height: 130px;
            float:left;
            background-color: pink;
            display: flex;
        }
        .box4{
            width: 950px;
            height: 400px;
        }
        .box41{
            width: 150px;
            height: 400px;
            background-color:#E4B837;
            float:left;
            display: flex;
        }
        .box42{
            width:800px;
            height: 400px;
            background-color: #0FE38C;
            float:right;
            font-size:25px;
        }
        .box5{
            width: 950px;
            height: 170px;
            
        }
        .box51{
            width: 800px;
            height: 170px;
            background-color:#A1AFE9;
            float:left;
            display: flex;
        }
        .box52{
            width:150px;
            height: 170px;
            background-color:#3856E9;
            float:left;
            display: flex;
        }
        .t1{/*为了让字体上下左右居中，文字部分再套一个div，并且父亲盒子display改为flex*/
            text-align:center;
            font-size: 30px;
            font-family:"隶书";
            margin: auto auto;
            font-weight:bold;/*字体加粗*/
        }
        .t3{
            text-align:center;
            font-size: 30px;
            font-family:"华文行楷";
            margin: auto auto;
            font-weight:bold;
        }
        .t5{
            text-align:center;
            margin: auto auto;
            font-size:30px;
        }
    </style>
<body>
    <div class="box0">
        <div class="box1">
            <div class="box11" ><div class="t1" >颐和园</div></div>
            <div class="box12"></div>
        </div>
        <div class="box2">
            <div class="box3">
                <div class="box31">颐和园是我国现存最完好、规模最宏大的古代园林。位于北京市海淀区境内，距天安门20余公里，占地290公顷。</div>
                <div class="box32"><div class="t3">概述</div></div>
            </div>
            <div class="box4">
                <div class="box41"><div class="t3">历史发展</div></div>
                <div class="box42">颐和园原为封建帝王的行宫和花园，远在1153年即在这里修建“西山八院”之一的“金山行宫”。1494年修建了园静寺，后皇室在此建成好山园。1664年清廷定都北京后，又将好山园更名为“瓮山行宫”。清乾隆年间，经过15年的修建工程，将该园改名为“清漪圆”。此时的清漪园，北自文昌阁至西宫门筑有围墙，东、南、西三面以昆明湖水为屏障，园内修建了许多亭台楼阁，桥廊斋榭，山清水秀，富丽堂皇。1860年，英法联军疯狂抢劫并焚烧了园内大部分建筑，除宝云阁（俗称“铜亭”）智慧海、多宝 琉璃塔幸存外，珍宝被洗劫一空，建筑夷为一片废墟。1888年慈待太后挪用海军经费3000万两白银，在清漪园的废墟上兴建起颐和园。1900年颐和园又遭八国联军的野蛮破坏，后慈禧又动用巨款重新修复。数百年来，这里一直是封建帝王、皇室的享乐之地，解放辟为公园。1961年国务院公布颐和园为全国重点文物保护单位。</div>
            </div>
            <div class="box5">
                <div class="box51"><div class="t5">颐和园包括万寿山、昆明湖两大部分。</div></div>
                <div class="box52"><div class="t3">主要景观</div></div>
            </div>
        </div>
        
    </div>
    
    
</body>
</html>

sy5-4

转载于:https://www.cnblogs.com/shoulinniao/p/10779577.html

dengpan1889

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
盒子的浮动

<!doctype html><html><head><meta charset="utf-8"><title>sy5-2</title></head> <style type="text/css"> .box1{ ...
复制链接

扫一扫