<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div,li{
list-style-type: none;
}
body{
width: 500px;
height: 781px;
}
/* 1.头部 */
#top{
width: 100%;
height: 37px;
background: red;
display: flex;
}
#top>.research{
width: 100%;
background: #b52600;
border-radius: 5px;
color:#fff;
margin:6px 10px 6px 0px;
display: flex;
justify-content: center;
align-items: center;
font-size:12px;
}
.icon{
height: 100%;
width: 37px;
}
#top>.icon{
padding-left:10px;
}
.research>.icon{
width: 15px;
}
/* 2.banner */
#banner>img{
width: 100%;
height: 157px;
}
/* 3.main */
#main{
width: 100%;
height: 200px;
display: flex;
justify-content:space-evenly;
flex-wrap:wrap;
border-bottom:1px solid #e4dfdf;
}
#main .icon{
width: 46px;
height: 46px;
border-radius: 50%;
}
.goods{
width:100px;
display: flex;
flex-direction:column;
justify-content: center;
align-items: center;
font-size:12px;
}
/* 4.news */
#news{
width: 100%;
height: 46px;
border-bottom:7px solid #e4dfdf;
display: flex;
}
#news img{
height: 100%;
}
#news .line{
align-self: center;
height: 80%;
width:1px;
background: #e4dfdf;
margin-right:20px;
}
#news .middle{
align-self: center;
height: 50%;
color:#ec3603;
border: 1px solid #ec3603;
border-radius: 5px;
}
#news .right{
align-self: center;
font-weight: 400;
}
/* 5.action */
#action{
width: 100%;
height: 250px;
display: flex;
font-size: 25px;
font-weight: bold;
}
/* 5.1.left */
#action>.left{
height: 100%;
width: 33%;
}
.tqg{
width: 100%;
height: 20px;
color:#d81e06;
font-size:20px;
padding-top:10px;
}
#action p{
margin: 0;
padding:0;
font-size:14px;
color:#c4bebe;
margin-left:5px;
margin-top:10px;
}
.hour,.minute,.second{
width: 14px;
height: 14px;
background: #000;
color:#fff;
font-size: 20px;
font-weight: lighter;
margin-left:5px;
}
.clock{
padding-bottom:10px;
}
#action>.left img{
height: 130px;
}
/* 5.2.right */
#action>.right{
height: 100%;
width: 67%;
}
/* 5.2.1.top */
.rightTop{
width: 100%;
height:50%;
display: flex;
justify-content:space-between;
}
.yhh{
width: 100%;
height: 20px;
color:#1296db;
font-size:20px;
padding-top:10px;
}
#word>p:last-child{
margin: 0;
padding:0;
margin-top:5px;
margin-left:5px;
color:#9bd3f1;
}
.picture{
padding-right:30px;
}
/* 5.2.2.bottom */
.rightBottom{
width: 100%;
height:50%;
display: flex;
}
.rightBottom>.shopping,.rightBottom>.list{
width: 50%;
height:100%;
}
.agj,.bmqd{
width: 100%;
height: 20px;
color:#d4237a;
font-size:20px;
padding-top:10px;
}
.pic03,.pic04{
width: 80px;
margin:auto 25px;
}
/* 6.foot */
#foot{
display: flex;
justify-content:space-evenly;
}
.footIcon{
flex-direction: column;
justify-content: center;
font-size: 12px;
}
.footIcon .icon{
width: 24px;
height: 24px;
}
</style>
</head>
<body>
<div id="top">
<svg t="1675660352282" class="icon" viewBox="0 0 1089 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2782" width="200" height="200"><path d="M-15.36 307.2q31.744 23.552 51.2 37.888t34.304 26.624 29.184 26.112 35.84 36.352q32.768 32.768 32.256 79.36t-20.992 108.032q-6.144 20.48-10.752 32.768t-9.728 24.064-11.776 26.112-17.92 37.888-28.16 59.392-41.472 91.136l-149.504-91.136q46.08-43.008 87.04-83.968 16.384-17.408 33.792-35.84t32.768-35.84 27.648-33.792 18.432-29.696q13.312-26.624 9.216-47.616t-15.36-35.328q-12.288-16.384-33.792-28.672l-113.664-69.632zM947.2 282.624q10.24 52.224 14.336 119.808 4.096 58.368 3.584 139.264t-11.776 183.296q-5.12 51.2-24.576 85.504t-47.616 55.808-61.952 31.744-68.608 13.312q-80.896 7.168-181.248-17.408l20.48-76.8 79.872 17.408q28.672 2.048 50.688-2.048t38.912-12.8 28.672-19.456 19.968-23.04q18.432-27.648 24.576-63.488l0-384q0-54.272-29.184-84.992t-82.944-38.4-129.536 5.632-167.936 46.08l56.32 16.384q-3.072 12.288-16.384 24.064t-30.72 34.304l336.896 0 0 63.488-191.488 0 0 125.952 190.464 0 0 66.56-38.912 0 67.584 167.936-106.496 45.056-20.48-71.68q-17.408 13.312-46.592 33.28t-70.656 37.376-94.208 29.696-118.272 10.24q-35.84 1.024-60.416-8.704t-40.96-26.112-25.6-37.376-13.312-43.52q-10.24-52.224 0-119.808l14.336-3.072 111.616 0q-1.024 10.24-3.584 24.064t-4.096 27.648-1.024 26.112 6.656 21.504q4.096 8.192 20.48 11.776t34.816 4.096 35.84 0.512l25.6 0 8.192 0 0-129.024-218.112 0 0-66.56 218.112 0 0-125.952-75.776 0q-17.408 17.408-31.744 35.328t-25.6 32.256q-13.312 17.408-24.576 32.768l-57.344-50.176q15.36-16.384 30.208-36.864t28.672-41.472 26.624-41.472 22.016-37.888q-16.384 6.144-31.744 13.312t-32.768 14.336q-16.384 20.48-34.304 40.448t-38.4 40.448q0 2.048-14.848-5.632t-33.28-17.92q-21.504-11.264-48.128-26.624 36.864-31.744 65.536-78.336t49.152-89.6q23.552-50.176 41.984-104.448l136.192 37.888q-4.096 11.264-9.216 22.528-5.12 10.24-11.264 24.064t-14.336 28.16q102.4-28.672 181.248-39.936t138.752-10.24 102.4 12.288 72.192 27.648q67.584 37.888 87.04 105.472zM577.536 705.536q20.48-8.192 39.936-17.408t35.84-22.528l-16.384-60.416 52.224-16.384-111.616 0 0 116.736zM66.56 270.336q-20.48 0-38.4-6.656t-31.232-18.432-20.992-27.136-7.68-33.792 7.68-34.304 20.992-27.648 31.232-18.432 38.4-6.656q19.456 0 36.864 6.656t30.72 18.432 20.992 27.648 7.68 34.304-7.68 33.792-20.992 27.136-30.72 18.432-36.864 6.656z" p-id="2783" fill="#ffffff"></path></svg>
<div class="research">
<svg t="1675660500397" class="icon" viewBox="0 0 1059 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3916" width="200" height="200"><path d="M463.65500237 773.18500475a352.19666903 352.19666903 0 1 1 352.19666903-352.19666904 352.57094797 352.57094797 0 0 1-352.19666904 352.19666904z m0-641.95110188a289.81681265 289.81681265 0 1 0 289.81681265 289.81681266A290.12871176 290.12871176 0 0 0 463.65500237 131.23390287z" p-id="3917" fill="#ffffff"></path><path d="M952.6506972 912.47922422a31.18992819 31.18992819 0 0 1-21.77057017-8.85793963L679.61406566 657.96941048a31.18992819 31.18992819 0 0 1 43.66589914-44.60159729l251.26606138 245.65187411a31.18992819 31.18992819 0 0 1-21.83294917 53.52191674z" p-id="3918" fill="#ffffff"></path></svg>
<span> 寻 找 宝 贝 店 铺 </span>
</div>
</div>
<div id="banner">
<img src="./img/banner.png" alt="">
</div>
<div id="main">
<div class="goods">
<svg t="1675663765165" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5998" width="200" height="200"><path d="M212.5 954.1c-4.2-33.2-3.7-66.3 3.6-99.1 3.3-14.7 7.3-29.1 19.5-40.5-28.1 2.5-51.2 13.4-68.6 34.5-27.6 33.5-30.4 70.5-13 109.7h60.5c-1.1-0.8-1.7-2.3-2-4.6zM513.9 888.1c-7.5 0.5-15.2-0.7-22.8 0.6-8.1 1.4-10.1 6.3-5.4 13 7 9.8 14.1
taobao-web-html
需积分: 0 23 浏览量
2023-02-13
19:06:16
上传
评论
收藏 609KB ZIP 举报
html1-taobaoweb.zip （15个子文件） 
html1-taobaoweb font 
demo.css 8KB
demo_index.html 20KB iconfont.ttf 8KB iconfont.css 1KB iconfont.json 3KB iconfont.woff2 5KB iconfont.js 36KB iconfont.woff 5KB img 
banner.png 327KB goods03.png 47KB goods04.png 31KB goods02.png 32KB goods01.png 90KB toutiao.png 34KB tb_index.html 109KB资源评论
