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

2025-10-27 13:52:40

1、打开Adobe Dreamweaver CC 2015。

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

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

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

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

3、<body>和</body>之间添加"<form></form>",如下图所示。

表单使用的<form>标记是成对出现的,在首标记<form>和尾标记</form>之间的部分就是一个表单。

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

4、<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选择器名称。

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

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

5、<head>和</head>之间添加"<style type="text/css"></style>",如下图所示。

【基本语法】

<style type="text/css">

选择符1{样式属性:属性值;样式属性:属性值;...}

选择符2{样式属性:属性值;样式属性:属性值;...}

....

选择符n{样式属性:属性值;样式属性:属性值;...}

</style>

【语法说明】

<style>标记是用来说明所要定义的样式,type属性是指style元素以CSS的语法定义。

【选择符1..选择符n】:选择符可以使用HTML标记的名称,所有的HTML标记都可以作为选择符。

【样式属性】:主要指关于对选择符格式化显示风格的样式属性名称。

【属性值】:设置对应样式属性的值。

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

6、<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属性:设置字体颜色。

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

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

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

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

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢