保存进度！
This commit is contained in:
69
code/web/car_dealer/css/app.css
Normal file
69
code/web/car_dealer/css/app.css
Normal file
@@ -0,0 +1,69 @@
|
||||
/*
|
||||
* @Author: Kane
|
||||
* @Date: 2022-11-12 23:32:20
|
||||
* @LastEditors: Kane
|
||||
* @LastEditTime: 2022-11-13 00:30:43
|
||||
* @FilePath: \car_dealer\css\app.css
|
||||
* @Description:
|
||||
*
|
||||
* Copyright (c) ${2022} by Kane, All Rights Reserved.
|
||||
*/
|
||||
@import url("colors.css");
|
||||
|
||||
#root,
|
||||
#app {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--backupground-color);
|
||||
padding: 50px;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #fff;
|
||||
width: 25rem;
|
||||
margin: 0px auto;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#app {
|
||||
padding: 15px;
|
||||
display: grid;
|
||||
grid-template-columns: 4rem auto;
|
||||
grid-template-rows: repeat(3, 1.5rem);
|
||||
grid-gap: 0.5rem;
|
||||
}
|
||||
|
||||
#app > * + * {
|
||||
/* margin-top: 15px; */
|
||||
}
|
||||
|
||||
.grid-left {
|
||||
display: inline-block;
|
||||
grid-column: 1/2;
|
||||
place-self: end;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.grid-right {
|
||||
display: inline-block;
|
||||
grid-column: 2/3;
|
||||
place-self: start;
|
||||
}
|
||||
|
||||
.grid-firstname {
|
||||
grid-row: 1/2;
|
||||
}
|
||||
|
||||
.grid-lastname {
|
||||
grid-row: 2/3;
|
||||
}
|
||||
|
||||
.grid-sex {
|
||||
grid-row: 3/4;
|
||||
}
|
||||
34
code/web/car_dealer/css/button.css
Normal file
34
code/web/car_dealer/css/button.css
Normal file
@@ -0,0 +1,34 @@
|
||||
/*
|
||||
* @Author: Kane
|
||||
* @Date: 2022-11-12 23:20:29
|
||||
* @LastEditors: Kane
|
||||
* @LastEditTime: 2022-11-12 23:45:27
|
||||
* @FilePath: \car_dealer\css\button.css
|
||||
* @Description:
|
||||
*
|
||||
* Copyright (c) ${2022} by Kane, All Rights Reserved.
|
||||
*/
|
||||
@import url("colors.css");
|
||||
|
||||
button {
|
||||
padding: 5px 10px;
|
||||
background-color: var(--btn-color-red);
|
||||
color: var(--btn-font-color);
|
||||
width: 10em;
|
||||
border: none;
|
||||
border-radius: 0.25em;
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 用于按钮点击时样式切换。 */
|
||||
button:active {
|
||||
background-color: var(--btn-font-color);
|
||||
color: var(--btn-color-red);
|
||||
}
|
||||
19
code/web/car_dealer/css/colors.css
Normal file
19
code/web/car_dealer/css/colors.css
Normal file
@@ -0,0 +1,19 @@
|
||||
/*
|
||||
* @Author: Kane
|
||||
* @Date: 2022-11-12 23:22:59
|
||||
* @LastEditors: Kane
|
||||
* @LastEditTime: 2022-11-12 23:23:29
|
||||
* @FilePath: \car_dealer\css\colors.css
|
||||
* @Description:
|
||||
*
|
||||
* Copyright (c) ${2022} by Kane, All Rights Reserved.
|
||||
*/
|
||||
|
||||
html {
|
||||
--backupground-color: #f4f5f7ff;
|
||||
--btn-color-blue: #307dbe;
|
||||
--btn-color-yellow: #f7b24d;
|
||||
--btn-color-green: #5bad60;
|
||||
--btn-color-red: #e56651;
|
||||
--btn-font-color: #fff;
|
||||
}
|
||||
@@ -2,7 +2,7 @@
|
||||
* @Author: Kane
|
||||
* @Date: 2022-10-12 08:49:14
|
||||
* @LastEditors: Kane
|
||||
* @LastEditTime: 2022-11-03 23:46:05
|
||||
* @LastEditTime: 2022-11-12 23:34:06
|
||||
* @FilePath: \car_dealer\css\kane.css
|
||||
* @Description: vue学习用的样式表！
|
||||
*
|
||||
@@ -23,12 +23,6 @@ html {
|
||||
padding: 50px;
|
||||
}
|
||||
|
||||
/* #root,
|
||||
#app * + * {
|
||||
margin-top : 15px;
|
||||
text-align : center;
|
||||
} */
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -50,29 +44,6 @@ hr {
|
||||
overflow : auto;
|
||||
} */
|
||||
|
||||
button {
|
||||
padding: 5px 10px;
|
||||
background-color: var(--btn-color-red);
|
||||
color: var(--btn-font-color);
|
||||
width: 10em;
|
||||
border: none;
|
||||
border-radius: 0.25em;
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 用于按钮点击时样式切换。 */
|
||||
button:active {
|
||||
background-color: var(--btn-font-color);
|
||||
color: var(--btn-color-red);
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
border: none;
|
||||
outline: solid 2px #e56651;
|
||||
|
||||
48
code/web/car_dealer/vue/表单.html
Normal file
48
code/web/car_dealer/vue/表单.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!--
|
||||
* @Author: Kane
|
||||
* @Date: 2022-11-12 23:21:53
|
||||
* @LastEditors: Kane
|
||||
* @LastEditTime: 2022-11-13 00:29:50
|
||||
* @FilePath: \car_dealer\vue\表单.html
|
||||
* @Description:
|
||||
*
|
||||
* Copyright (c) ${2022} by Kane, All Rights Reserved.
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>表单</title>
|
||||
<link rel="stylesheet" href="../css/root.css">
|
||||
<link rel="stylesheet" href="../css/normalize.css">
|
||||
<link rel="stylesheet" href="../css/button.css">
|
||||
<link rel="stylesheet" href="../css/app.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="content">
|
||||
<div id="app">
|
||||
<div class="gird-left grid-firstname">
|
||||
<p>姓：</p>
|
||||
</div>
|
||||
<div class="gird-right grid-firstname"><input type="text" placeholder=""></div>
|
||||
<div class="gird-left grid-lasttname">
|
||||
<p>名：</p>
|
||||
</div>
|
||||
<div class="gird-right grid-lasttname"><input type="text"></div>
|
||||
|
||||
<div class="gird-left gird-sex">
|
||||
<p>性别：</p>
|
||||
</div>
|
||||
<div class="gird-right gird-sex"><input type="radio" name="sex" id="male" value="male"><label
|
||||
for="male">男</label>
|
||||
<input type="radio" name="sex" id="female" value="female"><label for="female">女</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user