实现简单的许愿墙效果HTML

石家庄邮电职业技术学院专属活动第2期：【校园前端学习笔记】主题征文
石家庄邮电职业技术学院社区

学号后四位：（必填）0237
邀请人ID：（非必填）

学有所思、学有所获、学有所得。在接下来的日子里，我们共同分享学习的点滴。CSDN针对我们石家庄邮电职业技术学院学习软件技术专业的同学们，特此建立了【校园前端学习分享】活动。大家可以交流在学习前端时的心得体会，也可以分享在日常学习生活中的前端课程作业，欢迎大家积极参与投稿！

知识点

css圆角边框和渐变

项目名称及描述

由<div>,<p>和<span>等标签构成的，并使用圆角边框、背景颜色渐变来实现页面的效果。

项目代码

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Document</title>
       <style type="text/css">
           html {
               margin: 0;
               padding: 0;
               height: 100%;
           }
           body {
               background: linear-gradient(to bottom, #7ec7a2 0%, #3794c0 100%);
           }

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

           .container p {
               height: 85px;
               margin: 30px 10px;
               overflow: hidden;
               word-wrap: break-word;
               line-height: 1.6;
           }

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

           .item1 {
               background: #E3E197;
               width: 200px;
               height: 200px;
               line-height: 30px;
               box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
               float: left; /*左浮动不换行*/
               margin-right: 20px;
               border-bottom-left-radius: 20px 500px; /*定义左下角的半径，就是有弧度*/
               border-bottom-right-radius: 500px 30px;
               border-top-right-radius: 5px 100px
           }
           .item2 {
               background: #F8B3D0;
               width: 200px;
               height: 200px;
               line-height: 30px;
               box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
               float: left; /*左浮动不换行*/
               margin: 0 120px;
               border-bottom-left-radius: 20px 500px; /*定义左下角的半径，就是有弧度*/
               border-bottom-right-radius: 500px 30px;
               border-top-right-radius: 5px 100px
           }
           .item3 {
               background: #BBE1F1;
               width: 200px;
               height: 200px;
               line-height: 30px;
               box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
               float: left; /*左浮动不换行*/
               margin-left: 20px;
               border-bottom-left-radius: 20px 500px; /*定义左下角的半径，就是有弧度*/
               border-bottom-right-radius: 500px 30px;
               border-top-right-radius: 5px 100px
           }
       </style>
   </head>

   <body>

       <div class="container">
           <div class="item1" style="background:#E3E197">
               <p>祝祖国繁荣昌盛、越来越好</p>
               <span>关闭</span>
           </div>
           <div class="item2" style="background: #F8B3D0;">
               <p>希望我爱的人平平安安</p>
               <span>关闭</span>
           </div>
           <div class="item3" style="background: #BBE1F1;">
               <p>疫情快快消失</p>
               <span>关闭</span>
           </div>
       </div>

   </body>

</html>

项目完成思路

根据简单的背景制作，结合css圆角边框完成项目。

项目实现过程中遇到的问题及解决方案

圆角方面会有些难搞，大家可以上网查阅相关的知识。

笔记整理

border-bottom-left-radius: 20px 500px; /*定义左下角的半径，就是有弧度*/

float: left; /*左浮动不换行*/

box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);对于阴影的设置。

position: relative;相对的定位。

实现简单的许愿墙效果HTML相关推荐

html许愿墙源码,jQuery实现可拖拽的许愿墙效果
这篇文章主要介绍了jQuery实现可拖拽的许愿墙效果,可实现拖拽图片与层叠显示功能,涉及jQuery插件的简单使用,并附带demo源码供读者下载参考,需要的朋友可以参考下本文实例讲述了jQuery实 ...
java许愿墙_18.JavaScript实现许愿墙效果
JavaScript实现许愿墙效果: Document margin:0; } .paper { position: fixed; left: 200px; top: 200px; width: 20 ...
php许愿墙模板,PHP+jQuery+Ajax漂亮的许愿墙效果
之前我们讲了PHP+MySQL+jQueryUI完美便签条http://www.sucaihuo.com/js/70.html,今天我们在此基础上做一个漂亮的许愿墙效果. 下载资源下载积分: 150 ...
Html+Css+js实现带有雪花飘落的许愿墙效果
目录前言导语效果预览功能要点介绍代码部分雪花逻辑部分(index.js) 逻辑文件 (script.js) 样式部分(style.css) 骨架部分(html) 效果演示总结下载地址 ...
简易的许愿墙效果实现
石家庄邮电职业技术学院专属活动第2期:[校园前端学习笔记]主题征文石家庄邮电职业技术学院社区学号后四位:(必填)0224 邀请人ID:(非必填) 以前多用树木做载体,称许愿树,但是因为习俗(人们制 ...
php许愿墙mysql,许愿墙—许下你的愿望
从网上找了一个很漂亮的许愿墙模板,早上就花了一段时间写了这个许愿墙程序,给大家分享下. 首先我们遍历出所有的许愿列表:$query = mysql_query("select * from ...
许愿神器来了，30行Python打造了一款许愿墙，希望能追到女神！
公众号 "菜鸟学Python", 设为 "星标" 第447篇原创,和30w+一起学Python! 不知道大家有没有这样的想法,自己总想着能够通过许愿的方式,来祈 ...
许愿墙许下你的愿望
石家庄邮电职业技术学院专属活动第2期:[校园前端学习笔记]主题征文石家庄邮电职业技术学院社区学号后四位:0228 邀请人ID:(非必填) 知识点 CSS3圆角边框和渐变的简单运用. 项目名称及描述 ...
基于微信小程序云开发（校园许愿墙app）2.0稳定版，以发布上线
大家好~我是c站的一个小博主,我会定期更新博文,本篇是围绕微信小程序基于腾讯云开发展开的一个项目,如果看着还不错,或者对您有帮助的话,可以进我的专栏看看我的小程序的其他作品https://blog.c ...

实现简单的许愿墙效果HTML

知识点

项目名称及描述

项目代码

项目完成思路

项目实现过程中遇到的问题及解决方案

笔记整理

实现简单的许愿墙效果HTML相关推荐

最新文章

热门文章