京东网页版静态页面的几个问题

最新推荐文章于 2021-12-28 12:54:28 发布

原创最新推荐文章于 2021-12-28 12:54:28 发布 · 847 阅读

0 ·

CC 4.0 BY-SA版权

Web 专栏收录该内容

40 篇文章

订阅专栏

本文探讨了京东网页版中静态页面布局的一些常见问题及解决方案，包括图片与文字排版、伪元素的使用、购物车子父元素图层处理、CSS过渡效果的应用、雪碧图的原理和优势，以及行内元素与块级元素的区别和应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、图片和文字一起时，通常可通过给图片或文字设置浮动，然后再设置其他样式进行排版。
二、当给元素的添加内容时，可通过伪元素 before 和 after 去添加。
1.给元素添加边界线
2.添加背景：给before 和 after 设置绝对定位，并设置背景色，可作为元素的背景色。

 <style>
      div{
          height:30px;
          width:50px;
          position: relative;
      }
      div:after{
          content:"";
           background: rgba(0, 205, 0, 0.33);
          position: absolute;
          left:0;                //after 的大小和元素一样大
          right:0;
          bottom:0;
          top:0;
      }
</style>
<body>
  <div>fwef</div>
</body>

结果：
在这里插入图片描述
上面 after 的样式代码和下面的效果是一样的：position: absolute; left:0;right:0;bottom:0; top:0; 绝对定位的四个坐标都为0意思是 after 的大小和元素一样大，除了 after 其他元素也一样。

div:after{
          content:"";
          height:30px;
          width:50px;
          background: rgba(0, 205, 0, 0.33);
          position: absolute;
          left:0;
          top:0;
      }

三、购物车中的子父元素的图层
如图1、图2所示：图1中one 的下边框线是白色的，two 的上边框线是红色的，two 的上边框线把 one 的下边框线盖住了

在这里插入图片描述
如果要让图1中 one 的下边框盖住 two 的上边框线，形成图2的效果，方法是：
把 one 和 two 放在同一个 div 中，并给他们同时设置定位，让它们的边框线重合，这样 one 和 two 就是并列关系，最后再把 one 的z-index设置的比 two 高，就能达到图2 的效果。
重点：
1.one 和 two 放在同一个 div 中
2.同时给one 和 two设置定位
3.one 的z-index设置的比 two 高
确保 one 和 two 是并列的，代码如下：

<style>
    .one{
        width:100px;
        height:36px;
        border: 1px solid #e1251b;
        border-bottom-color: #fff;
        z-index: 1;
        background: #fff;
        position:absolute;
        right:0;   
    }
   .two{
        width:130px;
        height:30px;
        border:1px solid #e1251b;
        z-index:0;
       position:absolute;
       top:45px;
       right:0;
    }
</style>
<body>
    <div class="one"></div>
    <div class="two"> </div>
</body>

假如 one 是父元素，two 是子元素，代码如下，则不能实现图 2的效果。
原因： 此时 one 和 two 是子父元素的关系，当提高 one 的图层时，子元素two 也会随着提高，two 始终在 one 的上面，给two 设置的低图层是不起作用的。

<style>
        .one{
            width:100px;
            height:36px;
            margin-left:200px;
            border: 1px solid #e1251b;
            border-bottom-color: #fff;
            position:relative;
            z-index: 1;
            background: #fff;
        }
        .two{
            width:130px;
            height:30px;
            border:1px solid #e1251b;
            position: absolute;
            right:0;
            top:36px;
            z-index:0;
        }
</style>
<body>
<div class="one">
    <div class="two"></div>
</div>
</body>

四、CSS中样式的过渡

1. transition 适用于数值变化
有效的过渡属性： background, position, border, color,margin, padding, height, width, outline, visibility, opacity, zindex,line-height, letter-spacing, word-spacing, min/maxlength/height/width, text的一些属性等等。
2. display 没有过渡效果
元素的显示和隐藏不能过渡，不能实现过渡效果。但是透明度有过渡效果，通过透明度opacity属性从0到1的过渡可以模拟元素的显示和隐藏的过渡效。

<style>
 .more ul li>div{
    opacity: 0;
    transition: opacity 0.3s linear;
    position: absolute;
    bottom:18px;
    width: 190px;
    height:70px;
    background: linear-gradient(180deg,rgba(255,255,255,0.6),rgba(255,255,255,1),rgba(255,255,255,1));
}
.more ul li:hover>div{
    opacity:1;
}
</style>
<body>
  <ul>
    <li>
            <a href="">
            <img src="img/adv-lenovo.webp" alt=""/>
            <p>联想笔记本联想笔记本联想笔记本联想笔记本记本想记本联想记本联想想记本联想记本联想想记本联想记本联想联想记本联想记本联想联想笔记本联想笔记本联想笔记本联想笔记本联想笔记本</p>
            <p><i>￥</i><span>1480.00</span><em>券</em></p>
            </a>
            <div><button><span class="iconfont icon-yanjing"></span>&nbsp;找相似</button></div>
            <span class="iconfont icon-guanbi"></span>
    </li> 
  </ul>        
</body>

结果：
在这里插入图片描述

五、雪碧图

基本原理： 将网站上用到的一些小图片整合到一张单独的图片中，然后利用css的背景定位来显示需要显示的图片部分。从而减少网站的HTTP请求数量。图片是在CSS中background中定义，而非标签。
优点： 减少服务器请求数量，提高访问速度。
雪碧图使用方法：
1.设置一个大小合适的容器
2. 给容器添加背景图片，并设置background-position的值（默认为（0，0），图片的左上角），将图片移动到需要的小图片的位置处，相当于把小图片抠出来了。这里要慢慢改变background-position的值来达到效果。
注：不是移动容器的位置，而是移动图片的位置。
在这里插入图片描述

<style>
.yejiao ul li:nth-of-type(4) span{
    width:20px;                                      //设置容器
    height:12px;
    display: inline-block;
    margin-right: 5px;
}
.yejiao ul li:nth-of-type(4) a:first-of-type span{
    background: url(../img/areamini.png) no-repeat ;     //设置图片的位置
}
.yejiao ul li:nth-of-type(4) a:nth-of-type(2) span{
    background: url(../img/areamini.png) no-repeat -20px 2px;
}
.yejiao ul li:nth-of-type(4) a:nth-of-type(3) span{
    background: url(../img/areamini.png) no-repeat -40px 2px;
}
.yejiao ul li:nth-of-type(4) a:nth-of-type(4) span{
    background: url(../img/areamini.png) no-repeat 0 -14px;
}
.yejiao ul li:nth-of-type(4) a:last-of-type span{
    background: url(../img/areamini.png) no-repeat -20px -15px;
}
</style>
<body>
 <ul>
  <li>
    <a href=""><span></span>Global Site</a> <i>|</i><a href=""><span></span>Global Site</a> <i>|</i><a      href=""><span></span>Global Site</a> <i>|</i><a href=""><span></span>Global Site</a> <i>|</i><a href=""><span></span>Global Site</a>
  </li>
 </ul>
</body>

结果：
在这里插入图片描述

六、行内元素和块级元素

[https://blog.youkuaiyun.com/weixin_43314846/article/details/96428892]

1. 块级元素和行内块元素可以设置宽高，margin的四个方向都可以设置，padding的四个方向也都可以设置
2. 行内元素不可设置宽高，margin的上下方向以及padding的上下方向不可设置。但其左右方向可以设置大小
3. 行内块元素既有行内元素的特点，也有块级元素的特点