From 7e954fee8590316ab897b5f84e8be68c57181217 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E4=BD=B3=E9=A2=96?= <3572749703@qq.com>
Date: Tue, 12 Nov 2024 10:08:08 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=8D=E4=B9=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../2024.11.6\345\244\215\344\271\2401.md" | 484 ++++++++++++++++++
.../2024.11.8\345\244\215\344\271\2402.md" | 358 +++++++++++++
2 files changed, 842 insertions(+)
create mode 100644 "\345\220\264\344\275\263\351\242\226/2024.11.6\345\244\215\344\271\2401.md"
create mode 100644 "\345\220\264\344\275\263\351\242\226/2024.11.8\345\244\215\344\271\2402.md"
diff --git "a/\345\220\264\344\275\263\351\242\226/2024.11.6\345\244\215\344\271\2401.md" "b/\345\220\264\344\275\263\351\242\226/2024.11.6\345\244\215\344\271\2401.md"
new file mode 100644
index 0000000..7d8c056
--- /dev/null
+++ "b/\345\220\264\344\275\263\351\242\226/2024.11.6\345\244\215\344\271\2401.md"
@@ -0,0 +1,484 @@
+# 练习
+1. 经典圣杯效果图
+
+
+css关键代码
+```css
+ *{
+ margin: 0;
+ padding: 0;
+ }
+ .all{
+ width: 100vw;
+ height: 100vh;
+ }
+ .top{
+ width: 100%;
+ height: 100px;
+ background-color: antiquewhite;
+ }
+ .content{
+ width: 100%;
+ height: calc(100vh - 200px);
+ display: flex;
+ }
+ .left{
+ width: 200px;
+ height: 100%;
+ background-color: aquamarine;
+ }
+ .center{
+ width: calc(100vw - 400px);
+ height: 100%;
+ background-color: rgb(255, 167, 167);
+ }
+ .right{
+ width: 200px;
+ height: 100%;
+ background-color: blueviolet;
+ }
+ .footer{
+ width: 100%;
+ height: 100px;
+ background-color: gray;
+ }
+ @media (max-width:600px){
+ .content{
+ flex-direction: column;
+ }
+ .left{
+ width: 100%;
+ height: 100px;
+ order: 2;
+ }
+ .center{
+ width: 100%;
+ height: calc(100% - 200px);
+ order: 1;
+ }
+ .right{
+ width: 100%;
+ height: 100px;
+ order: 3;
+ }
+ }
+```
+html关键代码
+```html
+
+```
+2. 携程效果图
+
+
+css关键代码
+```css
+ .header{
+ width: 325px;
+ height: 50px;
+ background-color: rgb(244,244,244);
+ /* position: fixed; */
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+
+ }
+ .h-left{
+ width: 271px;
+ height: 25px;
+ border-radius: 7px;
+ background-color: rgb(244,244,244);
+ box-shadow: 0px 1px 4px;
+ }
+ .h-left>div{
+ width: 30px;
+ height: 26px;
+ background: url(./images/xiecheng-sprite.png) no-repeat;
+ background-position: -65px -331px;
+ background-size: 125px;
+ float: left;
+ }
+ .h-left>p{
+ float: left;
+ margin: 0;
+ }
+ .h-right{
+ width: 35px;
+ height: 35px;
+
+ font-size: 12px;
+ text-align: center;
+ }
+ .h-right>div{
+ width: 30px;
+ height: 26px;
+ background: url(./images/xiecheng-sprite.png) no-repeat;
+ background-position: -70px -234px;
+ background-size: 125px;
+ margin-left: 3px;
+ }
+ .banner{
+ width: 325px;
+ height: 65px;
+
+ background: url(./images/xiecheng-focus.jpg) no-repeat;
+ background-size: 325px;
+ }
+ .viev{
+ width: 325px;
+ height: 60px;
+
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ }
+ .v-1,.v-2,.v-3,.v-4,.v-5{
+ width: 50px;
+ height: 46px;
+
+ font-size: 12px;
+ }
+ .v-1>div,.v-2>div,.v-3>div,.v-4>div,.v-5>div{
+ width: 30px;
+ height: 30px;
+ margin-left: 9px;
+ }
+ .v-1>div{
+ background: url(./images/xiecheng-localnav_bg.png) no-repeat;
+ background-size: 30px;
+ }
+ .v-2>div{
+ background: url(./images/xiecheng-localnav_bg.png) no-repeat;
+ background-size: 30px;
+ background-position: 0 -30px;
+ }
+ .v-3>div{
+ background: url(./images/xiecheng-localnav_bg.png) no-repeat;
+ background-size: 30px;
+ background-position: 0 -60px;
+
+ }
+ .v-4>div{
+ background: url(./images/xiecheng-localnav_bg.png) no-repeat;
+ background-size: 30px;
+ background-position: 0 -90px;
+ }
+ .v-5>div{
+ background: url(./images/xiecheng-localnav_bg.png) no-repeat;
+ background-size: 30px;
+ background-position: 0 -120px;
+ }
+ .hotel{
+ width: 321px;
+ height: 230px;
+
+ padding-left: 3px;
+ }
+ .h-top,.h-center,.h-bottom{
+ width: 315px;
+ height: 75px;
+
+ display: flex;
+ }
+ .h-top{
+ background:linear-gradient(to right,rgb(250,91,86),rgb(251,149,78));
+ border-top-left-radius: 18px;
+ }
+ .h-center{
+ background:linear-gradient(to right,rgb(76,147,236),rgb(83,186,237));
+ }
+ .h-bottom{
+ background:linear-gradient(to right,rgb(58,196,166),rgb(105,211,95));
+ border-bottom-left-radius: 18px;
+ }
+ .h-t1{
+ width: 103px;
+ height: 64px;
+ border: 1px solid rgb(255, 255, 255);
+ background: url(./images/xiecheng-hotel.png) no-repeat;
+ background-size: 110px;
+ background-position: -7px 30px;
+ text-align: center;
+ padding-top: 10px;
+ color: white;
+ /* border-right: 1px solid white; */
+ /* border-top-left-radius: 5px; */
+ }
+ .h-tt{
+ width: 230px;
+ height: 74px;
+
+ display: flex;
+ }
+ .h-tt>div{
+ display: flex;
+ flex-direction: column;
+ }
+ .h-t2,.h-t3,.h-t4,.h-t5{
+ width: 106px;
+ height: 36px;
+ line-height: 36px;
+ text-align: center;
+ border: 1px solid;
+ color: white;
+ }
+ .wifi{
+ width: 325px;
+ height: 114px;
+
+ display: flex;
+ flex-direction: column;
+ }
+ .w-all{
+ width: 325px;
+ height: 57px;
+ display: flex;
+ justify-content: space-around;
+ }
+ .w{
+ width: 55px;
+ height: 55px;
+
+ padding-left: 10px;
+ }
+ .w-1{
+ width: 40px;
+ height: 30px;
+ background: url(./images/xiecheng-subnav-bg.png) no-repeat;
+ background-size: 35px;
+ margin-left: 5px;
+ }
+ .ad{
+ width: 305px;
+ height: 50px;
+
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 10px;
+ }
+ .a-left{
+ width: 90px;
+ height: 30px;
+
+ background: url(./images/xiecheng-hot.png) no-repeat;
+ background-size: 95px;
+ background-position: 0px -18px;
+ }
+ .a-right{
+ width: 116px;
+ height: 25px;
+ line-height: 25px;
+ background: linear-gradient(to right ,rgb(248,86,116),rgb(252,106,183) );
+ font-size: 16px;
+ color: white;
+ border-radius: 20px;
+ text-align: center;
+ box-shadow: 0px 1px 6px black;
+ }
+ .city{
+ width: 325px;
+ height: 120px;
+
+ display: flex;
+ }
+ .c-left{
+ width: 160px;
+ height: 120px;
+
+ background: url(./images/xiecheng-pic1.jpg) no-repeat;
+ background-size: 160px;
+ }
+ .c-right{
+ width: 160px;
+ height: 120px;
+
+ background: url(./images/xiecheng-pic2.jpg) no-repeat;
+ background-size: 160px;
+ }
+ .footer{
+ width: 325px;
+ height: 140px;
+
+ display: flex;
+ flex-direction: column;
+ }
+ .footer>div{
+ width: 325px;
+ height: 70px;
+ display: flex;
+ }
+ .f-1,.f-2,.f-3,.f-4{
+ width: 160px;
+ height: 70px;
+
+ }
+ .f-1{
+ background: url(./images/xiecheng-pic3.jpg) no-repeat;
+ background-size: 160px 70px;
+ }
+ .f-2{
+ background: url(./images/xiecheng-pic4.jpg) no-repeat;
+ background-size: 160px 70px;
+ }
+ .f-3{
+ background: url(./images/xiecheng-pic5.jpg) no-repeat;
+ background-size: 160px 70px;
+ }
+ .f-4{
+ background: url(./images/xiecheng-pic6.jpg) no-repeat;
+ background-size: 160px 70px;
+ }
+```
+html关键代码
+```html
+
+```
\ No newline at end of file
diff --git "a/\345\220\264\344\275\263\351\242\226/2024.11.8\345\244\215\344\271\2402.md" "b/\345\220\264\344\275\263\351\242\226/2024.11.8\345\244\215\344\271\2402.md"
new file mode 100644
index 0000000..ab11fe7
--- /dev/null
+++ "b/\345\220\264\344\275\263\351\242\226/2024.11.8\345\244\215\344\271\2402.md"
@@ -0,0 +1,358 @@
+# 练习
+1. 京东效果图
+
+
+css关键代码
+```css
+ *{
+ margin: 0;
+ padding: 0;
+ }
+ .all{
+ width: 390px;
+ height: 940px;
+
+ }
+ .a1{
+ width: 100%;
+ height: 764px;
+ }
+ .top1,.top2{
+ width: 390px;
+ height: 44px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ color: rgb(255, 255, 255);
+ }
+ .top1{
+ background-color: rgb(51,52,51);
+ }
+ .top2{
+ position: sticky;
+ left: 0;
+ top: 0;
+ background-color: rgb(255, 0, 0);
+ }
+ .t1-left{
+ width: 20px;
+ height: 20px;
+
+ background: url(./images/dh5-close.png) no-repeat;
+ background-size: 20px;
+ }
+ .t1-center1{
+ width: 36px;
+ height: 36px;
+
+ background: url(./images/dh5-logo.png) no-repeat;
+ background-size: 35px;
+ }
+ .t1-center2{
+ width: 200px;
+ height: 20px;
+
+ }
+ .t1-right{
+ width: 100px;
+ height: 44px;
+ line-height: 44px;
+ text-align: center;
+ background-color: orange;
+ }
+ .t2-left{
+ width: 37px;
+ height: 37px;
+ margin-left: 5px;
+ background:url(./images/dh5-list.png) no-repeat;
+ background-size: 30px;
+ background-position: 1px 5px;
+ }
+ .t2-center{
+ width: 293px;
+ height: 34px;
+
+ display: flex;
+ background-color: white;
+ border-radius: 20px;
+ }
+ .t2-c1{
+ width: 30px;
+ height: 27px;
+ background: url(./images/dh5-left-jd.png) no-repeat;
+ background-size: 30px;
+
+ margin-top: 3px;
+ margin-left: 7px;
+ }
+ .t2-c2{
+ width: 30px;
+ height: 30px;
+ background: url(./images/dh5-jd-sprites.png) no-repeat;
+ background-position: -129px 0px;
+ background-size: 318px;
+ }
+ .t2-c3{
+ width: 200px;
+ height: 30px;
+ line-height: 30px;
+ text-align: center;
+
+ color: gray;
+ }
+ .t2-right{
+ width: 40px;
+ height: 30px;
+ line-height: 30px;
+ text-align: center;
+
+ }
+ .header{
+ width: 390px;
+ height: 155px;
+ background: url(./images/jdh5-banner.png) no-repeat;
+ background-size: contain;
+ background-color: red;
+ }
+ .ad{
+ width: 390px;
+ height: 135px;
+ display: flex;
+ }
+ .ad>img{
+ height: 135px;
+ }
+ .ad>img:nth-child(1),.ad>img:nth-child(3){
+ width: 100px;
+ height: 135px;
+ }
+ .ad>img:nth-child(2){
+ width: 190px;
+ height: 135px;
+ }
+ .shop{
+ width: 390px;
+ height: 150px;
+
+ display: flex;
+ flex-direction: column;
+ }
+ .shop>.sh-1{
+ display: flex;
+ justify-content: space-around;
+ }
+ .shop>.sh-1>div{
+ width: 67px;
+ height: 75px;
+
+ }
+ .shop>.sh-1>div>img{
+ width: 50px;
+ height: 50px;
+ margin-left: 3px;
+ }
+ .miaosha{
+ width: 390px;
+ height: 35px;
+ display: flex;
+ /* justify-content: space-between; */
+ align-items: center;
+ font-weight: bold;
+ }
+ .miao-1{
+ width: 80px;
+ height: 30px;
+ line-height: 30px;
+
+ text-align: center;
+ }
+ .miao-2{
+ width: 20px;
+ line-height: 30px;
+
+ text-align: center;
+ }
+ .miao-3{
+ width: 30px;
+ height: 30px;
+
+ background: url(./images/dh5-ms-dc.png) no-repeat center center;
+ background-size: 25px;
+ }
+ .miao-4{
+ width: 232px;
+ height: 30px;
+ line-height: 30px;
+
+ text-align: left;
+ }
+ .miao-5{
+ width: 20px;
+ height: 30px;
+
+ background: url(./images/dh5-ms-right.png) no-repeat center center;
+ background-size: 20px;
+ }
+ .goods{
+ width: 390px;
+ height: 100px;
+ display: flex;
+ justify-content: space-between;
+ padding-left: 3px;
+ }
+ .goods>div{
+ width: 62px;
+ height: 100px;
+
+ text-align: center;
+ color: red;
+ }
+ .goods>div>img{
+ width: 62px;
+ height: 70px;
+ }
+ .nianhuo{
+ width: 390px;
+ height: 180px;
+
+ display: flex;
+ justify-content: space-around;
+ }
+ .nianhuo>img{
+ width: 180px;
+ height: 180px;
+
+ }
+ .footer{
+ width: 390px;
+ height: 80px;
+ position: fixed;
+ left: 0;
+ bottom: 0;
+ display: flex;
+ justify-content: space-around;
+ background-color: white;
+ }
+ .footer>div{
+ width: 60px;
+ height: 80px;
+ line-height: 80px;
+ text-align: center;
+ }
+```
+html关键代码
+```html
+
+
+
+
+
打开京东APP，购物更轻松
+
立即打开
+
+
+
+
+
+
+
+
+
京东超市
+
+
+
+
京东超市
+
+
+
+
京东超市
+
+
+
+
京东超市
+
+
+
+
京东超市
+
+
+
+
+
+
京东超市
+
+
+
+
京东超市
+
+
+
+
京东超市
+
+
+
+
京东超市
+
+
+
+
京东超市
+
+
+
+
+
+
+
+
￥25
+
+
+
+
￥25
+
+
+
+
￥25
+
+
+
+
￥25
+
+
+
+
￥25
+
+
+
+
￥25
+
+
+
+
+
+
+
+
+ 
+ 
+