8.12 Web前端-小米商城项目实战

编程语言 2023-06-25 16:25:19 阅读次数: 0

hello，各位朋友们大家好，今天我来继续把小米商城的部分说完，最后剩余的部分就是主体和尾部了，这两部分内容相对于前面来说难度较小，只有几个点需要注意一下即可。

1.主体部分：

首先我来说说主体部分，下图是我完成的效果图：

这些商品框在鼠标移入时会有一个浮动并且在边框处添加阴影的效果，右边小的商品栏整体排列我用的是浮动，需要注意的是这里每个盒子用的都是a标签包裹的，然后给浮动的小盒子一个移入上浮以及边框阴影效果即可，如下图所示：

 主体部分的html代码如下：

<main>
      <div class="mbbox">
        <div class="mmbox1">
          <a href="#"><img src="./图片素材/横幅.webp" alt="1"></a>
        </div>
        <div class="mmbox2">
          <div class="msbox1">
            <h2>手机</h2>
            <p><a href="#">查看更多 <span style="font-size: 18px;">></span></a></p>
          </div>
          <div class="msbox2">
            <div class="ms2box1">
              <a href="#"><img src="./图片素材/ms21.webp" alt="1"></a>
            </div>
            <div class="ms2box2">
              <ul>
                <li><a href="#">
                  <div><img src="./图片素材/ms2sbox1.webp" alt="1" style="height: 160px;"></div>
                  <h5>Xiaomi 12S Ultra</h5>
                  <p>这真徕卡 | 专业徕卡影像</p>
                  <span>5999元起</span>
                </a></li>
                <li><a href="#">
                  <div><img src="./图片素材/12.webp" alt="1" style="height: 160px;"></div>
                  <h5>Xiaomi 12S Ultra</h5>
                  <p>这真徕卡 | 专业徕卡影像</p>
                  <span>5999元起</span>
                </a></li>
                <li><a href="#">
                  <div><img src="./图片素材/13.webp" alt="1" style="height: 160px;"></div>
                  <h5>Xiaomi 12S Ultra</h5>
                  <p>这真徕卡 | 专业徕卡影像</p>
                  <span>5999元起</span>
                </a></li>
                <li><a href="#">
                  <div><img src="./图片素材/14.webp" alt="1" style="height: 160px;"></div>
                  <h5>Xiaomi 12S Ultra</h5>
                  <p>这真徕卡 | 专业徕卡影像</p>
                  <span>5999元起</span>
                </a></li>
                <li><a href="#">
                  <div><img src="./图片素材/15.webp" alt="1" style="height: 160px;"></div>
                  <h5>Xiaomi 12S Ultra</h5>
                  <p>这真徕卡 | 专业徕卡影像</p>
                  <span>5999元起</span>
                </a></li>
                <li><a href="#">
                  <div><img src="./图片素材/16.webp" alt="1" style="height: 160px;"></div>
                  <h5>Xiaomi 12S Ultra</h5>
                  <p>这真徕卡 | 专业徕卡影像</p>
                  <span>5999元起</span>
                </a></li>
                <li><a href="#">
                  <div><img src="./图片素材/17.webp" alt="1" style="height: 160px;"></div>
                  <h5>Xiaomi 12S Ultra</h5>
                  <p>这真徕卡 | 专业徕卡影像</p>
                  <span>5999元起</span>
                </a></li>
                <li><a href="#">
                  <div><img src="./图片素材/18.webp" alt="1" style="height: 160px;"></div>
                  <h5>Xiaomi 12S Ultra</h5>
                  <p>这真徕卡 | 专业徕卡影像</p>
                  <span>5999元起</span>
                </a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </main>

css层叠样式表如下：

main {
  width: 100%;
  height: 860px;
  background-color: rgb(245, 245, 245);
  padding-top: 4px;
}
.mbbox {
  width: 1226px;
  height: 880px;
  margin: 0 auto;
}
.mmbox1 {
  width: 1226px;
  height: 120px;
  margin: 22px 0;
}
.mmbox2 {
  width: 1226px;
  height: 686px;
}
.msbox1 {
  position: relative;
  width: 1226px;
  height: 58px;
}
.msbox1 > h2 {
  margin: 0 0 0 0;
  font-weight: 100;
  line-height: 58px;
}
.msbox1 > p {
  position: absolute;
  width: 92px;
  height: 58px;
  margin: 0 0 0 0;
  line-height: 58px;
  top: 0px;
  left: 1145px;
}
.msbox1 a {
  color: black;
}
.msbox1 a:hover {
  color: rgb(255, 103, 0);
}
.msbox2 {
  width: 1226px;
  height: 628px;
}
.ms2box1 {
  float: left;
  width: 234px;
  height: 614px;
}
.ms2box2 {
  float: left;
  width: 992px;
  height: 628px;
}
.ms2box2 li {
  float: left;
  width: 234px;
  height: 300px;
  margin: 0 0 14px 14px;
  background-color: white;
}
.ms2box2 a {
  display: block;
  width: 234px;
  height: 260px;
  padding: 20px 0;
}
.ms2box2 div {
  width: 160px;
  height: 160px;
  margin: 0 37px 18px 37px;
}
.ms2box2 h5 {
  width: 214px;
  height: 21px;
  margin: 0 10px 2px 10px;
  text-align: center;
  color: black;
}
.ms2box2 p {
  font-size: 12px;
  width: 214px;
  height: 18px;
  margin: 0 10px 10px 10px;
  font-size: 12px;
  color: rgb(194, 176, 194);
  text-align: center;
}
.ms2box2 span {
  display: block;
  width: 214px;
  height: 21px;
  margin: 0 10px 14px 10px;
  font-size: 14px;
  color: rgb(255, 103, 0);
  text-align: center;
}
.ms2box1:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 8px 0 rgba(0, 0, 0, 0.2);
}
.ms2box2 li:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 8px 0 rgba(0, 0, 0, 0.2);
}

主体部分内容相对简单，只需注意格式排列以及浮动效果的显示即可。

 2.底部部分：

底部的效果图如下所示： 

 底部上方再次用到了矢量图，来保证移入的效果显示，然后中间是用ul列表制作的文字，每个用a标签包裹起来实现链接功能，最后底部就是图片和文字的结合，使用p标签来包裹不同的文字格式来实现各种效果，整体难度不大，就是内容比较繁琐。

底部html代码：

<footer>
      <div class="f-t">
        <div class="shouhou">
             <ul class="clearfix">
               <li>
                  <a href=""><i class="iconfont">&#xe601;</i>预约维修服务</a>
               </li>
               <li>
                <a href=""><i class="iconfont">&#xec2e;</i>7天无理由退货</a>
               </li>
             <li>
              <a href=""><i class="iconfont">&#xf0179;</i>15天免费换货</a>
           </li>
           <li>
            <a href=""><i class="iconfont">&#xe657;</i>满69元包邮</a>
         </li>
         <li>
          <a href=""><i class="iconfont">&#xe692;</i>1100余家售后网点</a>
       </li>
             </ul>
        </div>
          <div class="f-intro">
            <ul>
              <strong>选购指南</strong>
              <li>手机</li>
              <li>电视</li>
              <li>笔记本</li>
              <li>平板</li>
              <li>穿戴</li>
              <li>耳机</li>
              <li>家电</li>
              <li>路由器</li>
              <li>音箱</li>
              <li>配件</li>

            </ul>
            <ul>
              <strong>服务中心</strong>
              <li>申请售后</li>
              <li>售后政策</li>
              <li>维修服务价格</li>
              <li>订单查询</li>
              <li>以旧换新</li>
              <li>保障服务</li>
              <li>防伪查询</li>
              <li>F码通道</li>
            
            </ul> 
            <ul>
              <strong>线下门店</strong>
              <li>小米之家</li>
              <li>服务网点</li>
              <li>授权体验店/专区</li> 
            </ul>
            <ul>
              <strong>关于小米</strong>
              <li>了解小米</li>
              <li>加入小米</li>
              <li>投资者关系</li>
              <li>环境，社会及管制</li>
              <li>廉洁举报</li>
            </ul>
            <ul>
              <strong>关注我们</strong>
              <li>新浪微博</li>
              <li>官方微信</li>
              <li>联系我们</li>
              <li>公益基金会</li>
            
            </ul>
            <div class="phone">
               <p>400-100-5678</p>
               <p>8:00-18:00(仅收市话费)</p>
               <div>
                 <a href="">人工客服</a>
               </div>
            </div>
          </div>
    </div>
    <div class="f-b">
      <div class="fbbox">
        <div class="logo2">
          <img src="./图片素材/logo-mi2.png" alt="1" style="height: 56px; float: left; margin-top: 30px;">
        </div>
        <div class="f-b-text">
          <p class="p11">
            <a href="#">小米商城<span>|</span></a>
            <a href="#">MIUI<span>|</span></a>
            <a href="#">米家<span>|</span></a>
            <a href="#">米聊<span>|</span></a>
            <a href="#">多看<span>|</span></a>
            <a href="#">游戏<span>|</span></a>
            <a href="#">政企服务<span>|</span></a>
            <a href="#">小米天猫店<span>|</span></a>
            <a href="#">小米集团隐私政策<span>|</span></a>
            <a href="#">小米公司儿童信息保护规则<span>|</span></a>
            <a href="#">小米商城隐私政策<span>|</span></a>
            <a href="#">小米商城用户协议<span>|</span></a>
            <a href="#">问题反馈<span>|</span></a>
            <a href="#">Select Location</a>
          </p>
          <p class="p11">
           <a href="#">北京互联网法院法律服务工作站<span>|</span></a>
           <a href="#">中国消费者1协会<span>|</span></a>
           <a href="#">北京市消费者协会</a>
          </p>
          <p class="p12">
            <a href="">京公网安备11010802020134号</a>
            <a href=>京网文[2020]0276-042号</a><br>
            <a href=""> (京) 网械平台备字 (2018) 第00005号</a> 
            <a href=""> 互联网药品信息服务资格证(京)-非经营性-2014-0090</a> 
            <a href="">营业执照 医疗器械质量公告</a> <br>
            <a href="">增值电信业务许可证</a>
            <a href=>网络食品经营备案</a><br>
            <a href=""> 京食药网食备202010048</a> 
            <a href=""> 食品经营许可证
           </a> <br>
           违法和不良信息举报电话：171-5104-4404
           <a href="">知识产权侵权投诉
           </a>本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
          </p>
          <p>
            <a href="#">
            <img src="./图片素材/底图1.png" alt="1" style="height: 28px; width: 83px;">
            <img src="./图片素材/底图2.png" alt="1" style="height: 28px; width: 85px;">
            <img src="./图片素材/底图3.png" alt="1" style="height: 28px; width: 92px;">
            <img src="./图片素材/底图4.png" alt="1" style="height: 28px; width: 85px;">
            <img src="./图片素材/底图5.png" alt="1" style="height: 28px; width: 74px;">
            </a>
          </p>
       </div>
      </div>
    </div>
    </footer>

底部css样式代码：

footer {
  width: 100%;
  height: 680px;
}
.f-t {
  width: 1216px;
  margin: auto;
}
.shouhou {
  width: 1226px;
  border-bottom: 1px solid #ccc;
  height: 80px;
}
.shouhou > ul > li {
  position: relative;
  height: 80px;
  width: 20%;
  padding: 0 0 0 0;
  float: left;
}
.shouhou > ul > li > a {
  display: block;
  line-height: 80px;
  text-align: center;
  font-size: 14px;
  color: #616161;
}
.shouhou > ul > li > a:hover {
  color: #ff6a00;
}
.shouhou > ul > li + li::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 20px;
  top: 30px;
  left: 0px;
  display: block;
  background-color: #ccc;
}
.f-intro {
  margin-left: 136px;
  height: 392px;
}
.f-intro > ul {
  float: left;
  width: 160px;
  text-align: left;
}
.f-intro > ul > li {
  margin-left: 0;
  line-height: 25px;
  font-size: 12px;
  color: #616161;
  padding: 0 0 0 0;
}
.f-intro > ul > li:hover {
  color: #ff6a00;
}
.f-intro > ul > strong {
  color: #616161;
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  margin: 36px 0 25px 0;
}
.phone {
  float: left;
  width: 252px;
  height: 80px;
  margin-top: 30px;
  border-left: 1px solid #ccc;
  text-align: center;
}
.phone > p:first-child {
  color: #ff6a00;
  font-size: 20px;
  font-weight: 500;
}
.phone > p + p {
  font-size: 12px;
  color: #000;
  margin: 5px 0 3px 0;
}
.phone > div > a {
  display: inline-block;
  width: 118px;
  height: 28px;
  color: #ff6a00;
  border: 1px solid #ff6a00;
  font-size: 12px;
  line-height: 28px;
}
.phone > div > a:hover {
  background-color: #ff6a00;
  color: #fff;
}
.f-b {
  width: 100%;
  height: 230px;
  background-color: rgb(250, 250, 250);
}
.fbbox {
  width: 1226px;
  height: 216px;
  margin: auto;
}
.p11 {
  margin: 0 0 0 0;
}
.p11 > a {
  font-size: 14px;
  color: rgb(117, 117, 117);
}
.p12 {
  margin: 0 0 0 0;
  font-size: 14px;
  color: rgb(176, 176, 176);
}
.p12 > a {
  font-size: 14px;
  color: rgb(176, 176, 176);
}
.f-b-text {
  float: left;
  padding-top: 30px;
  margin-left: 20px;
}
.f-b-text a:hover {
  color: rgb(255, 103, 0);
}
.clearfix i {
  font-size: 24px;
  margin-right: 6px;
  vertical-align: middle;
}

可以看到难度不是很高，但是代码这个东西就是越敲越熟练。

那么今天的分享就到这里，感谢大家的观看，让我们共同努力，一起前进。

猜你喜欢

转载自blog.csdn.net/qq_45059691/article/details/126299232
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022