【DW教程】如何制作圆角按钮

按钮是网页中最主要的交互方式之一。
我现在详细教你如何制作圆角按钮。

操作方法

  • 01

    打开Adobe Dreamweaver CC 2015。

  • 02

    执行菜单栏中的"文件>新建"命令或按住Ctrl+N键打开"新建文档"对话框,选择其文档类型为HTML,单击"创建"按钮,即创建一个网页文档。

  • 03

    <body>和</body>之间添加"<form></form>",如下图所示。 表单使用的<form>标记是成对出现的,在首标记<form>和尾标记</form>之间的部分就是一个表单。

  • 04

    <form>和</form>之间添加"<input name="text" type="submit" value="登录" class="input_box">",如下图所示。 【基本语法】 <form> <input name="" type="" value=""> </form> 【语法说明】 输入<input>是个单标记,必须嵌套在表单标记中使用,用于定义一个用户的输入项。 name属性:输入字段的识别名称,传递数据时的参数名称。 type属性:输入字段的类型。button是表单通用按钮。 value属性:表单字段预设数据值。例如用于button、submit、reset等字段类型指的是按钮标签的显示文字。 class属性:对应于网页中的CSS选择器名称。

  • 05

    <head>和</head>之间添加"<style type="text/css"></style>",如下图所示。 【基本语法】 <style type="text/css"> 选择符1{样式属性:属性值;样式属性:属性值;...} 选择符2{样式属性:属性值;样式属性:属性值;...} .... 选择符n{样式属性:属性值;样式属性:属性值;...} </style> 【语法说明】 <style>标记是用来说明所要定义的样式,type属性是指style元素以CSS的语法定义。 【选择符1..选择符n】:选择符可以使用HTML标记的名称,所有的HTML标记都可以作为选择符。 【样式属性】:主要指关于对选择符格式化显示风格的样式属性名称。 【属性值】:设置对应样式属性的值。

  • 06

    <style type="text/css">和</style>之间添加".input_box{width:360px; height:40px; border-radius:20px; border-style:none; background:#ec6941;font-size:14px; color:rgba(249,248,248,1.00);}",如下图所示。 width属性:设置宽度。 height属性:设置高度。 border-radius属性:设置边框的圆角半径。 border-style 属性:用于设置元素所有边框的样式。 background属性:设置背景色。 font-size属性:设置字体大小。 color属性:设置字体颜色。

  • 07

    保存网页文件,按住F12键可以在浏览器中预览效果,如下图所示。

(0)

相关推荐

  • Excel中制作"宏"按钮动画教程

    《Excel2003入门动画教程56、Excel中制作“宏”按钮》。 演示动画 操作步骤 如果宏对所有工作簿文档有效,建议大家在Excel工具栏上添加一个命令按钮,用来调用宏。 执行“工具→自定义”命 ...

  • css3 border-radius 制作漂亮的圆角按钮

    css3  border-radius 制作漂亮的圆角按钮 操作方法 01 新建html文件,创建一个背景为绿色的圆角按钮 02 效果如图 03 改变按钮样式的背景和圆角大小重新创建一个按钮 04 效 ...

  • PS如何制作圆角三角形教程

    PS如何制作圆角三角形 方法1: 01 打开PS,新建一个400*400大小的画布 02 选择多边形工具 03 设置填充颜色为黑色,描边关闭,设置边数为3 04 打开边数左侧的设置栏,全部选中,设置缩 ...

  • Fireworks如何制作一个按钮

    FW制作一个按钮(适合初学者) 效果图:   用("椭圆"工具)画出一个圆,用("圆角"矩形)画出一个圆角矩形,然后把矩形叠放在圆上面: 执行>>修 ...

  • ps如何制作水晶按钮

    水晶按钮在网页应用中非常广泛,今天就和大家一起来分享如何用ps制作水晶按钮,方法很简单主要利用图层样式来实现,让我们一起来学习吧 操作方法 01 首先我们新建(Ctrl+N)一个600*400的画布, ...

  • ps制作水晶按钮的技巧

    ps可以进行照片处理,调整和美化您的图像.深受广大平面设计人员和电脑美术爱好者的喜爱.它可分为图像编辑.图像合成.校色调色及特效制作部分等,它也可以创造出我们需要的图案,这里介绍一下ps制作水晶按钮的 ...

  • 如何使用PS制作圆角图片

    相信有很多同学都看过别人做的圆角的图片,圆角的头像,但就是不知道这种圆角的图片是怎么做的,苦恼半天,那么今天我就给大家介绍一下如何使用PS来制作圆角图片,希望能够帮助那些需要帮助的朋友! 操作方法 0 ...

  • 如何用3dMax制作圆角长方体?

    圆角立方体在立体建模里非常常见,今天要给大家说的就是用3dMax制作圆角长方体的方法. 操作方法 01 首先,打开3dMax软件,点击"新的空场景"按钮. 02 在界面右侧的工具栏 ...

  • css+div制作圆角矩形的四种方法

    圆角矩形一向是设计师最倾心的一种设计,因为他们可以让整个网页生动起来,不那么死板,所以,作为一个优秀的网页设计师, 学会一种或多种编辑圆角矩形的方法是必不可少的,而且圆角矩形应用范围极广,一个网页内的 ...