PC端页面常见编辑

爱被打了一巴掌 2023-02-23 09:26 30阅读 0赞

（1）PC端规则常用样式  
![在这里插入图片描述][20200707003505801.png]

HTML

CSS

body{ 
      min-width:1333px;
    }
    背景设置背景图：
    .rule{ 
     height:630px;
     background:url(‘xxxxxx’) no-repeat top;
    }
    
    背景里面元素居中：
    .rule-box{ 
     width:1120px;
     margin: 0 auto;
    }
    
    设置背景图片：
    h2{ 
     height:50px;
     background:url(‘xxxx’) no-repeat 50% 50%;
    }

（2）PC遍历列表使用ul + li (底部线 hover)  
![在这里插入图片描述][20200707003643180.png]  
HTML

CSS

.news-item { 
     padding: 23px 40px 10px;
    height: 223px;
    }
    li{ 
    border-bottom: 1px solid #9197ff;
    font-size: 14px;
    height: 38px;
    overflow: hidden;
    line-height: 38px;
    letter-spacing: .4px;
    padding-left: 5px;
    transition: all .2s; &:hover { 
            border-bottom-color: #ffcd63;
          }
    
    }
    
    .left{ 
    width: 950px;
    overflow: hidden;
    white-space: nowrap;
    float: left;
    text-overflow: ellipsis;
    }
    
    .right{ 
     float: right;
    margin-right: 5px;
    }

(3)Ul下面的li并排

HTML

CSS

u{ 
      li{ 
    display: inline-block;
    width: 96px;
    padding: 8px 0;
    margin: 0 10px;
    border-bottom: 2px solid #6e75f0;
    transition: all .2s; &:hover { 
            border-bottom-color: #ffcd63;
          }
    
      }
    }

(4)Hover展示另一个对话框

HTML

<ul>
                 <li>
                <i>×1</i>
                <div class="tip">
                  <div class="tip-content">
                    <p>
                      <span>三星玄龙骑士CTG7</span>
                    </p>
                  </div>
                </div>
              </li>
              <li>
                <i>×1</i>
                <div class="tip">
                  <div class="tip-content">
                    <p>
                      <span>希捷酷玩520系列 </span>
                      <span>FireCuda SSD</span>
                      <span>(ZP2000GM3A002)</span>
                      <span>PCIe4.0游戏硬盘</span>
                    </p>
                  </div>
                </div>
              </li>
    </ul>

CSS

li { 
              width: 113px;
              height: 126px;
              float: left;
              margin-right: 6px;
              position: relative; i { 
                font-size: 15px;
                position: absolute;
                top: 8px;
                right: 8px;
                line-height: 100%;
              }
              &:hover { 
                .tip { 
                  display: block;
                }
              }
              .tip { 
                display: none;
                position: absolute;
                left: -28px;
                top: -80px;
                z-index: 2;
                width: 171px;
                height: 103px;
                background-image: url(../assets/prize-tip.png);
                font-size: 14px;
                color: #fff; .tip-content { 
                  position: relative;
                  width: 153px;
                  height: 78px;
                  top: 6px;
                  left: 9px;
                }
                p { 
                  position: absolute;
                  left: 50%;
                  top: 50%;
                  transform: translate(-50%, -50%); span { 
                    display: block;
                    white-space: nowrap;
                  }
                }
              }
            }

[20200707003505801.png]: https://img-blog.csdnimg.cn/20200707003505801.png
[20200707003643180.png]: https://img-blog.csdnimg.cn/20200707003643180.png