使用HTML＋css在网页中修饰出小鹅通首页

最新推荐文章于 2025-05-23 21:14:30 发布
最新推荐文章于 2025-05-23 21:14:30 发布
阅读量294 收藏
点赞数 2
文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cc05117/article/details/146460874
版权

网页HTML代码 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小鹅通首页</title>
   <style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    html,body{
        width: 100%;
        height: 100%;
    }
   </style>
   <link rel="stylesheet" href="1.css">
   <link rel="stylesheet" href="2.css">
   <link rel="stylesheet" href="3.css">
   <link rel="stylesheet" href="4.css">
   <link rel="stylesheet" href="./font_616wml1w9a9/iconfont.css">
   <link rel="stylesheet" href="5.css">
   <link rel="stylesheet" href="6.css">
   <link rel="stylesheet" href="7.css">
   <link rel="stylesheet" href="8.css">
   <link rel="stylesheet" href="9.css">
</head>
<body>
<div class="top">
  <div class="head">
    <div class="light">
        <ul>
         <li><img src="logo.png" alt=""><li>
         <li>首页<li>
         <li>解决方案<li>
         <li>产品服务<li>
         <li>价格<li>
         <li>活动<li>
         <li>案例<li>
         <li>渠道合作<li>
         <li>下载与帮助<li>
         <li>关于我们<li>
         <li>我是学员<li>
        </ul> 
    </div>
    <div class="right">
        <div>我是学员</div>
        <div>商家登录</div>
        <div>免费试用</div>
    </div>
  </div>
</div>
<div class="erwa">
  <div class="ebg">
<div class="title">我们的产品能力</div>
  <div class="pc"><img src="nengli.webp" alt=""></div>
    <div class="content">
      <div class="lt">
          <h1>知识店铺</h1>
          <h2>1分钟搭建您的知识商城</h2>
            <h3>助力高效知识变现</h3>
          <h4>免费试用</h4>
      </div>
      <div class="ct">
        <h1>私域直播</h1>
        <h2>企业级专属私域直播平台</h2>
          <h3>实现私域流量高效运营</h3>
        <h4>免费试用</h4>
      </div>
      <div class="rt">
        <h1>企微SCRM</h1>
        <h2>企业微信私域运营神器</h2>
          <h3>数据洞察驱动业绩增长</h3>
        <h4>免费试用</h4>
    </div>
  </div>
</div>
</div>
<div class="sanwa">
  <div class="sbg">
    <div class="heat">我们的场景解决方案</div>
      <ul class="dh">
        <li class="gy">公域获客</li>
        <li>私域运营</li>
        <li>直播带货</li>
        <li>内容交付</li>
        <li>数据化运营</li>
      </ul>
    <div class="co">
      <div class="li"><img src="sanbg.webp" alt=""></div>
      <div class="ri">
        <span class="one">公域获客</span>
        <span class="two">多渠道获客，沉淀私域流量池</span>
        <p>打通抖音/快手/小红书/视频号/公众号，支持直播间/短视频/账号主页等多种课程挂载方式，快速开启知识变现</p>
        <p>多种公域转私域工具，支持添加企微/引流加群加人/渠道活码/分配引擎等工具，客户可批量导流到私域流量池</p>
        <p>丰富的广告获客能力，落地页支持表单/支付类/0元领取/添加企微等多场景,提升广告ROI</p>
        <div class="anu">
          <div>免费试用</div>
          <div>了解详情</div>
        </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="siwa">
  <div class="sibg">
    <div class="goup">我们的行业解决方案</div>
    <div class="zhuti">
      <div class="szl">
        <ul>
        <li class="sgt"><i class="iconfont icon-mendian"></i>新零售门店</li>
        <li><i class="iconfont icon-zaixianpeixun"></i>职业培训</li>
        <li><i class="iconfont icon-zhishichanquan"></i>知识付费</li>
        <li class="sgb"><i class="iconfont icon-zhihuimeiye"></i>美业直播</li>
        </ul>
      </div>
      <div class="szc">
        <span class="so">新零售门店解决方案</span>
        <span class="sw">私域直播带货+ 推广门店体系，助力商家私域流量高效变现</span>
        <div class="snr">
          <div class="snr1">
           <div class="snr11">直播带货</div>
           <div class="snr11">在线商城</div>
           <div class="snr11">门店管理</div>
           <div class="snr11">门店核销</div>
           <div class="snr11">渠道活码</div>
          </div>
          <div class="snr2">
           <div class="snr22">直播红包</div>
           <div class="snr22">直播抽奖</div>
           <div class="snr22">邀请达人榜</div>
           <div class="snr22">商品秒杀</div>
          </div>
        </div>
        <div class="saniu">
          <div>免费试用</div>
          <div>了解详情</div>
        </div>
      </div>
      <div class="szr">行业案例</div>
    </div>
  </div>
</div>
<div class="wuwa">
  <div class="wbg">
    <div class="jbg">我们的技术优势</div>
    <div class="wpc">
      <div class="wl">
        <ul>
          <li class="wl1">超稳定</li>
          <li class="wl2">多云负载均衡/全球CDN加速</li>
        </ul>
      </div>
      <div class="wc">
          <ul>
          <li class="wc1">高并发</li>
          <li class="wc2">支持多用户同时在线</li>
        </ul>
      </div>
      <div class="wr">
        <ul>
          <li class="wr1">超流畅</li>
          <li class="wr2">观看端自动探测并自动跨云线路切换</li>
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="liuwa">
  <div class="lbg">
    <div class="ltop">我们的运营服务</div>
      <div class="lpc1">
        <div class="liu11">
          <div class="l1tp">
          <div class="l1pc"><img src="./lpc1.png" alt=""></div>
          <span>社群服务</span>
          <p>标杆商家分享，同行商家交流，总比别人快一步</p>
        </div>
        </div>
        <div class="liu22">
          <div class="l2tp">
          <div class="l2pc"><img src="./lpc2.png" alt=""></p></div>
          <span>管家服务</span>
          <p>客户经理、服务管家、多角色在群，服务全面包围</p>
        </div>
        </div>
        <div class="liu33">
          <div class="l3tp">
            <div class="l3pc"><img src="./lpc3.png" alt=""></div>
          <span>大客服务</span>
          <p>设置夜班服务管家/假期值班管家，24小时在线服务，</p>
            <h1>服务从不掉线</h1>
        </div>
        </div>
        <div class="liu44">
          <div class="l4tp">
            <div class="l4pc"><img src="./lpc4.png" alt=""></div>
          <span>运营服务</span>
          <p>需求24小时反馈，需求处理率大于90% ，产品经理</p>
            <h2>1v1回复</h2>
        </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="qiwa">
  <div class="qbg">
    <div class="qtop">他们都在用小鹅通</div>
    <div class="qtw">（*排名不分先后顺序）</div>
    <div class="qtr">
      <div class="qtrbg">
        <div class="qtp1">
          <div class="q11">
          <div class="qtpo">
            <img src="./qt1.webp" alt="">
          </div>
          <span>小能熊科学学习</span>
          <p>小能熊学院以学习科学化为使命，专注提供学习方法和自我管理解决方案，陪伴严肃、耐心、永不妥协的终生</h1>
            <h1>学习者！</h1>
          </div>
        </div>
        <div class="qtp2">
          <div class="q22">
          <div class="qtpt"><img src="./qt2.webp" alt=""></div>
          <span>刘润.进化的力量</span>
          <p>刘润，润米咨询创始人，“5分钟商学院”课程主理人，著名商业顾问，曾为海尔、中远、恒基、百度等企业提供过战略咨询服务，每年10月举办“进化的力量·年度演讲”，为创业者企业家提供年度规划的参考方向，一起更早看到未来。使命：降低商业的认知门槛。</p>
        </div>
      </div>
        <div class="qtp3">
          <div class="q33">
          <div class="qtpd"><img src="./qt3.webp" alt=""></div>
          <span>佰君易直播间</span>
          <p>佰君易直播间，由培养过10万项目管理师的王远航老师打造，为各行业提供项目管理实战培训。佰君易直播</p>
            <h3>间与小鹅通深度合作，帮助职场小伙伴升职加薪</h3>
        </div>
      </div>
      </div>
    </div>
    <div class="qnr">
    <div class="qnr1">
      <div class="qnr11"><img src="./q商家logo1.png" alt=""></div>
      <div class="qnr11"><img src="./q商家logo2-1.png" alt=""></div>
      <div class="qnr11"><img src="./q商家logo3-1.png" alt=""></div>
      <div class="qnr11"><img src="./q商家logo4-1.png" alt=""></div>
      <div class="qnr11"><img src="./q商家logo5-1.png" alt=""></div>
      <div class="qnr11"><img src="./q商家logo6-5.png" alt=""></div>
     </div>
     <div class="qnr2">
      <div class="qnr22"><img src="./q2商家logo1-6.png" alt=""></div>
      <div class="qnr22"><img src="./q2商家logo2-7.png" alt=""></div>
      <div class="qnr22"><img src="./q2商家logo3-8.png" alt=""></div>
      <div class="qnr22"><img src="./q2商家logo4-9.png" alt=""></div>
      <div class="qnr22"><img src="./q2商家logo5-10.png" alt=""></div>
      <div class="qnr22"><img src="./q2商家logo6-11.png" alt=""></div>
     </div>
    </div>
   </div>
   <div class="qfive">查看更多案例></div>
  </div>
</div>
<div class="bawa">
  <div class="bawabg">
    <div class="bat">立即扫码咨询，领取您的专属解决方案</div>
    <div class="baco">
      <div class="bal"><img src="./bapc.jpg" alt=""></div>
      <div class="bar">
        <div class="text">扫码添加客户经理</div>
        <div class="subtext">或者您也可以先</div>
        <div class="button">免费试用</div>
      </div>
    </div>
  </div>
</div>
<div class="jiuwa">
  <div class="jiubg">
    <div class="jc1">
      <div class="c11">
        <div class="c111">场景</div>
        <div class="c112">全域获客</div>
        <div class="c112">私域运营</div>
        <div class="c112">直播带货</div>
        <div class="c112">内容交付</div>
        <div class="c113">数据化运营</div>
        <div class="c112">企业内训</div>
      </div>
    <div class="c22">
      <div class="c222">行业</div>
      <div class="c212">零售电商</div>
      <div class="c212">职业培训</div>
      <div class="c212">知识付费</div>
      <div class="c212">企业营销</div>
      <div class="c212">美业直播</div>
      <div class="c212">企业培训</div>
      <div class="c212">社区团购</div>
      <div class="c212">营销会务</div>
    </div>
      <div class="c33">
      <div class="c333">产品</div>
      <div class="c312">知识店铺</div>
      <div class="c312">私域直播</div>
      <div class="c314">企微SCRM</div>
      <div class="c313">企学院</div>
      <div class="c312">智能投放</div>
      <div class="c315">海外版eLink</div>
      <div class="c313">小鹅云</div>
      </div>
      <div class="c44">
      <div class="c444">服务</div>
      <div class="c413">小鹅创业社区</div>
      <div class="c412">本地社群</div>
      <div class="c412">教练联盟</div>
      <div class="c413">小鹅通训练营</div>
      <div class="c412">对话标杆</div>
      </div>
      <div class="c55">
        <div class="c555">关于我们</div>
      <div class="c512">公司简介</div>
      <div class="c512">加入我们</div>
      <div class="c512">媒体报道</div>
      <div class="c512">更多资讯</div>
      <div class="c512">客户案例</div>
      <div class="c512">帮助中心</div>
      </div>
      <div class="c66">
        <div class="c666">媒体报道</div>
      <div class="c612">D轮融资1.2亿美元，小鹅通究竟在做什么？</div>
      <div class="c613">知识付费用户达5.27亿，内容创业的下半场</div>
      <div class="c613">知识工作者的终极梦想，可能是拥有一个</div>
      <div class="c615">小鹅通：让知识更有价值</div>
      <div class="c616">小鹅通联合艾瑞咨询发布《2023年中国私域</div>
      </div>
      <div class="c77">
        <span>400-102-6665</span>
        <p>周一至周日 9:00-21:00</p>
        <div class="c7pc">
          <div><img src="./bapc.jpg" alt=""></div>
          <div><img src="./bapc.jpg" alt=""></div>
        </div>
        <p1>关注小鹅通公众号</p1>
        <p2>进入小鹅通创业社区</p2>
      </div>
    </div>
    <div class="jc2">
      <div class="jc2l">
        <P>深圳总部：深圳市南山区粤海街道科兴科学园D3栋7楼</P>
        <P>北京地址：北京市朝阳区朝外大街乙6号23层2301B-2</P>
        <P>上海地址：中国（上海）自由贸易试验区世纪大道1500</P>
      </div>
      <div class="jc2c">
        <p>商务合作：support@xiaoe-tech.com</p>
        <p>投诉意见：xiaoeks@xiaoe-tech.com</p>
        <p>渠道合作：partner@xiaoe-tech.com</p>
      </div>
      <div class="jc2r">
        <p>互联网违法和不良信息举报电话：0755-26409534</p>
        <p>互联网不良信息举报邮箱：xiaoeks@xiaoe-tech</p>
        <p>安全漏洞反馈邮箱：security@xiaoe-tech.com</p>
      </div>
    </div>
    <div class="jc3">
      <div class="jc31">友情链接</div>
      <div class="jc31">知识付费软件</div>
      <div class="jc31">知识付费平台</div>
      <div class="jc31">小鹅通企学院</div>
      <div class="jc31">私域直播工具</div>
      <div class="jc31">小鹅通APP</div>
      <div class="jc31">小鹅创业社区</div>
      <div class="jc31">小鹅通移动版</div>
      <div class="jc31">小鹅通学员版</div>
    </div>
    <div class="jc4">
      <div class="jc4l"><i><img src="./jlogo.png" alt=""></i>关于印发xxxx</div>
      <div class="jc4c">工商营业执照</div>
      <div class="jc4r">
        <div class="jimg1">
          <div><img src="./jglogo.png" alt=""></div>
          <span>粤公网安备44030502002037号</span>
        </div>
        <div class="jimg2">
          <div><img src="./jgslogo.png" alt=""></div>
          <span>工商网监 电子标识</span>
        </div>
      </div>
    <div class="jc5">
      <div class="jc5l"></div>
      <div class="jc5c"></div>
      <div class="jc5r"></div>
        
      </div>
    </div>
    <div class="jc6">
      <div class="jc6t">Copyright © 2015-2024 深圳小鹅网络技术有限公司 All Rights Reserved. 粤ICP备15020529号-1</div>
      <div class="jc6b">
        <div>互联网药品信息服务资格证书（粤）—经营性—2020—0589</div>
        <div>医疗器械网络交易服务第三方平台备案（粤）网械平台备字（2021）第00001号</div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

 当写多个复杂网页时不同页面需要不同的修饰，所以为了避免重复以及混淆，引入不同分段的css的文件，以下是引入的css代码

引入的css代码1

*{
    margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body{
    width: 100%;
    height: 100%;
}
body{
    font-size: 62.5%;
}
.head{
    
    width: 100%;
    height:90px;
    display: flex;
    justify-content: space-between;
    border-bottom: solid 1px #ddd;
}
.head:hover{background-color: #fff;}
.light ul{
height: 72px;
display: flex;
justify-content: space-evenly;
}
ul{
    width: 800px;
    height: 72px;
    list-style: none;

display: flex;
justify-content:space-evenly;
align-items: center;
}
li{
    cursor: pointer;
    font-size: 12px;
}
li{
    cursor: pointer;
}
li:hover{
    font-weight: 700;
}
li img{
    width: 120px;
    height: 30px;
}
.right{
    width: 500px;
    height: 72px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.right div:nth-of-type(1){
    width: 120px;
    height: 38px;
    font-size: 16px;
    text-align: center;
    line-height: 38px;
}
.right div:nth-of-type(1):hover{
    color: #4872f6;
}
.right div:nth-of-type(2){
    width: 120px;
    height: 38px;
    border: solid 1px #48649e;
    background-color: #fff;
    color: #4872f6;                                                                                                     ;
    text-align: center;
    line-height: 38px;
    border-radius: 10px;
    font-weight: 300;
    font-size: 16px;
    cursor: pointer;
}
.right div:nth-of-type(2):hover{
    background-color: #4872f6;
    color: #fff;
}
.right div:nth-of-type(3){
   width: 120px;
   height: 38px;
   border: solid 1px #48649e;
   background-color: #4872f6;
   color: #fff;
   text-align: center;
   line-height: 38px;
   border-radius: 10px;
   font-weight: 300;
   font-size: 16px;
   cursor: pointer;
}
.right div:nth-of-type(3):hover{
    background: #4871f6a2;
}
.top{
    background-image: url(./top.webp);
    width: 100%;
    height: 500px;
    background-size: cover;
    background-position:0 center;
    background-repeat: no-repeat;
}

引入的css代码2

*{
    margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body{
    width: 100%;
    height: 100%;
}
html{
    font-size:10px;
}
.erwa{
    width: 100%;
    height: 90rem;
    /* background: #db4c4c; */
    display: flex;
    justify-content: center;
}
.ebg{
    width:120rem;
    height: 90rem;

    /* background-color: #77ca51; */
}
.title{
    width: 100%;
    height: 100px;
    font-size: 4rem;
    font-weight: 6rem;
    text-align: center;
    align-items:center;
    line-height: 9rem;
}
.pc{
    width: 100%;
    height: 55rem;
    text-align: center;
    /* background: #44cb38; */
}
.pc img{
    width:120rem;
    height: 55rem;
}
.content{
    width: 120rem;
    height: 24rem;
    display: flex;
    /* background-color: #9ac12e; */
}
.lt{
    width: 40rem;
    height: 25rem;
    /* background-color: aquamarine; */
}
.lt h1{
    font-size: 3rem;
    font-weight: 600;
    color: #4872f6;
    padding-bottom: 8rem;
}
.lt h2{
    font-size: 2rem;
    font-weight: 400;
}
.lt h3{
    font-size: 2rem;
    font-weight: 400;
    padding-bottom: 5rem;
}
.lt h4{
    font-size: 2rem;
    font-weight: 400;
    color: #4872f6;
}
.ct{
    width: 40rem;
    height: 25rem;
/* background-color: beige; */
}
.ct h1{
    font-size: 3rem;
    font-weight: 600;

    padding-bottom: 8rem;
}
.ct h2{
    font-size: 2rem;
    font-weight: 400;
}
.ct h3{
    font-size: 2rem;
    font-weight: 400;
    padding-bottom: 5rem;
}
.ct h4{
    font-size: 2rem;
    font-weight: 400;
    color: #4872f6;
}
.rt{
    width: 40rem;
    height: 25rem;
/* background-color: bisque; */
}
.rt h1{
    font-size: 3rem;
    font-weight: 600;

    padding-bottom: 8rem;
}
.rt h2{
    font-size: 2rem;
    font-weight: 400;
}
.rt h3{
    font-size: 2rem;
    font-weight: 400;
    padding-bottom: 5rem;
}
.rt h4{
    font-size: 2rem;
    font-weight: 400;
    color: #4872f6;
}

引入的css代码3

*{
    margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body{
    width: 100%;
    height: 100%;
}
html{
    font-size:10px;
}
.sanwa{
    width: 100%;
    height: 90rem;
    /* background: #c42727; */
    display:flex;
    justify-content: center;
    background: linear-gradient(90deg, #f2fefe, #e2e2f1);
}
.sbg{
    width: 130rem;
    height: 90rem;
    /* background-color: #c8c51b; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:space-evenly;
}
.heat{
    font-size: 4rem;
    font-weight: 60rem;
    /* background-color: #a43131; */
}
.dh{
    width: 70rem;
    height: 5rem;
    background-color: #fff;
    border-radius: 25px;
    list-style: none;
    display: flex;
    justify-content:space-between;
}
.dh li{
    width: 130px;
    height: 5rem;
    /* background-color: aquamarine; */
    text-align: center;
    line-height: 5rem;
}
.gy{
    border-radius: 25px;
    background-color: #4872f6;
    color: #fff;
}
.co{
    width: 120rem;
    height: 60rem;
    border-radius: 1rem;
    border: solid 2px #fff;
    background-color: #fff;
    overflow: hidden;
    display: flex;

}
.li,
.li img{
    width: 60rem;
    height: 50rem;
}
.ri {
    width: 70rem;
    height: 60rem;
    /* background-color: #45af18; */
    padding: 8rem;
    display: flex;
    flex-direction: column;
    justify-content:space-around;
}
.one{
    font-size: 4rem;
    width: 540px;

}
.two{
   font-size: 2.6rem;
   font-weight: 400;
   color: #141414;
   width: 540px;
}
.ri p{
    color: gray;
    background-image: url(./wenlogo.png);
    background-repeat: no-repeat;
    background-position: 0 center;
    padding-left: 30px;
    font-size: 1rem;
    padding-right: 150px;
}
.anu{
  /* background: #b84c4c; */
   width: 500px;
   height: 72px;
   display: flex;
   justify-content: space-evenly;
   align-items: center;
}
.anu :nth-of-type(1){
    width: 120px;
    height: 38px;
    border: solid 1px #48649e;
    background-color: #4872f6;
    color: #fff;                                                                                                     ;
    text-align: center;
    line-height: 38px;
    border-radius: 10px;
    font-weight: 300;
    font-size: 16px;
    cursor: pointer;
}
.anu :nth-of-type(1):hover{
    background: #4871f6a2;
}
.anu :nth-of-type(2){
    width: 120px;
   height: 38px;
   border: solid 1px #48649e;
   background-color: #fff;
   color: #4872f6;
   text-align: center;
   line-height: 38px;
   border-radius: 10px;
   font-weight: 300;
   font-size: 16px;
   cursor: pointer;
}
.anu :nth-of-type(2):hover{
    background-color: #4872f6;
    color: #fff;
}

引入的css代码4

*{
    margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body{
    width: 100%;
    height: 100%;
}
html{
    font-size:10px;
}
.sinwa{
    width: 100%;
    height: 70rem;
}
.sibg{
    background-image:url(./4logo.webp);
    width: 100%;
    height: 70rem;
    background-size: cover;
    background-position:0 center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;

}
.goup{
    width: 100%;
    height: 15rem;
    font-size: 4rem;
    font-weight: 600;
    color: #fff;
    text-align: center;
    line-height: 28rem;
    
}
.zhuti{
    width: 130rem;
    height: 50rem;
    /* background-color: #fff; */
    display: flex;
    flex-direction:space-evenly;
    margin-top: 2rem;  
}
.szl{
    width: 50rem;
    height: 50rem;
    background-color: #3f3d3e4a;
    border-radius: 25px;
    list-style: none;
    
}
.szl ul{
    width: 23rem;
    height: 5rem;
    text-align: center;
    line-height: 5rem;
    font-size: 2rem;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    color: #ffffff;
    
}
.sgt{
    border-radius: 10px;
    margin-top: 5rem;
    width: 15rem;
    /* color: #fff; */
    background: linear-gradient(90deg, #3450aea4,#3f3d3e4a);
}
.sgb{
    margin-top:0rem;
}
.szc{
    width: 100%;
    height: 50rem;
    /* background-color: #39a067; */
    display: flex;
    flex-direction: column;
    align-items: center;
}
.so{
    width: 100%;
    height: 10rem;
    font-size: 2.5rem;
    font-weight: 400;
    color: #fff;
    line-height: 15rem;
    /* background-color: #bd6767; */
    margin-left: 4rem;
}
.sw{
    width: 100%;
    height: 10rem;
    /* background-color: #53699b; */
    font-size: 1.5rem;
    font-weight: 400;
    color: #fff;
    margin-left: 4rem;
    line-height: 10rem;
}
.snr{
    width: 100%;
    height: 20rem;
    /* background-color: #d08d52; */
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.snr1{
    margin-left: 2rem;
    width: 100%;
    height: 10rem;
    /* background: #1e813c; */
    display: flex;
    text-align: center;
    line-height: 10rem;
    font-size: 1.3rem;
}
.snr11{
    color: #fff;
    
    width:10rem;
    height: 10rem;
    border: solid 1px #fff;
}
.snr2{
    margin-left: 2rem;
    width: 100%;
    height: 10rem;
    /* background: #739514; */
    display: flex;
    text-align: center;
    line-height: 10rem;
    font-size: 1.3rem;
}
.snr22{
    color: #fff;
    width: 10rem;
    height: 10rem;
    border: solid 1px #fff;
}
.saniu{
    /* background: #b84c4c; */
     width: 500px;
     height: 72px;
     display: flex;
     justify-content: space-evenly;
     align-items: center;
  }
  .saniu :nth-of-type(1){
      width: 120px;
      height: 38px;
      border: solid 1px #48649e;
      background-color: #4872f6;
      color: #fff;                                                                                                     ;
      text-align: center;
      line-height: 38px;
      border-radius: 10px;
      font-weight: 300;
      font-size: 16px;
      cursor: pointer;
  }
  .saniu :nth-of-type(1):hover{
      background: #4871f6a2;
  }
  .saniu :nth-of-type(2){
      width: 120px;
     height: 38px;
     border: solid 1px #48649e;
     color: #4872f6;
     text-align: center;
     line-height: 38px;
     border-radius: 10px;
     font-weight: 300;
     font-size: 16px;
     cursor: pointer;
  }
  .saniu :nth-of-type(2):hover{
      color: #fff;
  }
  .szr{
    width: 100%;
    height: 40rem;
    /* background-color: #a72d2d; */
    font-size: 2rem;
    line-height: 20rem;
    color: #fff;
    text-align: center;
    border-left: solid 1px #d4d4d430;
}

引入的css代码5

*{
    margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body{
    width: 100%;
    height: 100%;
}
html{
    font-size:10px;
}
.wuwa{
    width: 100%;
    height: 60rem;
    /* background-color: #4872f6; */
    display: flex;
    justify-content: center;
}
.wbg{
    width:110rem;
    height: 60rem;
    background-color: #fff;
    display: flex;
    flex-direction: column;
}
.jbg{
    width: 100%;
    height: 10rem;
    font-size: 5rem;
    font-weight: 550;
    text-align: center;
    line-height: 10rem;
    /* background-color: #8f1818; */
    margin-top: 3rem;
}
.wpc{
    width: 100%;
    height: 40rem;
    /* background-color: #f30f0f; */
    display: flex;
}
.wl{
    width: 30rem;
    height:  40rem;
    /* background-color: #5688b7; */
    background-image: url(./wlpc.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: solid 1px #fff;
    border-radius: 1rem;
    padding-left: 1rem;
}
.wl ul{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
}
.wl ul li{
    width: 100%;
    height: 10rem;
    color: #fff;
}
.wl1{
    font-size: 3rem;
    line-height: 6rem;
    font-weight: 450;
}
.wl2{
    font-size: 2rem;
    line-height: 1rem;
    font-weight: 350;
}
.wc{
    width: 50rem;
    height: 40rem;
    /* background-color: #bfc139; */
    background:
    linear-gradient(90deg,rgb(57, 84, 236),rgba(57, 84, 236, 0.258)),
    url(./wcpc.webp);
    background-position: center;
    background-repeat: no-repeat;
    border: solid 1px #fff;
    border-radius: 1rem;
    margin-left: 1rem;
    margin-right: 1rem;
    padding: 1rem;
}
.wc ul{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.wc ul li{
    width: 100%;
    height: 10rem;
    color: #fff;
}
.wc1{
    font-size: 3rem;
    line-height: 6rem;
    font-weight: 450;
}
.wc2{
    font-size: 2rem;
    line-height: 1rem;
    font-weight: 350;
}
.wr{
    width: 30rem;
    height: 40rem;
    /* background-color: #2ec52e; */
    background-image: url(./wrpc.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: solid 1px #fff;
    border-radius: 1rem;
    padding-left: 1rem;
}
.wr ul{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.wr ul li{
    width: 100%;
    height: 10rem;
    color: #fff;
}
.wr1{
    font-size: 3rem;
    line-height: 6rem;
    font-weight: 450;
}
.wr2{
    font-size: 2rem;
    line-height: 1rem;
    font-weight: 350;
}

引入的css代码6

*{
    margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body{
    width: 100%;
    height: 100%;
}
html{
    font-size:10px;
}
.liunwa{
    width: 100%;
    height: 60rem;
}
.lbg{
    width: 100%;
    height: 60rem;
    /* background-color: #ce4c4c; */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.ltop{
    width: 50rem;
    height: 10rem;
    font-size: 5rem;
    font-weight: 500;
    /* background-color: #9a0a35; */
    margin-top: 2rem;
}
.lpc1{
    width: 100%;
    height: 60rem;
    /* background-color: #3ab44e; */
    display: flex;
    justify-content: space-evenly;
}
.liu11{
    width: 50rem;
    height: 30rem;
    /* background-color: #bf1717; */
}
.l1tp{
    width: 100%;
    height: 100%;
    /* background-color: #acd834; */
    display: flex;
    flex-direction: column;

}
.l1pc{
    width: 41.6rem;
    height: 20rem;
    left: 0%;
}
.l1pc img{
    width: 100%;
    height: 20rem;
    padding-left: 0%;
}
.l1tp span{
    width: 16rem;
    font-size: 3rem;
}
.l1tp p{
    width: 25rem;
    font-size: 1rem;
    color: gray;
}
.liu22{
    width: 50rem;
    height: 30rem;
    /* background-color: #22377a; */
}
.l2tp{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

}
.l2pc{
   width: 41.6rem;
    height: 20rem;
    left: 0%;
}
.l2pc img{
    width: 100%;
    height: 20rem;
    padding-left: 0%;
}
.l2tp span{
    width: 16rem;
    font-size: 3rem;
}
.l2tp p{
    width: 25rem;
    font-size: 1rem;
    color: gray;
}
.liu33{
    width: 50rem;
    height: 30rem;
    /* background-color: #b8d747; */
}
.l3tp{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

}
.l3pc{
    width: 41.6rem;
    height: 20rem;
    left: 0%;
}
.l3pc img{
    width: 100%;
    height: 20rem;
    padding-left: 0%;
}
.l3tp span{
    width: 16rem;
    font-size: 3rem;
}
.l3tp p{
    width: 25rem;
    font-size: 1rem;
    color: gray;
}
.l3tp h1{
    width: 7.5rem;
    font-size: 1rem;
    color: gray;
}
.liu44{
    width: 50rem;
    height: 30rem;
    /* background-color: #db7c37; */
}
.l4tp{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

}
.l4pc{
    width: 41.6rem;
    height: 20rem;
    left: 0%;
}
.l4pc img{
    width: 100%;
    height: 20rem;
    padding-left: 0%;
}
.l4tp span{
    width: 16rem;
    font-size: 3rem;
}
.l4tp p{
    width: 25rem;
    font-size: 1rem;
    color: gray;
}
.l4tp h2{
    width: 6.5rem;
    font-size: 1rem;
    color: gray;
}

引入的css代码7

*{
    margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body{
    width: 100%;
    height: 100%;
}
html{
    font-size:10px;
}
.qiwa{
    width: 100%;
    height: 90rem;
}
.qbg{
    width: 100%;
    height: 80rem;
    background-image: url(./q背景.png);
    
}
.qtop{
    width: 100%;
    height: 7rem;
    font-size: 5rem;
    font-weight: 500;
    /* background-color: #d2db51; */
    text-align: center;
}
.qtw{
    width: 100%;
    height: 5rem;
    font-size: 2rem;
    color: gray;
    text-align: center;
    /* background-color: aqua; */
}
.qtr{
    width: 100%;
    height: 40rem;
    /* background-color:bisque; */
    display: flex;
    justify-content: center;
}
.qtrbg{
    width: 120rem;
    height: 40rem;
    /* background-color: #2ec44c; */
    display: flex;
}
.qtp1{
    width: 39rem;
    height: 35rem;
    background-color: #ffffff;
    margin-right: 3rem;
}
.q11{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

}
.qtpo{
    width: 39rem;
    height: 20rem;
    left: 0%;
}
.qtpo img{
    width: 100%;
    height: 20rem;
    padding-left: 0%;
}
.q11 span{
    width: 24rem;
    font-size: 3rem;
    margin-left: 1rem;
}
.q11 p{
    width: 24rem;
    font-size: 1rem;
    color: gray;
    margin-left: 1rem;
}
.q11 h1{
    width: 6.5rem;
    font-size: 1rem;
    color: gray;
    margin-left: 1rem;
}
.qtp2{
    width: 39rem;
    height: 35rem;
    background-color: #ffffff;
    margin-right: 3rem;
}
.q22{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

}
.qtpt{
    width: 39rem;
    height: 20rem;
    left: 0%;
}
.qtpt img{
    width: 100%;
    height: 20rem;
    padding-left: 0%;
}
.q22 span{
    width: 24rem;
    font-size: 3rem;
    margin-left: 1rem;
}
.q22 p{
    width: 24rem;
    font-size: 1rem;
    color: gray;
    margin-left: 1rem;
}
.q22 h1{
    width: 6.5rem;
    font-size: 1rem;
    color: gray;
    margin-left: 1rem;
}

.qtp3{
    width: 39rem;
    height: 35rem;
    background-color: #ffffff;
    margin-right: 3rem;
}
.q33{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

}
.qtpd{
    width: 39rem;
    height: 20rem;
    left: 0%;
}
.qtpd img{
    width: 100%;
    height: 20rem;
    padding-left: 0%;
}
.q33 span{
    width: 24rem;
    font-size: 3rem;
    margin-left: 1rem;
}
.q33 p{
    width: 24rem;
    font-size: 1rem;
    color: gray;
    margin-left: 1rem;
}
.q33 h3{
    width: 25rem;
    font-size: 1rem;
    color: gray;
    margin-left: 1rem;
    font-weight: 400;
}
.qnr{
    width: 100%;
    height: 20rem;
    /* background-color: #d08d52; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 0.6rem;
}
.qnr1{
    margin-left: 2rem;
    width: 132rem;
    height: 15rem;
    /* background: #1e813c; */
    display: flex;
    justify-content: space-evenly;
    text-align: center;
    
}
.qnr11 {
    width:17rem;
    height: 15rem;
}
.qnr11 img{
    width: 100%;
    height: 100%;
}
.qnr2{
    margin-left: 2rem;
    width: 132rem;
    height: 15rem;
    /* background: #b0a41d; */
    display: flex;
    justify-content: space-evenly;
    text-align: center;
    
}
.qnr22 {
    width:17rem;
    height: 15rem;
}
.qnr22 img{
    width: 100%;
    height: 100%;
}
.qfive{
    width: 14rem;
    height: 4rem;
    font-size: 1.5rem;
    color:#4872f6;
    text-align: center;
    border: solid 1px #4872f6;
    text-align: center;
    margin-left: 79rem;
    line-height: 4rem;
}

引入的css代码8

*{
    margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body{
    width: 100%;
    height: 100%;
}
html{
    font-size:10px;
}
.bawa{
    width: 100%;
    height: 25rem;
    /* background-color: brown; */
}
.bawabg{
    width: 100%;
    height: 25rem;
    background-color:#1c40b5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.bat{
    width: 100%;
    height: 5rem;
    font-size: 3rem;
    font-weight: 600;
    color:#fff;
    text-align: center;
    line-height: 5rem;
}
.baco{
    width: 30rem;
    height: 15rem;
    /* background-color: #fff; */

    display: flex;
}
.bal{
    width: 10rem;
    height: 10rem;
}
.bal img{
    width: 100%;
    height: 100%;
    margin-top: 3rem;
    margin-left: 1rem;
}
.bar{
    width: 14rem;
    height: 10rem;
    /* background-color: #a72c2c; */
    margin-top: 3rem;
    margin-left: 3rem;
}
.text{
    color: #fff;
    font-size: 1.7rem;
    font-weight: 600;
}
.subtext{
    color: #fff;
    font-size: 1.5rem;
    font-weight: 600;
}
.button{
    width: 8rem;
    height: 3rem;
    background-color: #fff;
    text-align: center;
    line-height: 3rem;
    font-size: 1.5rem;
    color: #4872f6;
    margin-top: 2rem;
    margin-left: 2rem;
}

引入的css代码9

*{
    margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body{
    width: 100%;
    height: 100%;
}
html{
    font-size:10px;
.jiuwa{
    width: 100%;
    height: 65rem;
    background-color: rgb(79, 82, 97);
}
.jiubg{
    width: 136rem;
    height: 100%;
    /* background-color: #c12a2a; */
    margin-left: 15rem;
}
.jc1{
    width: 136rem;
    height: 40rem;
    /* background-color: #ffffff; */
    display: flex;
    justify-content: space-between;
}
.c11{
    width: 8rem;
    height: 40rem;
    /* background-color: #95c61a; */
    font-size: 1.5rem;
    color: #ffffff;
}
.c111{
    width: 5rem;
    height: 1rem;
    font-size: 1.5rem;
    line-height: 6rem;
}
.c112{
    width: 8rem;
    height: 1rem;
    font-size: 1.5rem;
    margin-top: 1rem;
}
.c113{
    width: 9.5rem;
    height: 1rem;
    font-size: 1.5rem;
    margin-top: 1rem;
}
.c22{
    width: 8rem;
    height: 100%;
    /* background-color: #0c176b; */
    color: #ffffff;
}
.c222{
    width: 5rem;
    height: 1rem;
    font-size: 1.5rem;
    line-height: 6rem;
}
.c212{
    width: 8rem;
    height: 1rem;
    font-size: 1.5rem;
    margin-top: 1rem;
}
.c33{
    width: 8rem;
    height: 100%;
    /* background-color: #4f9b11; */
    color: #ffffff;
}
.c333{
    width: 5rem;
    height: 1rem;
    font-size: 1.5rem;
    line-height: 6rem;
}
.c312{
    width: 8rem;
    height: 1rem;
    font-size: 1.5rem;
    margin-top: 1rem;
}
.c313{
    width: 6rem;
    height: 1rem;
    font-size: 1.5rem;
    margin-top: 1rem;
}
.c314{
    width: 9rem;
    height: 1rem;
    font-size: 1.5rem;
    margin-top: 1rem;
}
.c315{
    width: 10rem;
    height: 1rem;
    font-size: 1.5rem;
    margin-top: 1rem;
}
.c44{
    width: 8rem;
    height: 100%;
    /* background-color: #bd2e4b; */
    color: #ffffff;
}
.c444{
    width: 5rem;
    height: 1rem;
    font-size: 1.5rem;
    line-height: 6rem;
}
.c412{
    width: 8rem;
    height: 1rem;
    font-size: 1.5rem;
    margin-top: 1rem;
}
.c413{
    width: 11rem;
    height: 1rem;
    font-size: 1.5rem;
    margin-top: 1rem;
}
.c55{
    width: 8rem;
    height: 100%;
    /* background-color: #17a312; */
    color: #ffffff;
}
.c555{
    width: 8rem;
    height: 1rem;
    font-size: 1.5rem;
    line-height: 6rem;
}
.c512{
    width: 8rem;
    height: 1rem;
    font-size: 1.5rem;
    margin-top: 1rem;
}
.c66{
    width: 30rem;
    height: 100%;
    /* background-color: #b9d52e; */
    color: #ffffff;
}
.c666{
    width: 8rem;
    height: 1rem;
    font-size: 1.5rem;
    line-height: 6rem;
}
.c612{
    width: 30rem;
    height: 1rem;
    font-size: 1.5rem;
    margin-top: 1rem;
}
.c613{
    width: 29rem;
    height: 1rem;
    font-size: 1.5rem;
    margin-top: 1rem;
}
.c615{
    width: 18rem;
    height: 1rem;
    font-size: 1.5rem;
    margin-top: 1rem;
}
.c616{
    width: 30rem;
    height: 1rem;
    font-size: 1.5rem;
    margin-top: 1rem;
}
.c77{
    width: 30rem;
    height: 100%;
    /* background-color: #a21e1e; */
}
.c77 span{
    font-size: 3rem;
    color: #ffffff;
}
.c77 p{
    font-size: 2rem;
    color: #ffffff;
}
.c7pc{
    width: 30rem;
    height: 10rem;
    /* background-color: #c66321; */
    display: flex;
}
.c7pc img{
    width: 14rem;
    height: 14rem;
    padding: 1rem;
}
.c77 p1{
    font-size: 1.5rem;
    color: #ffffff;
    line-height: 1rem;
    width: 1rem;
}
.c77 p2{
    font-size: 1.5rem;
    color: #ffffff;
    line-height: 1rem;
    width: 10rem;
}
.jc2{
    width: 100%;
    height: 10rem;
    /* background-color: #c66321; */
    display: flex;
}
.jc2l{
    width: 30rem;
    height: 10rem;
    /* background-color: #e73d3d; */
    font-size: 1rem;
    color: #ffffff;
    padding: 1rem;
    line-height: 2rem;
}
.jc2c{
    width: 30rem;
    height: 10rem;
    /* background-color: #e73d3d; */
    font-size: 1.4rem;
    color: #ffffff;
    padding: 1rem;
    line-height: 2rem;
}
.jc2r{
    width: 40rem;
    height: 10rem;
    /* background-color: #e73d3d; */
    font-size: 1.4rem;
    color: #ffffff;
    padding: 1rem;
    line-height: 2rem;
}
.jc3{
    width: 130rem;
    height: 5rem;
    /* background-color: #36c539; */
    color: #ffffff;
    line-height: 3rem;
    font-weight: 400;
    display: flex;
    justify-content: space-between;
    border-top: solid 1px #ffffff;
    border-bottom: solid 1px #ffffff;
}
.jc31{
    font-size: 1.4rem;
    color: #ffffff;
    padding: 1rem;
}
.jc4{
    width: 130rem;
    height: 4rem;
    /* background-color: #582597; */
    display: flex;
    justify-content: space-between;
}
.jc4l{
    width: 40rem;
    height: 4rem;
    /* background-color: #000000; */
    display: flex;
    font-size: 3rem;
    color: #ffffff;
}
.jc4l img{
    width: 6rem;
    height: 4rem;
}
.jc4c{
    width: 40rem;
    height: 4rem;
    /* background-color: #931a1e; */
    display: flex;
}
.jc4c {
    font-size: 2rem;
    color: #ffffff;
    padding: 1rem;
    text-align: center;
    margin-left: 8rem;
}
.jc4r{
    width: 40rem;
    height: 4rem;
    /* background-color: #46931a; */
    display: flex;
}
.jc4r p{
    font-size: 2rem;
    color: #ffffff;
    padding: 1rem;
    text-align: center;
    margin-left: 8rem;
}
.jimg1{
    width: 20rem;
    height: 4rem;
    /* background-color: #c66321 */
    display: flex;
}
.jimg1 img{
    width: 3rem;
    height: 3rem;
}
.jimg1 span{
    width: 20rem;
    font-size: 1.1rem;
    color: #ffffff;
    line-height: 3rem;
}
.jimg2{
    width: 20rem;
    height: 4rem;
    /* background-color: rgb(51, 205, 84); */
    display: flex;
}
.jimg2 img{
    width: 3rem;
    height: 3rem;
}
.jimg2 span{
    width: 20rem;
    font-size: 1.1rem;
    color: #ffffff;
    line-height: 3rem;
}
.jc6{
    width: 130rem;
    height: 10rem;
    /* background-color: #0fb338; */
    display: flex;
    flex-direction: column;
    
}
.jc6t{
    width: 130rem;
    height: 2rem;
    /* background-color: #0f92b3; */
    font-size: 1.3rem;
    color: #ffffff;
}
.jc6b{
    width: 130rem;
    height: 6rem;
    /* background-color: #0f92b3; */
    font-size: 1.3rem;
    color: #ffffff;
    display: flex;
}

cc05117
关注
软件测试学习（蓝桥杯备赛）
m0_62835291的博客
03-04 3066
软件测试进行到一定程度就要进行测试评估了。通过测试评估生成的软件测试报告来确定测试是否达到了出口准则。
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Expanding Cards （展开式卡片）
sunbyte带你学
05-18 1837
Expanding Cards组件通过Vue3的响应式状态ref和v-for指令动态渲染一组横向排列的背景卡片，点击某张卡片时，该卡片会展开至主要区域，其他卡片则收缩。
CSS：vertical-align用法以及布局小案例(较难)
Brave_heart4pzj的博客
05-22 160
CSS
Vue+css实现扫描动画效果（使用@keyframes scan）
蓝胖子的博客
05-23 173
Vue+css实现扫描动画效果（使用@keyframes scan）annimation
CSS实现过多的文本进行省略号显示
2202_75747703的博客
05-19 325
* 必须结合的属性 */text-overflow: ellipsis;/* 溢出部分显示为省略号 */display: -webkit-box;/* 必须结合的属性 */overflow: hidden;/* 溢出内容隐藏 *//* 必须设置宽度 *//* 溢出内容隐藏 *//* 必须设置宽度 */-webkit-line-clamp: 3;/* 显示的行数 */white-space: nowrap;/* 禁止换行 */
CSS回顾
linux_hzh的博客
05-22 842
显示模式img {div {.box1 {.box2 {<img width="300" src="../images/我的自拍.jpg" alt=""><img width="300" src="../images/我的自拍.jpg" alt="">
CSS padding（填充）
csbysj2020
05-23 157
padding是CSS中用于设置元素内边距的重要属性。通过合理地设置padding，可以有效地控制元素的布局和外观。在设计和开发网页时，了解padding属性的特点和限制是非常重要的。由于篇幅限制，本文仅对padding属性进行了简要介绍。在实际应用中，padding属性可以与其它CSS属性结合使用，以实现更复杂的布局效果。希望本文能对您有所帮助。
CSS2相关知识点
最新发布
PNPYY的博客
05-23 680
3.[属性名^=“值”] 选中包含某个属性，且属性值以指定的值开头的元素。4.[属性名$=“值”] 选中包含某个属性，且属性值以指定的值结尾的元素。2.[属性名=“值”] 选中包含某个属性，且属性值等于指定值的元素。5.[属性名*=“值”] 选择包含某个属性，属性值包含指定值的元素。写在单独的 .css 文件中，随后在 HTML 文件中引入使用.以上 5 个属性，只有表格才能使用，即：<table> 标签。1.[属性名] 选中具有某个属性的元素。作用：选中属性值符合一定要求的元素。
为什么现代CSS应该选择OKLCH：从颜色科学到设计系统革新
AaronZZH 的博客
05-20 1108
在数字界面中，颜色不仅是美学的载体，更是信息传递的重要工具。CSS Color Level 4 标准引入了 OKLCH 颜色空间, 提供​​感知均匀性​​（颜色差异与实际视觉感受一致），解决传统HSL/HSV在调整颜色时的不自然问题。文本帮助你快速掌握OKLCH的核心概念和应用逻辑。重点是理解其​​感知均匀性​​和​​与HSL的对比优势​​，这能帮助你在设计或代码中更科学地使用颜色。
CSS display有几种属性值
quyunde的博客
05-20 476
属性是控制元素布局和渲染方式的核心属性之一。它有多种属性值，每个值都决定了元素在文档流中的表现形式。是构建复杂布局的首选方式，而传统的表格布局和浮动已逐渐被淘汰。根据具体需求选择合适的。值，可以大幅提升布局效率和代码可维护性。
Tailwind css实战，基于Kooboo构建AI对话框页面（一）
Kooboo_china的博客
05-23 617
通过这些步骤，开发者可以快速构建一个功能完善且美观的AI对话界面...
CSS之box-sizing、图片模糊、计算盒子宽度clac、（重点含小米、进度条案例）过渡
m0_57532232的博客
05-20 223
本文介绍了几个前端开发中的实用技巧。首先，通过设置box-sizing: border-box可以防止盒子因border和padding过大而被撑大。其次，使用filter: blur()可以实现图片模糊效果，并通过hover事件恢复清晰。此外，calc()函数可以灵活计算盒子宽度，支持加减乘除运算。最后，文章展示了两个过渡效果的案例：一个是进度条的实现，另一个是仿小米Logo的滑动效果，通过transition和伪元素实现平滑的视觉过渡。这些技巧有助于提升网页的交互性和视觉效果。
【css】【面试提问】css经典问题总结
qq_59344127的博客
05-19 930
css面试提问总结
【css知识】flex-grow: 1
DecorateCC的博客
05-20 721
希望我的分享能够帮助到更多的人，如果觉得我的分享有帮助的话，请大家一键三连支持一下哦~❤️原创不易，期待你的关注与支持~😊之后我会继续更新前端学习小知识，关注我不迷路~
【大前端】使用纯CSS实现进度条
朝拜者
05-21 276
这段CSS代码通过radial-gradient和linear-gradient创建了一个带有圆点的进度条效果。radial-gradient用于绘制圆点，通过白色填充内部，红色绘制边框，并使用transparent使其余部分透明。两个linear-gradient分别用于绘制进度条和背景填充色。background属性中，前面的图层会覆盖后面的图层，圆点的偏移和进度条的宽度分别通过background-position和background-size设置。整体效果是一个红色圆点与红色进度条结合的设计。
【background】CSS 背景全解析：从基础属性到视觉魔法
waterlin2011的博客
05-20 1074
CSS 背景属性用于定义HTML元素的背景。
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Progress Steps （步骤条）
sunbyte带你学
05-19 850
组件通过 Vue 的 Composition API 和 ref 进行响应式状态管理，使用 v-for 渲染步骤列表，并利用 Tailwind CSS 的实用工具类实现动态样式和过渡效果。组件提供了“上一页”和“下一页”按钮，用户可以控制步骤的前进和后退，进度条的长度和步骤样式会动态更新。文
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Blurry Loading （毛玻璃加载）
sunbyte带你学
05-22 801
通过 Vue3 和 Tailwind CSS 实现一个加载进度条，背景图像随加载进度从模糊变清晰，并显示当前加载百分比。技术实现包括 Vue3 的响应式状态管理、生命周期钩子管理定时器，以及 Tailwind CSS 的布局类和动态样式绑定。组件代码展示了如何通过 ref 变量和定时器动态调整模糊效果和加载进度。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值