目录
一、表白墙
<!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>
<style>
/* 清空浏览器默认样式 */
* {
margin: none;
padding: none;
box-sizing: border-box;
}
.container {
width: 300px;
/* 水平居中 */
margin: 0 auto;
}
h3 {
text-align: center;
padding: 10px 0;
}
p {
text-align: center;
font-size: 15px;
color: rgb(196, 180, 159);
}
.row {
display: flex;
width: 100%;
font-size: 18px;
justify-content: center;
align-items: center;
height: 40px;
}
.edit {
margin: 2px 0;
height: 38px;
width: 200px;
}
span {
width: calc(100% - 200px);
}
.submit {
width: 300px;
height: 35px;
background-color: pink;
color: azure;
font-size: 20px;
border-radius: 3px;
border: 0;
}
.submit:active {
background-color: green;
}
</style>
<!-- 给外层加个容器，通过这个容器实现对齐的效果 -->
<div class="container">
<h3>表白墙</h3>
<p>输入后点击提交,会将信息显示在表格中</p>
<div class="row">
<span>谁：</span>
<input type="text" class="edit" id="name1">
</div>
<div class="row">
<span>对谁：</span>
<input type="text" class="edit" id="name2">
</div>
<div class="row">
<span>说什么：</span>
<input type="text" class="edit" id="message">
</div>
<div class="row">
<input type="button" value="提交" class="submit">
</div>
</div>
<script>
let submitButton = document.querySelector('.submit');
submitButton.onclick = function(){
// 先获取三个输入
let name1 = document.querySelector('#name1');
let name2 = document.querySelector('#name2');
let message = document.querySelector('#message');
// 判断输入是否合法
if(name1 =='' || name2 == '' || message == ''){
return;
}
// 创建一个div对象
let div = document.createElement('div')
div.innerHTML = name1.value + '对' + name2.value + '说' + message.value;
div.style.textAlign = 'center';
let container = document.querySelector('.container');
// 将div对象加到dom树上
container.appendChild(div);
// 清空输入框
name1.value = '';
name2.value = '';
message.value = '';
}
</script>
</body>
</html>效果图：
二、TodoList
<!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>todolist</title>
</head>
<body>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.nav {
width: 362px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
padding: 3px 0;
}
.task {
width: 300px;
height: 30px;
}
.submit {
width: 60px;
height: 30px;
background-color: pink;
color: beige;
margin: 0 2px;
}
.submit:active {
background-color: greenyellow;
color: black;
}
.container {
width: 362px;
display: flex;
justify-content: center;
/* align-items: center; 不能加这个，加上个每新加一个任务，已完成都会跟着变 */
margin: 0 auto;
}
.left,
.right {
width: 50%;
text-align: center;
height: 100%;
}
.container h3 {
background-color: black;
color: white;
}
</style>
<!--navigate导航的缩写 -->
<div class="nav">
<input type="text" class="task">
<input type="button" value="新建任务" class="submit">
</div>
<div class="container">
<div class="left">
<h3>未完成</h3>
</div>
<div class="right">
<h3>已完成</h3>
</div>
</div>
<script>
let inputButton = document.querySelector('.submit');
inputButton.onclick = function(){
// 获取输入的task
let inputTask = document.querySelector('.task');
// 新建一个复选框 span 和删除button
let row = document.createElement('div');
row.class = 'row';
row.style.display = 'flex';
row.style.alignItems = 'center';
let inputCheckBox = document.createElement('input');
inputCheckBox.type = 'checkbox';
let inputspan = document.createElement('span');
inputspan.innerHTML = inputTask.value;
inputspan.style.width = '120px';
let deleteButton = document.createElement('input');
deleteButton.type = 'button';
deleteButton.value = '删除';
row.appendChild(inputCheckBox);
row.appendChild(inputspan);
row.appendChild(deleteButton);
// 将row添加到left里面
let left = document.querySelector('.container .left');
left.appendChild(row);
// 清空输入框
inputTask.value = '';
// 给inputcheckBox设置一个点击事件
inputCheckBox.onclick = function(){
// 如果被选中，就移到已完成
if(inputCheckBox.checked){
let right = document.querySelector('.container .right');
console.log(right);
right.appendChild(row);
}else {
let left = document.querySelector('.container .left');
left.appendChild(row);
}
}
deleteButton.onclick = function(){
// 要想删除row 就得知道row的父元素
let parent = row.parentNode;
parent.removeChild(row);
}
}
</script>
</body>
</html>效果图：
三、博客系统
博客系统页面的代码较复杂，我将样式和代码的对应关系画在同一个图中，为了保证图片的清晰度，我将图片和代码都上传到资源，大家可以自行下载。
我简单说一下整体的设计思路：
①整个页面分为导航栏和版心两部分。五个页面的导航栏都一样，因此只需要写一份代码，写其他页面直接复制过去，同时，五个页面的背景图片都一样，将导航栏和背景图片的样式都放在common.css里面。
②列表页和详情页的布局相似，将版心分为left和right两个部分。
③登录页和注册页的布局一样。
④编辑页需要单独写，需要引入一个markdown的依赖。
效果图：
四、下载链接
使用HTML、CSS实现博客系统页面、表白墙页面和TodoList页面的设计代码。-Javascript文档类资源-CSDN下载
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
