许愿墙HTML+CSS

<!DOCTYPE html>
<html>CSS
   <head>
       <meta charset="utf-8" >
       <title>许愿墙</title>
       <link rel="stylesheet" href="css/style.css" >
   </head>
   <body>
   <div class="container">
       <div class="item" style="background: #E3E197;">
           <p>昨夜西风凋碧树</p>
           <span>关闭</span>
       </div>
       <div class="item" style="background-image: url(img/pg.jpeg);">
           <p>独上高楼，望尽天涯路</p>
           <span>关闭</span>
       </div>
       <div class="item" style="background: #BBE1F1;">
           <p>蓦然回首,那人在灯火阑珊处</p>
           <span>关闭</span>
       </div>
   </div>
   </body>
</html>

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{
   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;
}
.linear{
background:linear-gradient(to bottom, #4b6c9c , #5ac4ed);
}

许愿墙HTML+CSS相关推荐

Html+Css+js实现带有雪花飘落的许愿墙效果
目录前言导语效果预览功能要点介绍代码部分雪花逻辑部分(index.js) 逻辑文件 (script.js) 样式部分(style.css) 骨架部分(html) 效果演示总结下载地址 ...
java许愿墙_18.JavaScript实现许愿墙效果
JavaScript实现许愿墙效果: Document margin:0; } .paper { position: fixed; left: 200px; top: 200px; width: 20 ...
java许愿墙_wishingWall 一个好看的许愿墙板块,功能强大，页面美观 Java Develop 238万源代码下载- www.pudn.com...
文件名称: wishingWall下载收藏√ [ 5 4 3 2 1 ] 开发工具: Java 文件大小: 1839 KB 上传时间: 2013-04-25 下载次数: 6 提供者: ...
一个简简单单的许愿墙
石家庄邮电职业技术学院专属活动第2期:[校园前端学习笔记]主题征文石家庄邮电职业技术学院社区学号后四位:(必填)0219 邀请人ID:(非必填) 知识点对整体布局的考察,边框线的设置,边距的调整 ...
php许愿墙mysql,许愿墙—许下你的愿望
从网上找了一个很漂亮的许愿墙模板,早上就花了一段时间写了这个许愿墙程序,给大家分享下. 首先我们遍历出所有的许愿列表:$query = mysql_query("select * from ...
许愿神器来了，30行Python打造了一款许愿墙，希望能追到女神！
公众号 "菜鸟学Python", 设为 "星标" 第447篇原创,和30w+一起学Python! 不知道大家有没有这样的想法,自己总想着能够通过许愿的方式,来祈 ...
许愿墙 – javaee 项目实战（一）
Technorati 标签: java,javaee项目发现自己无法完整地写出一个网页的源代码,便只能借助别人的源码来研究当中涉及的技术,希望久而久之可以提高自己的技术水平. 一.概述许愿墙是指可 ...
php许愿墙模板,PHP+jQuery+Ajax漂亮的许愿墙效果
之前我们讲了PHP+MySQL+jQueryUI完美便签条http://www.sucaihuo.com/js/70.html,今天我们在此基础上做一个漂亮的许愿墙效果. 下载资源下载积分: 150 ...
php许愿墙mysql_许愿墙的搭建（基于Apache+php+mysql）
一.准备部分:CentOS 7 , Linux 文本各自配置好环境二. CentOS 7准备如下: yum install httpd -y #安装httpd yum install php ...

许愿墙HTML+CSS

许愿墙HTML+CSS相关推荐

最新文章

热门文章