一个食品网站
仿照天天生鲜做的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0"> <meta http-equiv="X-UA-Compatible"
content="ie=edge"> <title>天天生鲜</title> <link rel="stylesheet"
href="css/reset.css"> <link rel="stylesheet" href="css/main.css">
<style>
/*轮播图 */
#lunbotu {
position: sticky;z-index: 100;top: 0;
width: 760px;
height: 270px;
overflow: hidden;
position: relative;
margin: 0px auto;
position: relative;
}
#banner {
height: 460px;
width: 6130px;
position: absolute;
transition: 2s;
left: 0px;
}
#banner img {
float: left;
}
#biao {
position: absolute;
top: 270px;
left: 43%;
}
#biao_1 {
height: 20px;
width: 20px;
border: 1px solid #000;
z-index: 10;
float: left;
list-style: none;
border-radius: 50%;
margin-left: 20px;
text-align: center;
cursor:pointer;
}
/*因为大部分的字体都是12px,颜色一致, 所以统一设置下*/ body{
font-size: 12px; color: #666666; } /*!--1.登录部分login -->*/
.login{
/*外层div 1280px 29px border:1px dddddd bac:f7f7f7*/ height: 29px; border-bottom: 1px solid #dddddd;
background-color: #f7f7f7; } /*<!--1.2 内层内容--> */ .login-content{
/*内层: 1200px 29px 居中*/ width: 1200px; height: 29px; margin:
0 auto; } /*<!--1.3 天天生鲜 h2-->*/ .login-content h2{
/*h2, 12px 666666; 设置行高 居中显示*/ line-height: 29px; } /*1.4右侧 的登录*/ .login-right{ width: 250px; height: 29px;
line-height: 29px; } /*<1.4.1已经登录部分div-->*/ .logined{ display:
none; } .logined a{ color: #ff8800; } /*1.4.2未登录+我的订单*/ .unlogin
a,.myorder a{ color: #666666; } .unlogin span,.myorder span{
margin: 0 10px; } .unlogin a:hover,.myorder a:hover{ color:
orange; } /*2.search部分*/ .search{ height: 90px; }
.search-content{ width: 1200px; height: 90px; margin: 0
auto; } /*2.1logo图标*/ .logo{ /*//注意: a标签行内属性, 不支持宽高,margin上下*/
display: inline-block; margin-left: 17px; margin-top: 28px; }
/*2.搜索框 div>form>input: text submit*/ .searchbar{ width: 618px;
height: 38px; border: 1px solid #37ab40; margin-top: 34px;
margin-left: 124px; } /*2.1内部的input*/ .searchbar input{
outline: none; border: 0; } .searchtext{ width: 515px;
height: 38px; line-height: 38px; text-indent: 38px;
background: url(../images/sprite.png) no-repeat 12px 9px; }
/*2.3搜索按钮*/ .searchtbtn{ width: 103px; height: 38px; color:
white; font-size: 14px; line-height: 38px;
background-color:#37ab40; } /*2.4.我的购物车 div >a+span*/ .mycar{
width: 200px; height: 40px; margin-top: 34px;
} .mycar a{ width: 158px; height: 38px; display: inline-block; background-color: #f7f7f7; border: 1px solid
#dddddd; font-size: 14px; color: #37ab40; text-indent: 37px; line-height: 38px; text-align: center;
background: url(../images/sprite.png) no-repeat 13px -43px;
float: left; } .mycar span{
color: white; background-color: #FD8824; font-size: 18px;
line-height: 40px; height: 40px; width: 40px; text-align:
center;
display: inline-block; float: left; } /*3.分类的文字*/
.category{ height: 40px; margin-top: 27px; border-bottom:
2px solid #37ab40; } .category-content{ width: 1200px; height:
40px; margin: 0 auto; } /*<!--3.1全部商品分类-->*/ .category-content
h3{
width: 200px; height: 40px; line-height: 40px;
text-align: center; font-size: 14px; color: white;
background-color: #37ab40;
float: left; } .category-content ul{ width: 600px;
height: 40px; margin-left: 34px; float: left; }
.category-content ul li{ height: 40px; line-height: 40px;
float: left; } .category-content ul li a{ height: 40px;
font-size: 14px; color: #666666; line-height: 40px;
display: inline-block; } .category-content ul span{ margin: 0
20px; } .category-content ul li a:hover{ color: orange; }
/*4.sldier*/ .slider{
height: 270px; } .slider-content{ width: 1200px; height:
270px; margin: 0 auto; background-color: lightcoral; }
/*4.1左侧列表*/ .categorylist{
background-color: #ffffff; width: 200px; height: 270px; }
.categorylist li{
width: 198px; height: 44px; border: 1px solid #eeeeee;
border-top: 0; line-height: 44px; text-align: center;
background: url(../images/sprite.png) no-repeat 35px -91px; }
.categorylist li:nth-of-type(2){ background:
url(../images/sprite.png) no-repeat 35px -141px; } .categorylist
li:nth-of-type(3){ background: url(../images/sprite.png)
no-repeat 35px -191px; } .categorylist li:nth-of-type(4){
background: url(../images/sprite.png) no-repeat 35px -241px; }
.categorylist li:nth-of-type(5){ background:
url(../images/sprite.png) no-repeat 35px -291px; } .categorylist
li:nth-of-type(6){ background: url(../images/sprite.png)
no-repeat 35px -339px; } .categorylist li a{ display:
inline-block; width: 198px; height: 44px; line-height:
44px; font-size: 14px; color: #333333; background:
url(../images/listarrow.jpg) no-repeat 182px 12px; } /*4.2中间的轮播图*/
.middleslider{
width: 760px; height: 270px; background-color: lightgreen;
position: relative; overflow: hidden;
} /*<!--4.2.1 内部的6张图片-->*/ .sliderimage{ width: 4560px; height: 270px; float: left; } .sliderimage li{ float: left; }
/*<!--4.2.2左右箭头-->*/ .leftarrow{ width: 19px; height: 25px;
position: absolute; left: 13px; top:120px; cursor:
pointer; background: url(../images/sprite.png) no-repeat -4px
-400px; } .rightarrow{ width: 19px; height: 25px;
position: absolute; right: 13px; top:120px; cursor:
pointer; background: url(../images/sprite.png) no-repeat -4px
-450px; } /*4.2.3小圆点*/ .points{ width: 760px; height: 11px; position: absolute; bottom: 10px; left: 0px; text-align:
center; } .points li{ margin: 0 5px; display: inline-block;
background-color: #9f9f9f; width: 11px; height: 11px;
border-radius: 50%; } .points .active{ background-color:
#cecece; } /*4.3ad*/ .ad{ float: left; width: 240px; height: 270px; font-size: 0; }
/*5.foods商品详情*/ .foods{ height: 335px; margin-top: 25px; }
.foods-content{
width: 1200px; height: 335px; margin: 0 auto; }
.foodstitle{ height: 35px; line-height: 35px; } .foodstitle
h5{ float: left; font-size: 16px; color: #37ab40;
margin-right: 20px; } .foodstitle .titlelist{ float: left;
} .foodstitle li{
float: left; margin-right:12px; } .foodstitle li a{ color:
#cecece; } .more{ color: #cecece; float: right; } /*5.2 左侧的图片*/ .foodpic{ width: 200px; height: 300px; float: left;
} /*5.3商品详情 右侧*/ .fooddetail{ float: left; width: 1000px;
height: 300px; } .fooddetail li{
float: left; width: 248px; height: 299px; border: 1px
solid #ededed; text-align: center; } .fooddetail li h5{
font-size: 14px; height: 50px; line-height: 50px;
margin-bottom: 10px; } .fooddetail li div{
font-size: 20px; color:red; font-weight: bold; height:
58px; line-height: 58px; margin-top:5px; } /* 右侧详情展示:ul>li
>h5+a>img+div
ul:1000px 300
li 249px 299px border 1px ededed
\h5 14px 居中 50px;
间距10
img 180 180
div:58px 20px 红色 居中*/ /*1.将一些标签的 margin和padding去掉*/ body,p,ul,ol,h1,h2,h3,h4,h5,h6,input,select,dd,dt{ margin: 0;
padding: 0; } /*2.去掉a标签的下划线*/ a{ text-decoration: none; } /*3.列表的
前面的小图标*/ ul,ol{ list-style: none; } /*4.清除浮动和塌陷的伪类*/
.clearfix:before,.clearfix:after{ content: ""; display: table;
} .clearfix:after{ clear:both; } .clearfix{ zoom:1; }
/*5.设置浮动*/ .lf{ float: left; } .rf{
float: right; } h1,h2,h3,h4,h5,h6{ font-size: 100%;
font-weight: normal; } </style> </head> <body>
<!--1.登录部分login 欢迎来到天天生鲜!--> <!--1.1 最外层的div--> <div
class="login">
<!--1.2 内层内容-->
<div class="login-content">
<!--1.3 天天生鲜 h2-->
<h2 class="lf">欢迎来到天天生鲜!</h2>
<!--1.4 登录-->
<div class="login-right rf">
<!--<1.4.1已经登录部分div-->
<div class="logined lf">
欢迎您:
<a href="">张三</a>
</div>
<!--<1.4.2未登录部分div-->
<div class="unlogin lf">
<a href="">登录</a>
<span>|</span>
<a href="">注册</a>
</div>
<!--<1.4.3 我的订单div-->
<div class="myorder lf">
<span>|</span>
<a href="">我的购物车</a>
<span>|</span>
<a href="">我的订单</a>
</div>
</div>
</div> </div>
<!--2.search部分--> <!--<2.1外层的div--> <div class="search">
<!--2.2内部的内容div-->
<div class="search-content">
<!--2.2.2搜索框 searchbar-->
<div class="searchbar lf">
<form action="">
<!--2.2.2.1文本输入框-->
<input type="text" placeholder="搜索" class="searchtext lf">
<!--2.2.2.2按钮-->
<input type="submit" value="搜索" class="searchtbtn lf">
</form>
</div>
<!--2.2.3我的购物车-->
<div class="mycar rf">
<a href="">我的购物车</a>
<span>0</span>
</div>
</div>
</div>
<!--3. 全部商品 category--> <div class="category">
<div class="category-content">
<!--3.1全部商品分类-->
<h3>全部商品分类</h3>
<!--3.2首页-->
<ul>
<li>
<a href="">首页</a>
</li>
<li>
<span>|</span>
</li>
<li>
<a href="">手机生鲜</a>
</li>
<li>
<span>|</span>
</li>
<li>
<a href="">捐赠时令果蔬</a>
</li>
<li>
<span>|</span>
</li>
<li>
<a href="">抽奖</a>
</li>
<li>
<span>|</span>
</li>
<li>
<a href="">免费领取解暑大西瓜 🍉</a>
</li>
</ul>
</div>
</div> <!--4.slider轮播图--> <div class="slider">
<div class="slider-content">
<!--4.1左侧分类列表-->
<ul class="categorylist lf">
<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>
<!--4.2中间的轮播图-->
<div class="middleslider lf">
<!--4.2.1 内部的6张图片-->
<div id="lunbotu" style="width: 760px;">
<div id="banner">
<img class="m" src="../img/001.jpg" />
<img class="m" src="../img/002.jpg" />
<img class="m" src="../img/003.jpg" />
<img class="m" src="../img/002.jpg" />
<img class="m" src="../img/002.jpg" />
</div>
<div id="biao">
<ul>
<li id="biao_1">1</li>
<li id="biao_1">2</li>
<li id="biao_1">3</li>
<li id="biao_1">4</li>
</ul>
</div>
</div>
</body> <script type="text/javascript">
var slid = document.getElementById("banner");
//var id = document.getElementById("bt");
var imgwidth = document.getElementsByClassName("m");
var oli=document.getElementsByTagName("li");
//console.log(oli);
//console.log(imgwidth );
var i =0;
auto();
oli[0].style.cssText="background:#ff6700;color:#fff;";
function auto(){
time = setInterval(function(){
i++;
if(i <= 4) {
slid.style.left = slid.offsetLeft - 760 + "px";
oli[i].style.cssText="background:#ff6700;color:#fff;";
oli[i-1].style.cssText="background:none;color:#000;";
} else {
slid.style.left ="0px";
oli[4].style.cssText="background:none;color:#000;";
oli[0].style.cssText="background:#ff6700;color:#fff;";
i=0;
}
console.log(i);
}, 4000)
}
for(var j=0;j<=4;j++){
//console.log(imgwidth[j].index);
imgwidth[j].index=j;
oli[j].index=j;
oli[j].onmouseover=function(){
this.style.cssText="background:#ff6700;color:#fff;"
this.onmouseout=function(){
this.style.cssText="background:none;color:#000;"
}
}
oli[j].onclick=function(){
clearInterval(time);
m=this.index;
slid.style.left=-m*760+"px";
i=m;
auto();
console.log(i);
}
}
</script>
</div>
<!--4.3ad广告部分-->
<div class="ad">
<a href="">
<img src="../img/004.jpg" alt="广告1">
</a>
<a href="">
<img src="../img/005.jpg" alt="广告2">
</a>
</div>
</div>
</div> <!--5.foods 商品详情--> <div class="foods">
<div class="foods-content">
<!--5.1title-->
<div class="foodstitle">
<h5>营养海鲜 🐋</h5>
<ul class="titlelist">
<li>
<span>|</span>
</li>
<li>
<a href="">大鲨鱼</a>
</li>
<li>
<a href="">小乌贼</a>
</li>
<li>
<a href="">小海豚</a>
</li>
</ul>
<a href="" class="more">查看更多></a>
</div>
<!--5.2左侧图片-->
<div class="foodpic">
<a href="">
<img src="../img/7f4638e9ce067b9a75f48c6fec3c3d3.jpg" alt="海鲜图">
</a>
</div>
<!--5.3右侧商品详情-->
<ul class="fooddetail">
<li>
<h5>基围虾</h5>
<a href="">
<img src="../img/26eba26678a41133452f61b8c978583.jpg" alt="基围虾">
</a>
<div>¥ 35</div>
</li>
<li>
<h5>海参</h5>
<a href="">
<img src="../img/006.jpg" alt="海参(有嚼劲)">
</a>
<div>¥ 35</div>
</li>
<li>
<h5>鱿鱼</h5>
<a href="">
<img src="../img/007.jpg" alt="鱿鱼">
</a>
<div>¥ 35</div>
</li>
<li>
<h5>花螺</h5>
<a href="">
<img src="../img/008.jpg" alt="花螺">
</a>
<div>¥ 35</div>
</li>
</ul>
</div>
</div>
<!--5.foods 商品详情--> <div class="foods">
<div class="foods-content">
<!--5.1title-->
<div class="foodstitle">
<h5>新鲜水果 🍌</h5>
<ul class="titlelist">
<li>
<span>|</span>
</li>
<li>
<a href="">芒果</a>
</li>
<li>
<a href="">加州提子</a>
</li>
<li>
<a href="">亚马孙牛油果</a>
</li>
</ul>
<a href="" class="more">查看更多></a>
</div>
<!--5.2左侧图片-->
<div class="foodpic">
<a href="">
<img src="../img/2cb579a977063f8796e24c031b3d874.jpg" alt="水果图">
</a>
</div>
<!--5.3右侧商品详情-->
<ul class="fooddetail">
<li>
<h5>西柚</h5>
<a href="7.html">
<img src="../img/009.jpg" alt="西柚">
</a>
<div>¥ 35</div>
</li>
<li>
<h5>苹果</h5>
<a href="8.html">
<img src="../img/010.jpg" alt="苹果">
</a>
<div>¥ 35</div>
</li>
<li>
<h5>西班牙大西瓜</h5>
<a href="">
<img src="../img/012.jpg" alt="西班牙大西瓜">
</a>
<div>¥ 35</div>
</li>
<li>
<h5>马尔代夫大菠萝</h5>
<a href="">
<img src="../img/011.jpg" alt="马尔代夫大菠萝">
</a>
<div>¥ 35</div>
</li>
</ul>
</div>
</div>
<!--5.foods 商品详情--> <div class="foods">
<div class="foods-content">
<!--5.1title-->
<div class="foodstitle">
<h5>绿色蔬菜🍆</h5>
<ul class="titlelist">
<li>
<span>|</span>
</li>
<li>
<a href="">西红柿</a>
</li>
<li>
<a href="">红辣椒</a>
</li>
<li>
<a href="">大黄瓜</a>
</li>
</ul>
<a href="" class="more">查看更多></a>
</div>
<!--5.2左侧图片-->
<div class="foodpic">
<a href="">
<img src="../img/5accf392931d7d9f86f513728243ad9.jpg" alt="蔬菜图">
</a>
</div>
<!--5.3右侧商品详情-->
<ul class="fooddetail">
<li>
<h5>西红柿</h5>
<a href="">
<img src="../img/014.jpg" alt="西红柿">
</a>
<div>¥ 35</div>
</li>
<li>
<h5>红辣椒</h5>
<a href="">
<img src="../img/015.jpg" alt="红辣椒">
</a>
<div>¥ 35</div>
</li>
<li>
<h5>大黄瓜</h5>
<a href="">
<img src="../img/013.jpg" alt="红辣椒">
</a>
<div>¥ 35</div>
</li>
<li>
<h5>小茄子</h5>
<a href="">
<img src="../img/016.jpg" alt="小茄子">
</a>
<div>¥ 35</div>
</li>
</ul>
</div>
</div>
<!--5.foods 商品详情--> <div class="foods">
<div class="foods-content">
<!--5.1title-->
<div class="foodstitle">
<h5>农家小食 🐤</h5>
<ul class="titlelist">
<li>
<span>|</span>
</li>
<li>
<a href="">纯牛奶</a>
</li>
<li>
<a href="">新鲜土鸡蛋</a>
</li>
<li>
<a href="">天山牦牛肉</a>
</li>
</ul>
<a href="" class="more">查看更多></a>
</div>
<!--5.2左侧图片-->
<div class="foodpic">
<a href="">
<img src="../img/31d5da7c87319fe5fc68ac4ecdfc36d.jpg" alt="鸡蛋图">
</a>
</div>
<!--5.3右侧商品详情-->
<ul class="fooddetail">
<li>
<h5>纯牛奶</h5>
<a href="">
<img src="../img/018.jpg" alt="纯牛奶">
</a>
<div>¥ 35</div>
</li>
<li>
<h5>小鸡蛋</h5>
<a href="">
<img src="../img/019.jpg" alt="小鸡蛋">
</a>
<div>¥ 35</div>
</li>
<li>
<h5>牦牛肉</h5>
<a href="">
<img src="../img/017.jpg" alt="牦牛肉">
</a>
<div>¥ 35</div>
</li>
<li>
<h5>土鸡蛋</h5>
<a href="">
<img src="../img/020.jpg" alt="土鸡蛋">
</a>
<div>¥ 35</div>
</li>
</ul>
</div>
</div> </body> </html>
效果如下所示
扫一扫
612
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
