保存进度！
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
|
* @Author: Kane
|
||||||
* @Date: 2022-10-12 08:49:14
|
* @Date: 2022-10-12 08:49:14
|
||||||
* @LastEditors: Kane
|
* @LastEditors: Kane
|
||||||
* @LastEditTime: 2022-11-03 23:46:05
|
* @LastEditTime: 2022-11-12 23:34:06
|
||||||
* @FilePath: \car_dealer\css\kane.css
|
* @FilePath: \car_dealer\css\kane.css
|
||||||
* @Description: vue学习用的样式表！
|
* @Description: vue学习用的样式表！
|
||||||
*
|
*
|
||||||
@@ -23,12 +23,6 @@ html {
|
|||||||
padding: 50px;
|
padding: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* #root,
|
|
||||||
#app * + * {
|
|
||||||
margin-top : 15px;
|
|
||||||
text-align : center;
|
|
||||||
} */
|
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -50,29 +44,6 @@ hr {
|
|||||||
overflow : auto;
|
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"] {
|
input[type="text"] {
|
||||||
border: none;
|
border: none;
|
||||||
outline: solid 2px #e56651;
|
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