母婴商城:视图函数的请求和响应

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个简单的京东商城的HTML和CSS框架: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>京东商城</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <nav> <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> <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> </nav> <div class="search"> <input type="text" placeholder="搜索商品"> <button>搜索</button> </div> <div class="cart"> <a href="#"> <span class="icon-cart"></span> <span class="cart-count">0</span> </a> </div> </header> <main> <section class="banner"> <img src="https://img12.360buyimg.com/img/s1920x720/jfs/t1/148991/28/699/246014/5eeb2e84E7f1d9e5d/6a34c4c0d5c4f5eb.jpg" alt="banner"> </section> <section class="product-list"> <h2>优惠商品</h2> <ul> <li> <a href="#"> <img src="https://img11.360buyimg.com/n1/s200x200_jfs/t1/142399/16/10391/68695/5f7c3d2fE1b8c3a9c/8ebc5c1c925baea0.jpg" alt="商品1"> <p>商品1</p> <span>¥100</span> </a> </li> <li> <a href="#"> <img src="https://img11.360buyimg.com/n1/s200x200_jfs/t1/129491/17/17589/132167/5fe6d49bEda48e7b2/47b9c9c2a44c29d6.jpg" alt="商品2"> <p>商品2</p> <span>¥200</span> </a> </li> <li> <a href="#"> <img src="https://img11.360buyimg.com/n1/s200x200_jfs/t1/144212/16/7194/179407/5f1a8b8cE3d2d488b/0f93d5b7f72dc3a4.jpg" alt="商品3"> <p>商品3</p> <span>¥300</span> </a> </li> <li> <a href="#"> <img src="https://img11.360buyimg.com/n1/s200x200_jfs/t1/144212/16/7194/179407/5f1a8b8cE3d2d488b/0f93d5b7f72dc3a4.jpg" alt="商品3"> <p>商品3</p> <span>¥300</span> </a> </li> </ul> </section> </main> <footer> <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> <li><a href="#">English Site</a></li> </ul> <p>© 2021 Jingdong Mall 版权所有</p> </footer> </body> </html> ``` CSS: ```css * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei",sans-serif; font-size: 16px; line-height: 1.5; } header { height: 80px; background-color: #c81623; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; } nav ul { display: flex; list-style: none; } nav li { margin-right: 20px; } nav a { color: #fff; text-decoration: none; } .search { display: flex; align-items: center; } .search input { width: 200px; height: 30px; border: none; padding: 5px; margin-right: 10px; } .search button { background-color: #fff; border: none; padding: 5px 10px; color: #c81623; cursor: pointer; } .cart a { display: flex; align-items: center; color: #fff; text-decoration: none; } .cart .icon-cart { display: block; width: 20px; height: 20px; background-image: url("https://img11.360buyimg.com/n1/s150x150_jfs/t1/106289/12/8339/2604/5e3b1be6E4a2a907e/c9f5d3f8b9c9a22f.png"); background-repeat: no-repeat; background-size: contain; margin-right: 5px; } .cart .cart-count { background-color: #c81623; color: #fff; display: inline-block; font-size: 12px; width: 16px; height: 16px; text-align: center; line-height: 16px; border-radius: 50%; margin-right: 5px; } main { max-width: 1200px; margin: 0 auto; padding: 20px; } .banner img { width: 100%; } .product-list ul { display: flex; flex-wrap: wrap; margin-top: 20px; } .product-list h2 { font-size: 24px; font-weight: bold; margin-bottom: 20px; } .product-list li { width: calc(25% - 20px); margin-right: 20px; margin-bottom: 20px; list-style: none; } .product-list a { display: block; text-decoration: none; } .product-list img { width: 100%; } .product-list p { margin-top: 10px; font-size: 14px; height: 40px; overflow: hidden; } .product-list span { display: block; margin-top: 10px; font-size: 18px; color: #c81623; } footer { background-color: #f5f5f5; padding: 20px; text-align: center; } footer ul { display: flex; justify-content: center; margin-bottom: 20px; list-style: none; } footer li { margin-right: 20px; } footer a { color: #333; text-decoration: none; } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值