《Web前端设计与开发》实验二：CSS基础实验1

一、实验内容

编程实现下面页面布局。

二、实验代码及成品

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="css1.css">
    </head>
    <body>

        <div class="main">相对于浏览器窗口左边10%，上边10% 宽500px，高500px 边框：宽2px，颜色pink，实线，圆角 内边距20px
            <div class="pink">相对于父级容器左边30px，上边20px 宽200px，高100px 边框：宽3px 颜色black，虚线 </div>
            <div class="green" >
                <div  style="color: red" class="text">宽150px 高100px 字体大小10px,字体颜色红色 上内边距30px(保持总高度=height=100px)&emsp;下外边距20px   </div>
            </div>
            <div class="white">大小与绿色相同，上边距20px（注意观察绿色容器与当前容器的外边距）   </div>

        </div>
    </body>
</html>

.main{
    
    
    /* 相对定位 */
    position:relative;
    /*相对于浏览器窗口左边10%*/
    left:10%;
    /*相对于浏览器窗口上边10%*/
    top:10%;
    width:500px;
    height:500px;
    border:2px solid pink;
    /*内边距20px*/
    padding:20px;
    background:lightblue;
    border-radius:50px;
}

.pink{
    
    
    /* 相对定位 */
    position:relative;
    /*相对于父级容器左边30px*/
    left:30px;
    /*相对于父级容器上边20px*/
    top:20px;
    width:200px;
    height:100px;
    float: left;
    border:3px solid black;
    background:pink;
    border-style: dashed;
}

.green{
    
    
    width:150px;
    height:100px;
    margin-bottom:20px;
    margin-top: 113px;
    padding-top: 30px;
    background:green;
    font-size: 12px;
    box-sizing: border-box;
}

.text{
    
    
    font-family: 微软雅黑;
}

.white{
    
    
    width:150px;
    height:100px;
    font-size: 10px;
    background:white;
    margin-top:20px;
}

在这里插入图片描述

《Web前端设计与开发》实验二：CSS基础实验1

一、实验内容

二、实验代码及成品

猜你喜欢