网页制作风格之细边框制作方法两则

网页

  很多朋友都有过制作网页的经历,如今,众多网页的设计都用到了表格。这样不仅有利于网页的维护,同时,提高了网页的观赏性。在众多网页制作风格中,细边框这个制作方法是必不可少的。这里,我将简单地谈一下细边框的制作方法。

  谈到细边框,本人认为大致有两种制作方法,第一种是用表格的嵌套,第二种是用CSS强制定义。

  如何用表格嵌套呢?大家都知道,用Bgcolor可以在表格中任意定义表格的背景颜色,用Cellspacing可以控制表格单元的额外空间,如果定义两个表格,把其中一个的表格背景设为全黑,然后在这个表格中嵌套定义另外一个表格,背景设为全白,并且把Weight=100%。这时,两个表格是重叠的,但是,如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说,黑色的表格比白色的表格多出了一个像素的外围空间,而白色的表格又在黑色表格之上,从而达到细边框的效果。源代码如下:

  <table border="0" cellpadding=0 cellspacing=1 bgcolor=black>
  <tr>
  <td>
  <table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white>
  <tr>
  <td>
  </td>
  </tr>
  </table>
  </td>
  </tr>
  </table>

  第二种比较简单,那就是用CSS(层叠样式表)强制定义,但是,有些比较老的浏览器不支持CSS,可能导致无法显示你所要求的效果。不过使用CSS定义,语句非常简洁,所作网页的容量也较小。它的操作方法是,在表格的最外围的相应最小单元的<td>标签中定义style="BORDER-postion: black 1px solid;",其中,Postion的参数有Left、Right、Top和Bottom,分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。

  源代码如下:

  <table border="0" bgcolor=white>
  <tr>
  <td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;">
  </td>
  <td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;">
  </td>
  </tr>
  <tr>
  <td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;">
  </td>
  <td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;">
  </td>
  </tr>
  </table>

时间: 2024-08-29 22:12:04

网页制作风格之细边框制作方法两则的相关文章

在网页中实现细线表格边框的方法

网页 很多朋友都有过制作网页的经历,如今,众多网页的设计都用到了表格.这样不仅有利于网页的维护,同时,提高了网页的观赏性.在众多网页制作风格中,细边框这个制作方法是必不可少的.这里,我将简单地谈一下细边框的制作方法. 好像一般的做法是这样(css).table1{border-collapse:collapse}.table1 td{border:1px solid #ddd} 如何用表格嵌套呢?大家都知道,用Bgcolor可以在表格中任意定义表格的背景颜色,用Cellspacing可以控制表格

Dreamweaver中制作表格细边框的方式方法

Dreamweaver虽然为用户提供了定义表格边框的属性Border,但是很多用户不喜欢用它,因为感觉它的样子很粗糙,达不到我们预期的效果.小编应广大考生的需要,特为参加考试的考生策划了"Dreamweaver中制作表格细边框"专题等有关资料,供考生参考! 制作表格细边框 Dreamweaver虽然为用户提供了定义表格边框的属性Border,但是很多用户不喜欢用它,因为感觉它的样子很粗糙,达不到我们预期的效果.我们可以利用Dreamweaver的另外一个表格的属性CellSpace(单

制作ios8风格的PPT图表的方法

制作ios8风格的PPT图表的方法 如何制作PPT图表呢?方法有很多,比如EXCEL.但对于EXCEL不感冒的童鞋,不妨看看本教程:如何制作ios8风格的PPT图表. 步骤: 第一步:插入2个圆形图形,并设置大小,比如:绿色的10*10厘米,红色的9*9厘米,然后去掉外边框.然后将两个图形相减,得到一个圆环. 第二步:我们给这个圆环填充渐变色,一端设为黄色,一端设为绿色(当然,也可以不要这个步骤). 第三步:插入一个扇形,并设置他的大小(注意,这里的大小应该以,你插入2个圆形图形中最大的一个为准

网页制作学习:实现细线边框的两种方法

网页 很多朋友都有过制作网页的经历,如今,众多网页的设计都用到了表格.这样不仅有利于网页的维护,同时,提高了网页的观赏性.在众多网页制作风格中,细边框这个制作方法是必不可少的.这里,我将简单地谈一下细边框的制作方法.谈到细边框,本人认为大致有两种制作方法,第一种是用表格的嵌套,第二种是用CSS强制定义. 如何用表格嵌套呢?大家都知道,用Bgcolor可以在表格中任意定义表格的背景颜色,用Cellspacing可以控制表格单元的额外空间,如果定义两个表格,把其中一个的表格背景设为全黑,然后在这个表

CSS网页制作:各式各样的按钮制作方式

文章简介:CSS网页制作:各式各样的按钮制作方式. 按钮整理网页中通过链接来实现页面的跳转,链接的重要表现形式就是按钮将各式各样的按钮制作方式整理一下. 1,网页中默认的按钮(如表单中的按钮,下拉框,单选按钮,多选按钮,上传按钮等) 2,css基本样式制作的按钮(如添加边框,背景色等) 3,图片制作的按钮a,按钮形状+文字一起的图片按钮b,只有按钮形状,通过html加文字c,各种图标按钮(不是按钮的形状,但有按钮功能)d,两张图片拼接的按钮(一般处理圆角) 4,纯css3样式按钮(圆角,阴影(内

揭秘爱消除+小王子粘土风格动画HTML 5制作全过程

  大家好,我是腾讯TGideas的动画师二娃,有幸参与这次联合<小王子>电影推出爱消除小王子游戏版本的世界观推广H5,同时我们还做了另一版,作为游戏内嵌世界观,分别在国庆长假后,在微信.手Q.以及公关传播等平台推广,数据反馈也很棒,下面给大家分享这个痛并充满爱的过程. 一.前期创意 1. 目的:天天爱消除与<小王子>电影合作,推出小王子游戏版本,需要一个预热推广H5. 2. 创意主要参与人员:游戏营销.创意支持.视觉设计.多媒体设计等负责人. 3. 爱消除和小王子结合的问题: 文

使用httplib模块来制作Python下HTTP客户端的方法

  这篇文章主要介绍了使用httplib模块来制作Python下HTTP客户端的方法,文中列举了一些httplib下常用的HTTP方法,需要的朋友可以参考下 httplib 是 python中http 协议的客户端实现,可以使用该模块来与 HTTP 服务器进行交互.httplib的内容不是很多,也比较简单.以下是一个非常简单的例子,使用httplib获取google首页的html: ? 1 2 3 4 5 6 #coding=gbk import httplib conn = httplib.H

Android制作漂亮自适布局键盘的方法_Android

最近做了个自定义键盘,但面对不同分辨率的机型其中数字键盘不能根据界面大小自已铺满,但又不能每种机型都做一套吧,所以要做成自适应,那这里主讲思路. 这里最上面的titlebar高度固定,下面输入的金额高度也固定(当然也可以自适应),主要是中间的数字键盘,高度和宽度需要自适应.先来张效果图: 最常见的解决方案是用线性布局,自适应当然是按比例,但布局中无%的概念,那就要用到layout_weight了,该属性的作用是决定控件在其父布局中的显示权重(具体概念就不多说了). 这里用一个LinearLayo

photoshop设计一扇面边框制作教程

给各位photoshop软件的使用者们来详细的解析分享一下设计一扇面边框的制作教程. 教程分享: 一.园形.扁桃形.梨形扇面画框制作步骤 (1)新建图像,用于网络传送设立:图像高1800宽1800(象素)方形,颜色模式RGB,背景白色(例图演示设为800×800).在此基础上,还可以用粘贴.涂色等方式,更换图框面板色彩和图案.     <点图片看大图>www.16xx8.com (2)前景色改为黑色,打开工具栏的形状工具窗口.(3)白色方形中设置填充园形边界坐标限制(移动工具从标尺栏里分别移出