常用CSS实现效果汇集

1. css背景图片在页面自动拉伸铺满整屏

  background: url("image.png") no-repeat;
  height:100%;
  width:100%;
  overflow: hidden;
  background-size:cover;

或者background-size:100%;

2. 加边框和颜色

border: 1px solid #00FF00;  box-sizing: border-box;

3. border占用div宽度问题

CSS的border不会直接占用元素的宽度或高度，但它会影响元素的实际尺寸。当你给一个元素添加border后，元素的宽度和高度会自动增加。这是因为border被包含在元素的宽度和高度之内。
如果你想让border不影响元素的实际尺寸，你可以使用CSS的box-sizing属性。将box-sizing设置为border-box可以使得元素的宽度和高度就是你在CSS中设置的宽度和高度，不会因为border的增加而改变。

.element {
  width: 100px;
  height: 100px;
  border: 5px solid black;
  box-sizing: border-box;
}

4. js实现tab切换功能

<div class="tabs">
  <div class="tab" onclick="changeTab(0)">Tab 1</div>
  <div class="tab" onclick="changeTab(1)">Tab 2</div>
  <div class="tab" onclick="changeTab(2)">Tab 3</div>
</div>
<div class="tab-content">
  <div class="content" style="display: block;">Content 1</div>
  <div class="content">Content 2</div>
  <div class="content">Content 3</div>
</div>


function changeTab(index) {
  var i, tabs, contents;
 
  tabs = document.getElementsByClassName("tab"); // 获取所有Tab头部
  contents = document.getElementsByClassName("content"); // 获取所有Tab内容
 
  // 隐藏所有内容区域
  for (i = 0; i < contents.length; i++) {
    contents[i].style.display = "none";
  }
 
  // 移除所有Tab头部的活动状态
  for (i = 0; i < tabs.length; i++) {
    tabs[i].className = tabs[i].className.replace(" active", "");
  }
 
  // 显示对应的内容区域并添加活动状态
  contents[index].style.display = "block";
  tabs[index].className += " active";
}


.tab.active {
  font-weight: bold; /* 或其他样式表示激活状态 */
}
 
.content {
  display: none; /* 隐藏所有内容区域 */
}

本文 跨境啦 原创，转载保留链接！网址：https://tradela.cn/外贸营销/13.html