<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.shou{
/* border: 1px solid blue; */
width: auto;
height: 30px;
background-color: beige;
margin-top: 0;
}
.shou-r{
display: flex;
justify-content: flex-end;
margin: auto;
padding: 1px;
margin-top: 0px;
/* border: 1px solid rebeccapurple; */
}
ul
li{
list-style: none;
padding: 0px;
}
a{
text-decoration: none;
}
.header{
width: 100%;
height: 80px;
/* border: 1px solid red; */
}
.container{
width: 1200px;
height: 100%;
/* border: 2px solid blue; */
margin: auto;
background-color: beige;
}
.nav{
display: flex;
justify-content: space-between;
}
.nav>li{
height: 80px;
line-height: 80px;
padding: 0 15px;
}
.nav>li:first-child{
background-color: aquamarine;
}
.nav>:hover{
background-color: aquamarine;
}
.screen{
width: 9999px;
height: 9999px;
animation: 8s qwe infinite;
}
.screen img{
/* width: 100%;
height: 100%; */
float: left;
}
.pic{
height: 400px;
width: 1000px;
/* border: 1px solid red; */
overflow: hidden;
margin: auto;
}
@keyframes qwe{
0%{}
25%{ transform: translateX(0px);}
30%{ transform: translateX(-1000px);}
50%{ transform: translateX(-1000px);}
55%{ transform: translateX(-2000px);}
75%{ transform: translateX(-2000px);}
80%{ transform: translateX(-3000px);}
100%{ transform: translateX(-3000px);}
}
.content{
width: auto;
height:280px;
/* border: 1px solid red; */
display: flex;
margin-right: 50px;
margin-left: 80px;
}
.jingxu{
width: 368px;
height: 440px;
/* border: 2px solid red; */
text-align: center;
}
.jingxu img{
display: flex;
/* border: 1px solid blueviolet; */
/* width: auto; */
height: 250px;
text-align: center;
padding: 2px;
}
.search{
/* border: 1px solid red; */
text-align: right;
height: 40px;
}
.search input{
width: 300px;
height: 35px;
border-color: red;
margin-right: 0px;
}
.search button{
height: 35px;
background-color: cadetblue;
margin-right: 500px;
}
body{
background-color: antiquewhite;
}
.welcom{
font-weight: bold;
font-size: x-large;
margin-left: 65px;
}
</style>
</head>
<body>
<div class="shou">
<ul class="shou-r">
<!-- <span>欢迎来到农商城！</span> -->
<li><a href="">登录</a></li>
<span>|</span>
<li><a href="">注册</a></li>
<span>|</span>
<li><a href="">用户中心</a></li>
<span>|</span>
<li><a href="">购物车</a></li>
<span>|</span>
<li><a href="">我的订单</a></li>
</ul>
</div>
<div class="search">
<input type="search" name="" id="" placeholder="搜索商品">
<button type="button">搜索</button>
</div>
<div class="header">
<ul class="container nav">
<li><a href="">首页></a></li>
<li><a href="">产品分类></a></li>
<li><a href="">今日农产品推荐></a></li>
<li><a href="">优选农户></a></li>
<li><a href="">食谱推荐></a></li>
<li><a href="">更多><a></li>
<li><a href="">联系我们></a></li>
</ul>
</div>
<div class="pic">
<div class="screen">
<img src="img/OIP-C.jpg" height="400px" width="1000px">
<img src="img/oip01.jpg" height="400px" width="1000px">
<img src="img/R-C.jpg" height="400px" width="1000px">
<img src="img/oip02.jpg" height="400px" width="1000px">
</div>
</div>
<a href=""><font class="welcom">精品推荐</font></a>
<hr color="red" size="2px">
<div class="content">
<div class="jingxu">橙子<img src="img/pic01.jpg" width="300px" height="220px">￥20.00</div>
<div class="jingxu">甜枣<img src="img/pic04.jpg"width="300px" height="220px" >￥19.99</div>
<div class="jingxu">胡萝卜<img src="img/pic02.jpg" width="300px" height="220px">￥9.9</div>
<div class="jingxu">土豆<img src="img/pic03.jpg" width="300px" height="220px">￥10.00</div>
<!-- <div class="jingxu">洋葱<img src="img/pic05.jpg" width="400px" height="280px"></div> -->
</div>
<br>
<div class="content">
<div class="jingxu">橙子<img src="img/pic01.jpg" width="300px" height="220px">￥20.00</div>
<div class="jingxu">甜枣<img src="img/pic04.jpg"width="300px" height="220px" >￥19.99</div>
<div class="jingxu">胡萝卜<img src="img/pic02.jpg" width="300px" height="220px">￥9.9</div>
<div class="jingxu">土豆<img src="img/R-C.jpg" width="300px" height="220px">￥10.00</div>
<!-- <div class="jingxu">洋葱<img src="img/pic05.jpg" width="400px" height="280px"></div> -->
</div>
</body>
</html>
shouye.rar
需积分: 8 44 浏览量
2022-11-24
08:42:30
上传
评论
收藏 4.46MB RAR 举报
shouye.rar （10个子文件） 
shouye img 
pic03.jpg 658KB oip01.jpg 539KB OIP-C.jpg 40KB pic01.jpg 667KB oip02.jpg 185KB pic02.jpg 641KB pic05.jpg 620KB pic04.jpg 724KB R-C.jpg 516KB
day01.html 5KB资源评论
