创建一个简单的非主流留言板

HTML部分

```html

欢迎来到非主流留言板

```

CSS部分

```css

body {

fontfamily: Arial, sansserif;

backgroundcolor: f4f4f4;

margin: 0;

padding: 0;

display: flex;

flexdirection: column;

alignitems: center;

justifycontent: center;

height: 100vh;

}

h1 {

color: 333;

}

form {

display: flex;

flexdirection: column;

alignitems: center;

gap: 1rem;

marginbottom: 1rem;

}

textarea {

width: 300px;

resize: none;

}

messageBoard {

width: 100%;

maxwidth: 600px;

padding: 1rem;

boxsizing: borderbox;

backgroundcolor: fff;

border: 1px solid e0e0e0;

borderradius: 5px;

boxshadow: 0px 2px 4px rgba(0, 0, 0, 0.1);

marginbottom: 1rem;

}

.message {

borderbottom: 1px solid e0e0e0;

padding: 0.5rem 0;

}

.message:lastchild {

border: none;

}

```

JavaScript部分

```javascript

document.getElementById('messageForm').addEventListener('submit', function(event) {

event.preventDefault();

const username = this.username.value;

const message = this.message.value;

if (username && message) {

addMessage(username, message);

this.reset();

} else {

alert('请填写用户名和留言内容');

}

});

function addMessage(username, message) {

const messageBoard = document.getElementById('messageBoard');

const messageDiv = document.createElement('div');

messageDiv.classList.add('message');

messageDiv.innerHTML = `

${username}：${message}

`;

messageBoard.appendChild(messageDiv);

}

```

这是一个简单的非主流留言板的代码示例。用户可以填写用户名和留言内容，点击留言按钮后，留言会动态显示在留言板上。