一.html部分代码
<!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/index.css"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> </head> <body> <!-- 网页头部导航--> <div class="webtop"> <ul> <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="nav"> <div class="left1"> <img src="./images/logo.png" alt=""> </div> <div class="center1"> <ul> <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> <li><a href="#">孕婴</a></li> <li><a href="#">服装</a></li> </ul> </div> <div class="right1"> <div class="box2"></div> <input type="text" name="" id="" placeholder=" 搜一搜"> <div class="box"></div> </div> </div> <!-- 轮播图区域 --> <div class="banner"> <div class="center2"> </div> <div class="left2"> <ul> <li><a href="#">生鲜 水果 蔬菜<span>></span></a></li> <li><a href="#">美食 面点 干果<span>></span></a></li> <li><a href="#">餐厨 数码产品<span>></span></a></li> <li><a href="#">电器 床品 四件套 抱枕<span>></span></a></li> <li><a href="#">居家 奶粉 辅食 玩具<span>></span></a></li> <li><a href="#">洗护 洗发 洗护 美妆<span>></span></a></li> <li><a href="#">孕婴 奶粉 玩具<span>></span></a></li> <li><a href="#">服饰 女装 男装<span>></span></a></li> <li><a href="#">杂货 户外 图书<span>></span></a></li> <li><a href="#">品牌 品牌制作<span>></span></a></li> </ul> </div> </div> <div class="good"> <!-- 标题 --> <div class="title1"> <h2>新鲜好物</h2> <span>新鲜出炉 品质保障</span> <a href="#">查看全部 ></a> </div> <!-- 图片 --> <div class="content1"> <ul> <li> <img src="./uploads/new_goods_1.jpg" alt=""> <a href="#"> <h3>睿米无线吸尘器F8</h3> <h4>￥899</h4> </a> </li> <li> <img src="./uploads/new_goods_2.jpg" alt=""> <a href="#"> <h3>智能环绕3D空调</h3> <h4>￥1299</h4> </a> </li> <li> <img src="./uploads/new_goods_3.jpg" alt=""> <a href="#"> <h3>广东软软糯米煲仔饭</h3> <h4>￥129</h4> </a> </li> <li> <img src="./uploads/new_goods_4.jpg" alt=""> <a href="#"> <h3>罗西机械智能手表</h3> <h4>￥3399</h4> </a> </li> </ul> </div> <!-- 标题 --> <div class="title1"> <h2>人气推荐</h2> <span>人气爆款 不容错过</span> <a href="#">查看全部 ></a> </div> <!-- 图片 --> <div class="content1"> <ul> <li> <img src="./uploads/popular_1.jpg" alt=""> <a href="#"> <h3>特惠推荐</h3> <span class="sp">我猜得到 你的需要</span> </a> </li> <li> <img src="./uploads/popular_2.jpg" alt=""> <a href="#"> <h3>爆款推荐</h3> <span class="sp">人气好物推荐</span> </a> </li> <li> <img src="./uploads/popular_3.jpg" alt=""> <a href="#"> <h3>场景使用一站买全</h3> <span class="sp">编辑精心整理推荐</span> </a> </li> <li> <img src="./uploads/popular_4.jpg" alt=""> <a href="#"> <h3>领券中心</h3> <span class="sp">发现更多超值优惠券</span> </a> </li> </ul> </div> <!-- 标题 --> <div class="title2"> <h2>热门品牌</h2> <span>国际经典 品质保证</span> <a href="#">查看全部 ></a> </div> <!-- 图片 --> <div class="content2"> <ul> <li> <img src="./uploads/brand_goods_1.jpg" alt=""> </li> <li> <img src="./uploads/brand_goods_2.jpg" alt=""> </li> <li> <img src="./uploads/brand_goods_3.jpg" alt=""> </li> <li> <img src="./uploads/brand_goods_4.jpg" alt=""> </li> <li> <img src="./uploads/brand_goods_5.jpg" alt=""> </li> </ul> </div> </div> <div class="fresh"> <div class="title3"> <!-- <span>国际经典 品质保证</span> --> <a href="#">查看全部 ></a> </div> <div class="content3"> <div class="left3"> <img src="./uploads/fresh_goods_cover.png" alt=""> </div> <div class="right3"> <ul> <li> <img src="./uploads/fresh_goods_1.jpg" alt=""> <h3>三文鱼</h3> <h4>￥3399</h4> </li> <li> <img src="./uploads/fresh_goods_2.jpg" alt=""> <h3>三文鱼</h3> <h4>￥3399</h4> </li> <li> <img src="./uploads/fresh_goods_3.jpg" alt=""> <h3>三文鱼</h3> <h4>￥3399</h4> </li> <li> <img src="./uploads/fresh_goods_4.jpg" alt=""> <h3>三文鱼</h3> <h4>￥3399</h4> </li> <li> <img src="./uploads/fresh_goods_5.jpg" alt=""> <h3>三文鱼</h3> <h4>￥3399</h4> </li> <li> <img src="./uploads/fresh_goods_6.jpg" alt=""> <h3>三文鱼</h3> <h4>￥3399</h4> </li> <li> <img src="./uploads/fresh_goods_7.jpg" alt=""> <h3>三文鱼</h3> <h4>￥3399</h4> </li> <li> <img src="./uploads/fresh_goods_8.jpg" alt=""> <h3>三文鱼</h3> <h4>￥3399</h4> </li> </ul> </div> </div> </div> <!-- 底部 --> <div class="footer"> <div class="top1"> <ul class="ul1"> <li> <a href="#">客户服务</a> <!-- <a href="#" id="a">问题反馈</a> --> </li> <li> <a href="#">关注我们</a> </li> <li> <a href="#">下载APP</a> </li> <li> <a href="#">服务热线</a> </li> </ul> <ul class="ul2"> <li> <div class="box3" style="float: left;margin-top: 5px; margin-left: 0px;" > <div class="pic1"></div> <a href="#" id="a">在线客服</a> </div> <!-- <a href="#" id="a">在线客服</a> --> <div class="box3" style="float: right;margin-top: 5px; margin-right: 65px;"> <div class="pic2"></div> <a href="#" id="a">问题反馈</a> </div> </li> <li> <div class="box3" style="float: left;margin-top: 0px; margin-left: 5px;"> <div class="pic3"></div> <a href="#" id="a" style="margin-left: 7px;">公众号</a> </div> <div class="box3" style="float: right;margin-top: 0px; margin-right: 65px;"> <div class="pic4"></div> <a href="#" id="a" style="margin-left: 10px;">微博</a> </div> </li> <li> <div class="box4" style="float: left;"> <div class="pic5"> <!-- <img src="./uploads/qrcode.png" alt=""> --> </div> </div> <div class="box4" style="float: right;margin-right: 39px;"> <div class="pic6"> <a href="#" id="a" style="margin-left: 10px;">扫描二维码<br>立马下载APP</a> <span style="color: aliceblue; background-color: aquamarine;margin-left: 5px; margin-top: 5px;">下载页面</span> </div> </div> </li> <li> <span class="span"> <h3 style="color: #999999;">400-0000-0000</h3> </span> <span style="color: #999999;">周一到周日8:00-11:00</span> </li> </ul> </div> <div class="bottom1"> <ul > <li> <div class="box5"> <div class="pic7"></div> <h2>价格亲民</h2> </div> </li> <li> <div class="box5"> <div class="pic8"></div> <h2>品质新鲜</h2> </div> </li> <li> <div class="box5"> <div class="pic9"></div> <h2>物流快捷</h2> </div> </li> </ul> <hr style="color: azure; margin-top: 20px;"> <div class="copy"> <!-- <ul> <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> --> <span class="co1"> 关于我们  |  帮助中心  |  售后服务  |  配送与验收  |  商务合作  |  搜索推荐  |  友情链接 </span> <span class="co2">CopyRight©小兔鲜儿</span> </div> </div> </div> </body> </html>
二.css部分代码
*{ margin: 0; padding: 0; box-sizing: border-box; } /* 去除表面圆点 */ li{ list-style: none; } /* 去除装饰线 */ a{ text-decoration: none; } /* 清除浮动 */ .clearfix::after, .clearfix:before{ content: ""; display: table; } .clearfix:after{ clear: both; } /* 网页头部导航 */ .webtop{ width: 100%; height: 50px; background-color: #333333; } .webtop ul{ float: right; display: inline-block; } .webtop ul li{ display: inline-block; margin-top: 15px; } .webtop ul li a{ color: white; margin-right: 10px; } /* 网页上方链接 */ .nav{ width: 100%; height: 100px; margin-top: 20px; margin-left: 30px; /* background-color: aqua; */ } .nav .left1{ height: 100px; float: left; margin-left: 10px; } .nav .left1 img{ height: 100px; float: left; } .nav .center1{ height: 100px; float: left; } .nav .center1 ul{ display: inline-block; } .nav .center1 ul li{ display: inline-block; height: 40px; padding: auto; line-height: 45px; float: left; margin-top: 50px; margin-left: 25px; } .nav .center1 ul li a{ font-size: 20px; height: 40px; padding: auto; line-height: 45px; color: black; } .nav .center1 li a:hover{ color: #27ba9b; margin-top: 2px; border-bottom:2px #27ba9b solid; } /* 搜索栏 */ .nav .right1{ width: 200px; height: 40px; float: right; margin-right: 150px; margin-top: 70px; margin-top: 0px; } .nav .right1 .box2{ float: left; background-image: url(../images/sprites.png); background-repeat: no-repeat; width: 25px; height: 25px; margin-top: 60px; background-color: white; background-position: -76px -68px; } .nav .right1 input{ height: 25px; width: 160px; /* margin-left: 50px; */ float: left; margin-top: 60px; background-color: azure; border: 1px solid black; } .nav .right1 .box{ background-image: url(../images/sprites.png); /* float: right; */ float: left; margin-top: -22px; margin-left: 190px; background-repeat: no-repeat; width: 25px; height: 25px; background-color: white; background-position: -120px -70px; } .banner{ /* background-color: black; */ width: 100%; height: 400px; margin-top: 30px; background-image: url(../uploads/banner_1.png); background-repeat: no-repeat; background-position: center; background-size: cover; } /* .banner .center2{ width: 100%; height: 400px; } */ .banner .left2{ height: 400px; width: 250px; float: left; padding: 10px 20px; margin-left: 0; background-color: #333333; } .banner .left2 li{ width: 250px; height: 40px; } .banner .left2 li a{ margin-top: 10px; color: white; font-size: 14px; } .banner .left2 li span{ float: right; margin-right: 40px; color: white; } /* 新鲜好物标题 */ .good{ margin-top: 15px; margin-left: 15px; margin-right: 15px; height: 480px; background-color: aliceblue; } .good .title1{ height: 50px; margin-top: 20px; background-color: aliceblue; } .good .title1 h2{ float: left; font-size: 29px; color: #333333; } .good .title1 span{ float: left; margin-top: 10px; margin-left: 25px; font-size: 16px; color: #999999; } .good .title1 a{ float: right; margin-top: 15px; font-size: 12px; color: #a5a5a5; margin-right: 100px; } /* 新鲜好物图片 */ .good .content1{ height: 400px; background-color: aliceblue; } .good .content1 ul{ float: left; } .good .content1 li{ float: left; height: 400px; padding-right: 2px; } .good .content1 li img{ width: 300px; height: 300px; } .good .content1 a{ height: 100px; background-color: #f0f9f4; } .good .content1 h3{ margin-top: 20px; margin-left: 70px; font-size: 20px; color: #333333; } .good .content1 h4{ margin-top: 10px; margin-left: 80px; font-size: 23px; color: #9a2e1f; } .good .content1 .sp{ float: left; margin-top: 10px; margin-left: 75px; font-size: 16px; color: #999999; } /* 热门品牌 */ .good .title2{ height: 50px; margin-top: 20px; background-color: aliceblue; } .good .title2 h2{ float: left; font-size: 29px; color: #333333; } .good .title2 span{ float: left; margin-top: 10px; margin-left: 25px; font-size: 16px; color: #999999; } .good .title2 a{ float: right; margin-top: 15px; font-size: 12px; color: #a5a5a5; margin-right: 100px; } /* 热门品牌图片 */ .good .content2{ height: 400px; background-color: aliceblue; } .good .content2 ul{ float: left; } .good .content2 li{ float: left; height: 400px; padding-right: 2px; } .good .content2 li img{ width: 240px; height: 300px; } /* 生鲜 */ .fresh{ width: 100%; height: 600px; margin-top: 10px; } .fresh .title3{ height: 50px; margin-top: 20px; background-color: aliceblue; } .fresh .title3 h2{ float: left; margin-left: 10px; font-size: 29px; color: #333333; } .fresh .title3 a{ float: right; margin-top: 15px; font-size: 12px; color: #a5a5a5; margin-right: 100px; } .content3{ height: 500px; /* margin-top: 30px; */ margin-left: 15px; } .content3 .left3{ /* float: left; */ margin-top: 50px; height: 400px; } .content3 .right3{ /* float: right; */ margin-left: 300px; width: 1000px; height: 400px; display: flex; justify-content: flex-start; flex-wrap: wrap; flex-direction: row; } .content3 .right3 li{ /* display: flex; justify-content: flex-start; flex-wrap: wrap; */ /* flex: 1; */ height: 250px; display: inline-block; /* width: calc((100% - 10px) / 4); */ margin-bottom: 10px; } .content3 .right3 li img{ height: 220px; width: calc((100%- 10px) / 4); margin-bottom: 10px; } .content3 .right3 h3, .content3 .right3 h4{ text-align: center; } /* 底部 */ .footer{ /* height: 500px; */ width: 99%; margin-top: 950px; } .footer .top1{ height: 200px; background-color: aliceblue; } .footer .ul1{ height: 50px; } .footer .ul1 li{ width: 200px; height: 50px; display: inline-block; margin-left: 50px; margin-right: 45px; margin-top: 20px; } .footer ul li a{ text-decoration: none; color: #999999; font-size: 25px; } .footer .ul2{ height: 100px; } .footer .ul2 li{ width: 200px; height: 100px; display: inline-block; margin-left: 40px; margin-right: 50px; margin-top: 10px; } .footer .ul2 li .span{ margin-top: 10px; } /* .footer .top1 .box1{ height: 30px; width: 30px; float: left; margin-top: 40px; margin-right: 1px; background-image: url(../images/sprites.png); background-position: -250px -70px; } .footer .top1 .box2{ height: 30px; width: 30px; float: right; margin-top: 40px; margin-left: 2px; background-image: url(../images/sprites.png); background-position: -350px -70px; } */ .footer .top1 #a{ margin-top: 5px; text-align: center; font-size: 12px; } .footer .top1 .box3{ width: 60px; height: 60px; margin-top: 10px; border: #999999 solid 1px; } .footer .top1 .box3 .pic1{ width: 30px; height: 30px; margin-left: 10px; margin-top: 5px; background-image: url(../images/sprites.png); background-position: -250px -70px; } .footer .top1 .box3 .pic2{ width: 30px; height: 30px; margin-left: 10px; margin-top: 5px; background-image: url(../images/sprites.png); background-position: -350px -70px; } .footer .top1 .box3 .pic3{ width: 30px; height: 30px; margin-left: 10px; margin-top: 5px; background-image: url(../images/sprites.png); background-position: -205px -70px; } .footer .top1 .box3 .pic4{ width: 30px; height: 30px; margin-left: 10px; margin-top: 5px; background-image: url(../images/sprites.png); background-position: -300px -70px; } .footer .top1 .box4{ width: 80px; height: 80px; margin-top: 15px; border: #999999 solid 1px; } .footer .top1 .box4 .pic5{ width: 80px; height: 80px; background-image: url(../uploads/qrcode.png); background-repeat: no-repeat; background-size: cover; } .footer .top1 .box4 .pic6{ width: 80px; height: 80px; } .footer .bottom1{ width: 100%; height: 370px; background-color: #333333; margin-top: 0; } .footer .bottom1 ul li{ display: inline-block; width: 200px; margin-top: 20px; margin-left: 150px; height: 100px; } .footer .bottom1 .box5 .pic7{ width: 60px; height: 60px; display: inline-block; background-image: url(../images/sprites.png); background-position: 0px 0px; } .footer .bottom1 .box5 .pic8{ width: 60px; height: 60px; display: inline-block; background-image: url(../images/sprites.png); background-position: -65px 0px; } .footer .bottom1 .box5 .pic9{ width: 60px; height: 60px; display: inline-block; background-image: url(../images/sprites.png); background-position: -130px 0px; } .footer .bottom1 .box5 h2{ color: aliceblue; display: inline-block; margin-left: 20px; margin-top: -40px; } .footer .bottom1 .copy{ margin-top: 30px; } /* .footer .bottom1 .copy ul li{ width: 80px; display: inline-block; padding: 1px; } */ .footer .bottom1 .copy .co1{ text-decoration: none; color: aliceblue; font-size: 12px; margin-left: 400px; } .footer .bottom1 .copy .co2{ text-decoration: none; color: aliceblue; font-size: 14px; margin-top: 20px; margin-left: 600px; }
http://127.0.0.1:5500/index.html
三.效果图
920
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
