文章列表、博文列表，一般是有文章名字和时间构成的，文章名字后面是时间，点击文章的名字，可进入该文章。
为了美观，一般文章名字都有一定的最大字数限制，长宽对齐，等长宽的统一格式比较美观，这种用表格来做比较简单，更新时值需要加表格行就行了。

1.本文的页面效果，网页主体采用了三部分，上部分是标题栏导航栏，中间是内容栏，下边有个网页底部。（三部分，相关博文：HTML布局排版4三部分测试图片页面、）
2.导航栏和标题栏布满整个浏览器宽度，宽度自适用，导航栏采用的是点击导航栏上的链接进行跳转的方法，此外，也可以是块状链接，由于本人喜欢点导航条的文字，点着习惯，所以采用不块状的方法。（导航条，相关博文：HTML布局水平导航条2制作、）
3.中间的主体部分，用的是table布局，中间是平铺条，这样不管中间有多少内容，都会自动自适应，便于以后增删文章。（相关博文：HTML用table布局排版 padding清零、）
4.主体里面内部文字和时间用table进行格式一下，中间平铺的单元格里嵌套了一个table用来设置文章和时间格式。
之前的博文里有制作的介绍，这里把前面的内容整合了一下，组成了一个页面，并在3主体里加了个嵌套表格，用来格式文章列表样式。

1.2.3都有相关博文，介绍样式，这里介绍表格嵌套。由于表格嵌套表格，所以代码看起来杂乱，一般是通过缩进进行区分，嵌套在大table的单元格里的table缩进一下，格式化代码，看出没对table标签的区域，这里用注释标注出来嵌套的表格。
大致结构：大主体表格，分为三行，第一行是顶部的图片，第二行中嵌套了表格，第三行是底部的图片。
第二行是平铺，不设置高度，所以嵌套的表格可以高度自适应，之后可以随意增加内容。

PS：之前的博文有的是介绍div的，有的是表格的，上面的相关博文是这里用到的排版方式。

页面代码：共空行分开了代码 区域，第一区域就是标题条，第二区域是导航，第三区域是内容，第四区域是页脚。

<body id="bodyA1">

<div id="header">

<div id="head1"></div>

</div>

<div id="d">

<ul>

<li><a href="">简短问答</a></li>

<li><a href="bloglistindex.html">博文备份</a></li>

<li><a href="">测试用</a></li>

<li><a href="">关于</a></li>

</ul>

</div>

<div id="t1">

<table width="900px">

<tr>

    <td colspan=2 width="900px" height="165px" class="td_top"></td>

</tr>

<tr>

    <td class="td_mid" width="900px">

    <!--嵌套的表格开始-->

    <table>

    <tr>

     <td width="600px" ><a href="./blogbacklist/b220.html">[简短问答]如何用虚拟打印机测试，虚拟打印机相关</a></td>

     <td width="300px" >2019-09-23 14:30</td>

    </tr>

     <tr>

     <td width="600px"><a href="./blogbacklist/b209.html">LODOP纸张/打印机/份数/打印方向/双面打印 简短问答</a></td>

     <td width="300px">2019-09-23 14:36</td>

     </tr>

省略。。。。。。。。。。。。多个tr行

   </table>

   <!--嵌套的表格结束-->

    </td>

</tr>

<tr>

    <td colspan=2 width="900px" height="75px" class="td_bottom"></td>

</tr>

</table>

</div>

<div id="footer"><img src="./images/huaxie.png"></div>

</body>

嵌套表格的样式代码：（页面其余部分样式代码再上面链接的相关博文中有介绍）

table{margin:auto;border-collapse:collapse;}

td{padding:0px;}

.td_top{background-image:url(../images/top.png);}

.td_mid{background-image:url(../images/mid.png);padding-left:50px;line-height:30px;}

.td_bottom{#8ea5e0;background-image:url(../images/bottom.png);}

#t1{font-size:14px;}

#t1 a{text-decoration:none;color:blue;}

图示：

HTML布局排版之制作个人网站的文章列表的更多相关文章

  1. 使用asp.net从零开始制作设计网站---转载

    首先感谢提供此教程的朋友,可以给大家学习的机会,很有用,留着好好学.如下正文: 1. 申请域名 2. 购买空间 3. 备案 4. 使用photoshop完成设计与切图  5. 使用dreamweave ...

  2. HTML布局排版手机上浏览的网页

    前面做个几个简单的测试html布局排版的页面,都是在浏览器上查看的,C-LODOP可通过集中打印和广域网AO打印方式,让手机等也可以打印预览和打印. 集中打印的大体方法是通过一台windows电脑作为 ...

  3. QT5:第二章 布局排版控件

    一.简介 在QT组件面板中有Layouts和Spacers两个组件面板 注意:布局排版控件不显示 1.Layouts(布局) Vertical Layout:垂直方向布局,组件自动在垂直方向上分布 H ...

  4. HTML用table布局排版 padding清零

    之前博文:HTML布局排版2如何设置div总是相对于页面居中 中是用div进行排版的,div是切了三条,顶部的图片,下部的图片,中间的平铺条,中间的div不设高度,根据内容,该区域的大小不固定,便于后 ...

  5. 【Azure App Service】C#下制作的网站，所有网页本地测试运行无误，发布至Azure之后，包含CHART（图表）的网页打开报错，错误消息为 Runtime Error： Server Error in '/' Application

    问题描述 C#下制作的网站,所有网页本地测试运行无误,发布至Azure之后,包含CHART(图表)的网页打开报错,错误消息为 Runtime Error: Server Error in '/' Ap ...

  6. 如何制作sitemaps网站地图

    如何制作sitemaps网站地图 1.0 前言 1.1 xml格式 1.2 常见问题 本文资料来源于网站 1.0 前言 Sitemap 可方便网站管理员通知搜索引擎他们网站上有哪些可供抓取的网页.最简 ...

  7. ASP.NET MVC5 网站开发实践(二) Member区域 - 全部文章列表

    显示文章列表分两块,管理员可以显示全部文章列表,一般用户只显示自己的文章列表.文章列表的显示采用easyui-datagrid.后台需要与之对应的action返回json类型数据   目录 ASP.N ...

  8. dedecms---------自由列表标题：网站地图自由列表

    列表HTML存放目录:{cmspath}/ 目录默认页名称:sitemap.xml 命名规则:{listdir}/sitemap.xml 列表模板:{style}/map.htm 循环内的单行记录样式 ...

  9. Hacker News网站的文章排名算法工作原理

    In this post I'll try to explain how Hacker News ranking algorithm works and how you can reuse it in ...

随机推荐

  1. Emmet的HTML语法（敲代码的快捷方式）

    Emmet的HTML语法(敲代码的快捷方式)   版权声明:本文为网上转载.   所有操作按下“tab”键即可瞬间完成 元素 1.在编辑器中输入元素名称,即可自动补全生成 HTML 标签,即使不是标准 ...

  2. C# 避免程序重复启动

    using System; using System.Collections.Generic; using System.Linq; using System.Windows.Forms; using ...

  3. 洛谷 P1140 相似基因 题解

    每日一题 day23 打卡 Analysis dp[i][j]表示序列A中前i个与序列B中前j个匹配的相似度最大值 所以,dp方程很容易想到: 1.让a[i]与b[j]匹配 2.让a[i]与B序列中一 ...

  4. Kubernetes 学习6 Pod控制器应用进阶

    一.资源配置清单 1.自主式Pod资源 2.资源的清单格式,大多数清单格式都遵循如下条件: a.一级字段:apiVersion(group/version),kind,metadata(name,na ...

  5. [c++11]右值引用、移动语义和完美转发

    c++中引入了右值引用和移动语义,可以避免无谓的复制,提高程序性能.有点难理解,于是花时间整理一下自己的理解. 左值.右值 C++中所有的值都必然属于左值.右值二者之一.左值是指表达式结束后依然存在的 ...

  6. 利用fgetc合并2个源文件的内容，到一个新的文件中

    #include <stdio.h> #include <stdlib.h> //功能: 合并2个源文件的内容,到一个新的文件中 int main(int a,char *ar ...

  7. Open Judge 1.4 09

    09:判断能否被3,5,7整除 总时间限制:  1000ms 内存限制:  65536kB 描述 给定一个整数,判断它能否被3,5,7整除,并输出以下信息:1.能同时被3,5,7整除(直接输出3 5 ...

  8. Java SpringBoot Scheduled定时任务

    package task.demo.controller; import org.springframework.beans.factory.annotation.Autowired; import ...

  9. 【CSP模拟赛】天才绅士少女助手克里斯蒂娜（线段树&读入优化&输出优化）

    题面描述 红莉栖想要弄清楚楼下天王寺大叔的显像管电视对“电话微波炉(暂定)”的影响.选取显像管的任意一个平面,一开始平面内有个n电子,初始速度分别为vi,定义飘升系数为 $$\sum_{1\leqsl ...

  10. docker技术入门（1）

    1Docker技术介绍 DOCKER是一个基于LXC技术之上构建的container容器引擎,通过内核虚拟化技术(namespace及cgroups)来提供容器的资源隔离与安全保障,KVM是通过硬件实 ...