bmy/ClassContent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
历届学生/韩想/项目开发/练习项目/静态页面作业/赵俊凯/pc端/css/clear.css Normal file
View File

@@ -0,0 +1,13 @@
body,a,p,ul,li,h1,h2,h3,h4,h5,h6,input{
margin: 0;
padding: 0;
}
input {
outline: none;
}
li{
list-style: none;
}
a{
text-decoration: none;
}

246
历届学生/韩想/项目开发/练习项目/静态页面作业/赵俊凯/pc端/css/index.css Normal file
View File

@@ -0,0 +1,246 @@
.header{
width: 100%;
position: relative;
}
.header .logo{
width: 100%;
}
.header_conten{
position: absolute;
top: 136px;
left: 294px;
}
.conten_logo img:nth-child(1){
width: 281px;
margin-right: 24px;
}
.conten_logo img:nth-child(2){
width: 180px;
margin-bottom: 8px;
}
.header_conten p:nth-child(2){
margin-top: 10px;
color:rgb(255, 255, 255) ;
font-size: 15px;
}
.down{
width: 135px;
height: 40px;
background: #fff;
border-radius: 20px;
text-align: center;
line-height: 40px;
font-size: 14px;
color: rgb(46, 51, 58);
margin-top: 25px;
}
.down img{
width: 11px;
height: 18px;
vertical-align: sub;
}
.header_list{
width: 100%;
height: 43px;
background: rgb(0 0 0 / 70%);
line-height: 43px;
position: absolute;
bottom: 3px;
left: 0px;
}
.header_list img{
width: 16px;
height: 16px;
margin-left: 294px;
vertical-align: sub;
}
.header_list span{
color: rgb(255, 255, 255);
font-size: 12px;
transform: scaleY(0.75);
}
.content{
width: 100%;
}
.content_top{
width: 475px;
margin: 0 auto;
}
.content_top img{
width: 475px;
}
.content_top p{
font-family: PingFangSC-Regular;
font-size: 18px;
color: rgb(46, 51, 58);
margin-top: 10px;
text-align: center;
}
.content_tx{
display: flex;
justify-content: center;
margin-top: 45px;
}
.list{
width: 104px;
margin: 0px 28px;
text-align: center;
}
.list img{
width: 80px;
height: 80px;
}
.list p{
font-size: 14px;
color: rgb(46, 51, 58);
margin-top: 12px;
}
.pic{
width: 1330px;
margin: 0 auto;
position: relative;
margin-top: 25px;
margin-bottom: 60px;
}
.pic .lm{
width: 100%;
}
.pic_left{
position: absolute;
top: 227px;
left: 18px;
}
.pic_right{
position: absolute;
top: 227px;
right: 18px;
}
.pic_left img{
width: 26px !important;
height: 26px;
}
.pic_right img{
width: 26px !important;
height: 26px;
}
.pic .wm{
position: absolute;
top:175px;
left: 0px;
width: 100%;
}
.lw{
display: flex;
justify-content: center;
margin-top: 21px;
}
.lw_l{
position: relative;
}
.lw_l .bjt{
width: 368px;
z-index: -1;
}
.lw_ll{
position: absolute;
top: 80px;
left: 104px;
text-align: center;
}
.lw_ll .lwpic{
width: 158px;
display: block;
}
.lw_ll .lwwz{
width: 128px;
}
.lw_ll p{
line-height: 29px;
font-family: PingFangSC-Regular;
font-size: 21px;
color: rgba(46, 51, 58, 0.7);
margin-top: 17px;
}
.ty{
margin: 75px;
width: 1041px;
margin: 0 auto;
}
.ty_pic{
margin-top: 44px;
}
.ty_pic img{
width: 1041px;
}
.bq{
width: 371px;
background: rgb(255, 255, 255);
border-radius: 1vw;
box-shadow: rgba(0, 0, 0, 0.08) 0px 0.2vw 1.6vw 0px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
margin-top: 100px;
}
.bq_left{
margin-right: 10px;
}
.bq_left h3{
line-height: 24px;
font-family: PingFangSC-Regular;
font-size: 24px;
color: rgb(46, 51, 58);
font-weight: 500;
}
.bq_left p{
color: rgba(46, 51, 58, 0.804);
line-height: 19px;
font-size: 13px;
margin-top: 15px;
}
.bq img{
width: 159px;
margin: 15px 15px 15px 0px;
}
.footer{
margin-top: 105px;
background: rgb(255, 255, 255);
box-shadow: rgb(224, 224, 224) 0px -1px 0px 0px;
}
.footer_top{
width: 80%;
display: flex;
align-items: center;
justify-content: space-around;
margin: 0 auto;
padding-top: 52px;
}
.footer_top div img{
width: 47px;
margin-right: 12px;
vertical-align: middle;
}
.footer_top div span{
font-family: PingFangSC-Semibold;
font-size: 15px;
color: rgb(46, 51, 58);
}
.footer p{
margin-top: 40px;
text-align: center;
line-height: 42px;
}
.footer_dibu{
text-align: center;
margin-top: 70px;
margin-bottom: 17px;
}
.footer .footer_dibu img{
width: 80px;
margin-right: 18px;
}
.footer .footer_dibu .gh{
width: 18px;
}

20
历届学生/韩想/项目开发/练习项目/静态页面作业/赵俊凯/pc端/css/public.css Normal file
View File

@@ -0,0 +1,20 @@
.left{
float: left;
}
.right{
float: right;
}
.width_1226{
width: 1226px;
margin: 0 auto;
}
.center{
text-align: center;
}
.p_75{
padding: 0px 0.75rem;
box-sizing: border-box;
}

BIN
历届学生/韩想/项目开发/练习项目/静态页面作业/赵俊凯/pc端/image/banner.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 566 KiB

151
历届学生/韩想/项目开发/练习项目/静态页面作业/赵俊凯/pc端/index.html Normal file
View File

@@ -0,0 +1,151 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/public.css">
</head>
<body>
<div class="header">
<img class="logo" src="./image/banner.jpg" alt="">
<div class="header_conten">
<div class="conten_logo">
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/logo.svg" alt="">
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/bannerTag.png" alt="">
</div>
<p>原1号店于2020年7月22日正式升级为1号会员店，通过全场自营、精选商品模式，<br> 致力于为用户提供品质升级、超值天天低价、便捷省心的会员制购物体验。</p>
<div class="down">
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/icon_Mobile.svg" alt="">
<span>下载APP</span>
</div>
</div>
<div class="header_list">
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/icon_Notice.svg" alt="">
<span>1号店PC及H5调整公告</span>
</div>
</div>
<div class="content">
<div class="content_top">
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_jxpz.png" alt="">
<p>自营全站商品 以严格选品标准 精挑细选3000+最优好货</p>
</div>
<div class="content_tx">
<div class="list">
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_jxpzItem1.png" alt="">
<p>肉蛋果蔬</p>
</div>
<div class="list">
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_jxpzItem2_click.png" alt="">
<p>食品饮料</p>
</div>
<div class="list">
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_jxpzItem3.svg" alt="">
<p>服饰鞋包</p>
</div>
<div class="list">
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_jxpzItem4.png" alt="">
<p>餐厨日用</p>
</div>
<div class="list">
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_jxpzItem5_click.png" alt="">
<p>粮油速食</p>
</div>
<div class="list">
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_jxpzItem6_click.svg" alt="">
<p>精致小店</p>
</div>
</div>
<div class="pic">
<img class="lm" src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_mainBox2_1_2.png" alt="">
<div class="pic_left">
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/icon_banner_before_default.png" alt="">
</div>
<div class="pic_right">
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/icon_banner_after_default.png" alt="">
</div>
<img class="wm" src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_mainBox2_2_1.png" alt="">
</div>
<div class="wcsz">
<div class="content_top">
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_wcsz.png" alt="">
<p>入会专享超值好礼，天天低价</p>
</div>
<div class="lw">
<div class="lw_l">
<img class="bjt" src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_wcsz_bgm_1.png" alt="">
<div class="lw_ll">
<img class="lwpic" src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_wcsz_item1_1.png" alt="">
<img class="lwwz" src="https://www.yhd.com/yhdmember/static/media/img_wcsz_item1_2.d3f3daa2.png" alt="">
<p>首次入会专享<br>单件免运费</p>
</div>
</div>
<div class="lw_l">
<img class="bjt" src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_wcsz_bgm_2.png" alt="">
<div class="lw_ll">
<img class="lwpic" src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_wcsz_item2_1.png" alt="">
<img class="lwwz" src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_wcsz_item2_2.png" alt="">
<p>比价京东自营<br>全场会员价</p>
</div>
</div>
<div class="lw_l">
<img class="bjt" src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_wcsz_bgm_3.png" alt="">
<div class="lw_ll">
<img class="lwpic" src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_wcsz_item3_1.png" alt="">
<img class="lwwz" src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_wcsz_item3_2.png" alt="">
<p>到期没省出会费<br>全额赔付</p>
</div>
</div>
</div>
</div>
<div class="ty">
<div class="content_top">
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_wcsz.png" alt="">
<p>入会专享超值好礼，天天低价</p>
</div>
<div class="ty_pic">
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_fxty_1.png" alt="">
</div>
</div>
<div class="bq">
<div class="bq_left">
<h3>扫码下载APP<br>开启品质生活</h3>
<p>一期仅开放部分城市，<br>敬请期待。</p>
</div>
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/icon_qrCode.png" alt="" srcset="">
</div>
</div>
<div class="footer">
<div class="footer_top">
<div>
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/icon_footer_line1_1.svg" alt="">
<span>精选好货</span>
</div>
<div>
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/icon_footer_line1_2.png" alt="">
<span>天天低价</span>
</div>
<div>
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/icon_footer_line1_3.png" alt="">
<span>全场自营</span>
</div>
<div>
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/icon_footer_line1_4.png" alt="">
<span>京东物流</span>
</div>
</div>
<p>沪ICP备16050468号 | 经营证照 | 互联网药品信息服务资格证(沪)-经营性-2017-0006 | 违法和不良信息举报电话：4006063968 | 沪B2-20170039 | 沪公网安备 31010502002939号 | 增值电信业务经营许可证 <br>Copyright© 1号会员店 2007-2020， All Rights Reserved
</p>
<div class="footer_dibu">
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/icon_footer_line3_1.png" alt="">
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/icon_footer_line3_3.png" alt="">
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/icon_footer_line3_4.png" alt="">
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/icon_footer_line3_5.png" alt="">
<img class="gh" src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/icon_footer_line3_small.png" alt="">
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/icon_footer_line3_6.png" alt="">
</div>
</div>
</body>
</html>

13
历届学生/韩想/项目开发/练习项目/静态页面作业/赵俊凯/移动端/css/clear.css Normal file
View File

@@ -0,0 +1,13 @@
body,a,p,ul,li,h1,h2,h3,h4,h5,h6,input{
margin: 0;
padding: 0;
}
input {
outline: none;
}
li{
list-style: none;
}
a{
text-decoration: none;
}

290
历届学生/韩想/项目开发/练习项目/静态页面作业/赵俊凯/移动端/css/index.css Normal file
View File

@@ -0,0 +1,290 @@
.header{
width: 100%;
position: relative;
}
.header .logo{
width: 100%;
}
.header_conten{
position: absolute;
top: 136px;
left: 294px;
}
.conten_logo img:nth-child(1){
width: 281px;
margin-right: 24px;
}
.conten_logo img:nth-child(2){
width: 180px;
margin-bottom: 8px;
}
.header_conten p:nth-child(2){
margin-top: 10px;
color:rgb(255, 255, 255) ;
font-size: 15px;
}
.down{
width: 135px;
height: 40px;
background: #fff;
border-radius: 20px;
text-align: center;
line-height: 40px;
font-size: 14px;
color: rgb(46, 51, 58);
margin-top: 25px;
}
.down img{
width: 11px;
height: 18px;
vertical-align: sub;
}
.header_list{
width: 100%;
height: 43px;
background: rgb(0 0 0 / 70%);
line-height: 43px;
position: absolute;
bottom: 3px;
left: 0px;
}
.header_list img{
width: 16px;
height: 16px;
margin-left: 294px;
vertical-align: sub;
}
.header_list span{
color: rgb(255, 255, 255);
font-size: 12px;
transform: scaleY(0.75);
}
.content{
width: 100%;
}
.content_top{
width: 475px;
margin: 0 auto;
}
.content_top img{
width: 475px;
}
.content_top p{
font-family: PingFangSC-Regular;
font-size: 18px;
color: rgb(46, 51, 58);
margin-top: 10px;
text-align: center;
}
.content_tx{
display: flex;
justify-content: center;
margin-top: 45px;
}
.list{
width: 104px;
margin: 0px 28px;
text-align: center;
}
.list img{
width: 80px;
height: 80px;
}
.list .list_pic{
width: 104px;
height: 104px;
animation: fangda 1s;
}
.list .list_p{
display: none;
}
@keyframes fangda
{
0% { transform: scale(0.7);}
50% { transform: scale(1.3);}
75% { transform: scale(1.2);}
80% { transform: scale(1.15);}
8% { transform: scale(1.1);}
80% { transform: scale(1.05);}
100% { transform: scale(1);}
}
.list p{
font-size: 14px;
color: rgb(46, 51, 58);
margin-top: 12px;
}
.pic{
width: 1330px;
margin: 0 auto;
position: relative;
margin-top: 25px;
margin-bottom: 60px;
}
.pic .lm{
width: 100%;
}
.pic_left{
position: absolute;
top: 227px;
left: 18px;
}
.pic_right{
position: absolute;
top: 227px;
right: 18px;
}
.pic_left img{
width: 26px !important;
height: 26px;
}
.pic_right img{
width: 26px !important;
height: 26px;
}
.list_contentpic img{
display: none;
}
.pic .wm{
position: absolute;
left: 0px;
top: 175px;
width: 100%;
display: block;
opacity: 1;
animation: myfirst 1s;
}
@keyframes myfirst
{
from {top: 235px;opacity: 0.7;}
to {top:175px;opacity: 1;}
}
.lw{
display: flex;
justify-content: center;
margin-top: 21px;
}
.lw_l{
position: relative;
}
.lw_l .bjt{
width: 368px;
z-index: -1;
}
.lw_ll{
position: absolute;
top: 80px;
left: 104px;
text-align: center;
<<<<<<< HEAD
line-height: 1.25rem;
background-color: #f5f5f5;
border-radius: 0.611rem;
font-family: PingFang-SC-Medium;
font-size: 0.62rem;
letter-spacing: 0.03rem;
color: #666666;
margin-right: 0.425rem
}
.list_right{
display: flex;
=======
}
.lw_ll .lwpic{
width: 158px;
display: block;
}
.lw_ll .lwwz{
width: 128px;
}
.lw_ll p{
line-height: 29px;
font-family: PingFangSC-Regular;
font-size: 21px;
color: rgba(46, 51, 58, 0.7);
margin-top: 17px;
}
.ty{
margin: 75px;
width: 1041px;
margin: 0 auto;
}
.ty_pic{
margin-top: 44px;
}
.ty_pic img{
width: 1041px;
}
.bq{
width: 371px;
background: rgb(255, 255, 255);
border-radius: 1vw;
box-shadow: rgba(0, 0, 0, 0.08) 0px 0.2vw 1.6vw 0px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
margin-top: 100px;
}
.bq_left{
margin-right: 10px;
}
.bq_left h3{
line-height: 24px;
font-family: PingFangSC-Regular;
font-size: 24px;
color: rgb(46, 51, 58);
font-weight: 500;
}
.bq_left p{
color: rgba(46, 51, 58, 0.804);
line-height: 19px;
font-size: 13px;
margin-top: 15px;
}
.bq img{
width: 159px;
margin: 15px 15px 15px 0px;
>>>>>>> 37353744e548c75b412976417ba0895581678416
}
.footer{
margin-top: 105px;
background: rgb(255, 255, 255);
box-shadow: rgb(224, 224, 224) 0px -1px 0px 0px;
}
.footer_top{
width: 80%;
display: flex;
align-items: center;
justify-content: space-around;
margin: 0 auto;
padding-top: 52px;
}
.footer_top div img{
width: 47px;
margin-right: 12px;
vertical-align: middle;
}
.footer_top div span{
font-family: PingFangSC-Semibold;
font-size: 15px;
color: rgb(46, 51, 58);
}
.footer p{
margin-top: 40px;
text-align: center;
line-height: 42px;
}
.footer_dibu{
text-align: center;
margin-top: 70px;
margin-bottom: 17px;
}
.footer .footer_dibu img{
width: 80px;
margin-right: 18px;
}
.footer .footer_dibu .gh{
width: 18px;
}

20
历届学生/韩想/项目开发/练习项目/静态页面作业/赵俊凯/移动端/css/public.css Normal file
View File

@@ -0,0 +1,20 @@
.left{
float: left;
}
.right{
float: right;
}
.width_1226{
width: 1226px;
margin: 0 auto;
}
.center{
text-align: center;
}
.p_75{
padding: 0px 0.75rem;
box-sizing: border-box;
}

BIN
历届学生/韩想/项目开发/练习项目/静态页面作业/赵俊凯/移动端/image/banner.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 566 KiB

179
历届学生/韩想/项目开发/练习项目/静态页面作业/赵俊凯/移动端/index.html Normal file
View File

@@ -0,0 +1,179 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/public.css">
</head>
<body>
<div class="header">
<img class="logo" src="./image/banner.jpg" alt="">
<div class="header_conten">
<div class="conten_logo">
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/logo.svg" alt="">
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/bannerTag.png" alt="">
</div>
<p>原1号店于2020年7月22日正式升级为1号会员店，通过全场自营、精选商品模式，<br> 致力于为用户提供品质升级、超值天天低价、便捷省心的会员制购物体验。</p>
<div class="down">
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/icon_Mobile.svg" alt="">
<span>下载APP</span>
</div>
</div>
<div class="header_list">
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/icon_Notice.svg" alt="">
<span>1号店PC及H5调整公告</span>
</div>
</div>
<div class="content">
<div class="content_top">
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_jxpz.png" alt="">
<p>自营全站商品 以严格选品标准 精挑细选3000+最优好货</p>
</div>
<div class="content_tx">
<div class="list">
<img class="list_pic" src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_jxpzItem1.png" alt="">
<p class="list_p">肉蛋果蔬</p>
</div>
<div class="list">
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_jxpzItem2_click.png" alt="">
<p>食品饮料</p>
</div>
<div class="list">
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_jxpzItem3.svg" alt="">
<p>服饰鞋包</p>
</div>
<div class="list">
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_jxpzItem4.png" alt="">
<p>餐厨日用</p>
</div>
<div class="list">
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_jxpzItem5_click.png" alt="">
<p>粮油速食</p>
</div>
<div class="list">
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_jxpzItem6_click.svg" alt="">
<p>精致小店</p>
</div>
</div>
<div class="pic">
<img class="lm" src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_mainBox2_1_2.png" alt="">
<div class="pic_left">
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/icon_banner_before_default.png" alt="">
</div>
<div class="pic_right">
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/icon_banner_after_default.png" alt="">
</div>
<div class="list_contentpic">
<img class="wm" src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_mainBox2_2_1.png" alt="">
<img class="" src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_mainBox2_2_2.png" alt="">
<img class="" src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_mainBox2_2_3.png" alt="">
<img class="" src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_mainBox2_2_4.png" alt="">
<img class="" src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_mainBox2_2_5.png" alt="">
<img class="" src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_mainBox2_2_6.png" alt="">
</div>
</div>
<div class="wcsz">
<div class="content_top">
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_wcsz.png" alt="">
<p>入会专享超值好礼，天天低价</p>
</div>
<div class="lw">
<div class="lw_l">
<img class="bjt" src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_wcsz_bgm_1.png" alt="">
<div class="lw_ll">
<img class="lwpic" src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_wcsz_item1_1.png" alt="">
<img class="lwwz" src="https://www.yhd.com/yhdmember/static/media/img_wcsz_item1_2.d3f3daa2.png" alt="">
<p>首次入会专享<br>单件免运费</p>
</div>
</div>
<div class="lw_l">
<img class="bjt" src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_wcsz_bgm_2.png" alt="">
<div class="lw_ll">
<img class="lwpic" src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_wcsz_item2_1.png" alt="">
<img class="lwwz" src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_wcsz_item2_2.png" alt="">
<p>比价京东自营<br>全场会员价</p>
</div>
</div>
<div class="lw_l">
<img class="bjt" src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_wcsz_bgm_3.png" alt="">
<div class="lw_ll">
<img class="lwpic" src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_wcsz_item3_1.png" alt="">
<img class="lwwz" src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_wcsz_item3_2.png" alt="">
<p>到期没省出会费<br>全额赔付</p>
</div>
</div>
</div>
</div>
<div class="ty">
<div class="content_top">
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_wcsz.png" alt="">
<p>入会专享超值好礼，天天低价</p>
</div>
<div class="ty_pic">
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_fxty_1.png" alt="">
</div>
</div>
<div class="bq">
<div class="bq_left">
<h3>扫码下载APP<br>开启品质生活</h3>
<p>一期仅开放部分城市，<br>敬请期待。</p>
</div>
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/icon_qrCode.png" alt="" srcset="">
</div>
</div>
<div class="footer">
<div class="footer_top">
<div>
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/icon_footer_line1_1.svg" alt="">
<span>精选好货</span>
</div>
<div>
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/icon_footer_line1_2.png" alt="">
<span>天天低价</span>
</div>
<div>
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/icon_footer_line1_3.png" alt="">
<span>全场自营</span>
</div>
<div>
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/icon_footer_line1_4.png" alt="">
<span>京东物流</span>
</div>
</div>
<p>沪ICP备16050468号 | 经营证照 | 互联网药品信息服务资格证(沪)-经营性-2017-0006 | 违法和不良信息举报电话：4006063968 | 沪B2-20170039 | 沪公网安备 31010502002939号 | 增值电信业务经营许可证 <br>Copyright© 1号会员店 2007-2020， All Rights Reserved
</p>
<div class="footer_dibu">
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/icon_footer_line3_1.png" alt="">
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/icon_footer_line3_3.png" alt="">
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/icon_footer_line3_4.png" alt="">
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/icon_footer_line3_5.png" alt="">
<img class="gh" src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/icon_footer_line3_small.png" alt="">
<img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/icon_footer_line3_6.png" alt="">
</div>
</div>
</body>
<script>
var tabTitle = document.querySelectorAll(".list img");
var tabContent = document.querySelectorAll(".list_contentpic img")
var list = document.querySelectorAll(".list p");
console.log(tabTitle);
tabTitle.forEach(function(val,index){
val.onmouseover = function() {
tabTitle.forEach(function(v,i) {
v.className = ""
tabContent[i].className = ""
list[i].className=""
})
val.className = "list_pic"
tabContent[index].className = "wm"
list[index].className = "list_p"
}
})
</script>
</html>

16
历届学生/韩想/项目开发/练习项目/静态页面作业/韩想/PC端/css/clear.css Normal file
View File

@@ -0,0 +1,16 @@
/* 专门用来重置浏览器默认样式的 */
body, p,ul,li,h1,h2,h3,h4,h5,h6,input{
margin: 0;
padding: 0;
}
input {
outline: none;
}
li {
list-style: none;
}
a {
text-decoration: none;
}

0
历届学生/韩想/项目开发/练习项目/静态页面作业/韩想/PC端/css/index.css Normal file
View File

16
历届学生/韩想/项目开发/练习项目/静态页面作业/韩想/PC端/css/public.css Normal file
View File

@@ -0,0 +1,16 @@
/* 存放公共css的 */
.theme_red {
color: blue;
}
.left {
float: left;
}
.right {
float: right;
}
.p_14 {
padding: 0 14px;
}

0
历届学生/韩想/项目开发/练习项目/静态页面作业/韩想/PC端/index.html Normal file
View File

16
历届学生/韩想/项目开发/练习项目/静态页面作业/韩想/移动端/css/clear.css Normal file
View File

@@ -0,0 +1,16 @@
/* 专门用来重置浏览器默认样式的 */
body, p,ul,li,h1,h2,h3,h4,h5,h6,input{
margin: 0;
padding: 0;
}
input {
outline: none;
}
li {
list-style: none;
}
a {
text-decoration: none;
}

386
历届学生/韩想/项目开发/练习项目/静态页面作业/韩想/移动端/css/index.css Normal file
View File

@@ -0,0 +1,386 @@
.sousuo{
width: 22rem;
height: 1.475rem;
background-color: #eeeeee;
border-radius: 0.725rem;
font-family: PingFang-SC-Medium;
font-size: 0.634rem;
line-height: 1.475rem;
letter-spacing: 0.033rem;
color: #999999;
margin-top: 1rem;
margin-bottom: 1rem;
margin: 0 auto;
margin-left: 0.225rem;
}
.head_shang{
margin-top: 0.9rem;
width: 22rem;
margin: 0 auto;
}
.sousuo img{
width: 0.575rem;
height: 0.575rem;
margin-left: 0.675rem;
vertical-align: middle
}
.zhuanjia img{
width: 22rem;
height: 9rem;
padding-left: 0.5em;
padding-right: 0.5rem;
}
.zhuanjia{
width: 23rem;
margin: 0 auto;
}
.jiankang img{
width: 10rem;
height: 6rem;
margin-left: 0.8rem;
padding-right: 0.5rem;
}
.jiankang{
width: 23rem;
display: flex;
justify-content: space-between;
margin: 0 auto;
}
.zhuanjia{
margin: 0 auto;
width: 22.5rem;
margin-top: 1rem;
}
.zhengxing{
width: 23rem;
margin: 0 auto;
margin-top: 1rem;
}
.zhengxing img{
width: 22rem;
height: 7rem;
padding-left: 0.5rem;
padding-right: 0.5rem ;
}
.huizhen span{
font-family: STHupo;
font-size: 1rem;
font-weight: normal;
font-style: italic;
font-stretch: normal;
line-height: 2rem;
letter-spacing: 0rem;
color: #0ecfea;
}
.huizhen{
width: 23rem;
display: flex;
margin: 0 auto;
}
.huizhen_content{
display: flex;
width: 22rem;
justify-content: space-around;
margin-bottom: 1rem;
margin: 0 auto;
margin-left: 0.5rem;
}
.huizhen_content img{
width: 3rem;
height: 3rem;
margin-left: 0.5rem;
}
.huizhen_content .p{
width: 3rem;
height: 1rem;
font-family: PingFang-SC-Medium;
font-size: 1rem;
font-weight: normal;
font-stretch: normal;
line-height: 2rem;
letter-spacing: 0rem;
color: #333333;
}
.huizhen_title img:first-child{
width: 5rem;
margin-bottom: 0.5rem;
}
.huizhen_title img:nth-child(2),.huizhen_title img:nth-child(4){
width: 1rem;
height: 1rem;
}
.huizhen_title img:last-child{
width: 5rem;
}
.content_health p1{
height: 1rem;
font-family: SourceHanSansCN-Regular;
font-size: 1rem;
font-weight: normal;
font-stretch: normal;
line-height: 2rem;
letter-spacing: 0rem;
color: #969696;
margin-left: 7.3rem;
}
/* .fuli p1{
text-align: center;
} */
.huizhen_title{
margin-left: 2.5rem;
}
.tijian{
display: flex;
justify-content: space-between;
width: 22rem;
margin: 0 auto;
margin-left: 0.5rem;
}
.tijian img{
width: 10rem;
height: 5rem;
}
.hos_title{
display: flex;
justify-content: space-between;
width: 22rem;
margin: 0 auto;
}
.hos_title span{
font-family: PingFang-SC-Bold;
font-size: 1rem;
font-weight: normal;
font-stretch: normal;
line-height: 1rem;
letter-spacing: 0rem;
color: #333333;
margin-left: 0.5rem;
}
.hos_title a{
font-family: PingFang-SC-Medium;
font-size: 1rem;
font-weight: normal;
font-stretch: normal;
line-height: 1rem;
letter-spacing: 0rem;
color: #999999;
margin-right: 1rem;
margin-bottom: 1rem;
}
.hos_list{
overflow-x: scroll;
width: 22rem;
margin: 0 auto;
}
.hos_list ul{
display: flex;
}
.hos_list ul .act{
height: 1.25rem;
background-color: #dfeafe;
color: #4081f9;
}
.hos_list ul li{
height: 1.25rem;
width: 4.725rem;
text-align: center;
line-height: 1.25rem;
background-color: #f5f5f5;
border-radius: 0.611rem;
font-family: PingFang-SC-Medium;
font-size: 0.62rem;
letter-spacing: 0.03rem;
color: #666666;
margin-right: 0.425rem
}
.hos_content_list{
margin-left: 1rem;
}
.list_left img{
width: 5rem;
height: 4rem;
}
.comment img{
width: 4rem;
height: 1rem;
}
.comment .span{
width: 3rem;
height: 1rem;
font-family: PingFang-SC-Medium;
font-size: 1rem;
font-weight: normal;
font-stretch: normal;
line-height: 2rem;
letter-spacing: 0rem;
color: #999999;
}
.xiaoshou{
display: flex;
}
.hos_content_list{
display: flex;
margin-top: 1rem;
}
.list_right{
margin-left: 1rem;
}
.footer {
position: fixed;
width: 100%;
height: 50px;
background: #fff;
display: flex;
justify-content: space-around;
bottom: 0;
box-shadow: rgba(0, 0, 0, 0.1) 0px -2px 4px;
align-items: center;
}
.footer_item {
text-align: center;
}
.footer_item i{
font-size: 18px;
}
.footer_item p{
font-size: 12px;
color: #8e8e93;
}

16
历届学生/韩想/项目开发/练习项目/静态页面作业/韩想/移动端/css/public.css Normal file
View File

@@ -0,0 +1,16 @@
/* 存放公共css的 */
.theme_red {
color: blue;
}
.left {
float: left;
}
.right {
float: right;
}
.p_14 {
padding: 0 14px;
}

BIN
历届学生/韩想/项目开发/练习项目/静态页面作业/韩想/移动端/img/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

BIN
历届学生/韩想/项目开发/练习项目/静态页面作业/韩想/移动端/img/3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
历届学生/韩想/项目开发/练习项目/静态页面作业/韩想/移动端/img/33.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

BIN
历届学生/韩想/项目开发/练习项目/静态页面作业/韩想/移动端/img/42.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 186 KiB

BIN
历届学生/韩想/项目开发/练习项目/静态页面作业/韩想/移动端/img/xingxing.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
历届学生/韩想/项目开发/练习项目/静态页面作业/韩想/移动端/img/医生.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
历届学生/韩想/项目开发/练习项目/静态页面作业/韩想/移动端/img/家庭医生_营养顾问.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
历届学生/韩想/项目开发/练习项目/静态页面作业/韩想/移动端/img/形状3拷贝.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
历届学生/韩想/项目开发/练习项目/静态页面作业/韩想/移动端/img/矩形14拷贝.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/韩想/项目开发/练习项目/静态页面作业/韩想/移动端/img/立即预订.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 355 KiB

BIN
历届学生/韩想/项目开发/练习项目/静态页面作业/韩想/移动端/img/组34拷贝.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

260
历届学生/韩想/项目开发/练习项目/静态页面作业/韩想/移动端/index.html Normal file
View File

@@ -0,0 +1,260 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>移动端</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1995569_3pkdv3cihgm.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1995569_cu0qpjf9y8d.css">
<style>
html {
font-size: 20px;
}
@media only screen and (min-width: 400px) {
html {
font-size: 21.33333333px !important;
}
}
@media only screen and (min-width: 414px) {
html {
font-size: 22.08px !important;
}
}
@media only screen and (min-width: 480px) {
html {
font-size: 25.6px !important;
}
}
</style>
</head>
<body>
<div class="head">
<div class="head_shang">
<div class="sousuo">
<img src="./image/3.png" alt="">
输入搜索内容
</div>
</div>
<div class="head_xia">
<div class="zhuanjia">
<img src="./img/立即预订.png" alt="">
</div>
<div class="jiankang">
<img src="./img/33.png" alt="">
<img src="./img/家庭医生_营养顾问.png" alt="">
</div>
</div>
</div>
<div class="content">
<div class="content_health">
<div class="huizhen">
<div class="huizhen_title">
<img src="./img/形状3拷贝.png" alt="">
<img src="./img/矩形14拷贝.png" alt="">
<span>健康服务</span>
<img src="./img/矩形14拷贝.png" alt="">
<img src="/img/形状3拷贝.png" alt="">
</div>
</div>
<p1>您所得的福利保障</p1>
<div class="huizhen_content">
<ul>
<li>
<img src="./img/医生.png" alt="">
<p>西医会诊</p>
</li>
</ul>
<ul>
<li>
<img src="./img/医生.png" alt="">
<p>西医会诊</p>
</li>
</ul>
<ul>
<li>
<img src="./img/医生.png" alt="">
<p>西医会诊</p>
</li>
</ul>
<ul>
<li>
<img src="./img/医生.png" alt="">
<p>西医会诊</p>
</li>
</ul>
</div>
<div class="tijian">
<img src="./img/组34拷贝.png" alt="">
<img src="./img/组34拷贝.png" alt="">
</div>
</div>
<div class="meirong">
<div class="tijian"></div>
<div class="zhengxing">
<img src="./img/42.png" alt="">
</div>
</div>
<div class="hospital">
<div class="hos_title">
<span>
附近医院
</span>
<a href="">查看更多</a>
</div>
<div class="hos_list">
<ul>
<a href="">
<li class="act">全部</li>
</a>
<a href="">
<li>妇产医院</li>
</a>
<a href="">
<li>妇产医院</li>
</a>
<a href="">
<li>妇产医院</li>
</a>
<a href="">
<li>妇产医院</li>
</a>
<a href="">
<li>妇产医院</li>
</a>
</ul>
</div>
<div class="hos_content">
<div class="hos_content_list">
<div class="list_left">
<img src="./img/2.png" alt="">
</div>
<div class="list_right">
<div class="address">安徽中山医院</div>
<div class="comment">
<img src="./img/xingxing.png" alt="">
<span>5.0评分&nbsp;&nbsp;月售586</span>
</div>
<div class="tjjg">
<span>体检:</span><i class="iconfont icon-renminbi1"></i><span>752起</span>
</div>
</div>
</div>
</div>
<div class="hos_content">
<div class="hos_content_list">
<div class="list_left">
<img src="./img/2.png" alt="">
</div>
<div class="list_right">
<div class="address">安徽中山医院</div>
<div class="comment">
<img src="./img/xingxing.png" alt="">
<span>5.0评分&nbsp;&nbsp;月售586</span>
</div>
<div class="tjjg">
<span>体检:</span><i class="iconfont icon-renminbi1"></i><span>752起</span>
</div>
</div>
</div>
</div>
<div class="hos_content">
<div class="hos_content_list">
<div class="list_left">
<img src="./img/2.png" alt="">
</div>
<div class="list_right">
<div class="address">安徽中山医院</div>
<div class="comment">
<img src="./img/xingxing.png" alt="">
<span>5.0评分&nbsp;&nbsp;月售586</span>
</div>
<div class="tjjg">
<span>体检:</span><i class="iconfont icon-renminbi1"></i><span>752起</span>
</div>
</div>
</div>
</div>
<div class="hos_content">
<div class="hos_content_list">
<div class="list_left">
<img src="./img/2.png" alt="">
</div>
<div class="list_right">
<div class="address">安徽中山医院</div>
<div class="comment">
<img src="./img/xingxing.png" alt="">
<span>5.0评分&nbsp;&nbsp;月售586</span>
</div>
<div class="tjjg">
<span>体检:</span><i class="iconfont icon-renminbi1"></i><span>752起</span>
</div>
</div>
</div>
</div>
<div class="hos_content">
<div class="hos_content_list">
<div class="list_left">
<img src="./img/2.png" alt="">
</div>
<div class="list_right">
<div class="address">安徽中山医院</div>
<div class="comment">
<img src="./img/xingxing.png" alt="">
<span>5.0评分&nbsp;&nbsp;月售586</span>
</div>
<div class="tjjg">
<span>体检:</span><i class="iconfont icon-renminbi1"></i><span>752起</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="footer_item">
<i class="iconfont icon-shouye"></i>
<p>首页</p>
</div>
<div class="footer_item">
<i class="iconfont icon-shouye"></i>
<p>健康管理</p>
</div>
<div class="footer_item">
<i class="iconfont icon-shouye"></i>
<p>商城</p>
</div>
<div class="footer_item">
<i class="iconfont icon-shouye"></i>
<p>订单</p>
</div>
<div class="footer_item">
<i class="iconfont icon-shouye"></i>
<p>我的</p>
</div>
</div>
</body>
</html>