admin管理员组文章数量:1026989
学习HTML（十五）——结合CSS文件在页中创建按钮
标题所说的按钮其实不是 真正意义上的按钮，只是类似按钮的功能。可以从形状和功能两个方面来分析一下按钮。 1）形状方面 按钮基本上都是长方形或者正方形，其他形状的（圆形、不规则图形）都出现的比较少。四个角可以是直角，也可以是圆角，圆角的半径有长有短。按钮的背景颜色可以是任意的颜色，而且可以设置背景颜色的透明度。 按钮的内容可以是图片也可以是文字，文字的话文字的样式也是可以任意设置。 以上的功能都可以在div标签中通过设置style样式来实现。下面就是例子。 形状可以通过width和height属性进行设置； 矩形边框可以通过border属性进行设置； 圆角半径可以通过border-radius属性进行设置，这个属性的值为0时就是直角矩形； 背景颜色可以通过background-color属性进行设置； 透明度可以通过opacity属性进行设置； 按钮的内容可以通过p标签和img标签来进行设置。 2）内容方面 网页上的按钮点击的话，可以跳转到其他网页，可以弹出交互窗口，也可以跳转到当前网页的其他位置。目前我们可以实现的就是可以跳转到其他的网址，也就是通过a标签来实现。 下面是综合这两个方面的代码和示意图: <!DOCTYPE html> <html> <head> <style> div { width:100px; height:50px; border:2px dashed red; border-radius:5px; background-color:lightblue; } img { width:100px; height:50px; } </style> <title>create a button!</title> </head> <body> <div> <a href=" /"> <img src=" =3937225212,850620406&fm=120" /> </a> </div> <p/> <div> <a href=""> 网易新闻 </a> </div> <body> </html>
学习HTML（十五）——结合CSS文件在页中创建按钮
标题所说的按钮其实不是 真正意义上的按钮，只是类似按钮的功能。可以从形状和功能两个方面来分析一下按钮。 1）形状方面 按钮基本上都是长方形或者正方形，其他形状的（圆形、不规则图形）都出现的比较少。四个角可以是直角，也可以是圆角，圆角的半径有长有短。按钮的背景颜色可以是任意的颜色，而且可以设置背景颜色的透明度。 按钮的内容可以是图片也可以是文字，文字的话文字的样式也是可以任意设置。 以上的功能都可以在div标签中通过设置style样式来实现。下面就是例子。 形状可以通过width和height属性进行设置； 矩形边框可以通过border属性进行设置； 圆角半径可以通过border-radius属性进行设置，这个属性的值为0时就是直角矩形； 背景颜色可以通过background-color属性进行设置； 透明度可以通过opacity属性进行设置； 按钮的内容可以通过p标签和img标签来进行设置。 2）内容方面 网页上的按钮点击的话，可以跳转到其他网页，可以弹出交互窗口，也可以跳转到当前网页的其他位置。目前我们可以实现的就是可以跳转到其他的网址，也就是通过a标签来实现。 下面是综合这两个方面的代码和示意图: <!DOCTYPE html> <html> <head> <style> div { width:100px; height:50px; border:2px dashed red; border-radius:5px; background-color:lightblue; } img { width:100px; height:50px; } </style> <title>create a button!</title> </head> <body> <div> <a href=" /"> <img src=" =3937225212,850620406&fm=120" /> </a> </div> <p/> <div> <a href=""> 网易新闻 </a> </div> <body> </html>本文标签： 学习HTML（十五）结合CSS文件在页中创建按钮
版权声明：本文标题：学习HTML（十五）——结合CSS文件在页中创建按钮 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/IT/1694666664a254816.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论