进入旧版 | 服务项目 | 成功案例 | 联系方式 | 过客留言 | 友情链接
   
设为首页
加入收藏
联系我们
网站首页 | 新闻资讯 | 操作系统 | 办公软件 | 网络软件 | 工具软件 | 媒体动画 | 网页制作 | 网站开发 | 程序开发 | 平面设计
Photoshop视频教程 | Word入门 | Flash入门 | JScript | VBScript | ASP | PHP | ADO | 网页特效 | 3DS MAX6.0命令 | 系统进程
您当前的位置:GOODSGY电脑学习网 -> 网站开发 -> JavaScript -> 文章内容  
让主页的按钮靓起来

  你做的主页是不是和别人的一样 ,显得千篇一律,没有性格,是否想让网页换个样子呢?听说过样式表格吗?就是CSS,它就是那个能让你更为准确地控制网页的东东。让我们先来看两个例子: www.goodsgy.com

www.goodsgy.com

  1.把按钮的背景由灰色变成黄色,下面是代码: www.goodsgy.com

www.goodsgy.com

  〈 form method=″POST″> www.goodsgy.com

www.goodsgy.com

  〈 input type=″button″ value=″按钮″ name=″B1″ www.goodsgy.com

www.goodsgy.com

  style=″background-color: rgb(255,255,0)″> www.goodsgy.com

www.goodsgy.com

〈 /p> www.goodsgy.com

www.goodsgy.com

  〈 /form> www.goodsgy.com

www.goodsgy.com

  看得懂吗?Form标签不用我说吧?就是表单的标签,接下来的就是说明按钮的类型,这里说明按钮是普通的命令按钮!然后,请注意,重要的东西来了! Style:说明这里采用了一个样式表单,而Background-color是用来声明按钮的背景颜色属性的,后面的Rgb(255,255,0)则给了它的属性值,在这里就是黄色了! www.goodsgy.com

www.goodsgy.com

  2.把按钮的文字的颜色变成红色,字体变成楷体,代码如下: www.goodsgy.com

〈 form method=″POST″> www.goodsgy.com

www.goodsgy.com

  〈 input type=″button″ value=″按钮″ name=″B1″ www.goodsgy.com

www.goodsgy.com

   style=″background-color:rgb(255,255,0); font-family:楷体_GB2312; color: rgb(255,0,0)″>〈/p> www.goodsgy.com

www.goodsgy.com

  〈 /form> www.goodsgy.com

www.goodsgy.com

  大家看一下是不是多了些什么东西?对了,多了两个属性。一个是Font-family,一个是Color,前一个是字体属性,后一个是字体的颜色属性,它们的值分别是:楷体_GB2312;和rgb(255,0,0),说明文字是红色的楷体字,好了,通过这两个例子来了解一下什么叫做样式表单, www.goodsgy.com

www.goodsgy.com

  首先,什么叫样式表单呢?如果你使用过word就知道只需要设置一次版面配置和打印格式,那么在文件内所有的页面都具有了相同的格式,而样式表单起的也就是这个作用,在同一个网站只需要提供一份样式表单,然后在所有页引用它,那么整个网站都会有相同的格式。样式表单一共分三种。 www.goodsgy.com

www.goodsgy.com

  第一种是外部网页样式表单。它是一个以CSS为后缀名的文件,相当于一个模版,设置好以后只需要在网页内部引用它,就能够使引用的网页具有相同的格式。 www.goodsgy.com

www.goodsgy.com

  第二种是内嵌式的网页样式表单,它一般在< HEAD>...< /HEAD>申明,它只对本网页起作用,同时如果你已经使用了外部样式表单,那么它将被内嵌式的网页样式表单屏蔽。 www.goodsgy.com

www.goodsgy.com

  第三种叫做内联式样式表单,用于一段文字,一个表格,或者是一幅图形。在前面,我们用的就是这种样式表单,请注意,它通常是接在一个我们比较熟悉的HTML标签之后,比如前文的Input标签,以Style开头,后面跟着一些属性和属性值。并且借助它们来准确地控制这个标签!属性与属性值之间以冒号隔开,属性与属性之间用分号隔开。通常结构如下: www.goodsgy.com

www.goodsgy.com

  好了,有了以上的理论知识,我们再来联系一下实际,下面我们再看一个比较复杂的例子: www.goodsgy.com

www.goodsgy.com

  〈 form method=″POST″> www.goodsgy.com

www.goodsgy.com

   〈 input type=″button″ value=″按钮″ name=″B1″ www.goodsgy.com

www.goodsgy.com

   style=″font-family: 隶书; font-size: 9pt; background-image: url www.goodsgy.com

www.goodsgy.com

(’file:///D:/Inetpub/wwwroot/ASP/wwwboad/IMAGES/ASP400.jpg’); border-left: medium ridge rgb(128,0,0); border-right: medium none rgb(128,0,128); border-top: medium none rgb(0,255,0); border-bottom: medium ridge rgb(255,0,0)″>〈/p> www.goodsgy.com

www.goodsgy.com

  〈 /form> www.goodsgy.com

www.goodsgy.com

  其实,形式和我前面讲的是一样的,只不过多了几种属性而已,首先Font-family: 隶书;Font-size: 9pt;用来说明按钮文字是9PT大小的隶书,其次按钮的背景是一幅图画,用了一个Background-image属性。再次,用了一个Border-left属性说明按钮的左边框是隆起的,边框线是深红色的,厚度为中等。其余的就可以以此类推了!www.goodsgy.com

在百度中搜索:让主页的按钮靓起来
在Google中搜索:让主页的按钮靓起来
在Yahoo中搜索:让主页的按钮靓起来

收藏到网摘:新浪VIVI 365key 我摘 POCO网摘 博采中心 YouNote 和讯网摘 天天收藏
[] [返回上一页] [打 印] [收 藏]
下一篇文章:构成网页的基本元素

 相关文章    最新文章
 
· 用JS解决网站防挂iframe木马的方案
· 技巧 JavaScript常用判断函数
· IE浏览器中一个值得关注的JS问题
· 简易实现DIV圆角的JavaScript代码
· Javascript调用XML制作连动下拉框
· Javascript实现页内查找关键词实例
· JavaScript的系统函数学习
· JavaScript仿Windows关机效果
· javascript弹出窗口问题总结
· 在JS中使用RecordSet对象的GetRows方法

∷相关文章评论∷    (评论内容只代表网友观点,与本站立场无关!) [更多评论…]
站内搜索

精彩图文
  网站导航  
操作系统 办公软件 网络软件
Vista Windows2003 WindowsXP Windows2000/NT Windows9X/ME Linux 其他 Word Excel Powerpoint Outlook 金山系列 其他 网页浏览 上传下载 联络聊天 邮件工具 服务器软件 网络辅助
工具软件 媒体动画 网页制作
系统工具 媒体工具 压缩工具 图文处理 文件管理 其他 3DMAX Authorware Director Maya 视频处理 其他 Flash Dreamweaver FireWorks FrontPage LiveMotion Golive HTML/CSS 其它
网站开发 平面设计 程序设计
ASP JSP PHP CGI JavaScript VBScript XML/SOAP Web服务器 Photoshop PhotoImpact CorelDraw Illustrator Freehand 设计欣赏 其他 VB VC .NET C/C++ DELPHI JAVA

冀ICP备05019428号
Copyright © 2004-2008 电脑学习网 Inc.All rights reserved.
TEL:13832340607
QQ:39873155
E_Mail:goodsgy(#)hotmail.com   (把(#)替换成@)
MSN:goodsgy(#)hotmail.com   (把(#)替换成@)