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

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. 在idea中调试spark程序-配置windows上的 spark local模式

    spark程序大致有如下运行模式: standalone模式:spark自带的模式 spark on yarn:利用hadoop yarn来做集群的资源管理 local模式:主要在测试的时候使用, 这 ...

  2. go html

    package main import ( "fmt" "html/template" "net/http" ) type User str ...

  3. Oracle 异步IO 优缺点

    一.Oracle在Linux下使用异步IO配置 最近在测试Oracle的时候,很想测试下使用异步IO的性能.但是异步IO是需要专门配置的,否则的话,容易遇到很著名的“ORA-01578: ORACLE ...

  4. __property 关键字的使用

    https://blog.csdn.net/lixingshi/article/details/41277577 __property是属性关键字,用来定义类的某种属性. 给类定义属性,是BCB的扩展 ...

  5. 洛谷 P3143 [USACO16OPEN]钻石收藏家Diamond Collector 题解

    P3143 [USACO16OPEN]钻石收藏家Diamond Collector 题目描述 Bessie the cow, always a fan of shiny objects, has ta ...

  6. BZOJ 4571: [Scoi2016]美味

    二次联通门 : BZOJ 4571: [Scoi2016]美味 /* BZOJ 4571: [Scoi2016]美味 dalao们都在说这题如果没有加法balabala就可以用可持久化trie解决了 ...

  7. Leetcode44. 通配符匹配(动态规划)

    44. 通配符匹配 动态规划 \(f_{i,j}\)为\(s\)匹配\(i\),\(t\)匹配\(j\)是否成功 贪心 相比之下这个思维性更强 考虑两个*,两个星号间的过渡,只需要过渡完到第二个星号, ...

  8. 三层设备-SHRP详解

    步骤:3-sw1enconf tvlan databasevtp domain s2t117vtp servervlan 10vlan 20vlan 30vlan 40exitint r f0/7 - ...

  9. Python中_,__,__xx__方法区别

    _xx 单下划线开头 Python中没有真正的私有属性或方法,可以在你想声明为私有的方法和属性前加上单下划线,以提示该属性和方法不应在外部调用.如果真的调用了也不会出错,但不符合规范. 方法就是以单下 ...

  10. postgresql大数据查询加索引和不加索引耗时总结

    1.创建测试表 CREATE TABLE big_data(  id character varying(50) NOT NULL,  name character varying(50),  dat ...