将以上代码加上css和js

好的，以下是一个示例的 CSS 和 JavaScript 文件，可以帮助你为物业管理前端代码添加样式和交互效果：

CSS 文件（style.css）：

/* 全局样式 */
body {
	font-family: Arial, sans-serif;
	background-color: #f1f1f1;
}

/* 头部样式 */
header {
	background-color: #333;
	color: #fff;
	padding: 20px;
}

header h1 {
	margin: 0;
	font-size: 32px;
}

nav {
	float: right;
	margin-top: 10px;
}

nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

nav li {
	display: inline-block;
	margin-left: 20px;
}

nav a {
	color: #fff;
	text-decoration: none;
}

nav a:hover {
	text-decoration: underline;
}

/* 主体样式 */
main {
	margin: 20px;
	background-color: #fff;
	padding: 20px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

main h2 {
	margin-top: 0;
}

table {
	width: 100%;
	border-collapse: collapse;
}

table th, table td {
	padding: 10px;
	border: 1px solid #ccc;
}

table th {
	background-color: #f1f1f1;
}

table td button {
	padding: 5px 10px;
	background-color: #333;
	color: #fff;
	border: none;
	cursor: pointer;
}

table td button:hover {
	background-color: #444;
}

/* 表单样式 */
form {
	margin-bottom: 20px;
}

form label {
	display: inline-block;
	width: 80px;
}

form input[type=text] {
	width: 200px;
	padding: 5px;
	border: 1px solid #ccc;
	border-radius: 3px;
	margin-right: 10px;
}

form button {
	padding: 5px 10px;
	background-color: #333;
	color: #fff;
	border: none;
	cursor: pointer;
	margin-right: 10px;
}

form button:hover {
	background-color: #444;
}

form button[type=submit] {
	background-color: #007bff;
}

/* 弹出框样式 */
.modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 9999;
}

.modal-content {
	display: inline-block;
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #fff;
	padding: 20px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.close {
	position: absolute;
	top: 5px;
	right: 10px;
	font-size: 20px;
	color: #aaa;
	cursor: pointer;
}

.close:hover {
	color: #333;
}

/* JavaScript 文件 */
/* 添加事件监听器 */
document.addEventListener('DOMContentLoaded', function() {
	// 点击添加按钮，弹出添加房产信息的对话框
	document.querySelector('button[type=button][value=add]').addEventListener('click', function() {
		showModal('添加房产信息', '房产信息添加成功！');
	});

	// 点击编辑按钮，弹出编辑房产信息的对话框
	document.querySelectorAll('button[type=button][value=edit]').forEach(function(button) {
		button.addEventListener('click', function() {
			showModal('编辑房产信息', '房产信息修改成功！');
		});
	});

	// 点击删除按钮，弹出确认删除的对话框
	document.querySelectorAll('button[type=button][value=delete]').forEach(function(button) {
		button.addEventListener('click', function() {
			if (confirm('确定要删除该房产信息吗？')) {
				alert('房产信息删除成功！');
			}
		});
	});

	// 点击关闭按钮，关闭弹出框
	document.querySelectorAll('.close').forEach(function(close) {
		close.addEventListener('click', function() {
			hideModal();
		});
	});
});

/* 弹出框函数 */
function showModal(title, message) {
	// 创建弹出框元素
	var modal = document.createElement('div');
	modal.classList.add('modal');

	// 创建弹出框内容元素
	var content = document.createElement('div');
	content.classList.add('modal-content');

	// 创建标题元素
	var heading = document.createElement('h3');
	heading.innerText = title;
	content.appendChild(heading);

	// 创建消息元素
	var message = document.createElement('p');
	message.innerText = message;
	content.appendChild(message);

	// 创建关闭按钮元素
	var close = document.createElement('span');
	close.classList.add('close');
	close.innerHTML = '×';
	content.appendChild(close);

	// 将弹出框内容元素添加到弹出框元素中
	modal.appendChild(content);

	// 将弹出框元素添加到页面中
	document.body.appendChild(modal);

	// 显示弹出框
	modal.style.display = 'block';
}

/* 关闭弹出框函数 */
function hideModal() {
	// 获取弹出框元素
	var modal = document.querySelector('.modal');

	// 隐藏弹出框
	modal.style.display = 'none';

	// 删除弹出框元素
	modal.remove();
}

以上代码中，CSS 文件定义了物业管理系统前端的样式，包括颜色、字体、间距、边框等。JavaScript 文件定义了物业管理系统前端的交互效果，包括添加、编辑、删除房产信息等功能的实现，以及弹出框的显示和关闭等功能。需要注意的是，以上代码仅为示例代码，实际应用中需要根据具体需求进行修改和完善。