Home Explore Help
Register Sign In
2001010134
/
RaoYing
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

font

Future 3 years ago
parent
142c73f121
commit
409cef2690
3 changed files with 117 additions and 95 deletions
Split View Show Diff Stats
  1. 67 68
      src/main/webapp/ShoppingCart.html
  2. 50 27
      src/main/webapp/css/testingCss.css
  3. BIN
      src/main/webapp/font/HarmonyOS_Sans_SC_Medium.ttf

+ 67 - 68
src/main/webapp/ShoppingCart.html
View File 

@@ -8,84 +8,82 @@
 
     <link rel="stylesheet" type="text/css" href="css/testingCss.css">
 
 </head>
 
 <body>
 
-    <div id="Cartlist">
 
-        <div id="Store">
 
-            <div class="lable">
 
-                <input type="checkbox">
 
-                <div id="StoreIcon">
 
-                    <img src="https://assets.burberry.com/is/image/Burberryltd/0c498f053ef33c97aab8f9a472265caed3e75a39.jpg?$BBY_V2_SL_3x4$=&wid=1903&hei=2537">
 
-                </div>
 
-                <h3>StoreA</h3>
 
+    <div id="Store">
 
+        <div class="lable">
 
+            <input type="checkbox">
 
+            <div id="StoreIcon">
 
+                <img src="https://assets.burberry.com/is/image/Burberryltd/0c498f053ef33c97aab8f9a472265caed3e75a39.jpg?$BBY_V2_SL_3x4$=&wid=1903&hei=2537">
 
             </div>
 
-            <div class="goods">
 
-                <input type="checkbox">
 
-                <div id="GoodsIcon">
 
-                    <img src="https://assets.burberry.com/is/image/Burberryltd/0c498f053ef33c97aab8f9a472265caed3e75a39.jpg?$BBY_V2_SL_3x4$=&wid=1903&hei=2537">
 
-                </div>
 
-                <div id="exp">
 
-                    <h3>GoodsA</h3>
 
-                    <p>info & selected</p>
 
-                    <div id="count">
 
-                        <button>-</button>
 
-                        <input type="text">
 
-                        <button>+</button>
 
-                    </div>
 
-                </div>
 
+            <h3>StoreA</h3>
 
+        </div>
 
+        <div class="goods">
 
+            <input type="checkbox">
 
+            <div id="GoodsIcon">
 
+                <img src="https://assets.burberry.com/is/image/Burberryltd/0c498f053ef33c97aab8f9a472265caed3e75a39.jpg?$BBY_V2_SL_3x4$=&wid=1903&hei=2537">
 
             </div>
 
-            <div class="goods">
 
-                <input type="checkbox">
 
-                <div id="GoodsIcon">
 
-                    <img src="https://assets.burberry.com/is/image/Burberryltd/0c498f053ef33c97aab8f9a472265caed3e75a39.jpg?$BBY_V2_SL_3x4$=&wid=1903&hei=2537">
 
+            <div id="exp">
 
+                <h3>GoodsA</h3>
 
+                <p>info & selected</p>
 
+                <div id="count">
 
+                    <button>-</button>
 
+                    <input type="text">
 
+                    <button>+</button>
 
                 </div>
 
-                <div id="exp">
 
-                    <h3>GoodsB</h3>
 
-                    <p>info & selected</p>
 
-                    <div id="count">
 
-                        <button>-</button>
 
-                        <input type="text">
 
-                        <button>+</button>
 
-                    </div>
 
+            </div>
 
+        </div>
 
+        <div class="goods">
 
+            <input type="checkbox">
 
+            <div id="GoodsIcon">
 
+                <img src="https://assets.burberry.com/is/image/Burberryltd/0c498f053ef33c97aab8f9a472265caed3e75a39.jpg?$BBY_V2_SL_3x4$=&wid=1903&hei=2537">
 
+            </div>
 
+            <div id="exp">
 
+                <h3>GoodsB</h3>
 
+                <p>info & selected</p>
 
+                <div id="count">
 
+                    <button>-</button>
 
+                    <input type="text">
 
+                    <button>+</button>
 
                 </div>
 
             </div>
 
         </div>
 
+    </div>
 
 
 
-        <div id="Store">
 
-            <div class="lable">
 
-                <input type="checkbox">
 
-                <div id="StoreIcon">
 
-                    <img src="https://assets.burberry.com/is/image/Burberryltd/0c498f053ef33c97aab8f9a472265caed3e75a39.jpg?$BBY_V2_SL_3x4$=&wid=1903&hei=2537">
 
-                </div>
 
-                <h3>StoreB</h3>
 
+    <div id="Store">
 
+        <div class="lable">
 
+            <input type="checkbox">
 
+            <div id="StoreIcon">
 
+                <img src="https://assets.burberry.com/is/image/Burberryltd/0c498f053ef33c97aab8f9a472265caed3e75a39.jpg?$BBY_V2_SL_3x4$=&wid=1903&hei=2537">
 
             </div>
 
-            <div class="goods">
 
-                <input type="checkbox">
 
-                <div id="GoodsIcon">
 
-                    <img src="https://assets.burberry.com/is/image/Burberryltd/0c498f053ef33c97aab8f9a472265caed3e75a39.jpg?$BBY_V2_SL_3x4$=&wid=1903&hei=2537">
 
-                </div>
 
-                <div id="exp">
 
-                    <h3>GoodsC</h3>
 
-                    <p>info & selected</p>
 
-                    <div id="count">
 
-                        <button>-</button>
 
-                        <input type="text">
 
-                        <button>+</button>
 
-                    </div>
 
-                </div>
 
+            <h3>StoreB</h3>
 
+        </div>
 
+        <div class="goods">
 
+            <input type="checkbox">
 
+            <div id="GoodsIcon">
 
+                <img src="https://assets.burberry.com/is/image/Burberryltd/0c498f053ef33c97aab8f9a472265caed3e75a39.jpg?$BBY_V2_SL_3x4$=&wid=1903&hei=2537">
 
             </div>
 
-            <div class="goods">
 
-                <input type="checkbox">
 
-                <div id="GoodsIcon">
 
-                    <img src="https://assets.burberry.com/is/image/Burberryltd/0c498f053ef33c97aab8f9a472265caed3e75a39.jpg?$BBY_V2_SL_3x4$=&wid=1903&hei=2537">
 
+            <div id="exp">
 
+                <h3>GoodsC</h3>
 
+                <p>info & selected</p>
 
+                <div id="count">
 
+                    <button>-</button>
 
+                    <input type="text">
 
+                    <button>+</button>
 
                 </div>
 
-                <div id="exp">
 
-                    <h3>GoodsD</h3>
 
-                    <p>info & selected</p>
 
-                    <div id="count">
 
-                        <button>-</button>
 
-                        <input type="text">
 
-                        <button>+</button>
 
-                    </div>
 
+            </div>
 
+        </div>
 
+        <div class="goods">
 
+            <input type="checkbox">
 
+            <div id="GoodsIcon">
 
+                <img src="https://assets.burberry.com/is/image/Burberryltd/0c498f053ef33c97aab8f9a472265caed3e75a39.jpg?$BBY_V2_SL_3x4$=&wid=1903&hei=2537">
 
+            </div>
 
+            <div id="exp">
 
+                <h3>GoodsD</h3>
 
+                <p>info & selected</p>
 
+                <div id="count">
 
+                    <button>-</button>
 
+                    <input type="text">
 
+                    <button>+</button>
 
                 </div>
 
             </div>
 
         </div>
 
@@ -93,7 +91,7 @@
 
 
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 
     <script>
 
-        $("div#Cartlist>div#Store>div.goods>div#exp>div#count>Button").click(function()
 
+        $("body>div#Store>div.goods>div#exp>div#count>Button").click(function()
 
         {
 
             if(this.innerHTML == "-")
 
             {
 
@@ -105,6 +103,7 @@
 
                 text.value = num;
 
             }
 
             else
 
+            if(this.innerHTML == "+")
 
             {
 
                 let text = $(this).prev()[0];
 
                 let num = Number.parseInt(text.value);

+ 50 - 27
src/main/webapp/css/testingCss.css
View File 

@@ -1,56 +1,63 @@
 
 
 body{
 
-    background-color: transparent;
 
+    /* background-color: transparent; */
 
+    position: relative;
 
     margin: 0;
 
+    font-family: 'Harmony SC';
 
+    min-height: 100px;
 
+    min-width: 500px;
 
+    background-color: whitesmoke;
 
 }
 
 
-div#Cartlist
 
+/* div#Cartlist
 
 {
 
     border-radius: 10px;
 
-    position: r;
 
+    position: relative;
 
     width: 100%;
 
     min-height: 100px;
 
     min-width: 500px;
 
-    background-color: gainsboro;
 
-    border: 2px solid gray;
 
-}
 
-div#Cartlist>div#Store
 
+    background-color: whitesmoke;
 
+} */
 
+body>div#Store
 
 {
 
     position: relative;
 
-    margin-bottom: 10px;
 
+    margin-top: 10px;
 
+    margin-left: 15px;
 
+    margin-right: 15px;
 
     border-radius: 10px;
 
     background-color: white;
 
     font-size: 16px;
 
     overflow: hidden;
 
 }
 
-div#Cartlist>div#Store:last-child
 
+/* div#Cartlist>div#Store:last-child
 
 {
 
     margin-bottom: 0;
 
-}
 
-div#Cartlist>div#Store>div{
 
-    border-bottom: 1px solid gray;
 
+} */
 
+body>div#Store>div{
 
+    border-bottom: 1px solid gainsboro;
 
 }
 
 
-div#Cartlist>div#Store>div:last-child{
 
+body>div#Store>div:last-child{
 
     border-bottom: 0;
 
 }
 
 
-div#Cartlist>div#Store>div.lable
 
+body>div#Store>div.lable
 
 {
 
     height: 48px;
 
     line-height: 48px;
 
     display: flex;
 
     justify-items: center;
 
     overflow: hidden;
 
+    background-color: transparent;
 
 }
 
-div#Cartlist>div#Store>div.lable>input
 
+body>div#Store>div.lable>input
 
 {
 
     height: 24px;
 
     width: 24px;
 
     margin: 12px;
 
     margin-left: calc(1ch + 12px);
 
 }
 
-div#Cartlist>div#Store>div.lable>div#StoreIcon
 
+body>div#Store>div.lable>div#StoreIcon
 
 {
 
     height: 40px;
 
     width: 40px;
 
@@ -58,31 +65,31 @@ div#Cartlist>div#Store>div.lable>div#StoreIcon
 
     margin-left: calc(1ch + 4px);
 
     text-align: center;
 
 }
 
-div#Cartlist>div#Store>div.lable>div#StoreIcon>img
 
+body>div#Store>div.lable>div#StoreIcon>img
 
 {
 
     max-width: 100%;
 
     max-height: 100%;
 
 }
 
-div#Cartlist>div#Store>div.lable>h3
 
+body>div#Store>div.lable>h3
 
 {
 
     margin: 0;
 
 }
 
 
-div#Cartlist>div#Store>div.goods{
 
+body>div#Store>div.goods{
 
     height: 96px;
 
     display: flex;
 
     justify-items: center;
 
     overflow: hidden;
 
-    background-color:aliceblue;
 
+    background-color:transparent;
 
 }
 
-div#Cartlist>div#Store>div.goods>input{
 
+body>div#Store>div.goods>input{
 
     height: 24px;
 
     min-width: 24px;
 
     margin: 36px;
 
     margin-left: calc(1ch + 12px);
 
     margin-right: calc(1ch + 12px);
 
 }
 
-div#Cartlist>div#Store>div.goods>div#GoodsIcon
 
+body>div#Store>div.goods>div#GoodsIcon
 
 {
 
     height: 88px;
 
     min-width: 88px;
 
@@ -90,24 +97,24 @@ div#Cartlist>div#Store>div.goods>div#GoodsIcon
 
     margin-left: calc(1ch + 4px);
 
     text-align: center;
 
 }
 
-div#Cartlist>div#Store>div.goods>div#GoodsIcon>img
 
+body>div#Store>div.goods>div#GoodsIcon>img
 
 {
 
     max-width: 100%;
 
     max-height: 100%;
 
 }
 
-div#Cartlist>div#Store>div.goods>div#exp
 
+body>div#Store>div.goods>div#exp
 
 {
 
     position: relative;
 
     margin: 8px;
 
     height: 80px;
 
     width: 100%;
 
 }
 
-div#Cartlist>div#Store>div.goods>div#exp>*
 
+body>div#Store>div.goods>div#exp>*
 
 {
 
     width: 100%;
 
     margin: 0;
 
 }
 
-div#Cartlist>div#Store>div.goods>div#exp>div#count
 
+body>div#Store>div.goods>div#exp>div#count
 
 {
 
     position: absolute;
 
     width: 25%;
 
@@ -121,7 +128,7 @@ div#Cartlist>div#Store>div.goods>div#exp>div#count
 
     display: flex;
 
     overflow: hidden;
 
 }
 
-div#Cartlist>div#Store>div.goods>div#exp>div#count>*{
 
+body>div#Store>div.goods>div#exp>div#count>*{
 
     width: 100%;
 
     height: 100%;
 
     margin: 0;
 
@@ -129,4 +136,20 @@ div#Cartlist>div#Store>div.goods>div#exp>div#count>*{
 
     border: 0;
 
     outline: 1px solid gray;
 
     text-align: center;
 
+    background-color: white;
 
+}
 
+body>div#Store>div.goods>div#exp>div#count>*:hover
 
+{
 
+    background-color: gainsboro;
 
+}
 
+body>div#Store>div.goods>div#exp>div#count>*:active
 
+{
 
+    background-color: gray;
 
+}
 
+
 
+
 
+@font-face
 
+{
 
+    font-family: 'Harmony SC';
 
+    src: url(../font/HarmonyOS_Sans_SC_Medium.ttf);
 
 }

BIN
src/main/webapp/font/HarmonyOS_Sans_SC_Medium.ttf
View File