第三次作业
1.淘宝商品页
代码
鲜花 淘宝搜索
*{
margin: 0px;
}
body{
height: 4000px;
}
.main-body{
background-color: #e3e3e8bf;
}
.content{
background-color: #f5f5f5;
color: #6C6C6C;
}
.content > span{
width: 80px;
height: 35px;
padding-left: 8px;
font-size: 13px;
}
.content > :nth-child(1),
.content > :nth-child(7){
margin-left:120px ;
}
.body{
margin: auto;
width: 1158px;
height: 97px;
}
.taobao > img{
margin-top: 25px;
padding-left: 50px;
}
.search{
background: #fff;
height: 42px;
width:540px ;
border: 2px solid #ff5000;
border-radius: 8px;
position: relative;
left: 280px;
bottom: 60px;
}
.search > span{
font-size: 14px;
position: relative;
/* top: 5px; */
left: 10px;
}
.input > input{
text-decoration: none;
border: 0;
outline: none;
position: relative;
}
.xiangji{
position: relative;
top: 6px;
}
.ss >button{
background: #ff6200;
border: 0;
border-radius: 4px;
color: #fff;
font-size: 14px;
font-weight: 40px;
height: 39px;
width: 58px;
position: relative;
bottom: 1px;
}
.main-footer{
height: 5000px;
background-color: #e3e3e8bf;
}
.footer{
background-color: #fff;
border-radius: 16px;
width: 1200px;
height: 1100px;
position: relative;
left: 180px;
top: 40px;
}
.footer > .f1,
.footer > .f2,
.footer > .f3,
.footer > .f4
{
width: 848px;
height: 70px;
float: left;
}
.f1 > :nth-child(1){
font-weight: 600;
font-size: 18px;
color: #11192d;
position: relative;
left: 30px;
top: 20px;
}
.f1 > :nth-child(2){
font-size: 18px;
font-weight: 500;
color: #50607A;
position: relative;
left: 60px;
top: 20px;
}
.f2 > :nth-child(1){
font-weight: 600;
font-size: 14px;
color: #11192d;
position: relative;
left: 30px;
top: 20px;
}
.f2 > :nth-child(2){
font-size: 14px;
color: #11192d;
position: relative;
left: 130px;
top: 20px;
}
.f3 > span{
font-size: 18px;
font-weight: 500;
position: relative;
top: 20px;
left: 30px;
}
.f4{
position: relative;
left: 20px;
}
.zg{
color: #000;
font-size: 20px;
font-weight: 700;
position: relative;
left: 45px;
top:20px;
}
.gg{
border: 1px solid #dcdcdc;
border-radius: 3px;
color: silver;
font-size: 12px;
font-weight: 400;
height: 20px;
width: 32px;
position: relative;
left:200px;
top:20px;
}
.columns{
display: grid;
width: 300px;
grid-template-columns: repeat(1,1fr);
height: 900px;
grid-template-rows: repeat(3,1fr);
position: relative;
top:70px;
left: 30px;
}
.columns1 > div,
.columns2 > div,
.columns3 > div{
height: 240px;
border-radius: 13px;
}
.c-price{
color: #f50;
font: 400 20px Arial;
}
.c-sell{
color: #50607a;
font-size:14px;
font-weight:400;
}
.columns1 > div{
background: url(https://img.alicdn.com/imgextra/i2/378790081/O1CN01ohfUsy1CT8wb6VzrH_!!0-saturn_solar.jpg_360x360q90.jpg_.webp) no-repeat center;
}
.columns2 > div{
background: url(https://g-search3.alicdn.com/img/bao/uploaded/i4/i2/2217317131231/O1CN01SFTaX61KxqVzjWQsM_!!0-item_pic.jpg_360x360q90.jpg_.webp) no-repeat center;
background-size: 300px;
}
.columns3 > div{
background: url(https://g-search1.alicdn.com/img/bao/uploaded/i4/i4/1023745037/O1CN01dqKoqk1n4zqXaCSa7_!!1023745037.jpg_360x360q90.jpg_.webp) no-repeat center;
background-size: 300px;
}
.rows1,
.rows2{
display: grid;
height: 380px;
width: 815px;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(1,1fr);
position: relative;
top: -650px;
left:40px;
}
.rows11 > div,
.rows12 > div,
.rows13 > div,
.rows21 > div,
.rows22 > div,
.rows23 > div{
border-radius: 13px;
height: 260px;
margin-left: 5px;
}
.r-price{
color: #FF6200;
font-size: 24px;
font-weight: 700;
}
.r-sell{
color: #50607a;
font-size: 14px;
}
.discount{
color: #FF6200;
font-size: 14px;
}
.shop{
font-size: 14px;
font-weight: 400;
color: #50607A;
}
.rows11 > div{
background: url(https://img.alicdn.com/imgextra/i4/378790081/O1CN01Z3V2vb1CT92Vc8jTW_!!0-saturn_solar.jpg_360x360q90.jpg_.webp) no-repeat center;
}
.rows12 > div{
background: url(https://g-search1.alicdn.com/img/bao/uploaded/i4/i1/2209111368792/O1CN01KLFneA2Eon3ozCSj0_!!2209111368792.jpg_360x360q90.jpg_.webp) no-repeat center;
}
.rows13 > div{
background: url(https://picasso.alicdn.com/imgextra/O1CNA1ntvumb2DOOjCF0ErZ_!!1636718599-0-psf.jpg_360x360q90.jpg_.webp) no-repeat center;
}
.rows21 > div{
background: url(https://g-search3.alicdn.com/img/bao/uploaded/i4/i1/2211939971885/O1CN01Um4hZN1PnNWTSwj5d_!!2211939971885.jpg_360x360q90.jpg_.webp) no-repeat center;
}
.rows22 > div{
background: url(https://g-search1.alicdn.com/img/bao/uploaded/i4/i4/2948486380/O1CN012OxbtI1x05mfOCLUG_!!2948486380.jpg_360x360q90.jpg_.webp) no-repeat center;
}
.rows23 > div{
background: url(https://g-search1.alicdn.com/img/bao/uploaded/i4/i4/2984300945/O1CN01N1rpAZ1Iqr8xnZYMA_!!2984300945.jpg_360x360q90.jpg_.webp) no-repeat center;
}
.end{
background-color: #fff;
border-radius: 16px;
width: 1200px;
height: 300px;
position: relative;
top: -3800px;
left: 180px;
}
.end > span{
color: #6c6c6c;
font-size: 13px;
}
.end > p{
color: #6c6c6c;
font-size: 13px;
position: relative;
left: 5px;
}
中国大陆
tb377753179
手机逛淘宝
网页无障碍
淘宝网首页
我的淘宝
购物车105
收藏夹
商品分类
免费开店
千牛卖家中心
帮助中心
宝贝
|
搜索
所有宝贝
天猫
产地:
云南省 法国 丹麦 肯尼亚 英国 比利时
综合 销量 信用 价格
618狂欢8.5折起
包邮
天猫
淘金币抵钱
全球购
天猫国际
掌柜热卖
广告
99朵玫瑰花束鲜花速递同城配送女友...
￥46.56
1万+人付款
茉莉花水培植物盆栽办公室内桌面好养...
￥5.1
1000+人付款
七夕情人节创意向日葵花束满天星花...
￥28.9
1000+人付款
乌梅子酱曼塔玫瑰花束鲜花速递全国同城配送女友团购生日附近花....
￥99.76
77累计付款 四川
店铺满100减5 淘金币已抵3.24元 包邮
挚爱此生鲜花总店
小香风碎冰蓝玫瑰永生花生日礼物情人节香皂花束表白送女朋友闺蜜...
￥39.70
400+人累计付款 北京
包邮
亨花草
创意生日礼物向日葵花束天然满天星玫瑰康乃馨干花表白送女友闺蜜...
￥24.71
4000+人累计付款 江西
淘金币已抵0.59元 包邮
爱达鲜花
永生花礼盒小熊玩偶花束闺蜜生日礼物女生男生中高考毕业季情人节...
￥35.80
400+人累计付款 浙江
跨店每300减50 包邮
哎呦礼品屋
草莓柿子花束柿柿如意针织向日葵送女友闺蜜生日毕业季情人节礼物...
￥36.07
7000+人累计付款 广东
跨店每300减50 淘金币已抵0.73元 极有家
印象时光
七夕节礼物巧克力糖果花束成品送男女友闺蜜节日生日礼物爱意表达...
￥30.73
300+人累计付款 江西
店铺满30减4 淘金币已抵1.07元 包邮
花饰间礼品店
阿里巴巴集团 | 淘宝网 | 天猫 | 聚划算 | 全球速卖通 | 阿里巴巴国际交易市场 | 1688 | 阿里妈妈 | 飞猪 | 阿里云计算 | AliOS | 阿里通信 | 一淘 | 万网 | 高德 | UC | 友盟 |
| 阿里安全 | 大麦网 | 钉钉 | 支付宝 | 优酷 | 土豆 | 阿里健康 | 阿里影业 | 网商银行 | 造点新货（众筹）|
关于淘宝 营销中心 廉正举报 联系客服 开放平台 诚征英才 联系我们 隐私权政策 法律声明 知识产权 不当竞争 举报 | © 2003-现在 Taobao.com 版权所有
增值电信业务经营许可:浙B2-20080224|增值电信业务经营许可证（跨地区）： B2-20150210|浙网文【2022】0403-017号|浙江省网络食品销售第三方平台提供者备案:浙网食A33010001|
互联网药品信息服务资格证书（浙）-经营性-2023-0008|短消息类服务接入代码使用证书:号【2016】00154-A01|信息网络传播视听许可证:1109364号|出版物网络交易平台服务经营备案号:新出发浙备字第002号|
浙公网安备 33010002000078号|浙B2-20080224-1|广播电视节目制作经营许可证（浙）字第01012号|市场名称登记证：工商网市字3301004120号|医疗器械网络交易服务第三方平台备案：（浙）网械平台备字
[2018]第00004号|中国扫黄打非网|全国文化和旅游市场网上举报投诉处理系统|全国12315平台|浙江省互联网违法和不良信息举报中心|全网举报|营业性演出许可证：浙演经20213300000069|
运行结果
2.淘宝收藏页
代码
收藏夹
*{
margin: 0px;
}
.head{
width: 100%;
height: 60px;
background-color: #F40;
margin-bottom: 10px;
}
.head > img{
margin-top: 16px;
position: relative;
left: 175px;
}
.head > :nth-child(2){
font-size: 17px;
color: #fff;
font-weight: 500;
position: relative;
left: 260px;
bottom: 6px;
}
.head > :nth-child(3){
font-size: 17px;
color: #fff;
font-weight: 500;
position: relative;
left: 310px;
bottom: 6px;
}
.head > input{
width: 200px;
height: 27px;
float: right;
position: relative;
top: 16px;
right: 250px;
}
.search{
border: 1px solid #fff;
color: #666;
font-size: 12px;
background: #f5f5f5;
height: 32px;
width: 72px;
float: right;
position: relative;
top: 16.5px;
right: -20px;
}
.title{
height: 40px;
width: 990px;
margin: auto;
border-bottom: #e5e5e5 2px solid;
}
.title > .t{
height: 40px;
width: 130px;
text-align: center;
color:#3c3c3c ;
font-size: 14px;
line-height: 40px;
display: inline-block;
position: relative;
/* top: 10px; */
}
.title > :nth-child(1){
color: #f40;
border-bottom: #ff4200 2px solid;
}
.title > .t1{
width: 68px;
height: 27px;
line-height: 27px;
border: #dcdcdc 1px solid;
text-align: center;
display: inline-block;
color: #6c6c6c;
position: relative;
left: 210px;
}
.input{
height: 30px;
width: 150px;
display: inline-block;
}
.input > input{
height: 25px;
width: 130px;
font-size: 12px;
border: #dcdcdc 1px solid;
position: relative;
left: 215px;
bottom: 2px;
}
.body{
margin: auto;
display: grid;
height: 1280px;
width: 1100px;
grid-template-columns: repeat(7,1fr);
grid-template-rows: repeat(6,1fr);
}
.body > div{
border: 1px solid rgb(228, 222, 223);
margin-left: 15px;
}
.img{
border: 1px solid red;
height: 148px;
}
.name{
color: #3c3c3c;
font-size: 12px;
}
.price{
color: #FF4400;
font-size: 12px;
font-weight: 600;
position: relative;
left: 20px;
}
.discount{
color: #9c9c9c;
font: 12px arial;
position: relative;
left: 20px;
}
.shop{
margin: 6px;
color: #000000;
font-size: 12px;
}
.body > div > img{
width: 30px;
height: 16px;
padding: 5px;
}
.footer{
margin: auto;
height: 1080px;
width: 1100px;
}
.footer > span,
.footer > p{
color: #6c6c6c;
font-size: 13px;
}
.good{
margin: auto;
height: 250px;
width: 1100px;
}
宝贝收藏
店铺收藏
搜索
全部宝贝51
降价11
失效13
同店宝贝
批量管理
镂空针织衫女夏季2024...
￥19.90
￥100.00
比收藏时降价80.10元
网红老爹鞋女2024新款...
￥129.90
￥188.80
降价58.90元
羽素祛痘大灯泡精华液...
￥169.00
￥469.00
降价10.00元
【618立抢】馥绿德雅...
￥598.00
皮筋女扎头头绳女生20...
￥2.80
￥6.90
专业型修眉刀女士专用...
￥5.80
纯欲裸色调镜面唇冻秋...
￥15.80
￥35.20
秋装搭配一整套2023新...
￥69.90
爆款炸街老爹鞋女款夏...
￥89.00
￥108.00
厚底增高老爹鞋chic百...
￥88.00
￥128.00
夏季薄款透气老爹鞋女...
￥69.00
118.00
比收藏时降价28.10元
静音键盘机械手感有线...
￥50.90
￥238.00
unurse尤娜丝医护级卫...
￥23.90
￥45.80
比收藏时降价8.10元
[商场同款]森马2024春...
￥109.00
￥270.00
比收藏时降价72.42元
克莱因蓝玫瑰卡包女小...
￥5.90
降价4.00元
无线鼠标荣耀Magic...
￥49.90
娇梦强遮光蚊帐大学生...
￥114.80
599.00
星球杯桶装巧克力杯饼...
￥8.20
13.20
比收藏时降价0.70元
倍思蓝牙耳机wm01无...
￥75.40
130.00
美式短袖白色内搭t恤女...
￥16.98
20.08
牛仔连衣裙女春装2024...
￥69.80
98.00
比收藏时降价18.20元
女装胖妹妹夏季新款小...
￥76.00
228.00
轻熟风高级感两件套法...
￥564.09
998.09
界扣a52原装适用充电...
￥9.55
￥19.11
沿寿降眼压调节护眼保...
￥399.90
高考专用裤子无磁无铁...
￥49.80
￥62.26
森系小香风牛仔外套女...
￥69.90
￥79.90
轻漫家乐福鞋2024新款...
￥148.00
699.00
英伦风小皮鞋女秋冬新...
￥59.90
89.90
英国Laishemum莱氏姆...
￥48.00
￥68.00
时尚部落软妹小皮鞋子...
￥58.80
￥108.00
深蓝色直筒牛仔裤女春...
￥68.00
￥108.00
oversize夹克棒球服女...
￥98.09
￥103.99
吊带背心女夏季薄内搭...
￥39.90
￥66.60
降价10.00元
品牌外贸出口剪标尾单~...
￥87.88
￥98.98
比收藏时下降20.09元
欧美潮牌麂皮字母短袖...
$26.80
￥36.00
灯芯绒衬衫外套女春...
￥47.95
￥48.00
胖mm牛角扣风衣外套...
￥217.00
￥309.00
vintage美式机能冲锋...
￥118.88
￥168.00
橙色奶系秋季卫衣国潮...
￥78.88
￥129.00
Konggeins日系复古秋...
￥98.90
#100.89
比收藏时降价1.00元
美式复古军绿色情侣...
￥100.89
￥190.90
阿里巴巴集团 | 淘宝网 | 天猫 | 聚划算 | 全球速卖通 | 阿里巴巴国际交易市场 | 1688 | 阿里妈妈 | 飞猪 | 阿里云计算 | AliOS | 阿里通信 | 一淘 | 万网 | 高德 | UC | 友盟 |
| 阿里安全 | 大麦网 | 钉钉 | 支付宝 | 优酷 | 土豆 | 阿里健康 | 阿里影业 | 网商银行 | 造点新货（众筹）|
关于淘宝 营销中心 廉正举报 联系客服 开放平台 诚征英才 联系我们 隐私权政策 法律声明 知识产权 不当竞争 举报 | © 2003-现在 Taobao.com 版权所有
增值电信业务经营许可:浙B2-20080224|增值电信业务经营许可证（跨地区）： B2-20150210|浙网文【2022】0403-017号|浙江省网络食品销售第三方平台提供者备案:浙网食A33010001|
互联网药品信息服务资格证书（浙）-经营性-2023-0008|短消息类服务接入代码使用证书:号【2016】00154-A01|信息网络传播视听许可证:1109364号|出版物网络交易平台服务经营备案号:新出发浙备字第002号|
浙公网安备 33010002000078号|浙B2-20080224-1|广播电视节目制作经营许可证（浙）字第01012号|市场名称登记证：工商网市字3301004120号|医疗器械网络交易服务第三方平台备案：（浙）网械平台备字
[2018]第00004号|中国扫黄打非网|全国文化和旅游市场网上举报投诉处理系统|全国12315平台|浙江省互联网违法和不良信息举报中心|全网举报|营业性演出许可证：浙演经20213300000069|
运行结果
淘宝登入页
代码
Taobao login | 淘宝登入页
*{
margin: 0px;
}
.head{
width: 1200px;
height: 130px;
}
.head > img{
width: 72px;
height: 45px;
position: relative;
left: 120px;
top: 55px;
}
.body{
background-image: url( https://gtms01.alicdn.com/tps/i1/TB1GTCYLXXXXXcHXpXXcoeQ2VXX-2500-600.jpg);
width: 1540px;
height: 650px;
background-size: cover;
background-position: 50%;
position: relative;
}
.login{
width: 350px;
height: 300px;
border-top: 2px solid #f40;
padding: 25px 25px 23px;
background-color: #fafafa;
background: #fff;
float: right;
position: relative;
top: 100px;
right: 150px;
}
.t1 , .t2{
font-size: 17px;
color: #3c3c3c;
font-weight: 800;
}
.t1{
border-bottom: 2px solid #3c3c3c;
}
.input > .text{
height: 36px;
width: 300px;
border: 2px solid #f1eeee;
position: relative;
left: 41px;
top: -15px;
}
.input > .password{
height: 36px;
width: 300px;
border: 2px solid #f1eeee;
position: relative;
left: 41px;
top: -41px;
}
.ewm > img{
width: 200px;
height: 56px;
float: right;
position: relative;
top: -25px;
left: 25px;
}
.submit > button{
width: 340px;
height: 42px;
border-radius: 3px;
color: #fff;
text-align: center;
background: #f40;
border-color: #f40;
font-size: 14px;
}
.eg > span{
color: #6c6c6c;
font-size: 12px;
margin-left: 10px;
float: right;
position: relative;
top: 20px;
}
密码登录
短信登录
登录
忘记密码
忘记账户名
免费注册
运行结果
文章版权声明：除非注明，否则均为主机测评原创文章，转载或复制请以超链接形式并注明出处。
