老杂毛博客
  青青子衿,悠悠我心。但为君故,沉吟至今。
博客首页 | 人生历程 | 编程开发 | 机关门  
  文章分类
 
博客首页 > 网络营销相关 > 文章正文

店铺公告代码,HTML基础教程第四讲,制作好看的店铺公告

2011/4/21 21:04:10
 
在前两讲中我们把table标记的基本用法基本都讲完了,现在简单的回顾一下:

第一:如何绘制出一个多行多列的表格

第二:如何拆分单元格以及合并单元格

第三:如何设置单元格的高度和宽度

以上三个问题如果都明白的话,我们就要开始讲解今天的课程了,今天我们需要学会最重要的一个表

格属性是:background 和bgcolor。

其中bgcolor是背景颜色的意思,我们可以通过这个属性随意的为表格或单元格设置背景颜色,如:

#lt;table width="200" border="1" bgcolor="#FF0000"#gt;
  #lt;tr#gt;
    #lt;td#gt; #lt;/td#gt;
    #lt;td#gt; #lt;/td#gt;
    #lt;td#gt; #lt;/td#gt;
  #lt;/tr#gt;
  #lt;tr#gt;
    #lt;td#gt; #lt;/td#gt;
    #lt;td#gt; #lt;/td#gt;
    #lt;td#gt; #lt;/td#gt;
  #lt;/tr#gt;
  #lt;tr#gt;
    #lt;td#gt; #lt;/td#gt;
    #lt;td#gt; #lt;/td#gt;
    #lt;td#gt; #lt;/td#gt;
  #lt;/tr#gt;
#lt;/table#gt;

     
     
     

这就是一个背景为红色的表格,其中#FF0000是红色的十六进制,这个不需要管他,在Dreamweaver

里可以自由选择,另外我们用相应的英文单词来表示也是可以的,如bgcolor="red" 红色

bgcolor="blue" 蓝色,等等。

看下面这个例子:

#lt;table width="200" border="1"#gt;
  #lt;tr#gt;
    #lt;td#gt; #lt;/td#gt;
    #lt;td bgcolor="#00CC00"#gt; #lt;/td#gt;
    #lt;td#gt; #lt;/td#gt;
  #lt;/tr#gt;
  #lt;tr#gt;
    #lt;td bgcolor="#FF0000"#gt; #lt;/td#gt;
    #lt;td#gt; #lt;/td#gt;
    #lt;td bgcolor="#0033FF"#gt; #lt;/td#gt;
  #lt;/tr#gt;
  #lt;tr#gt;
    #lt;td#gt; #lt;/td#gt;
    #lt;td bgcolor="#990066"#gt; #lt;/td#gt;
    #lt;td#gt; #lt;/td#gt;
  #lt;/tr#gt;
#lt;/table#gt;

刚才我们的bgcolor写在了table标记里面就是为整个表格添加了背景颜色,现在如果把bgcolor属性写

在td标记里面,那么背景颜色就为这个单元格加上了,效果图:

     
     
     


下面说一下background 这个属性。

这个属性应用非常广泛,通常网站首页的那些好看的颜色条都是用表格控制大小然后做一个图片做为背景图的,我用几个店铺公告的实例来举例说明一下background的用法。

店铺公告代码之background的用法

请在这里输入文字


有了前面的基础,这几行代码我们完全可以看得明白了,效果如图:

#lt;table width="290" height="420" border="0" cellpadding="0" cellspacing="0" background="http://53shop.com/tb/gongao/b_133.gif"#gt; #lt;tr#gt; #lt;td height="155" colspan="3"#gt; #lt;/td#gt; #lt;/tr#gt; #lt;tr#gt; #lt;td width="44" height="163"#gt; #lt;/td#gt; #lt;td valign="top"#gt;请在这里输入文字#lt;/td#gt; #lt;td width="72"#gt; #lt;/td#gt; #lt;/tr#gt; #lt;tr#gt; #lt;td colspan="3"#gt; #lt;/td#gt; #lt;/tr#gt; #lt;/table#gt;

代码分析:

我们首先把代码排好,这样看起来不是很乱:

#lt;table width="290" height="420" border="0" cellpadding="0" cellspacing="0" background="http://53shop.com/tb/gongao/b_133.gif"#gt;
#lt;tr#gt;
#lt;td height="155" colspan="3"#gt;
#lt;/td#gt;
#lt;/tr#gt;
#lt;tr#gt;
#lt;td width="44" height="163"#gt;
#lt;/td#gt;
#lt;td valign="top"#gt;请在这里输入文字#lt;/td#gt;
#lt;td width="72"#gt;
#lt;/td#gt;
#lt;/tr#gt;
#lt;tr#gt;
#lt;td colspan="3"#gt;#lt;/td#gt;
#lt;/tr#gt;
#lt;/table#gt;

OK,这样一看我们就一目了然了,首先说第一行#lt;table width="290" height="420" border="0" cellpadding="0" cellspacing="0" background="http://53shop.com/tb/gongao/b_133.gif"#gt;

table标记是表格标记的开头,这个在第二讲中已经讲过,width是宽,说明这个表格有290个像素宽,height=420,说明高是420,border=0 的意思是表格边框线为0,这样我们就看不到边框线了,cellpadding=0的意思是 单元格边距(表格填充),一般我们都用0,cellspacing=0的意思是单元格间距(表格间距)之前这几个属性在第二讲中好像都是讲过的, 最后一个属性也就是刚才我们讲到的一个属性 background属性,他的值是一个图片,目的是为表格设置一个背景图,由于我本人对图片处理方面的造诣不是很深,所以就从网上找了一些,http://53shop.com/tb/gongao/b_133.gif 这个网址是从53shop上引用的一个图片。

其实这里最重要的就是第一句话,以后都是tr和td了,td需要包含在tr里面,td是单元格的意思,这些标记都需要成对出现,colspan是合并单元格的意思,colspan=3说明他所在的单元格跨三列。

这个表格是一个3X3的,也就是说是一个三行三列的表格,由于把第一行和第三行给合并了,所以第一行和第三行只有一列,而第二行有三列,总体设计的宽高,都是符合背景图的宽高的,这个需要一点点计算好才可以用。

再看一下这个例子:

#lt;table width="300" height="300" border="0" cellpadding="0" cellspacing="0" background="http://53shop.com/tb/gongao/2008032809281594.gif"#gt; #lt;tr#gt; #lt;td height="172" colspan="3"#gt; #lt;/td#gt; #lt;/tr#gt; #lt;tr#gt; #lt;td width="28" height="110"#gt; #lt;/td#gt; #lt;td valign="top"#gt;请在这里输入文字#lt;/td#gt; #lt;td width="28"#gt; #lt;/td#gt; #lt;/tr#gt; #lt;tr#gt; #lt;td colspan="3"#gt; #lt;/td#gt; #lt;/tr#gt; #lt;/table#gt;

这个同样也是一个三行三列的表格,第一行和最后一行被合并,这个表格唯一和第一个不同的是宽高以及背景图不同,其它的地方都是一样的,效果如下:

请在这里输入文字

 

除了以上的,还找到了其它一些代码,现在发出来和大家共同学习:

淘宝公告代码:
 
#lt;table width="240" height="220" border="0" cellpadding="0" cellspacing="0" background="http://53shop.com/tb/gongao/08391711.gif"#gt; #lt;tr#gt; #lt;td height="85" colspan="3"#gt; #lt;/td#gt; #lt;/tr#gt; #lt;tr#gt; #lt;td width="25" height="120"#gt; #lt;/td#gt; #lt;td valign="top"#gt;请在这里输入文字#lt;/td#gt; #lt;td width="42"#gt; #lt;/td#gt; #lt;/tr#gt; #lt;tr#gt; #lt;td colspan="3"#gt; #lt;/td#gt; #lt;/tr#gt; #lt;/table#gt;

淘宝公告代码:
请在这里输入文字

淘宝公告代码:
 
#lt;table width="168" height="178" border="0" cellpadding="0" cellspacing="0" background="http://53shop.com/tb/gongao/30255.gif"#gt; #lt;tr#gt; #lt;td height="80" colspan="3"#gt; #lt;/td#gt; #lt;/tr#gt; #lt;tr#gt; #lt;td width="15" height="80"#gt; #lt;/td#gt; #lt;td valign="top"#gt;请在这里输入文字#lt;/td#gt; #lt;td width="30"#gt; #lt;/td#gt; #lt;/tr#gt; #lt;tr#gt; #lt;td colspan="3"#gt; #lt;/td#gt; #lt;/tr#gt; #lt;/table#gt;

淘宝公告代码:
请在这里输入文字

淘宝公告代码:
 
#lt;table width="230" height="214" border="0" cellpadding="0" cellspacing="0" background="http://53shop.com/tb/gongao/20080702204742837.gif"#gt; #lt;tr#gt; #lt;td height="92" colspan="3"#gt; #lt;/td#gt; #lt;/tr#gt; #lt;tr#gt; #lt;td width="28" height="110"#gt; #lt;/td#gt; #lt;td valign="top"#gt;请在这里输入文字#lt;/td#gt; #lt;td width="28"#gt; #lt;/td#gt; #lt;/tr#gt; #lt;tr#gt; #lt;td colspan="3"#gt; #lt;/td#gt; #lt;/tr#gt; #lt;/table#gt;

淘宝公告代码:
请在这里输入文字

淘宝公告代码:
 
#lt;table width="400" height="388" border="0" cellpadding="0" cellspacing="0" background="http://53shop.com/tb/gongao/2008032809174115.gif"#gt; #lt;tr#gt; #lt;td height="72" colspan="3"#gt; #lt;/td#gt; #lt;/tr#gt; #lt;tr#gt; #lt;td width="36" height="270"#gt; #lt;/td#gt; #lt;td width="137" valign="top"#gt;请在这里输入文字#lt;/td#gt; #lt;td width="227"#gt; #lt;/td#gt; #lt;/tr#gt; #lt;tr#gt; #lt;td colspan="3"#gt; #lt;/td#gt; #lt;/tr#gt; #lt;/table#gt;

淘宝公告代码:
请在这里输入文字

声明:本人未经53shop允许擅用了53shop的图片,在此只做交流使用,如有侵权请告之删除。(老杂毛/文)
阅读: (1162)  评论(10)  
 
网友评论:
 
 1.222.70.167.622011/5/20 2:34:48 
请问先生:怎么知道引用图片的width和height
 2.2018/2/2 20:25:01 
 3.2018/2/19 5:50:46 
 4.2018/3/9 1:05:06 
 5.2018/3/9 1:05:11 
 6.2018/3/25 20:34:09 
 7.2018/4/12 7:05:17 
 8.2018/5/11 14:56:26 
 9.2018/5/11 14:56:33 
 10.2018/6/3 9:21:37 
 
相关文章:
 什么是微信公众帐号?
 怎样利用QQ群推广网店?
 如何寻找活跃的QQ群?
 网络广告的形式有哪些?
 淘宝站内搜索的一些排名靠前方法。
 什么是软文?怎样利用软文推广?
 网店推广之最准确定位客户的合作推广法
 简单的几句话可以总结我们成功的全过程
 网店推广之博客推广法
 网店推广之新浪博客免费广告推广法
 
 
     
联系作者: QQ: 657603425 Email: [email protected]
Copyright © 2007-2014 www.laozamao.com All Rights Reserved
京ICP备09002242号 北京海淀分局备案号:1101084842