CSS美化留言板案例-青狐资源网

CSS美化留言板案例

一.CSS美化留言板

1.输出结果

2.代码部分<!DOCTYPE html><htmllang=“zh-CN”><head><metacharset=“UTF-8”><metahttp-equiv=“X-UA-Compatible”content=“IE=edge”><metaname=“viewport”content=“width=device-width, initial-scale=1.0”><title>CSS美化留言板</title><style>*{ margin:0; padding:0; box–sizing: border–box;} body {background小白轻松搭建系统点我wcqh.cn–color: lightblue; max–height:1120em; max–width:1170px; margin:0auto; padding:030px;} h3 { margin:20px10px; text–align: center;} input { display: block; width:100%; min–height:200px; margin–bottom:20px; padding:5px10px250px;}.list > li { display: flex; place–content: space–between; background–color: lightcoral; line–height:36p小白轻松搭建系统点我wcqh.cnx; margin–bottom:5px; border–radius:3px; padding:010px;}.list > li > button { border–radius:5px; margin:5px0; border:1px; width:40px;}</style></head><body><h3>留言板</h3><inputtype=“text”onkeydown=“insertComment(this)“placeholder=“请输入您的留言”autofocus/><ulclass=“list”></ul></body><script>const insertComment =function(e小白轻松搭建系统点我wcqh.cnle){if(event.key ===Enter){// 1. 非空判断 event指事件对象if(ele.value.length ===0){ alert(留言不能为空)// 重置焦点 ele.focus();// 直接返回returnfalse;}// 2. 添加留言const ul = document.querySelector(.list); ele.value +=`<button onclick=“del(this.parentNode)”>删除</button>`; ul.insertAdjacentHTML(afterbegin,`<li>${ele.value}</li>`);// 3. 小白轻松搭建系统点我wcqh.cn清空输入框 ele.value =null;}};// 删除const del =function(ele){return confirm(是否删除？)?(ele.outerHTML =null):false;};</script></html>

批改老师：

PHPz 批改状态：合格老师批语：完成的很好, 效果很棒, 继续加油

作者最新博文

前端开发工具安装配置与markdown常用语法

2022-10-15 17:06:57

1.如需技术支持联系QQ：1339833655 2. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 3. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！ 4. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！ 5. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 6. 如有链接无法下载、失效或广告，请联系管理员处理！ 7. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！ 8. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员！

THE END