创建一个新网页
- 创建简单的网页文档
- 代码如下所示。
<html>
<head>
<title>
微信公众平台
</title>
</head>
<body>
</body>
<html>
- 用table创建基本的微信平台结构
- 建立一个table,根据微信公众号页面设计表格。
- rowspan是跨行的单元格,colspan是跨列的单元格。
- 插入图片用img标签,src是图片位置。
- 设计单元格style=“text-align:center”,单元格文字居中显示。
<body>
<table width="366" border="1" >
<tr>
<td colspan="5" style="text-align:center">岭云君</td>
</tr>
<tr>
<td colspan="5" style="text-align:center">晚上22:00</td>
</tr>
<tr>
<td width="107" >
<img src="01.jpg" width="73" height="67" />
</td>
<td colspan="2" rowspan="2"><p> </p>
<p>欢迎关注岭云君!<br />
——————————<br />
喜欢公众号 请回复1<br />
较满意 请回复2<br />
不满意 请回复3<br />
——————————<br />
另外,不如试着回复历史人物看看?<br />
例如:<br />
王安石<br />
范仲淹<br />
包拯
<br />
欢迎给出宝贵意见<br />
岭云君会继续改善<br />
谢谢</p></td>
<td width="47" colspan="2" rowspan="3" > </td>
</tr>
<tr>
<td height="115"> </td>
</tr>
<tr>
<td height="165" colspan="3"> </td>
</tr>
<tr>
<td height="17" colspan="1" style="text-align:center">万古千秋</td>
<td width="169" colspan="1" style="text-align:center">风华绝代</td>
<td colspan="3" style="text-align:center">其他</td>
</tr>
</table>
</body>
- 网页效果。
美化
代码如下。
- cellspacing=“0” cellpadding=“0”,cellpadding代表的是边框与其内容的间隙大小;cellspacing 是边框与边框之间的间隙大小;
- 表格内边框可直接border=0删掉,嵌套一个table做外边框。
<html>
<head>
<title>无标题文档</title>
<style type="text/css">
.style {font-size: xx-small}
</style>
</head>
<body>
<table width="409" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="409" border="0" cellspacing="0" cellpadding="0" style="border-left: 1 solid #FFF; border-right: 1 solid #FFF; border-top: 1 solid #FFF; border-bottom: 1 solid #FFF">
<tr>
<td colspan="5" ><div align="center">岭云君</div></td>
</tr>
<tr>
<td colspan="5" ><div align="center" class="style">晚上22:00</div></td>
</tr>
<tr>
<td width="107" > <img src="01.jpg" width="73" height="67" /></td>
<td colspan="2" rowspan="2" ><p> </p>欢迎关注岭云君!<br />
——————————<br />
喜欢公众号 请回复1<br />
较满意 请回复2<br />
不满意 请回复3<br />
——————————<br />
另外,不如试着回复历史人物看看?<br />
例如:<br />
王安石<br />
范仲淹<br />
包拯
<br />
欢迎给出宝贵意见<br />
岭云君会继续改善<br />
谢谢</td>
<td width="47" colspan="2" rowspan="3" > </td>
</tr>
<tr bordercolor="#FFFFFF">
<td height="115"> </td>
</tr>
<tr bordercolor="#FFFFFF">
<td height="250" colspan="3"> </td>
</tr>
<tr>
<td height="17" colspan="1"><div align="center">万古千秋</div></td>
<td width="169" colspan="1"><div align="center">风华绝代</div></td>
<td colspan="3"><div align="center">其他</div></td>
</tr>
</table>
<br/>
</td>
</tr>
</table>
</body>
</html>
- 成果图
- 感兴趣可以试试。
- 岭云君是博主新建的关于历史的公众号,感兴趣的朋友可以微信搜索岭云君关注。