嗨~~今天给大家分享分享两个使用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选择器进行样式的调整。