您的位置：首页 > Web前端 > CSS

学习HTML（十五）——结合CSS文件在页中创建按钮

2017-11-12 19:56 204 查看

标题所说的按钮其实不是真正意义上的按钮，只是类似按钮的功能。可以从形状和功能两个方面来分析一下按钮。
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="http://www.narutom.com/"> <img src="http://t10.baidu.com/it/u=3937225212,850620406&fm=120" /> </a> </div> <p/> <div> <a href="http://news.163.com"> 网易新闻 </a> </div> <body> </html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航