网页结构
<body>
<!--<form action="calculator.php" method="get" name="compute" class="box">-->
<div class="box">
<span>计算器</span>
<!--计算机背景-->
<div class="backGround">
<div class="inputData">
<!--输入和输出-->
<div class="data">
<label for="data_A">数字A</label>
<input type="text" name="data_A" id="data_A" required />
</div>
<div class="data">
<label for="data_B">数字B</label>
<input type="text" name="data_B" id="data_B" required />
</div>
<div class="data">
<label for="outcome">结果C</label>
<input type="text" name="outcome" id="outcome" readonly />
</div>
<!--输入和输出 end-->
<!--按钮-->
<div class="AllButton">
<button id="add">加</button>
<button id="subtract">减</button>
<button id="multiply">乘</button>
<button id="except">除</button>
</div>
<!--按钮 end-->
</div>
</div>
<!--计算机背景 end-->
</div>
<!--</form>-->
<script src="js/app.js"></script>
</body>
1.公用样式
*:not(button) {
margin: 0;
padding: 0;
}
body{
font-family: Arial, Verdana, "Microsoft yahei", "Pingfang SC", Simsun;
}
ul,li,ol{
list-style: none;
}
.clears{
clear: both;
height: 0;
overflow: hidden;
font-size: 0;
line-height: 0;
}
a{
text-decoration: none;
}
table{
border-collapse: collapse;
}
button {
cursor: pointer;
}
input, button, textarea, select{
outline:none;
}
textarea{
resize: none;
}
button[type="submit"]{
border: none;
border-radius: 10px;
}
input[type=checkbox] {
cursor: pointer;
position: relative;
width: 15px;
height: 15px;
font-size: 14px;
border: 1px solid black; /* 初始状态下的黑色边框 */
border-radius: 1px;
}
input[type=checkbox]::after {
position: absolute;
top: 0;
background-color: #ffffff;
color: #ffffff;
width: 15px;
height: 15px;
display: inline-block;
visibility: visible;
text-align: center;
content: ' ';
}
input[type=checkbox]:checked {
border-radius: 1px;
border-color: #92a8d1; /* 选中时的边框颜色 */
}
input[type=checkbox]:checked::after {
content: "✓";
font-size: 12px;
font-weight: bold;
border-radius: 1px;
background-color: #92a8d1;
}
input[type=checkbox]:not(:checked)::after {
border: 1px solid black; /* 未选中时的边框颜色 */
border-radius: 1px;
}
2.样式css
.box {
width: 300px;
height: 230px;
display: flex;
justify-content: center;
align-items: center;
margin: auto;
position: relative;
}
.box span {
display: inline;
top: 0px;
left: 0px;
font-size: medium;
font-weight: bold;
margin-top: 14px;
margin-left: 40px;
background: linear-gradient(to bottom, rgb(255, 255, 255), rgb(255, 255, 255) 50%, #f1f1f1 50%, #f1f1f1);
position: absolute;
z-index: 9;
}
.box .backGround {
width: 254px;
height: 180px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid black;
background-color: #f1f1f1;
}
效果图
background: linear-gradient(to bottom, rgb(255, 255, 255), rgb(255, 255, 255) 50%, #f1f1f1 50%, #f1f1f1);这段代码很有意思，先指定颜色渐变方向，再指定从什么颜色变为什么颜色以及每种颜色所占的比例，用背景遮盖，就实现了边框似乎在文本处中断的效果。要使文本处于这个位置，可以使用相对定位，调试好参数就能实现相应效果。
941
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
