1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

让主页的按钮靓起来

作者:用户 来源:互联网 时间:2016-07-07 19:39:18

网页表单按钮样式属性一个

让主页的按钮靓起来 - 摘要: 本文讲的是让主页的按钮靓起来, 按钮   你做的主页是不是和别人的一样 ,显得千篇一律,没有性格,是否想让网页换个样子呢?听说过样式表格吗?就是CSS,它就是那个能让你更为准确地控制网

按钮

  你做的主页是不是和别人的一样 ,显得千篇一律,没有性格,是否想让网页换个样子呢?听说过样式表格吗?就是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属性说明按钮的左边框是隆起的,边框线是深红色的,厚度为中等。其余的就可以以此类推了!



以上是让主页的按钮靓起来的全部内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有让主页的按钮靓起来 的相关内容,欢迎继续使用右上角搜索按钮进行搜索网页 , 表单 , 按钮 , 样式 , 属性 一个 让议论文的语言靓起来、chrome主页按钮、edge 主页按钮、谷歌浏览器主页按钮、主页按钮,以便于您获取更多的相关知识。

请问关于滚动条按钮中间的滑块怎么才能隐藏起来

问题描述 请问关于滚动条按钮中间的滑块怎么才能隐藏起来 请问关于滚动条按钮中间的滑块怎么才能隐藏起来,怎么只显示滚动条的按钮,不显示滚动条的滑块呢? ...

美图秀秀制作超靓证件照后期教程

...   图4 4、点击“美化”菜单下左侧功能区的“抠图笔”按钮,选择“自动抠图”模式,用抠图笔在人物上画绿线,不需要的用删除笔画红线,将需要的人像部分抠取出来。   图5 小贴士:如果背景复杂,自动抠图无法很自然地...

利用Github Page 搭建个人博客网站

...,所以我也非常愿意分享我的所见所学所得,我的 Github 主页:[https://github.com/zhisheng17](https://github.com/zhisheng17) (欢迎 follow 和对我的项目给个 star 或者 fork 我的项目一起来和我完善项目)如果还没有 Github 账号的话你就先去注册...

用ideploy部署平台10分钟搞定持续交付环境,让部署不再麻烦!!

...表菜单进入,工程列表页,点击刚才新建的项目进入项目主页: 点击机器列表页进入机器列,点击右上角新建机器,进入新建机器页面,页面如下: 机器名称:随便取一个机器名称就可以,比如test1 环境类型:分为测试,预...

巧用正则零宽断言实现靓号检索逻辑

...有个联通靓号匹配规则,诸如AAA,AA,ABAB,AABB等等类似的号码匹配规则,乍一看,貌似还有小复杂,其实使用正则可以实现轻松匹配。 这里需要用到正则的两个基本知识点 1. 反向引用,/1,/2分表表示第一个第二个正则子表达式...

前三篇
后三篇