docker/relationship
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated 样式优化

Browse Source
This commit is contained in:
mumuy 2018-01-26 08:39:58 +08:00
parent e3bb6dc0ad
commit 3c2bddec8d
2 changed files with 69 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
index.html
View File

@ -23,25 +23,48 @@
<p>逢年过节遇到三姑六婆，拒绝叫不出口的尴尬！轻松搞定亲戚关系～</p> <p>逢年过节遇到三姑六婆，拒绝叫不出口的尴尬！轻松搞定亲戚关系～</p>
</div> </div>
<div class="bd"> <div class="bd">
<p>计算类型： <div class="group">
<label for="default"><input id="default" type="radio" name="type" value="default" checked>找称呼</label> <div class="field">
<label for="chain"><input id="chain" type="radio" name="type" value="chain">找关系</label> 计算类型：
<label for="default">
<input id="default" type="radio" name="type" value="default" checked>
<span>找称呼</span>
</label>
<label for="chain">
<input id="chain" type="radio" name="type" value="chain">
<span>找关系</span>
</label>
</div>
</p> </p>
<div class="group"> <div class="group">
<p>我的性别： <div class="field">
<label for="male"><input id="male" type="radio" name="sex" value="1" checked>男</label> 我的性别：
<label for="female"><input id="female" type="radio" name="sex" value="0">女</label> <label for="male">
</p> <input id="male" type="radio" name="sex" value="1" checked>
<p>称呼方式： <span>男</span>
<label for="call"><input id="call" type="radio" name="reverse" value="0" checked>我称呼对方</label> </label>
<label for="called"><input id="called" type="radio" name="reverse" value="1">对方称呼我</label> <label for="female">
</p> <input id="female" type="radio" name="sex" value="0">
<span>女</span>
</label>
</div>
<div class="field">
称呼方式：
<label for="call">
<input id="call" type="radio" name="reverse" value="0" checked>
<span>我称呼对方</span>
</label>
<label for="called">
<input id="called" type="radio" name="reverse" value="1">
<span>对方称呼我</span>
</label>
</div>
</div> </div>
<p> <p>
<textarea id="input" placeholder="称谓间用'的'字分开…"></textarea> <textarea id="input" placeholder="称谓间用'的'字分开…"></textarea>
</p> </p>
<p> <p>
<span>快速选择：</span><br/> <label>快速选择：</label><br/>
<span> <span>
<button class="btn" data-value="爸爸">父</button> <button class="btn" data-value="爸爸">父</button>
<button class="btn" data-value="妈妈">母</button> <button class="btn" data-value="妈妈">母</button>

40
style/index.css
View File

@ -34,6 +34,7 @@ a:hover{
} }
.mod-head{ .mod-head{
padding: 0 20px;
line-height: 36px; line-height: 36px;
text-align: right; text-align: right;
} }
@ -55,7 +56,13 @@ a:hover{
margin:0 auto 20px; margin:0 auto 20px;
} }
.mod-panel .bd p{ .mod-panel .bd p{
line-height: 30px; overflow: hidden;
}
.mod-panel .field{
line-height: 28px;
}
.mod-panel .field span,.mod-panel .field input{
vertical-align: middle;
} }
.mod-panel .input-text{ .mod-panel .input-text{
width: 60px; width: 60px;
@ -69,7 +76,7 @@ a:hover{
.mod-panel .input-button { .mod-panel .input-button {
height: 30px; height: 30px;
width: 80px; width: 80px;
margin: 15px 10px 0 0; margin: 10px 10px 10px 0;
background: #4bae4f; background: #4bae4f;
border: medium none; border: medium none;
line-height: 30px; line-height: 30px;
@ -79,7 +86,9 @@ a:hover{
cursor: pointer; cursor: pointer;
outline: none; outline: none;
} }
.mod-panel label,.mod-panel p span{ .mod-panel label{
display: inline-block;
min-width: 90px;
margin-right:10px; margin-right:10px;
} }
.mod-panel .btn{ .mod-panel .btn{
@ -146,13 +155,32 @@ a:hover{
} }
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {
.mod-panel .hd{
padding-top: 10px;
margin-bottom: 10px;
}
.mod-panel .hd h1{
font-size: 20px;
}
.mod-panel .hd p{
line-height: 24px;
overflow: hidden;
}
.mod-panel textarea{
width: 100%;
height: 80px;
box-sizing: border-box;
}
.mod-panel p span{ .mod-panel p span{
float: left;
width: 50%;
text-align: center;
margin-right: 0; margin-right: 0;
} }
.mod-panel .btn{ .mod-panel .btn{
width: 80px; width: 48%;
margin-bottom: 7px; margin-bottom: 5px;
line-height: 28px; line-height: 24px;
} }
.mod-qrcode,.mod-my{ .mod-qrcode,.mod-my{