【代码案例】网页版表白墙 & 待办事项（包含完整源码）

Stella_sss

于 2022-07-21 08:51:25 发布

阅读量2.4k

点赞数 19

分类专栏： [手把手带你学Java EE] 【一文搞定一问题】文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/weixin_53286472/article/details/125897608

版权

网页版表白墙

表白墙
待办事项
最后

嗨~~今天给大家分享分享两个使用html、css 和 js 实现的网页案例。分别是表白墙和待办事项。
在这里插入图片描述

表白墙

1. 创建内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表白墙</title>
</head>
<body>
		<!-- 创建表白墙 -->
		<h1>表白墙</h1>
        <p>输入后点击提交，会将信息显示在表格中</p>
        <span>谁：</span>
        <input type="text">
        <span>对谁：</span>
        <input type="text">
        <span>说什么：</span>
        <input type="text">
        <input type="button" value="提交">

</body>
</html>

在这里插入图片描述

2. 调整样式

上面的效果还不太好看，所以我们给它调整一下样式。
首先将各个html 的标签分类放好。如下：

		<div class="container">
        <h1>表白墙</h1>
        <p>输入后点击提交，会将信息显示在表格中</p>
        <div class="row">
            <span>谁：</span>
            <input class="edit" type="text">
        </div>
        <div class="row">
            <span>对谁：</span>
            <input class="edit" type="text">
        </div>
        <div class="row">
            <span>说什么：</span>
            <input class="edit" type="text">
        </div>
        <div class="row">
            <input type="button" value="提交" class="submit">
        </div>
    </div>

然后再使用style标签和CSS选择器进行样式的调整。

最低0.47元/天解锁文章

Stella_sss

关注

19
点赞
踩
9

收藏

觉得还不错? 一键收藏
14
评论
【代码案例】网页版表白墙 & 待办事项（包含完整源码）

今天的两个案例就分享到这里啦~相信这对你来说一点都不难！通过这两个案例的练习，你一定对前面介绍的内容有了掌握得更加熟练了！最后，完整代码已经上传到gitee啦~如果对于前面分段给出的代码不太理解，欢迎到我的码云上自取啦！表白墙完整代码链接待办事项完整代码链接如果你觉得这篇文章对你有帮助，记得给我一键三连噢~~...
复制链接

扫一扫