前端实训-----摆弄形状、浮动，高度塌陷等

最新推荐文章于 2024-08-22 17:38:39 发布

智商欠费不死也废i

最新推荐文章于 2024-08-22 17:38:39 发布

阅读量585

点赞数 2

文章标签：前端 css html

本文链接：https://blog.csdn.net/qq_45174301/article/details/121855697

版权

1、摆弄形状代码

HTML文件

<html>

<head>
    <title>摆弄形状</title>
    <!-- 我们应该在此<head>标记中链接什么文件? -->
    <link rel="stylesheet" href="D:\visual实训\作业\style.css">
</head>

<body>
    <div id="container">
        <div id="first-row" class="row">
            <div class="square"></div>
            <div class="circle green"></div>
            <div class="square"></div>
            <div class="circle fancy"></div>
            <div class="circle"></div>
        </div>

        <div id="second-row" class="row">
            <div class="circle"></div>
            <div class="square fancy"></div>
            <div class="circle fancy"></div>
            <div class="circle"></div>
            <div class="circle fancy green"></div>
        </div>

        <div id="third-row" class="row">
            <div class="circle"></div>
            <div class="circle green"></div>
            <div class="circle"></div>
            <div class="square fancy"></div>
            <div class="square"></div>
        </div>

        <div id="fourth-row" class="row">
            <div class="square"></div>
            <div class="circle"></div>
            <div class="circle fancy"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>

        <div id="fifth-row" class="row">
            <div class="circle"></div>
            <div class="circle fancy"></div>
            <div class="circle"></div>
            <div class="square"></div>
            <div class="circle green"></div>
        </div>
    </div>
</body>

</html>

css文件

body {
    font-family: "Karla";
    background: #edeae5;
    width: 100%;
    height: 100%;
    position: relative;
    margin: 0px;
    text-align: center;
}

a {
    text-decoration: none;
    color: rgba(0, 0, 0, 0.5);
    font-style: italic;
    transition: 0.4s;
}

a:hover {
    color: rgba(0, 0, 0, 0.7);
}

div {
    transition: linear 0.2s;
}

#container {
    width: 480px;
    height: 480px;
    position: absolute;
    top: calc(50% - 240px);
    left: calc(50% - 240px);
}

.circle {
    width: 60px;
    height: 60px;
    background: white;
    display: inline-block;
    margin-right: 30px;
    border-radius: 50%;
}

.square {
    width: 60px;
    height: 60px;
    background: #e67e22;
    display: inline-block;
    margin-right: 30px;
}

.row {
    margin-bottom: 30px;
}

.green {
    background: #78c272;
}

.fancy {
    border: 3px inset rgba(74, 74, 74, 0.25);
    width: 54px;
    height: 54px;
}

#third-row>.circle {
    background: #de6868
}

.circle.fancy {
    border-style: dotted
}

.row .circle:first-child {
    opacity: 0
}

.green,
.fancy {
    background: #6392c0
}

.row .circle:hover {
    opacity: 0.5
}

#second-row>.circle:hover {
    transform: scale(1.25)
}

2、浮动，高度塌陷

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动 高度塌陷</title>
</head>
<style>
    #father {
        height: 100px;
        border: 1px solid green;
    }
    
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
        float: left;
    }
    
    #brother {
        height: 100px;
        background-color: royalblue;
        overflow: hidden;
    }
    
    #clearFloat {
        /*清除浮动*/
        clear: left;
    }
</style>

<body>
    <div id="father">
        <div class="box">1</div>
        <div class="box">2</div>

        <div class="box">3</div>

        <div class="box">4</div>
    </div>





</body>

</html>

3多列布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多列布局</title>
    <style>
        .box1 {
            width: 400px;
            height: 800px;
            float: left;
            background-color: gray;
            text-align: center;
        }
        
        .box2 {
            width: 1100px;
            height: 800px;
            float: right;
        }
        
        .box3 {
            width: 1100px;
            height: 400px;
            float: left;
        }
        
        .box4 {
            width: 1100px;
            height: 400px;
            float: left;
        }
        
        .box5 {
            font-weight: bold;
            font-size: 20px;
            line-height: 60px;
        }
        
        .text {
            position: relative;
            left: 10px;
            line-height: 30px;
        }
    </style>
</head>

<body>

    <div class="box1">
        <span style="color: white;font-size: 100px;font-weight: bold;">logo</span>
        <p style="color: white;">某某摄影专辑</p>
        <div class="box5">
            <p>&nbsp;</p>
            <p>网站首页</p>
            <p>咨询中心</p>
            <p>产品展示</p>
            <p>关于我们</p>
            <p>联系我们</p>
        </div>

    </div>
    </div>
    <div class="box2">
        <div class="box3">
            <img src="D:/大四上/实训/老师代码/01-浮动习题/imgs/banner.jpg" height="350px" width="1100px">
            <p style="font-size: larger;">当前位置：首页 > 关于我们</p>
        </div>
        <div class="box4">
            <hr />
            <img src="D:/大四上/实训/老师代码/01-浮动习题/imgs/01.jpg" style="float: left; height: 200px;width: 350px;">
            <p class="text">水墨（风格）摄影和传统的水墨画一样，现市面上出现的水墨摄影作品，按题材，可以分为风景和花鸟，对应国画中的山水画和花鸟画；按手法和意境，可以分为抽象和具象，对应国画中的写意和工笔。 水墨风格的摄影照片虽然免不了使用Photoshop等软件的后期加工，但是这并不意味着可以任意扭曲原照片。全息摄影是指一种记录被摄物体反射波的振幅和位相等全部信息的新型摄影技术。普通摄影是记录物体面上的光强分布，它不能记录物体反射光的位相信息，因而失去了立体感。全息摄影采用激光作为照明光源，并将光源发出的光分为两束，一束直接射向感光片，另一束经被摄物的反射后再射向感光片。人眼直接去看这种感光的底片，只能看到像指纹一样的干涉条纹，但如果用激光去照射它，人眼透过底片就能看到原来被拍摄物体完全相同的三维立体像。一张全息摄影图片即使只剩下一小部分，依然可以重现全部景物。全息摄影可应用于工业上进行无损探伤，超声全息，全息显微镜，息摄影存储器,全息电影和电视等许多方面。
            </p>
        </div>

    </div>

</body>

</html>