位置: 编程技术 - 正文

css文本框与按钮美化效果代码(css文本框怎么对齐)

编辑:rootadmin
一、先看看在网页中经常出现的按钮与文本框的本来面目吧!  对照上图,我们怎么样才能改变文本框与按钮的模样呢?那在下面我为大家提供两种文本框与按钮样式作为例子参考,第一种是文本框与按钮无立体感,只是有线 条颜色与填充颜色的,这种效果大家可能在很多网站上都看见过,给人一种特别的感觉,很不错的,第二种效果就比较特殊了,是将文本框做成一种类似于下划线的 效果并且是彩色的,同时按钮的背景色也不再是灰色,而是彩色的,可以说这是一种非常酷的效果,好了,下面我就来说说这两种效果实现的详细操作步骤吧。二、无立体效果的文本框与按钮  那我们就通过在DW3中网页的编辑操作为例来进行说明,首先我们已经在网页中插入了相应的表单对象,比如插入一个文本框与一个按钮,此时,我们在按下 [F]键,显示出网页源代码编辑窗口,那我们在网页的<head>与</head>标签之间插入这个样式表: <style type="text/css">input.smallInput{border:1 solid black;FONT-SIZE: 9pt; FONT-STYLE: normal; FONT-VARIANT: normal; FONT-WEIGHT: normal; HEIGHT: px; LINE-HEIGHT: normal}</style>  好了第一步就完成了,下一步我们就分别在文本框与按钮的htm语句中加上这一句代码:  class=smallInput  比如在<input type="text" name="textfield" class=smallInput>与  <input type="submit" name="Submit" value="平面按钮" class=smallInput>  这个文本框与按钮的htm语句中加入了这句代码。最后的效果如下图:  怎么样,比起前面那张图中的标准按钮来说是不是美观多了,要实现起来其实也不是太难吧。三、带颜色的下划线式文本框与按钮效果  同样,我们也需要样式表的帮助来实现这个效果,和第一种效果的操作步骤一样在网页的<head>与</head>标签之间插入样式表:.gimoo.net]<style type="text/css">input.smallInput{background:#ffffff;border-bottom-color:#ff; border-bottom-width:1px;border-top-width:0px;border-left-width:0px;border-right-width:0px; solid #ff; color: #; FONT-SIZE: 9pt; FONT-STYLE: normal; FONT-VARIANT: normal; FONT-WEIGHT: normal; HEIGHT: px; LINE-HEIGHT: normal}input.buttonface{BACKGROUND: #ffcc; border:1 solid #ff; COLOR: #ff; FONT-SIZE: 9pt; FONT-STYLE: normal; FONT-VARIANT: normal; FONT-WEIGHT: normal; HEIGHT: px; LINE-HEIGHT: normal}</style>  大家从上面的样式表中可以看出,这个效果的实现是通过两个样式来实现的,一个是文本框 的,一个是按钮的,所以在文本框与按钮的htm语句中就需要插入两句不同的代码,在文本框中插入的是class=smallInput代码。  如例子 <input type="text" name="textfield" class=smallInput>,  在按钮语句中插入的是 class="buttonface"代码如例子  <input type="submit" name="Submit" value="彩色按钮" class="buttonface">  其实这就对应了样式表中文本框与按钮的样式,最后的效果如下图所示:  看看上面的效果,还会不会让您想起那单调的文本框与按钮呢?以上两种效果的方法都是通过样式表来实现的,使用方法也十分的简单。  表单的制作是网页开发中的重点,通过表单可以实现交互与交流,也可以实现信息的收集与共享,上面的两篇文章从语义与结构的角度出来进行了探讨,您也可以参与讨论与学习!

推荐整理分享css文本框与按钮美化效果代码(css文本框怎么对齐),希望有所帮助,仅作参考,欢迎阅读内容。

css文本框与按钮美化效果代码(css文本框怎么对齐)

文章相关热门搜索词:css怎么设置文本框居中,css设置文本框样式,css怎么设置文本框居中,css文本框怎么对齐,css文本框与按钮的区别,css文本框与按钮的区别,css文本框与按钮的距离,css文本框与按钮的距离,内容如对您有帮助,希望把文章链接给更多的朋友!

层盖住下拉列表框问题解决方案 IE6真的让人很郁闷。但是就目前而言,我们还是不能放弃对IE6的兼容。从下面的我的blog访问统计分析数据来看,使用IE6的还是占有绝对主流的。本来想

css样式之区分input是按钮还是文本框的方法第1/4页 当你看到input这个html标签的时候,你会想到什么?一个文本框?一个按钮?一个单选框?一个复选框?……对,对,对,它们都对。也许你可能想不到

CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox] 今天用了很久时间终于解决了这个问题,基本完美了,唯一不完美的就是IE6只有在图片完全下载完成后才会自动调整大小,不过聊胜于无,总比进入页

标签: css文本框怎么对齐

本文链接地址:https://www.jiuchutong.com/biancheng/375345.html 转载请保留说明!

上一篇:css教程 css和document(css教程大全)

下一篇:层盖住下拉列表框问题解决方案

  • 初装费包括什么
  • 生产企业出口货物劳务免抵退税申报明细表
  • 财务软件和报税软件区别
  • 快递费运费物流费一样吗
  • 固定资产一次性折旧的账务处理和税务处理
  • 金税盘锁死日期在哪里看
  • 现金流量表余额等于货币资金吗
  • 境外企业所得税税率
  • 小企业应收票据有哪些
  • 折扣销售销售折扣销售折让有何区别
  • 外汇结汇的方法有哪些呢?
  • 福利费用交个人所得税吗
  • 代收水电气费加盟
  • 注册资本没有到账怎么做账
  • 车辆购置税计税依据包括
  • 金税三期个人所得税扣缴系统手机版
  • 劳务派遣企业差额扣除占比过高怎么办
  • 房产税实施城市
  • 小规模纳税申报表
  • 普通发票每个月有限制吗
  • 撤回和撤销是什么意思
  • 财务费用结转本年利润借贷方怎么记
  • 跨年度的费用发票怎么做账
  • 建筑业月末账务处理
  • 鸿蒙系统 3.0
  • 纳税人如何申请延期缴纳税款
  • php安装部署
  • win10任务栏搜索如何关闭
  • 耕地开垦费计入土地成本吗
  • ai生成二次元角色全身
  • 房产前期开发
  • java本地缓存框架有哪些
  • php字符串在另一个字符串出现
  • thinkphp模板引擎原理
  • 新星计划会限流吗
  • vue组件入门
  • 腾讯一面问什么
  • php使用ajax
  • 残障金什么时候开始交
  • 销售商品收到的价款
  • 存续分立会计处理原则
  • 代开运输发票是否会引起双重征税?
  • 自然人独资和个人独资是一样的吗
  • 违约金 专票
  • 年报资本负债表怎么看
  • 税款减半征收如何申报
  • 印花税征税对象是什么
  • 商业企业库存商品成本核算
  • 未开票的收入怎么申报增值税
  • 收到代持股权的账务处理
  • 收到进项税发票
  • 辅助生产费用如何判断受益多少事指什么
  • 开立银行承兑汇票利率
  • 维保业务怎么开展
  • 未交增值税的核算方法
  • 固定资产取得时按什么入账
  • 应付账款账户怎么结转
  • 房屋装修支出怎么做账
  • 业务招待费是销售
  • ubuntu 安装zsh
  • 如何将苹果手机复制
  • Win10 64位正式版系统安装方法全过程图解(U大师)
  • xp系统乱了,怎么恢复
  • backupnotify.exe是什么文件的进程 backupnotify进程安全吗
  • centos dvd安装
  • win8.1应用商店
  • 快速批量取关
  • win8鼠标指针不见了
  • linux的截图工具
  • window系统设置
  • 实用批处理
  • 怎样用在js中使用css的内容
  • cocos2dx4.0入门
  • python制作gui
  • 用python发邮件
  • adb远程调试工具
  • python 断言详细讲解用法及其案例
  • 西安市地税局各科科长
  • 成都交通官网限号查询系统
  • 地税和国税是什么关系
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设