手机部分解析

原创已于 2023-04-09 14:59:45 修改 · 152 阅读

CC 4.0 BY-SA版权

文章标签：

于 2023-04-09 14:43:47 首次发布

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           *{
               margin: 0;
               padding: 0;
               list-style-type: none;
               text-decoration: none;
           }
           /*phone盒子开始*/
.home-box{
   width: 100%;
   height: 614px;

   }
.home-box-left{
   width: 234px;
   height: 612px;
   background-color: white;
   float:left ;
   transition: all .2s linear;/*all .2s 匀速*/
}
.home-box-left img{
   width: 234px;
   height: 612px;
}
.home-box-right{
   width: 992px;
   height: 614px;

   float: left;
}
.iteams{
   width: 234px;
   height: 300px;
   background-color: #fff;
   float: left;
   margin-left:14px ;
   margin-bottom: 14px;

    transition: all .2s linear;/*all .2s 匀速*/
}
/*这一行代码用来控制鼠标悬停到小盒子上发生盒阴影等动态效果*/
.iteams:hover,.home-box-left1:hover,.last-iteams>div:hover,.video-iteams:hover{/*鼠标悬停到iteams上，鼠标悬停在iteams左边的，并展现出动态过渡盒阴影效果*/
   box-shadow: 0 15px 30px rgba(0,0,0,.1);
   transition: translateY(-2px);/*不理解*/
}
.img1{
   width: 160px;
   height: 160px;
   margin-bottom:20px ;
   margin: 0 40px;
   cursor: pointer;


}

.name2,.disc2{/*写成这样为了方便区分共同样式下的元素*/
   width: 214px;
   margin: 0 auto;
   text-align: center;
       white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
.name2{
   /*width: 214px;*/
   height: 18px;
   text-align: center;

   /*margin: 0 auto;*/
   font-size: 14px;
   margin-bottom: 2px;
   /*white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;*/
   line-height: 21px;
}
.disc2{
   /*width: 214px;*/
   height: 18px;
   /*margin: 0 auto;*/
   margin-bottom: 10px;
   font-size: 12px;
   color: #B0B0B0;
   line-height: 18px;
   /*text-align: center;
   overflow: hidden;
   text-overflow: ellipsis;*/
   line-height: 21px;
}
.price2{
   color: #ff6700;
   font-size: 14px;
   text-align: center;
   line-height: 21px;
}
.price2 >del{
   color: #b0b0b0;
   margin-left: 7px;
}
/*phonehe盒子结束*/
       </style>
   </head>
   <body>
       <div class="phone">
                  
                  <div class="home-banner-box">
                      <img src="img/红米K40s大图片.webp" />
                  </div>

                  <h2 class="title">手机
                  <a href="#" class="more">查看更多
                  <i class="iconfont">
                      <svg t="1650187403477" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5182" width="20" height="21.6"><path d="M512.04 512.88m-446 0a446 446 0 1 0 892 0 446 446 0 1 0-892 0Z" fill="#CCCCCC" p-id="5183"></path><path d="M429.15 256.95v90.16l165.83 165.77-165.83 165.77v90.15l256.02-255.92z" fill="#FFFFFF" p-id="5184"></path></svg>
                  </i>
                  </a>
                  </h2>
                  <div class="home-box">
                      <div class="home-box-left home-box-left1">
                          <img src="img/home-box左边图.webp" />
                      </div>
                      <div class="home-box-right">
                      <ul>
                          <li class="iteams">
                              <a>
                                  <img src="img/Redmi10A.webp" class="img1"/>
                                  <p class="name2">Redmi 10A</p><p class="disc2">大电量，大音量，大屏幕</p><p class="price2">649元起 <del>1699元</del></p>
                              </a>
                          </li>
                          <li class="iteams">
                              <a>
                                  <img src="img/Redmi10A.webp" class="img1"/>
                                  <p class="name2">Redmi 10A</p><p class="disc2">大电量，大音量，大屏幕</p><p class="price2">649元起 <del>1699元</del></p>
                              </a>
                          </li>
                          <li class="iteams">
                              <a>
                                  <img src="img/Redmi10A.webp" class="img1"/>
                                  <p class="name2">Redmi 10A</p><p class="disc2">大电量，大音量，大屏幕</p><p class="price2">649元起 <del>1699元</del></p>
                              </a>
                          </li>
                          <li class="iteams">
                              <a>
                                  <img src="img/Redmi10A.webp" class="img1"/>
                                  <p class="name2">Redmi 10A</p><p class="disc2">大电量，大音量，大屏幕</p><p class="price2">649元起 <del>1699元</del></p>
                              </a>
                          </li>
                          <li class="iteams">
                              <a>
                                  <img src="img/Redmi10A.webp" class="img1"/>
                                  <p class="name2">Redmi 10A</p><p class="disc2">大电量，大音量，大屏幕</p><p class="price2">649元起 <del>1699元</del></p>
                              </a>
                          </li>
                          <li class="iteams">
                              <a>
                                  <img src="img/Redmi10A.webp" class="img1"/>
                                  <p class="name2">Redmi 10A</p><p class="disc2">大电量，大音量，大屏幕</p><p class="price2">649元起 <del>1699元</del></p>
                              </a>
                          </li>
                          <li class="iteams">
                              <a>
                                  <img src="img/Redmi10A.webp" class="img1"/>
                                  <p class="name2">Redmi 10A</p><p class="disc2">大电量，大音量，大屏幕</p><p class="price2">649元起 <del>1699元</del></p>
                              </a>
                          </li>
                          <li class="iteams">
                              <a>
                                  <img src="img/Redmi10A.webp" class="img1"/>
                                  <p class="name2">Redmi 10A</p><p class="disc2">大电量，大音量，大屏幕</p><p class="price2">649元起 <del>1699元</del></p>
                              </a>
                          </li>
                      </ul>
                      </div>
                  </div>
              </div>
   </body>
</html>