简单的仿天猫超市网页平面设计（html+css）

noneyoung

已于 2024-01-19 19:50:57 修改

阅读量504

点赞数 9

文章标签： html css 前端

于 2024-01-19 19:48:04 首次发布

本文链接：https://blog.csdn.net/2301_80002258/article/details/135705819

版权

这篇文章详细描述了天猫超市网页的HTML结构，包括头部链接、导航菜单、搜索框、商品分类列表、购物车显示以及底部的各类服务链接。展示了CSS样式如何定义页面样式。

摘要由CSDN通过智能技术生成

Html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>天猫超市</title>

    <link rel="stylesheet" href="styles.css">

</head>

<body>

<div class="up">

    <div style="margin-left: 30px;">首页</div>

    <div style="margin-left: 30px;">登录</div>

    <div style="margin-left: 30px;">注册</div>

    <div style="margin-left: 30px;">购物车</div>

    <div style="margin-left: 30px;">会员</div>

</div>

<div class="a">

    <div class="b">天猫超市</div>

    <div class="d">秦皇岛市</div>

    <div class="c"> <input  placeholder="搜索南洋超市商品" type="text" style="border: 3px solid #30b30e;border-radius: 5px;width: 500px;height: 40px;" ;>

    <button style="width: 80px;height: 40px;">搜索</button></div>

</div>

<div class="hh">

<div class="e">

    <div class="f">所有产品分类</div>

   <div class="en">

       <div class="g"><strong>进口食品</strong><div class="aaa">牛奶 零食 方便面 饼干></div></div>

       <div class="g"><strong>食品饮料</strong><div class="aaa">牛奶 坚果 方便面 饼干></div></div>

       <div class="g"><strong>粮油副食</strong><div class="aaa">油 大米 方便面 火腿肠></div></div>

       <div class="g"><strong>美容洗护</strong><div class="aaa">洗发 沐浴 牙膏 化妆品></div></div>

       <div class="g"><strong>家居家电</strong><div class="aaa">毛巾 家电 玻璃杯 锅 衣架></div></div>

       <div class="g"><strong>家庭清洁</strong><div class="aaa">纸 洗衣 洁厕 洗洁精 垃圾袋></div></div>

       <div class="g"><strong>母婴用品</strong><div class="aaa">纸尿裤 奶粉 湿巾 洗护 玩具></div></div>

       <div class="g"><strong>生活服务</strong><div class="aaa">信用卡还款 转账 充话费 点券></div></div>

</div>

</div>

<div class="h">

    <div><span class="ma"><strong>首页</strong></span>

    <span class="ma">|</span>

    <span class="ma"><strong>企业合作</strong></span></div>

    <div style="margin: 0px 0px 30px 0px;"><img style="height: 300px;width: 700px;margin-top: 30px;margin-right: 30px; "src="C:\Users\ny_12\Pictures\Screenshots\屏幕截图 2023-11-30 093442.png"></div>

    <div style="margin: 0px 0px 30px 0px;"><img style="height: 250px;width: 700px;margin-top: 0px;margin-right: 30px; "src="C:\Users\ny_12\Pictures\Screenshots\屏幕截图 2023-11-30 113915.png"></div>

</div>

<div class="y"><div class="i">购物车：￥0.00元   0kg</div>

<div style="margin-top: 23px;"><img style="height: 360px;width: 200px;margin-right: 30px; "src="C:\Users\ny_12\Pictures\Screenshots\屏幕截图 2023-11-30 115723.png"></div>

</div>

</div>

<div class="wo"></div>

<div class="shi">

<div class="bu">天猫超市</div>

<div class="az">

    <div class="eat"><strong>购物指南</strong></div>

    <div class="ji">购物常见问题</div>

    <div class="ji">商品限购说明</div>

    <div class="ji">配送与费用说明</div>

    <div class="ji">发票流程</div>

    <div class="ji">商品保质期要求</div>

   

</div>

<div class="az">

    <div class="eat"><strong>售后服务</strong></div>

    <div class="ji">南洋超市售后政策</div>

    <div class="ji">退货指南</div>

    <div class="ji">七天无理由退换货</div>

    <div class="ji">联系客服</div>

</div>

<div class="az">

    <div class="eat"><strong>自助服务</strong></div>

    <div class="ji">订单物流查询</div>

    <div class="ji">我的购物车</div>  

</div>

<div class="az">

    <div class="eat"><strong>商家服务</strong></div>

    <div class="ji">入驻天猫超市</div>

</div>

</div>

<div class="re">

    <span class="ahh">关于天猫</span>

    <span class="ahh">商家服务大厅</span>

    <span class="ahh">开放平台</span>

    <span class="ahh">诚聘英才</span>

    <span class="ahh">联系我们</span>

    <span class="ahh">网站合作</span>

    <span class="ahh">法律声明</span>

    <span class="ahh">隐私权政策</span>

    <span class="ahh">知识产权</span>

    <span class="ahh">廉正举报</span>

    <span class="ahh">不当竞争举报</span>

</div>

</body>

</html>

css

*{

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}

.up{

    width: 100%;

    height: 40px;

    background-color: #f2f2f2;

    border: 0;

    padding: 15px;

    color: grey;

    font-size: 15px;

    display: flex;

}

.a{

    display: flex;

    justify-content: center;

    margin-top: 15px;

    color: #30b30e;

}

.b{

    font-size: 40px;

    font-weight: 700;

    margin-right: 60px ;

    font-family: 楷体;

}

.d{

    height: 40px;

    width: 150px;

    margin-left: 0px;

    font-size: 20px;

    margin-right: 40px;

    position: relative;top: 10px;

}

.c{

    margin-left: 0px;

}

.hh{

    display: flex;

    flex-direction: row;

    width: 80%;

    margin-top: 40px;

    margin-left: 200px;

    margin-right: 200px;

}

.e{

    display: flex;

    flex-direction: column;

}

.h{

    display: flex;

    flex-direction: column;

    margin-left: 0;

}

.i{

    background-color: #bf0000;

    color: #fcff00;

    font-size: 20px;

    height: 35px;

    width: 230px;

    padding: 5px;

}

.f{

    width:200px ;

    height: 40px;

    color: white;

    background-color: black;

    font-size: 20px;

    font-weight: 600;

    text-align: center;  

}

.g{

    width: 200px;

    height: 74px;

    background-color: #f2f2f2;

    border: lightgray 1px solid;

    padding: 10px;

}

.aaa{

    color: #aeaeae;

    font-size: 13px;

}

.ma{

    margin-left: 20px;

    font-size: 16px;

    margin-bottom: 15px;

}

.y{

    display: flex;

    flex-direction: column;

}

.wo{

    background-color: #e6e7e8;

    height: 2px;

    width: 100%;

    margin-top: 30px;

}

.shi{

    display: flex;

    flex-direction: row;

    margin: 30px 200px 30px 200px;

}

.bu{font-size: 40px;

    font-weight: 700;

    margin-right: 100px ;

    font-family: 楷体;

    color: #30b30e;

}

.az{

    display: flex;

    flex-direction: column;

    margin-right: 100px ;

}

.eat{

    font-size: 20px;

}

.ji{

    margin-top: 5px;

    font-size: 12px;

    color: #a8a8a8;

}

.re{

    background-color: #c40000;

    width: 100%;

    height: 30px;

    text-align: center;

}

.ahh{

    color: #fbeeee;

    margin-right: 10px ;

    font-size: 14px;
}