用HTML编写一个框架结构的BBS论坛网页,使用CSS级联样式表,是所有子页面的段落和标题都有相同的外观
时间: 2024-09-22 22:08:32 浏览: 63
要创建一个框架结构的BBS论坛网页,并使用CSS来统一段落和标题的外观,可以按照以下步骤进行:
首先,在HTML中设置基本的框架布局:
```html
<!DOCTYPE html>
<html>
<head>
<title>BBS论坛</title>
<link rel="stylesheet" type="text/css" href="styles.css"> <!-- 引入CSS文件 -->
</head>
<frameset cols="20%,80%">
<frame src="header.html" name="headerFrame" title="Header">
<frame src="mainContent.html" name="contentFrame" title="Main Content">
</frameset>
<body></body>
</html>
```
在这个例子中,我们使用`frameset`标签创建了一个包含两个列的框架:左侧用于导航(头部),右侧用于内容展示。
接下来,创建一个名为`styles.css`的外部CSS文件,将通用样式应用于段落和标题:
```css
/* styles.css */
* {
box-sizing: border-box; /* 允许元素包含内边距和边框在计算大小时 */
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
h1, h2, p {
margin: 1em; /* 设置默认间距 */
color: #333; /* 文本颜色 */
font-weight: normal; /* 预防标题过粗 */
}
h1 {
font-size: 24px;
}
h2 {
font-size: 18px;
}
p {
font-size: 16px;
}
```
最后,分别在`header.html`和`mainContent.html`等子页面中创建相应的HTML结构,比如标题和段落。
现在,所有的子页面段落和标题都会应用相同的CSS样式,因为它们都引用了同一个外部样式表。如果你需要针对每个部分有特定的样式,可以在子页面对应的CSS规则下覆盖通用样式。
阅读全文