htmltest~計算器介面的實現

eternalshallow發表於2017-12-14
HTML

通過div+css和部分佈局的作用，實現了，如下效果的計算器展示頁面

![C%]R$IGDK4J(%3LJXD3]SY.png

，廢話不多說，最主要的還是分享程式碼：

html：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/counter.css">
</head>
<body>
    .<div class="counter-body">
        <div class="counter-title">
            <div>計算器</div>
            <div>-</div>
            <div>                口            </div>
            <div>X</div>
        </div>
        <div class="counter-content">
            <div class="counter-content-title">
                <div class="content-title">
                    <div>編輯(E)</div>
                    <div>檢視(V)</div>
                    <div>幫助(H)</div>
                </div>
            </div>
            <div class="counter-content-input">
                <input  placeholder="0." type="text">
            </div>
            <div class="counter-content-btn-row">
                <div class="counter-content-btn-col1">
                    <div> </div>
                    <div>Backspace</div>
                    <div>CE</div>
                    <div>C</div>
                </div>
                <div class="counter-content-btn-col">
                    <div>MC</div>
                    <div>7</div>
                    <div>8</div>
                    <div>9</div>
                    <div>/</div>
                    <div>sqrt</div>
                </div>
                <div class="counter-content-btn-col">
                    <div>MR</div>
                    <div>4</div>
                    <div>5</div>
                    <div>6</div>
                    <div>*</div>
                    <div>%</div>
                </div>
                <div class="counter-content-btn-col">
                    <div>MS</div>
                    <div>1</div>
                    <div>2</div>
                    <div>3</div>
                    <div>-</div>
                    <div>1/x</div>
                </div>
                <div class="counter-content-btn-col">
                    <div>M+</div>
                    <div>0</div>
                    <div>+/-</div>
                    <div>.</div>
                    <div>+</div>
                    <div>=</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

css樣式表：
body{
    margin: 0 auto;
}
.counter-body{
    position: absolute;
    top: 200px;
    left: 200px;
    border: 2px solid #3335e5;
    width: 245px;
    height: 210px;
    border-radius: 5px;
    background: rgba(217, 217, 217, 0.49);
}
.counter-title{
    line-height: 26px;
    width: 100%;
    background: #3335e5;
    color:#fff;
}
.counter-title div{
    display: inline-block;
}
.counter-title div:first-child{
    margin-right: 70px;
}
.counter-title div:nth-child(4){
    background: red;
}
.counter-title div:nth-child(2){
    font-size: 18px;
}
.counter-title div:nth-child(2),.counter-title div:nth-child(4){
    padding-left: 9px;
    padding-right: 9px;
}
.counter-title div:nth-child(2),.counter-title div:nth-child(3),.counter-title div:nth-child(4){
    border-radius: 2px;
    height: 22px;
    border: 1px solid #FFFFFF;
}
.counter-title div{
    padding: 0 6px 2px 6px;
}
.content-title {
    display: table;
}
.content-title div{
    padding-left: 10px;
    text-align: center;
    line-height: 22px;
    display: table-cell;
    font-size: 12px;
}
.counter-content-input{
    padding-left: 10px;
}
.counter-content-input input{
    height: 15px;
    text-align: right;
    width: 220px;
}
.counter-content-btn-row{
    vertical-align: middle;
    margin-top: -15px;
    padding: 25px 10px;
}
.counter-content-btn-col1 div:first-child{
    background: rgba(247, 247, 247, 0.87);
    text-shadow: 5px 5px 3px #bfbfbf   ;
    color: #fff;
    width: 16px;
    line-height: 15px;
}
.counter-content-btn-col1 div:nth-child(2){
    background: rgba(247, 247, 247, 0.87);
    width: 65px;
    padding: 1px 1px;
}
.counter-content-btn-col1 div{
    color: red;
    background: rgba(247, 247, 247, 0.87);
    padding: 1px 1px;
    height: 15px;
    border-radius: 2px;
    text-align: center;
    display: inline-block;
    font-size: 10px;
    margin:  0 1.5px;
    border: 1px solid #858585;
    width: 46px;
}
.counter-content-btn-row div:nth-child(2),.counter-content-btn-row div:nth-child(3),.counter-content-btn-row div:nth-child(4){
    color: blue;
}
.counter-content-btn-row div:nth-child(4n+1){
    color: red;
}
.counter-content-btn-col div:first-child{
    background: rgba(247, 247, 247, 0.87);
    margin-right: 4px;
}
.counter-content-btn-col div{
    background: rgba(247, 247, 247, 0.87);
    display: inline-block;
    border-radius: 2px;
    text-align: center;
    display: inline-block;
    font-size: 10px;
    margin:  0 2px;
    border: 1px solid #858585;
    width: 24.38px;
    height: 15px;
}
.counter-content-btn-col1,.counter-content-btn-col{
    color: red;
    line-height: 15px;
    margin: 1.5px 0 ;
}
.counter-content-btn-col div:last-child{
    width: 25px;
}
複製程式碼

其中，

Paste_Image.png

在這個部分實現的時候出現一個小問題就是有個前邊兒的無字小方框，本來是一個空格就可以搞定，但是由於空格撐不起來，所以在div相應的部分加入了空格&nbsp

 
這個應該是或是這次實現過程中出現的一個小問題吧， 另外說一點，在這次實現的過程中用到了很多偽類選擇器 也相當於是對偽類選擇器的一次練手吧

加油吧~~~ fighting~@^-^@~

相關文章