s-1.rem自适应

head里
 
<script>    
    (function(doc,win){ 
            var docEl = doc.documentElement; 
            function recalc(){ 
                docEl.style.fontSize = 100* ((docEl.clientWidth > 640 ? 640 : docEl.clientWidth) / 640) + "px"
            } 
            resizeEvt = "orientationchange" in window ? "orientationchange" : "resize"
            win.addEventListener(resizeEvt, recalc, false);recalc(); 
        })(document,window); 
</script>
 
*{margin:0;padding:0;}
flex弹性布局不兼容 用float
1rem=100px

转载于:https://www.cnblogs.com/stone5/p/9035109.html

<div class="top-tabs"> <div class="breadcrumb"> 您所在的位置:首页 > 新闻资讯 > <span>综合资讯</span> </div> <!-- 选项卡类名改为 .tab-item(与 CSS 统一) --> <div class="tabs news-tabs"> <a href=" " class="tab-item active">综合资讯</a > <a href="#" class="tab-item">行业新闻</a > <a href="#" class="tab-item">行业动态</a > </div> </div>.pc .center-content .top-tabs { /* 移除底部边框 */ border-bottom: none; /* 弹性布局,内容左右两端分布 */ display: flex; justify-content: space-between; align-items: center; /* 垂直居中 */ padding: .29rem 0; /* 调整内边距 */ } /* 面包屑样式(居左) */ .pc .center-content .top-tabs .breadcrumb { font-size: .14rem; color: #A0A0A0; } /* 选项卡容器样式 */ .pc .center-content .top-tabs .tabs { display: flex; gap: 1rem; /* 选项卡间距 */ } /* 选项卡单个项样式 */ .pc .center-content .top-tabs .tab-item { cursor: pointer; display: inline-block; margin-left: 0; /* 移除左侧边距 */ padding: .08rem .2rem; /* 内边距 */ color: #66676B; text-decoration: none; /* 移除下划线 */ /* 过渡效果 */ transition: color 0.3s ease; } /* 激活状态样式(无下划线) */ .pc .center-content .top-tabs .tab-item.on { color: #DB1521; position: relative; /* 为指示器定位做准备 */ } /* 激活状态下的底部指示器(替代传统边框) */ .pc .center-content .top-tabs .tab-item.on::after { content: ""; position: absolute; left: 50%; bottom: -4px; /* 位于文本下方 */ transform: translateX(-50%); width: 80%; height: 2px; background-color: #DB1521; /* 红色指示器 */ } /* 悬停样式(非激活状态变色) */ .pc .center-content .top-tabs .tab-item:hover:not(.on) { color: #DB1521; }在面包屑导航下增加一道灰色横线 长度为从第一个字到最后一个字 选项卡位于页面最右侧 字体为黑色下方没有下划线 激活状态为红色且正下方有一红点与面包屑导航在页面中位于同一行
06-04
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值