响应式web开发许愿墙

最新推荐文章于 2024-07-29 09:22:41 发布

yyqxsyyd

最新推荐文章于 2024-07-29 09:22:41 发布

阅读量685

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/yyqxsyyd/article/details/126971099

版权

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>许愿墙</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

    <div class="container">
        <div class="zz" style="background:radial-gradient(300px, #aaffff 10%, #aaffff 1%, #d0d1ff 30%)">
          <p>路漫漫其修远兮...</p>
          <span>关闭</span>   <!--span行内标签，一行可以被span划分成好几个区域-->                  
        </div>
        <div class="item" style="background: #F8B3D0;">
            <p>I have a dream...</p>
            <span>关闭</span>
        </div>
        <div class="qq" style="background: #BBE1F1;">
            <p>既然选择了远方，便只顾风雨兼程...</p>
            <span>关闭</span>
        </div>
    </div>
    <div class="container">
        <div class="yy" style="background:linear-gradient(to bottom, #ff95a0 0%, #a1ffcc 120%);">
          <p>抬头有星光</p>
          <span>关闭</span>   <!--span行内标签，一行可以被span划分成好几个区域-->                  
        </div>

</body>

</html>

style.css

html {
    height: 100%;
}

body {
    background: linear-gradient(to bottom, #CBEBDB 0%, #aaaaff 120%);
    height: 100%;
    margin: 0;
}

.container {
    margin: 0 auto;
    padding: 50px 0;
    width: 720px;
    overflow: hidden;
}

.container p {
    height: 70px;
    margin: 30px 10px;
    overflow: hidden;
    word-wrap: break-word;    /*允许长单词换到下一行*/
    line-height: 1.5;
}

.container span {
    text-decoration: none;
    color: white;
    position: relative;
    left: 150px;
    font-size: 14px;
}

.item {
    background: #E3E197;
    width: 200px;
    height: 200px;
    line-height: 30px;
    box-shadow: 0 2px 10px 1px rgba(26, 26, 79, 0.2);
    float: left;
    margin: 0 20px;
    border-bottom-left-radius: 10px 100px;
    border-bottom-right-radius: 500px 30px;
    border-top-right-radius: 5px 100px;
}
.yy {
    background: #E3E197;
    width: 200px;
    height: 200px;
    line-height: 30px;
    box-shadow: 0 2px 10px 1px rgba(26, 26, 79, 0.2);
    float: left;
    margin: 0 20px;
    border-bottom-left-radius: 50px 100px;
    border-bottom-right-radius: 50px 100px;
    border-top-right-radius: 50px 100px;
	 border-top-left-radius: 50px 100px;
}
.zz {
    background: #E3E197;
    width: 200px;
    height: 200px;
    line-height: 30px;
    box-shadow: 0 2px 10px 1px rgba(26, 26, 79, 0.2);
    float: left;
    margin: 0 20px;
  border-bottom-left-radius: 80px 100px;
  border-bottom-right-radius: 80px 100px;
  border-top-right-radius: 80px 100px;
   border-top-left-radius: 80px 100px;
}
.qq {
    background: #E3E197;
    width: 200px;
    height: 200px;
    line-height: 30px;
    box-shadow: 0 2px 10px 1px rgba(26, 26, 79, 0.2);
    float: left;
    margin: 0 20px;
    border-bottom-left-radius: 100px 100px;
    border-bottom-right-radius: 100px 100px;
    border-top-right-radius: 10px 100px;
     border-top-left-radius: 10px 100px;
}