品优购静态页面（html+css）——商品详情页

最新推荐文章于 2024-08-26 14:47:43 发布
最新推荐文章于 2024-08-26 14:47:43 发布
阅读量6.9k 收藏 91
点赞数 4
文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ttxwwdn/article/details/109499101
版权

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/base.css" />
    <link rel="stylesheet" href="css/common.css" />
    <link rel="stylesheet" href="fonts/iconfont.css" />
    <link rel="stylesheet" href="css/list.css" />
    <link rel="shortcut icon" href="favicon.ico" />
  </head>
  <body>
    <div class="shortcut">
      <div class="w">
        <span
          >品优购欢迎您！&nbsp;<a href="#">请登录 &nbsp;</a>
          <a href="#"> 免费注册 </a></span
        >
        <ul>
          <li><a href="#">我的订单</a></li>
          <li class="iconfont"><a href="#">我的品优购</a></li>
          <li><a href="#">品优购会员</a></li>
          <li><a href="#">企业采购</a></li>
          <li class="iconfont"><a href="#">关于品优购</a></li>
          <li class="iconfont"><a href="#">客户服务</a></li>
          <li class="iconfont"><a href="#">网站导航</a></li>
        </ul>
      </div>
    </div>
    <header class="w header clearfix">
      <div class="logo">
        <!-- logo SEO 优化 -->
        <h1>
          <a href="index.html" title="品优购商城">品优购商城</a>
        </h1>
        <div>
          <img src="images/sk.png" alt="" />
        </div>
      </div>
      <div class="search">
        <input type="search" placeholder="语言开发" />
        <input type="button" value="搜索" />
        <ul class="hotwords">
          <li><a href="#">优惠购首发</a></li>
          <li><a href="#">亿元优惠</a></li>
          <li><a href="#">9.9元团购</a></li>
          <li><a href="#">满99元减30</a></li>
          <li><a href="#">办公用品</a></li>
          <li><a href="#">电脑</a></li>
          <li><a href="#">通信</a></li>
        </ul>
      </div>
      <div class="shopcar iconfont">
        <a href="">我的购物车</a>
        <i class="count">79999999</i>
      </div>
    </header>
    <nav class="iconfont">
      <ul class="w">
        <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>
    <article class="iconfont w">
      <div class="header">
        <h1>女鞋</h1>
        <p>—————— 正在抢购 ——————</p>
      </div>
      <div class="body clearfix">
        <ul>
          <li>
            <img src="images/iphone.png" alt="" />
            <h4>
              <a href="#">
                Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机
              </a>
            </h4>
            <p>
              <span><a href="#">&yen;6088 </a></span>
              <span> &yen;6988</span>
            </p>
            <div>
              已售87件
              <section>
                <div></div>
              </section>
              剩余<span>29</span>件
            </div>
            <input type="button" value="立即抢购" />
          </li>
          。。。。。。。。。。
           </ul>
      </div>
    </article>
    <footer class="footer">
      <div class="mod_service">
        <ul class="w">
          <li>
            <img src="images/ft1.png" alt="" />
            <div>
              <h3>正品保障</h3>
              <p>提供发票，正品保障</p>
            </div>
          </li>
          <li>
            <img src="images/ft1.png" alt="" />
            <div>
              <h3>正品保障</h3>
              <p>提供发票，正品保障</p>
            </div>
          </li>
          <li>
            <img src="images/ft1.png" alt="" />
            <div>
              <h3>正品保障</h3>
              <p>提供发票，正品保障</p>
            </div>
          </li>
          <li>
            <img src="images/ft1.png" alt="" />
            <div>
              <h3>正品保障</h3>
              <p>提供发票，正品保障</p>
            </div>
          </li>
          <li>
            <img src="images/ft1.png" alt="" />
            <div>
              <h3>正品保障</h3>
              <p>提供发票，正品保障</p>
            </div>
          </li>
        </ul>
      </div>
      <div class="mod_help">
        <div class="w">
          <dl>
            <dt>购物指南</dt>
            <dd><a href="#">购物流程</a></dd>
            <dd><a href="#">会员介绍</a></dd>
            <dd><a href="#">生活旅行/团购</a></dd>
            <dd><a href="#">常见问题</a></dd>
            <dd><a href="#">大家电</a></dd>
            <dd><a href="#">联系客服</a></dd>
          </dl>
          <dl>
            <dt>购物指南</dt>
            <dd><a href="#">购物流程</a></dd>
            <dd><a href="#">会员介绍</a></dd>
            <dd><a href="#">生活旅行/团购</a></dd>
            <dd><a href="#">常见问题</a></dd>
            <dd><a href="#">大家电</a></dd>
            <dd><a href="#">联系客服</a></dd>
          </dl>
          <dl>
            <dt>购物指南</dt>
            <dd><a href="#">购物流程</a></dd>
            <dd><a href="#">会员介绍</a></dd>
            <dd><a href="#">生活旅行/团购</a></dd>
            <dd><a href="#">常见问题</a></dd>
            <dd><a href="#">大家电</a></dd>
            <dd><a href="#">联系客服</a></dd>
          </dl>
          <dl>
            <dt>购物指南</dt>
            <dd><a href="#">购物流程</a></dd>
            <dd><a href="#">会员介绍</a></dd>
            <dd><a href="#">生活旅行/团购</a></dd>
            <dd><a href="#">常见问题</a></dd>
            <dd><a href="#">大家电</a></dd>
            <dd><a href="#">联系客服</a></dd>
          </dl>
          <dl>
            <dt>购物指南</dt>
            <dd><a href="#">购物流程</a></dd>
            <dd><a href="#">会员介绍</a></dd>
            <dd><a href="#">生活旅行/团购</a></dd>
            <dd><a href="#">常见问题</a></dd>
            <dd><a href="#">大家电</a></dd>
            <dd><a href="#">联系客服</a></dd>
          </dl>
          <dl>
            <dt>帮助中心</dt>
            <dd><img src="images/wx_cz.jpg" alt="" /></dd>
            <dd><a href="#">联系客服</a></dd>
          </dl>
        </div>
      </div>
      <div class="mod_copyright">
        <div class="w">
          <ul class="clearfix">
            <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>
          <p>
            地址：XXXXXXXXXXXXXXXXXXXXX 邮编:XXXXXX
            电话：400-618-XXXX 传真：0XX-XXXXXXXXX 邮箱: zXXXXXXXXXXX.cn
          </p>
          <p>京ICP备XXXXXXXX号京公网安备XXXXXXXXXXXX</p>
        </div>
      </div>
    </footer>
  </body>
</html>

CSS部分

.logo {
  position: relative;
  width: 257px;
}
.logo div {
  position: absolute;
  right: 0;
  top: 8.5px;
  width: 70px;
  height: 36px;
  line-height: 36px;
  text-align: right;
  border-left: 1px solid #c81623;
}
.search {
  margin-left: 100px;
}
nav {
  height: 45px;
  line-height: 45px;
  text-align: center;
  border-bottom: 2px solid #c81623;
}
nav ul li {
  float: left;
}
nav ul li a {
  margin: 0 28px;
}
nav ul li:nth-child(-n + 3) a {
  font-size: 16px;
  color: #000000;
}
nav ul li:last-child a::after {
  content: '\e66f';
}
article .header {
  height: 121px;
  text-align: center;
  margin-bottom: 25px;
  background-image: url(../images/header.png);
  background-repeat: no-repeat;
}
article .header h1 {
  font-weight: 700;
  font-size: 24px;
  color: #c81623;
}
article .header p {
  font-size: 14px;
  color: #000000;
}
article .header h1::before {
  width: 80px;
  line-height: 80px;
  content: '\e628';
  font-size: 45px;
  color: #c81623;
}
article .body ul li {
  float: left;
  width: 290px;
  height: 460px;
  margin-right: 10px;
  font-size: 13px;
}
article .body ul li h4 {
  margin: 0 10px;
}
article .body ul li p span:last-child {
  text-decoration: line-through;
}
article .body ul li p {
  height: 48px;
  line-height: 48px;
  padding: 0 10px;
}
article .body ul li p a {
  font-weight: 700;
  font-size: 18px;
  color: #c81623;
  padding: 15px;
  padding-right: 3px;
}
article .body ul li div {
  height: 27px;
  margin: 0 10px;
}
article .body ul li div section {
  display: inline-block;
  width: 134px;
  height: 12px;
  background-color: #ffffff;
  border-radius: 6px;
  border: 1px solid #c81623;
}
article .body ul li div section div {
  height: 13px;
  width: 100px;
  border-radius: 6px 0 0 6px;
  background-color: #c81623;
  margin: 0;
}
article .body ul li div span {
  color: #c81623;
}
article .body ul li input {
  width: 290px;
  height: 50px;
  background-color: #c81623;
  border: none;
  font-size: 18px;
  color: #ffffff;
  outline: none;
}

在这里插入图片描述

Starry577
关注
商品详情页html,天天生鲜商品详情页HTML+css
weixin_39657094的博客
06-08 841
body{font-family: 'Microsoft YaHei';color:#666;font-size:12px;}/*顶部条状态*/.header_con{height:29px;background-color: #f7f7f7;border-bottom:1px solid #ddd;}.header{width:1200px;height:29px;margin:0 auto;1...
商城产品详情网页html
03-03
这是一个JS+CSS+HTML 源码文件，是一个商城产品详情页的模板。
页面设计任务 商品详情页(带评论区)
最新发布
Mike的博客
08-26 408
效果图： 页面结构:页面内容:样式:源码： 详细讲解：1.产品信息部分 (1).获取所有按钮:(2).移除活动状态:(3).添加活动状态:2.用户评论区域 完
天天生鲜商品详情页HTML+css
热门推荐
helloworld00754的博客
02-24 2万+
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>天天生鲜-商品详情页</title> <link rel="stylesheet" href="./css/main.css"> <link...
品优购综合案例——详情页（html+CSS综合运用）自学系列
weixin_46972646的博客
12-23 4143
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/base
html+css仿小米商城首页搜索页和商品详情页
12-30
作业
html+css品优购静态页面项目
03-23
"html+css品优购静态页面项目"是一个典型的前端网页开发实践，主要涉及HTML和CSS两种核心技术。HTML（HyperText Markup Language）是用于创建网页的标准标记语言，而CSS（Cascading Style Sheets）则用于控制网页的...
品优购静态网页练习（HTML+CSS）
08-22
在本实践项目“品优购静态网页练习”中，我们将深入学习和应用HTML与CSS的基础知识，这包括HTML5和CSS3的最新特性。这个练习旨在帮助初学者或有一定基础的开发者巩固前端开发技能，通过实际操作理解网页结构与样式...
HTML+CSS+JavaScript实现的品优购项目源代码，包含首页、登录页面、注册页面、商品秒杀页、商品推文页、商品抢购页等
12-14
综上所述，"品优购"项目是一个综合性的HTML+CSS+JavaScript实践案例，涵盖了电商网站的多种常见功能，对于学习和提升前端开发技能有着极大的价值。通过研究和理解这个项目的源代码，开发者可以深入理解网页开发的...
基于HTML+CSS实现的品优购购物网站静态网页源码.zip
07-07
基于HTML+CSS实现的品优购购物网站静态网页源码.zip基于HTML+CSS实现的品优购购物网站静态网页源码.zip基于HTML+CSS实现的品优购购物网站静态网页源码.zip基于HTML+CSS实现的品优购购物网站静态网页源码.zip基于...
京东商品详情页
08-16
该Demo是本人在学习jQuery过程中仿照京东商品详情页自己制作的，里面包含有详细的css样式、Jquery的代码及注释，希望对有需要的小伙伴有所帮助。
goods_detail_htmlcssjs_商品详情页_
09-30
商品详情页（包含完整css，js，html代码）
商品详情静态页面
07-04
商品详情静态页面，很好看的商品详情静态页面，有规格参数、商品介绍、商品评价、售后保障、扫手机下单、加入购物车
品优购全部资料及教程
06-01
里面是最新黑马第49期培训班的项目教学视频，及其所需的所有的资源文件，老师讲的很好。
div+css+JQuery仿京东商品详情界面
09-08
div+css+JQuery仿京东商品详情界面
品优购简单html+css.zip
05-25
【标题】"品优购简单html+css.zip"是一个压缩包文件，包含了电子商务网站“品优购”的初级HTML和CSS代码。这个作业可能是为初学者设计的，让他们了解如何构建一个基本的网页布局，尤其是针对电商平台。 【描述】中...
品优购-day04笔记-品优购项目的详情页
weixin_37128962的博客
05-13 2068
typora-copy-images-to: media 第01阶段.WEB基础：品优购-day04笔记-品优购项目的详情页 一、品优购项目(四) 学习目标 布局 品优购项目的详情页 detail.html 1、品优购详情页制作 detail.html 常用单词 名称 说明 主体 de_container 面包屑导航 crumb_wrap 产品介绍 product...
每日作业-品优购详情页
Qiuxuntao的博客
10-22 869
品优购详情页 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body {
全栈开发实战项目：品优购项目HTML+CSS+JavaScript源码
资源摘要信息:"HTML+CSS+JavaScript进行的品优购项目实战.zip" 知识点概述: 该资源为一个完整的前端项目实战案例，使用了目前互联网开发中广泛采用的技术栈：HTML、CSS和JavaScript。这个项目通过提供可复刻的实战...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值