html版本的简单的表白墙

实现一个简单的表白墙（html）

实现一个这样的表白墙

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表白墙</title>
</head>
<body><div class="container"><h1>表白墙</h1><p>输入后点击提交，会将信息显示在表格中</p><div class="row"><span>谁：</span><input type="text" class="edit"></div><div class="row" ><span>对谁：</span><input type="text" class="edit"></div><div class="row"><span>说什么：</span><input type="text" class="edit"></div><div class="row"><input type="button" value="提 交" id="submit"></div><script>let submitButton=document.querySelector('#submit');submitButton.onclick=function(){//1.先获取到编辑框的内容let edits=document.querySelectorAll('.edit');//依靠.value来获得其输入框的值let from=edits[0].value;let to=edits[1].value;let message=edits[2].value;console.log(from,to,message);//这里是对用户输入进行合法的校验，看用户输入是否合法if(from==''||to==' '||message==''){return;}//2.根据内容，构造HTML元素（.row里面包含用户输入的话）//createElement:创建一个元素let row=document.createElement('div');row.className='row';row.innerHTML=from+'对'+to+'说：'+message;//3.把这个新的元素添加到DOM树上let container=document.querySelector('.container');container.appendChild(row);//4.清空原来的输入框for(let i=0;i<edits.length;i++){edits[i].value='';}}</script><style>/*去除浏览器默认样式：内边距，外边距，内边框和外边框不会撑大盒子*/*{margin:0;padding: 0;box-sizing: border-box;}/*margin:0 auto :意思是 中央居中*/.container{width: 400px;margin:0 auto;}/*padding:20px auto :h1标签：上下间距20*/h1{text-align:center;padding:20px auto;}p{text-align:center;color:#666;padding: 10px 0;font-size:14px;}/*display:flex:基于弹性布局justify-content:center:水平居中align-items:center:垂直居中*/.row{height:50px ;display: flex;justify-content: center;align-items:center;}/*现在对于span和input的长度进行调整*/span{width:90px;font-size: 20px;}input{width:310px;height: 40px;font-size: 18px;}/*现在处理一下 提交 按钮首先，提交按钮宽度和父元素一样宽其次，设置字体颜色和背景颜色然后，border:none:作用：为了去除黑边框border-radius:设置四个角角为圆矩形font-size:设置 提交 字体的大小*/#submit{width: 400px;color: white;background-color:orange;border:none;border-radius:5px;font-size: 18px;}/*点击 提交 按钮 就会改变其背景颜色*/#submit:active{background-color: black;}</style></div>
</body>
</html>

实现效果图

html版本的简单的表白墙相关推荐

Python开发——做一个简单的【表白墙】网站
前言大家早好.午好.晚好吖 ❤ ~ 今天我们要用Python做Web开发,做一个简单的[表白墙]网站. 众所周知表白墙的功能普遍更多的是发布找人,失物招领, 还是一个大家可以跟自己喜欢的人公开表白的 ...
PHP简单好看的表白墙网自适应源码+后台
介绍: 后台无法登录测试环境是apache2.24-PHP5.6 需要的自行在测试源码介绍: 1.用户可以在表白墙表白留言,无需注册 2.用户自动检测记录IP防止恶意提交 3.生成的表白卡超级好看 ...
symfony小练习-表白墙
过上一个博客系统以及对官方示例程序的基本学习,目前对symfony的各个组件有了一定的学习,学校布置了一个表白墙任务,这里就这个任务的完成进行记录 ...........2019.3.20.22.31 ...
springboot 做表白墙_基于微信云开发 SayLove 表白墙微信小程序V1.0
基于微信云开发 SayLove 表白墙微信小程序后续会继续更新,敬请期待2.0全新版本~ 欢迎添加左边的微信一起探讨! 注意: 云函数的wx-server-sdk依赖需要更新才能正常使用,这里的都是 ...
校园表白墙微信小程序V1.0 SayLove -基于微信云开发-一键快速搭建,开箱即用
项目最新更新介绍请看这里:https://www.cnblogs.com/LiangSenCheng/p/13040899.html 发现有问题?欢迎加我微信一起探讨,或者直接提Issues 无法下载 ...
利用PHP开发的一款万能、表白墙系统部分代码片段
表白墙系统文章目录表白墙系统前言一.需求分析二.系统分析二.搭建准备工作(完成数据库和工具准备) 1.搭建环境 2.下载完成一键安装phpmyadmin nginx或apache php( ...
校园小情书小程序源码-开源表白墙告白墙小程序源码+后端+手动部署方式
微信小程序–校园小情书后台源码,好玩的表白墙,告白墙. 小情书是一个开源项目,你可以使用叶子的后台服务,也可以自己搭建后台服务.本文档为独立部署小情书后台服务的教程. 项目环境要求: PHP 7.0 ...
Linux 部署表白墙程序
学习目标:因为我们如果在实际的后端开发时写服务器.部署到服务器 :这里的服务器使用的绝大部分是Linux操作系统.所以需要掌握基本操作:有利于日后相关工作效率提高.以及如何将一个web程序部署到云服务 ...
表白墙 -- 前后端代码详解
表白墙 -- 前后端代码详解一.前端二.后端实现 2.1 需求 2.2 创建项目及初始化 2.3 实现提交数据 (存档) 2.3.1 实现 doPost 2.3.2 构造请求 (修改 html 文 ...

html版本的简单的表白墙

实现一个简单的表白墙（html）

html版本的简单的表白墙相关推荐

最新文章

热门文章