小demo

最新推荐文章于 2021-12-24 17:33:22 发布

hahalang-

最新推荐文章于 2021-12-24 17:33:22 发布

阅读量168

点赞数

分类专栏：其他

本文链接：https://blog.csdn.net/sinat_40697723/article/details/80140835

版权

其他专栏收录该内容

10 篇文章 0 订阅

订阅专栏

此demo鼠标点击确定和取消显示pointer小手，背景变为#ccc。要求两个按钮均分其父元素宽度，且父元素宽度不固定。鼠标点击两个按钮时鼠标呈小手状且对应按钮背景颜色发生变化。

容易产生两个错误点：1.确认和取消按钮设置width：50%的时候也设置了左浮动，但是这两块变成上下排列，原因是确认有一个px的有边框，导致取消那一块被挤压到了下一行，设置box-sizing:border-box;即可。

2.不要设置高度，让其自己撑开最好。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<title>Document</title>
	<style>

.mask{
	width:200px;
	margin:100px auto;
	border:5px solid #ccc;
	background: #ccc;
}
.confirm{
	border:1px solid #fff;
	background: #fff;
	border-radius:20px;
	overflow:hidden;
	text-align: center;
}
.confirm-text{
    border-bottom:1px solid #ccc;
}
.confirm-btn{
    /*此处写代码*/
    float: left;
    width: 50%;
    box-sizing: border-box;
}
.confirm-btn:active{
	/*此处写代码*/
	background: #ccc;
	cursor: pointer;
}
.confirm-btn-sure{
    border-right: 1px solid rgb(235,235,235);
}
	</style>
</head>
<body>
	<div class="mask">
 		<div class="confirm">
    		<div class="confirm-text">提示信息</div>
    		<div class="confirm-btn confirm-btn-sure">确定</div>
    		<div class="confirm-btn">取消</div>
  		</div>
	</div>
</body>
</html>

hahalang-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小demo

此demo鼠标点击确定和取消显示pointer小手，背景变为#ccc。要求两个按钮均分其父元素宽度，且父元素宽度不固定。鼠标点击两个按钮时鼠标呈小手状且对应按钮背景颜色发生变化。容易产生两个错误点：1.确认和取消按钮设置width：50%的时候也设置了左浮动，但是这两块变成上下排列，原因是确认有一个px的有边框，导致取消那一块被挤压到了下一行，设置box-sizing:border-...
复制链接

扫一扫