让主页的按钮靓起来

按钮


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

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

  〈 form method=″POST″>

  〈 input type=″button″ value=″按钮″ name=″B1″

  style=″background-color: rgb(255,255,0)″>

〈 /p>

  〈 /form>

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

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

〈 form method=″POST″>

  〈 input type=″button″ value=″按钮″ name=″B1″

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

  〈 /form>

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

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

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

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

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

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

  〈 form method=″POST″>

   〈 input type=″button″ value=″按钮″ name=″B1″

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

(’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>

  〈 /form>

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

时间: 2024-11-16 06:33:50

让主页的按钮靓起来的相关文章

jQuery Mobile教程:对按钮进行自动增强设计

文章简介:本文我们来通过对比按鈕自动增强前后的html代码,直观地让大家来深度认识一下jQuery Mobile中如何对按钮进行自动增强设计的! 本文我们来通过对比按鈕自动增强前后的html代码,直观地让大家来深度认识一下jQuery Mobile中如何对按钮进行自动增强设计的!  1.先看链接按钮: 我们在页面编写的代码: <a data-theme="a" data-role="button">我是链接按钮</a> 我们来看一下经过自动增

jQuery Mobile教程:网页按钮实例详解

文章简介:相比其他组件,按钮是最基本也是最常见的,那在jQuery Mobile的体系中,到底是什么样子的呢? 相比其他组件,按钮是最基本也是最常见的,那在jQuery Mobile的体系中,到底是什么样子的呢?我们采用"提问●回答"的方式来初步地了解一下: 1.按钮包含哪两类? 常见的: <button>button</button> <input type="button" value="input button"

jquery 点击一个按钮隐藏弹出form中的两个按钮问题

问题描述 jquery 点击一个按钮隐藏弹出form中的两个按钮问题 我点击一个main 主页的按钮 需要隐藏弹出form中的两个按钮 怎么操作 点击查看时 吧弹出的这个form中的这两个按钮隐藏掉 解决方案 $("#id").hide(); 是不是这个意思 解决方案二: 弹出form,window.open还是层模拟的?层模拟的form放入iframe里面没有?没有关系的无法控制 iframe和父页,window.open打开页面之间的引用 解决方案三: 我用的是miniui 中的p

处理错误

错误     即使采用了防御性编程技术之后,错误仍能进入到网页,这可能是因为测试并不充分,或者是因为所依靠的一些其他资源或服务没有正确工作.为了防止页面出现问题,在程序中要能够进行定制错误处理. 7.4.1 ASP缺省错误处理器       前面已经看到过,ASP和IIS能找出网页中的大多数错误,并且能自动生成错误信息页,这些错误几乎总是500.100类型的,并且IIS用Server.Transfer方法装载以500-100.asp命名的缺省错误页,然后传送给客户.第4章介绍了这一工作过程,以及

WINDOWS PHONE 8 UI 设计指南

  @TerryFan (思科云协作部门用户体验设计师):最近在准备Windows Phone 8的设计工作,寻找资料时看到这篇文章,感觉有点像是MSDN里design guide的总结,是快速入门WP设计的绝佳文献,由于本人对WP的理解还不够深,而文章中有很多WP的专有词汇和描述,所以翻译难免有误,希望大家指正. 欢迎关注我的微信公众号"开卷有译"获得新文章推送. ========================== 我是设计的分割线 ========================

安卓混合开发之Cordova,NativeWebView两种实现

转载请注明出处:王亟亟的大牛之路 如今混合开发已经不是新鲜词了,虽然作为源生的死忠我不怎么愿意去用H5实现我的功能,但是需求说了算...还是屈服了...然后就去了解了下,也抠了点Demo在这里分享给大家(也许网上有类似的,但是我这个肯定是可以run并且实现方式是不同的) 上内容之前,先说下纯H5 混合 纯native的各种区别,不了解的可以看下下面的简单描述(扣来的) 一.原生应用 优点 可访问手机所有功能(GPS.摄像头): 速度更快.性能高.整体用户体验不错: 可线下使用(因为是在跟Web相

ios的tabbar问题求详细解答,这个tabbar下面的图标突出一块怎么做的。谢谢各位大神。

问题描述 ios的tabbar问题求详细解答,这个tabbar下面的图标突出一块怎么做的.谢谢各位大神. 解决方案 自己自定义一个标签视图控制器吧: 自定义一个类继承自UITabBarController: 然后在该类的.m文件中自己写button和其点击事件间的切换 #import "MyTabBarController.h" #define WIDTH (myView.frame.size.width / 4) #define HEIGHT (myView.frame.size.h

织梦Sitemap插件右侧显示空白的修复

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 前一段时间在站长网上发表了一篇"织梦后台Sitemap+百度Ping推送功能实现"的文章,同时提供了插件下载链接.这为很多使用织梦程序做站,但是不知道怎样做sitemap和百度Ping推送功能的站长们提供了很大的帮助.文章具体链接如下:http://www.admin5.com/article/20130529/50669

《UG NX10中文版完全自学手册》——1.2 工作环境

1.2 工作环境 本节讲解UG的主要工作界面及各部分功能,只有了解各部分的位置和功能之后才可以进行有效的工作设计.UG NX10主工作窗口如图1-2所示,其中包括标题栏.菜单.功能区.工作区.坐标系.资源条.全屏显示.快捷菜单和提示栏等9个部分. 提示 从UG NX9开始,UG使用Ribbon界面,若用户不习惯使用此界面,此时可选择"菜单"→"首选项"→"用户界面"选项,打开"用户界面首选项"对话框,选择"布局&qu