立体视觉 让您的网页“靓”起来

立体|网页

  表格是网页内应用较多的东东,但一般我们只是用它来定位网页中的模块和排版文字。其实表格用好了还可以做出很多漂亮的效果,如图一,承载文字的表格有一种看似立体的感觉。下面就来介绍一下这种立体表格的制作方法。

图一

  表格有立体的感觉的全是因为在表格的右边和下边有浅黑色的阴影。所以我们只要实现了阴影就可以实现这种效果。现在我们就开始具体讲述制作过程。在Frontpage2000中新建一个表格,选择菜单“表格”-“属性”-“表格”,在窗口内将表格的宽度设置为150象素;高度设置为200象素;边框粗细设置为0;将单元格边距设置为0,而单元格间距为1,如图二所示。


图二

  完成以上设置后将表格的背景色设置为黑色,但表格内的单元格的背景色设置为白色,完成以后就回出现如图三所示的单象素黑色边框效果。


图三

  接下来的工作就是要为右边和下边的黑色边框制作阴影,我们使用CSS样式的功能来实现。在图二所示的选项窗口内点击“样式”按钮继续选择“格式”-“边框”。在边框与阴影选项框内,分别将样式选择为“实线”;颜色选择为“灰色”;并在预览选项内将下边和右边的边框应用按钮选中,如图四所示。


图四

  点击“预览”,你要的立体表格效果就出来了。(注明:我们在制作出来的最终效果可能和图一所示略有出入,这是因为我们首先制作出了如图三的单象素黑色边框,这样做的效果会更明显,更有立体感。)

  在这里我们还给出在Dreamweaver内定义的样式代码,因为Frontpage和Dreamweaver的代码机制有差别,相对之下Dreamweaver对样式代码写得更规范更合理。表格代码如下:

<TABLE width="150" height="200" cellpadding="0" cellspacing="1" bgcolor="#000000" style="border-right-width:2px;border-bottom-width :2px;border-right-style : solid;border-bottom-style : solid;border-right-color : #a7a7a7;border-bottom-color : #a7a7a7;">
  其中style以后的为样式代码“border-right-width”和“border-bottom-width”以后的2px代表阴影边框的宽度为2象素,border-right-color和border-bottom-color以后的#a7a7a7代表阴影线框的颜色代码,你也可以使用其他的颜色代码替换(具体请参照HTML颜色表)。试着自己改变一下,根据你的需要制作效果。

时间: 2024-09-13 23:12:56

立体视觉 让您的网页“靓”起来的相关文章

点靓网页的10种导航菜单设计

  网页导航菜单设计关系到你的网站整体设计成败,所以不少优秀的网站设计通过颜色.排版.形状和一些图片的精心修饰来帮助网站创造更好的视觉效果,我们从设计师们的收集中精选了这些从极简到拥有众多细节的不同设计,它们都符合所属网站的设计风格. 此网页的导航菜单设计重在让用户专注于惊艳的摄影作品,所以采用了大量的白色空间. 这也是一个极简设计,但加了一些细节.顶部文字全部采用大写,而小号的字体与渐变灰的渲染让它们显得简单优雅,此外,下方页面设计为导航菜单占比的两倍,弱化了导航菜单的展示. CHEF-S 网

超强超靓网页日历代码

本地计算机时间: 公历年月 阴历年月 月↑ 当月 月↓  年↑  年↓    阴历存在跨月情况,如果查找到的阴历月跨两个公历月,用[月↑][月↓]翻动可以找到你想要的确切日期.   月 日 一 二 三 四 五 六

学习网页制作基础入门教程(9)序列标签

教程|入门教程|网页 相关文章: 学习网页制作基础入门教程(1)网页编写 学习网页制作基础入门教程(2)排版标签 学习网页制作基础入门教程(3)字体标签 学习网页制作基础入门教程(4)图象标签 学习网页制作基础入门教程(5)图象标签 学习网页制作基础入门教程(6)连接标签 学习网页制作基础入门教程(7)表格标签 学习网页制作基础入门教程(8)框架标签 无序标签 1. 序列标签基本上可分为两种,一种是"无序条列",一种是"有序条列".所谓"无序条列"

怎么免费申请QT语音房间靓号

  首先打开QT语音官网,其实就是腾讯的子网页了. 在客户端下载页面下面有房间靓号申请的大按键 我们根据自己想玩的游戏类型来进入 申请后,选择绑定靓号 自己有站队才能绑定,绑定好自己的房间靓号,在绑定后要一周内根据选的靓号完成靓号任务,否则靓号还是会被官方收回去的.

网页运行js代码

<SCRIPT> function Preview(obj) {   var TestWin=open('');   TestWin.document.write(obj.value); } //欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载. function copyCode(obj) {     var rng = document.body.createTextRange();     rn

网页中运行JS代码

<SCRIPT> function Preview(obj) {   var TestWin=open('');   TestWin.document.write(obj.value); } //欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载. function copyCode(obj) {     var rng = document.body.createTextRange();     rn

自编软件抢注靓号牟利电脑高手被判刑二年

电脑高手被判有期徒刑二年缓刑二年 本报讯 (记者王纳 通讯员郭涵睿)聪明过人的孙某自编抢号软件,伙同廖某在深圳.广州.东莞等地交警"机动车号牌号码网上自编自选系统"随意选取靓号车牌出售牟利,结果聪明反被聪明误,最后还是落入了法网.近日,由龙岗区检察院提起公诉的孙某.廖某二人破坏计算机系统案获法院一审判决,被告人孙某.廖某均被判处有期徒刑二年,缓刑二年,追缴非法所得30万元. 经查,2009年12月起,被告人孙某通过分析"机动车号牌号码网上自编自选系统"的网页源代码.

网页棋牌游戏论坛策划运营以及发展方案

中介交易 SEO诊断 淘宝客 云主机 技术大厅 这是我上个月为玩一把网页棋牌游戏论坛写的策划运营以及发展方案,拿出来,供大家探讨下! 一.论坛定位 内容定位:客服为主,娱乐为辅. 作用定位:凝聚人气,拉拢用户. 功能定位:配合网站,灵活使用. 二.设计思想 网站论坛的作用分为两块,一是以此为平台为用户提供客户服务,二是凝聚网站人气,同时将这些人气转化为游戏用户.所以针对这两个目的,一方面需要在论坛上做好客服咨询和交互交流,二方面需要为论坛充实内容,吸引用户参与,并在互动的过程中提升更多人气以及促

策划运营:网页棋牌类游戏论坛发展方案

这是我上个月为玩一把网页25044.html">棋牌游戏论坛写的策划运营以及发展方案,拿出来,供大家探讨下! 一.论坛定位 内容定位:客服为主,娱乐为辅. 作用定位:凝聚人气,拉拢用户. 功能定位:配合网站,灵活使用. 二.http://www.aliyun.com/zixun/aggregation/8511.html">设计思想 网站论坛的作用分为两块,一是以此为平台为用户提供客户服务,二是凝聚网站人气,同时将这些人气转化为游戏用户.所以针对这两个目的,一方面需要在论坛