今天我们就模仿论坛做一个简单的论坛网页
<!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论坛网页
发布评论