今天我们就模仿论坛做一个简单的论坛网页

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>模拟论坛</title>
		<style type="text/css">
			/*对网页进行第二次修饰*/
			body{font-size: 12px;}
			/*对整个标签,和表格 设置宽度为990像素*/
			#discuss,#discuss-datas{
				width: 990px;
			}
			#discuss div.mt{
				/*高度,边框,背景*/
				height: 30px;
				border: 1px solid #DDDDDD;
				border-top: 2px solid #999999;
				background: #f7f7f7;
			}
			#discuss-content{
				border-bottom: 1px solid #DDDDDD;
			}
			#discuss-datas tr.header td{
				/*加粗 上下内边距 下边框*/
				font-weight: bold;
				padding: 5px 0;
				border-bottom: 1px solid #DDDDDD;
				color: #666666;
			}
			#discuss-datas td{
				/*内容水平居中对齐*/
				text-align: center;
			}
			#discuss-datas td.col1{
				/*宽度,文本左对齐*/
				width: 620px;
				text-align: left;
			}
			#discuss-datas tbody td{
				/*文本颜色*/
				color: #9c9c9c;
			}
			#discuss a{
				/*改链接颜色 去掉下划线*/
				text-decoration: none;
				color: #005aa0;
			}
			#discuss a:hover{
				text-decoration: underline;
			}
			#discuss-datas tbody td{
				/*上下内边距 下边框*/
				padding: 5px 0px;
				border-bottom: 1px dotted #DDDDDD;
			}
			/*给论坛内容加标签 加图标*/
			#discuss i{
				/*左内边距 下内边距高度 背景图*/
				padding-left: 21px;
				padding-bottom: 5px;
				background:url(img/c63802c9ee7e4ddec0e53e152e665ea.png) no-repeat;
				background-size: 100%;
			}
			#discuss div.mt a{
				float:left;
				width: 100px;
				height: 30px;
				text-align: center;
				line-height: 30px;
			}
			#discuss div.mt a:hover{
				text-decoration: none;
				color: #E4393C;
			}
			#discuss div.mt a.current{
				border: 1px solid #DDDDDD;
				border-top: 2px solid #E4393C;
				border-bottom: 0;
				background: #ffffff;
				margin-top: -6px;
				height: 35px;
				line-height: 35px;
				color: #E4393C;
			}
		</style>
	</head>
	<body>
		<!--论坛div-->
		<div id="discuss">
			<!--页签菜单栏-->
			<div class="mt">
				<a href="#">网友讨论圈</a>
				<a href="#" class="current">晒单帖</a>
				<a href="#">问答帖</a>
				<a href="#">讨论帖</a>
			</div>
			<!--讨论内容-->
			<div id="discuss-content">
				<!--表格内容-->
				<table id="discuss-datas">
					<!--标题栏-->
					<tr class="header">
						<td class="col1">主题</td>
						<td>浏览/回复</td>
						<td>作者</td>
						<td>时间</td>
					</tr>
					<!--内容栏-->
					<tbody>
						<tr>
							<td class="col1">
								<i class="sheng"></i>
								<a href="#">起点合同事件</a>
							</td>
							<td>12/60</td>
							<td><a href="">阅文</a></td>
							<td>2019/12/25</td>
						</tr>
						<tr>
							<td class="col1">
								<i class="meidao"></i>
								<a href="">不知道写点什么好</a>
							</td>
							<td>12/160</td>
							<td><a href="">作者</a></td>
							<td>2019/11/20</td>
						</tr>
						<tr>
							<td class="col1">
								<i></i>
								<a href="">这可不算划水</a>
							</td>
							<td>122/990</td>
							<td><a href="">发四！</a></td>
							<td>2019/12/10</td>
						</tr>
					</tbody>
				</table>
				<!--显示的拓展内容-->
				<div id="discuss-total">
					<div class="all_discuss">
						共900个话题
						<a href="#">浏览全部话题>>></a>
					</div>
					<div class="new_discuss" align="right">
						有问题要与其他用户讨论
						<a href="#">[发表帖子]</a>
					</div>
				</div>
			</div>
			
		</div>
	</body>
</html>

更多推荐

html论坛网页