From ede12183c45b7b61842504e8e12d58ecd229c871 Mon Sep 17 00:00:00 2001 From: Hestar <3341238768@qq.com> Date: Tue, 3 Nov 2020 21:43:27 +0800 Subject: [PATCH] hmx --- .../\344\275\234\344\270\232.css" | 373 ++++++++++++++++++ .../\344\275\234\344\270\232.html" | 219 ++++++++++ README.md | 3 +- 3 files changed, 594 insertions(+), 1 deletion(-) create mode 100644 "BO2\345\237\271\350\256\255\344\275\234\344\270\232/\344\275\225\346\230\216\346\230\237/\344\275\234\344\270\232.css" create mode 100644 "BO2\345\237\271\350\256\255\344\275\234\344\270\232/\344\275\225\346\230\216\346\230\237/\344\275\234\344\270\232.html" diff --git "a/BO2\345\237\271\350\256\255\344\275\234\344\270\232/\344\275\225\346\230\216\346\230\237/\344\275\234\344\270\232.css" "b/BO2\345\237\271\350\256\255\344\275\234\344\270\232/\344\275\225\346\230\216\346\230\237/\344\275\234\344\270\232.css" new file mode 100644 index 0000000..172ee6f --- /dev/null +++ "b/BO2\345\237\271\350\256\255\344\275\234\344\270\232/\344\275\225\346\230\216\346\230\237/\344\275\234\344\270\232.css" @@ -0,0 +1,373 @@ +body +{ + margin:0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +h2 +{ + margin:0; +} + +.head img +{ + width: 100%; +} + +.content +{ + width:80%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.sofa +{ + width: 100%; + display:flex; + flex-direction: row; + justify-content: space-between; +} + +.sofa-items +{ + width: 500px; + height: 300px; + line-height: 1px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + background: 50% url(./image/sofa.png) no-repeat ; + color:white; +} + +.sofa-items p +{ + width: 150px; + height: 50px; + line-height: 50px; + border: 2px solid white; + border-radius: 25px; +} + +.nevigation +{ + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + border-bottom: silver solid 2px; +} +.nevigation ul +{ + margin: 10px; +} +.nevigation li +{ + list-style-type: none; + display:inline; +} +.nevigation a +{ + font: 15px solid ; + color: black; + text-decoration: none; +} + +.nevigation a:hover +{ + color: red; +} + +.gallery +{ + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + justify-content: space-between; + width: 100%; + margin: 20px; +} + +.gallery-item +{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 24%; + margin: 15px 0; +} +.item-img +{ + width:auto; + height: auto; + position: relative; + /* 关键,有待理解 */ + display: inline-block; + /* margin: 0; */ +} +.item-img img +{ + width:100%; +} + +.item-img p +{ + display:none; + width:100%; + height: 40px; + line-height: 40px; + margin: 0; + text-align: center; + color:white; + background:red; + position:absolute; + bottom: 0; + opacity: 0.8; +} +.gallery-item:hover .item-img p{ + display:block; +} +.gallery h3 +{ + /* white-space: pre-wrap; */ + margin: 0; + white-space:normal; + width:130px; + text-align: center; +} + +.sofa1 +{ + width:100%; + height:500px; + background: 40% url(./image/sofa1.png) no-repeat; + margin-bottom: 30px; +} + +.sofa1-text +{ + margin:80px; +} + +.sofa1-text h1,h3 +{ + margin: 0; + color:#6A594D; +} + +.sofa1-text p +{ + width: 110px; + height: 30px; + line-height: 30px; + border: 2px solid black; + border-radius: 25px; + text-align: center; +} + +.story +{ + display: flex; + flex-direction: row; + justify-content: space-around; + flex-wrap: wrap; + width: 100%; + padding-bottom: 40px; + margin: 40px; + border-bottom: 2px gray solid ; +} +.story-item +{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 320px; +} +.story-item-img +{ + width:100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: relative; + margin: 30px 0; +} +.story-item-img img +{ + width:100%; +} + +.story-item-img p +{ + color:white; + background-color: gray; + width: 150px; + height: 30px; + line-height: 30px; + border: 2px solid gray; + border-radius: 25px; + text-align: center; + position:absolute; + bottom: -15px; + margin: 0; +} + +.story-item:hover .story-item-img p +{ + background-color:red; +} + +.story-item-text +{ + width: 100%; + font-size: 10px; +} +.story-item-text h3 +{ + text-align: center; +} + +.product +{ + margin-top: 40px; + width:100%; + display: flex; + flex-direction: row; + justify-content: space-between; + flex-wrap: wrap; +} + +.hanger +{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.hanger h3 +{ + text-align: center; +} +.hanger h3::before +{ + content: url(./image/heart.png); + /* 有待理解 */ + display: inline-block; + vertical-align: middle; +} + +.sofa2 +{ + width:100%; + display: flex; + flex-direction: row; + justify-content: space-between; + /* flex-wrap: wrap; */ + align-items: center; + margin: 45px 0; +} +.sofa2-item +{ + width: 32%; + position: relative; +} +.sofa2-item img +{ + width: 100%; +} +.sofa2-item-text +{ + margin: 40px; + position: absolute; + top: 0; +} + +.sofa2-item-text img +{ + margin-top: 20px; + width: auto; +} + +.footer +{ + width:100%; + background-color: black; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.footer-text +{ + display: flex; + flex-direction: row; + justify-content: center; + align-items: baseline; +} + +.footer-text-item +{ + margin: 50px; + color:white; +} +.footer-text-item p +{ + width:150px; + font-size: 13px; + line-height: 26px; +} +.footer-text-item h3 +{ + color: white; + border-bottom: 2px white solid; +} + +.search form +{ + + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + width: 400px; + margin: 40px; + /* width: 300px; */ + position: relative; + height:30px; + border: gray; + border-radius: 25px; +} +.search input +{ + width: 100%; + height:100%; + border-radius: 25px; + background: gray; + border:0 gray; + padding:0; + +} +.search button +{ + + padding: 0; + background: gray; + position:absolute; + right: 20px; + border: 2px gray; + + border-radius: 50px; +} \ No newline at end of file diff --git "a/BO2\345\237\271\350\256\255\344\275\234\344\270\232/\344\275\225\346\230\216\346\230\237/\344\275\234\344\270\232.html" "b/BO2\345\237\271\350\256\255\344\275\234\344\270\232/\344\275\225\346\230\216\346\230\237/\344\275\234\344\270\232.html" new file mode 100644 index 0000000..e77502d --- /dev/null +++ "b/BO2\345\237\271\350\256\255\344\275\234\344\270\232/\344\275\225\346\230\216\346\230\237/\344\275\234\344\270\232.html" @@ -0,0 +1,219 @@ + + + + + + second work + + + + +
+ +
+ +
+
+
+

新品九折

+

detail view

+
+
+

新品九折

+

detail view

+
+
+ +
+

our product

+ +
+ +
+ + + +
+
+

会员专享

+

加入会员享八折购

+

detail view

+
+
+ +

Our Story

+

最新潮流

+ +
+ +
+
+ +

detail view

+
+
+

歌斯达,产品

+

包图网隶属于上海品图网络有限公司,作为国内第一家宣扬“包你满意”的设计素材网站,包图网立志打造一个解决国内设计素材质量参差不齐问题的设计网站。

+
+
+ +
+
+ +

detail view

+
+
+

歌斯达,产品

+

包图网隶属于上海品图网络有限公司,作为国内第一家宣扬“包你满意”的设计素材网站,包图网立志打造一个解决国内设计素材质量参差不齐问题的设计网站。

+
+
+ +
+
+ +

detail view

+
+
+

歌斯达,产品

+

包图网隶属于上海品图网络有限公司,作为国内第一家宣扬“包你满意”的设计素材网站,包图网立志打造一个解决国内设计素材质量参差不齐问题的设计网站。

+
+
+
+

Our Product

+

人气产品

+
+
+ +

这是一个标题
¥599

+
+
+ +

这是一个标题
¥599

+
+
+ +

这是一个标题
¥599

+
+
+ +

这是一个标题
¥599

+
+
+ +

这是一个标题
¥599

+
+
+
+
+ +
+

椅子专区

+ +
+
+
+ +
+

椅子专区

+ +
+
+
+ +
+

椅子专区

+ +
+
+
+
+ + + + diff --git a/README.md b/README.md index b695280..bd796f1 100644 --- a/README.md +++ b/README.md @@ -14,4 +14,5 @@ - 王江奎:https://blog.csdn.net/T_T233333333 - 赵磊:https://blog.csdn.net/VscODeFIGHTING -- 王晶:https://blog.csdn.net/as__ole \ No newline at end of file +- 王晶:https://blog.csdn.net/as__ole +- 何明星:https://blog.csdn.net/qq_37375547?spm=1001.2101.3001.5113 \ No newline at end of file -- Gitee