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

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的安装和使用

    IDEA的特色功能 IDEA所提倡的是智能编码,是减少程序员的工作,IDEA的特色功能有以下22点 [1]  : ● 智能的选取 在很多时候我们要选取某个方法,或某个循环或想一步一步从一个变量到整个类 ...

  2. Bash基本功能：输入输出重定向

    输入输出重定向的作用: 输出重定向就是把命令的执行结果保存到文件,便于查看. 输入重定向就是把原先由键盘的输入改为由文件输入. 案例1:把ls显示的结果输入到 date文件里面:包括ls的正确和错误信 ...

  3. js 常见数组算法

    数组方法概述 1.不改变原数组,返回新数组 concat() 连接两个或多个数组,两边的原始数组都不会变化,返回被连接数组的一个副本. join() 把数组中所有元素放入一个字符串中,返回字符串. s ...

  4. UOJ73 【WC2015】未来程序

    题目描述:给出输入和暴力程序,求输出.共10个测试点. 测试点1: 输入\(a,b,c\),求\(a\times b \ \mathrm{mod} \ c\) \(a,b,c\)属于long long ...

  5. Day15:大前端

    垂直水平居中 css: display: table-cell; text-align: center; vertical-align: middle; div: display: inline-bl ...

  6. shell编程题（三）

    将一目录下所有的文件的扩展名改为bak #! /bin/bash for i in `ls` do mv $i ${i%%.*}.bak done ${i%%.*} 截掉一个变量字符串第一个" ...

  7. 64位内核开发第四讲,查看SSDT表与showSSDT表

    目录 SSDt表与ShadowSSDT表的查看. 一丶SSDT表 1.什么是SSDT表 2.查看步骤 二丶ShadowSSDT表 1.什么是ShadowSSDT表 2.如何查看. 三丶工具介绍 SSD ...

  8. 64位内核开发第二讲.内核编程注意事项,以及UNICODE_STRING

    目录 一丶驱动是如何运行的 1.服务注册驱动 二丶Ring3跟Ring0通讯的几种方式 1.IOCTRL_CODE 控制代码的几种IO 2.非控制 缓冲区的三种方式. 三丶Ring3跟Ring0开发区 ...

  9. JS 中的prototype、__proto__与constructor

    我们需要牢记两点: ①__proto__和constructor属性是对象所独有的: ② prototype属性是函数所独有的,因为函数也是一种对象,所以函数也拥有__proto__和construc ...

  10. FCS省选模拟赛 Day5

    传送门 Solution Code  #include<bits/stdc++.h> #define ll long long #define max(a,b) ((a)>(b)?( ...