用html+javascript打造公文一键排版系统7：落款排版

**公文一键排版系统**

###7. 落款排版在公文排版中，落款是非常重要的一部分。它不仅体现了文书的身份，还需要按照一定的格式排版。

#### HTML结构首先，我们需要定义一个HTML结构来容纳落款信息。

html<!-- 公文头部 -->
<div class="public-header">
 <!-- 文书名称和职位 -->
 <div class="author-info">
 <span class="author-name">张三</span>
 <span class="position">办公室主任</span>
 </div>
 <!-- 日期 -->
 <div class="date">2023年03月15日</div>
</div>

<!-- 公文正文 -->
<div class="public-content">
 <!-- 正文内容 -->
 <p>公文正文内容...</p>
</div>

<!-- 落款部分 -->
<div class="footer">
 <!-- 文书签名 -->
 <div class="signature">张三</div>
 <!-- 备注信息 -->
 <div class="remark">备注信息...</div>
</div>

css.public-header {
 background-color: #f0f0f0;
 padding:10px;
}

.author-info {
 display: flex;
 align-items: center;
}

.author-name {
 font-weight: bold;
}

.position {
 margin-left:10px;
}

.date {
 float: right;
 margin-top:5px;
}

.public-content {
 padding:20px;
}

.footer {
 background-color: #f0f0f0;
 padding:10px;
 clear: both;
}

.signature {
 font-size:24px;
 font-weight: bold;
}

.remark {
 margin-left:10px;
}

javascript// 获取HTML元素const publicHeader = document.querySelector('.public-header');
const authorInfo = document.querySelector('.author-info');
const date = document.querySelector('.date');
const footer = document.querySelector('.footer');
const signature = document.querySelector('.signature');

// 定义函数来更新落款部分的内容function updateFooter(authorName, position, dateValue) {
 // 更新文书名称和职位 authorInfo.innerHTML = `
 <span class="author-name">${authorName}</span>
 <span class="position">${position}</span>
 `;
 // 更新日期 date.textContent = dateValue;
}

// 定义函数来更新落款部分的样式function updateFooterStyle() {
 // 更新背景颜色和内边距 publicHeader.style.background = '#f0f0f0';
 publicHeader.style.padding = '10px';
 // 更新文书名称和职位的样式 authorInfo.style.display = 'flex';
 authorInfo.style.alignItems = 'center';
 // 更新日期的样式 date.style.float = 'right';
 date.style.marginTop = '5px';
}

// 调用函数来更新落款部分的内容和样式updateFooter('张三', '办公室主任', '2023年03月15日');
updateFooterStyle();