简单制作许愿墙HTML

最新推荐文章于 2024-03-19 11:57:00 发布

zyyyyyy.

最新推荐文章于 2024-03-19 11:57:00 发布

阅读量327

点赞数 6

文章标签： html 前端 css css3

本文链接：https://blog.csdn.net/gvgfxjhv/article/details/136456636

版权

demo.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>许愿墙</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="container">
            <div class="item" style="background: #E3E197;">
                <p>路漫漫其修远兮...</p>
                <span>关闭</span>
                <!--span组合文档中的行内元素-->
            </div>
            <div class="item" style="background: #F8B3D0;">
                <p>I have a dream...</p>
                <span>关闭</span>
            </div>
            <div class="item" style="background: #bbe1f1;">
                <p>既然选择了远方，便只顾风雨兼程...</p>
                <span>关闭</span>
            </div>
        </div>
    </body>
</html>

style.css

html{
	height:100%;}
body{
	background:linear-gradient(to bottom, #CBEBDB 0%, #3794C0 120%);
	height:100%;
	margin:0;
}
.container{
	margin:0 auto;
	padding:50px 0;
	width:720px;
	overflow:hidden;
}
.container p{
	height:80px;
	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(0,0,0,0.2);
	float:left;
	margin:0 20px;
	border-bottom-left-radius:20px 500px;
	border-bottom-right-radius:500px 30px;
	border-top-right-radius:5px 100px;
 }