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

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. Mysql分布式集群

    一.准备 集群: 192.168.1.191  管理节点192.168.1.192  管理节点192.168.1.193  数据节点和API节点 192.168.1.194  数据节点和API节点 安 ...

  2. mysql数据库从一台服务器迁移到另一台服务器上

    一.应用场景      由于要把测试服务器上的数据库迁移到正式服务器上,因此需要做数据库的迁移.这里记录一下. 二.数据库迁移1.新建数据库test create database test;12.进 ...

  3. Win10 Subsystem Linux : Ubuntu 的root密码

    安装完Ubuntu后忽然意识到没有设置root密码, 不知道密码自然就无法进入根用户下.Ubuntu的默认root密码是随机的, 即每次开机都有一个新的root密码.我们可以在终端输入命令 sudo ...

  4. HTML插入音频和视频：audio和video标签及其属性

    一.上传到第三方网站,然后引入例如视频上传到优酷网,然后得到代码 <iframe height=498 width=510 src='http://player.youku.com/embed/ ...

  5. H - Almost Union-Find

    //带删除操作的并查集 //题意:给你一个1~n的集合,有三种操作 // 1: 把p和q所在的集合合并 //2:把p移到q所在的集合中 //3:返回p所在集合中的元素个数和元素的和 //第二种操作不能 ...

  6. 数据科学速查手册（包括机器学习，概率，微积分，线性代数，python，pandas，numpy，数据可视化，SQL，大数据等方向）

    介绍:https://redstonewill.com/2372/ 项目网址:https://github.com/FavioVazquez/ds-cheatsheets

  7. FCS省选模拟赛 Day1

    Description  Solution T1 shopping 目测是插板法乱搞一下 发现题解写的是容斥dp: \[ ans = \sum_i (-1)^ig[i] \] \(g[i]\)表示的有 ...

  8. 谷歌分析(Google Analytics) 是什么

    谷歌分析(Google Analytics) 是什么 一.总结 一句话总结: 谷歌分析,即大家俗称的ga,全称google analytics,是谷歌推出的网站流量分析工具,可以说是当前业界最强大的流 ...

  9. LITEIDE配置

    LITEIDE配置 工具--管理GOPATH 工具--编辑当前环境

  10. python TypeError: unsupported operand type(s) for +: 'geoprocessing value object' and 'str'

    TypeError: unsupported operand type(s) for +: 'geoprocessing value object' and 'str' if self.params[ ...