2、在test.html文件中,使用button标签创建一个按钮。
3、在test.html文件中,设置button标签的class属性为mybtn。
4、在css标签内,通过class定义button的样式,设置它的宽度为50px,高度为50px,实现正方形。
5、在css标签内,再设置在设置忽略按钮的背景颜色为红色,文字颜色为白色,按钮无边框。
6、在浏览器打开test.html文件,查看实现的效果。css是一种用来表现HTML或XML等文件样式的计算机语言,是描述标记语言页面格式的标准。
固定尺寸就好做
<div style="background-color:#CCCCCC width:200px height:200px position:relative"><div style=" height:30px width:120px position:absolute top:calc(50% - 15px) left:calc(50% - 60px) line-height:30px background-color:#FFFFFF">
<span>查找</span> <span>替换</span> <span>删除</span>
</div>
</div>
<br />
<br />
<div style="background-color:#CCCCCC width:200px height:115px padding-top:85px">
<div style=" height:30px width:120pxmargin-left:40px line-height:30px background-color:#FFFFFF">
<span>查找</span> <span>替换</span> <span>删除</span>
</div>
</div>
<br />
<br />
<div style="background-color:#CCCCCC width:200px height:200px">
<div style=" height:30px width:120px line-height:30px float:left margin-left:40px margin-top:85px background-color:#FFFFFF">
<span>查找</span> <span>替换</span> <span>删除</span>
</div>
</div>
css里面有个属性叫clip-path,可以把长方形的css元素切割为不规则图形,点击响应的区域也只有切割后的图形才能响应。因此可以利用这个属性生成一下简单的图形。有个工具可以帮助我们生成不规则图形,地址:
借助这个工具,我们就能生成各种简单图形了,比如:
箭头:
向右的箭头:
关闭的叉:
三角形箭头:
注意:iOS浏览器iOS7以上支持,android浏览器4.4以上支持。opera浏览器全部不支持。iE全部不支持。