html用图片加表格组装圆角列表框

最新推荐文章于 2024-04-22 19:08:07 发布

lin49940

最新推荐文章于 2024-04-22 19:08:07 发布

阅读量1.1k

点赞数

分类专栏： CSS/HTML相关

本文链接：https://blog.csdn.net/lin49940/article/details/52491042

版权

CSS/HTML相关专栏收录该内容

14 篇文章 0 订阅

订阅专栏

这是一个最终结果，支持水平和垂直拉伸，由一个灰色圆角矩形，内置一个白色小圆角矩形组成的。

拆解图

上边框第一层（要指定高度）

上圆角左（要指定高度宽度，作为背景）
背景图 + logo图片（这里要指定logo图片的高度宽度，要比单元格的高度宽度要小，不然会撑开，导致布局乱了）
背景图 +文字（<p style="font-family:新宋体;font-size:13;font-weight:bold;color:#545454;">新闻中心</p>，新宋体13号加粗）
背景图（预留操作按钮等操作键，背景图片宽度必须是1px）
上圆角右（要指定高度宽度，作为背景）

上边框第二层（要指定高度）

内圆角左（要指定高度宽度，作为背景）
内园中部白色图片（指定高度，不设置宽度，背景图片的宽度绝对要1px的，如果不是1个像素，在一些场景或浏览器下，会出现一些位置偏差）
外圆角右（要指定高度宽度，作为背景）

中间层

左边框背景图（要指定宽度，高度设置100%或不设置高度）
中间背景可选（高度设置100%或不设置高度）
右边框背景图（要指定宽度，高度设置100%或不设置高度）

下边框

下圆角左（要指定高度宽度，作为背景）
下中间背景图（指定高度，不设置宽度，背景图片的宽度绝对要1px的，如果不是1个像素，在一些场景或浏览器下，会出现一些位置偏差）
下圆角右（要指定高度宽度，作为背景）

代码片段，图片素材就不提供了。

一些浏览器兼容性问题：

一. IE 6的话，<td> 里面用style 设置宽度高度是无效的，并且无内容的单元格会不展示。

如 <td style="height:44;width:18;"></td>

改为<td height=44 width=18></td>

让无内容的td 单元格显示的方法是table 的style 加上table-layout:fixed;

如<table border="0" cellpadding="0"cellspacing="0" style="margin:0; padding:0;width=100%;table-layout:fixed;">

二. IE8 的话，中间的td 要加上colspan="2"，不然中间部分的宽度会被其他单元格霸占, 另外一种方法是<td> </td> 加一个空格，但是实际效果不然前者。

如<td style="height:9;background-image:url(yj_sx_mid.png);"></td>

改为

三. 不修改图片素材的情况下，修改圆角边框的粗细(这种修改方式的一个缺点是下边框圆角会变形)

修改上圆角左，设置背景图像的起始位置和修改宽度，样式 background-position:center right;height:9;width:12;
修改上圆角要，设置背景图像的起始位置和修改宽度，样式 background-position:center left;height:9;width:12;
修改中间框的两个边框的宽度，样式 width=“3”
修改下圆角左，设置背景图像的起始位置和修改宽度(修改下边框粗细的话，要修改高度)，样式 background-position:top right;height:12;width:12;
修改下圆角右，设置背景图像的起始位置和修改宽度(修改下边框粗细的话，要修改高度)，样式 background-position:top right;height:12;width:12;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>

 
  </style>
 </HEAD>

 <BODY>
  <table border="0" cellpadding="0"cellspacing="0" style="margin:0;padding:0;width:232;">
  <!-- 上边框1 -->
  <tr>
   <td>
      <table border="0" cellpadding="0"cellspacing="0" style="margin:0; padding:0;width:100%;">
	  <tr>
	     <td style="height:44;width:18;background-image:url(yj_s_left.png);"></td>
		 <!-- logo -->
	     <td style="height:44;width:44;background-image:url(yj_b_logo44.png);" align='left'>
		 <image src="stormsmart44.png" style="height:40;width:40;">
		 </td>
		 <!-- font -->
		 <td style="height:44;background-image:url(yj_b_font新宋体13545454.png);"  align='left' nowrap="nowrap">
		   <p style="font-family:新宋体;font-size:13;font-weight:bold;color:#545454;">新闻中心</p>
		 </td>
		 <td style="height:44;background-image:url(yj_s_mid.png);"></td>
		 <!-- button -->
		 <td style="height:44;width:78;background-image:url(yj_b_button78.png);"></td>
		 <td style="height:44;width:18;background-image:url(yj_s_right.png);"></td>
	  </tr>
      </table>  
   </td>
  </tr>
  <!-- 上边框1 end -->

  <!-- 上边框2 -->
  <tr>
   <td>
      <table border="0" cellpadding="0"cellspacing="0" style="margin:0; padding:0;width:100%;">
	  <tr>
	     <td style="height:9;width:18;background-image:url(yj_sx_left.png);"></td>
	     <td style="height:9;background-image:url(yj_sx_mid.png);"></td>
             <td style="height:9;width:18;background-image:url(yj_sx_right.png);"></td>
	  </tr>
      </table>  
   </td>
  </tr>
  <!-- 上边框2 end -->

  <!-- 中边框 -->
  <tr>
   <td>
      <table border="0" cellpadding="0"cellspacing="0" style="margin:0; padding:0;width:100%;">
	  <tr>
	     <td style="height:100%;width:9;background-image:url(yj_mid.png);"></td>
		 <td>
		 <UL>
			<LI>爱对方
			<LI>爱对方
			<LI>爱对方
			<LI>爱对方
			<LI>爱对方
			<LI>爱对方
			<LI>爱对方
			<LI>爱对方
		 </UL>
		 </td>
		 <td style="height:100%;width:9;background-image:url(yj_mid.png);"></td>
	  </tr>
      </table>  
   </td>
  </tr>
  <!-- 中边框 end -->

  <!-- 下边框 -->
  <tr>
   <td>
      <table border="0" cellpadding="0"cellspacing="0" style="margin:0; padding:0;width:100%;">
	  <tr>
	     <td style="height:21;width:18;background-image:url(yj_x_left.png);"></td>
		 <td style="height:21;background-image:url(yj_x_mid.png);"></td>
		 <td style="height:21;width:18;background-image:url(yj_x_right.png);"></td>
	  </tr>
      </table>  
   </td>
  </tr>
  <!-- 下边框 end -->

  </table>
 </BODY>
</HTML>