化学元素周期表1.0Vue前端页面版本

简介: 化学元素周期表1.0Vue前端页面版本

<template>
<div class="container">
    <div class="main">
      <table>
        <tr>
          <td class="htmlColor">{{H.name}}</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td class="tableColor">{{He.name}}</td>
        </tr>
        <tr>
          <td class="headColor">{{Li.name}}</td>
          <td class="inlineColor">{{Be.name}}</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td class="formColor">{{B.name}}</td>
          <td class="formColor">{{C.name}}</td>
          <td class="titleColor">{{N.name}}</td>
          <td class="titleColor">{{O.name}}</td>
          <td class="titleColor">{{F.name}}</td>
          <td class="tableColor">{{Ne.name}}</td>
        </tr>
        <tr>
          <td class="headColor">{{Na.name}}</td>
          <td class="inlineColor">{{Mg.name}}</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td class="formColor">{{Al.name}}</td>
          <td class="formColor">{{Si.name}}</td>
          <td class="titleColor">{{Plin.name}}</td>
          <td class="titleColor">{{S.name}}</td>
          <td class="titleColor">{{ Cl.name }}</td>
          <td class="tableColor">{{ Ar.name }}</td>
        </tr>
        <tr>
          <td class="headColor">{{ K.name }}</td>
          <td class="inlineColor">{{ Ca.name }}</td>
          <td class="inlineColor">{{ Sc.name }}</td>
          <td class="inlineColor">{{ Ti.name}}</td>
          <td class="inlineColor">{{V.name}}</td>
          <td class="inlineColor">{{Cr.name}}</td>
          <td class="inlineColor">{{ Mn.name }}</td>
          <td class="inlineColor">{{ Fe.name }}</td>
          <td class="blockColor">{{Co.name}}</td>
          <td class="blockColor">{{Ni.name}}</td>
          <td class="blockColor">{{Cu.name }}</td>
          <td class="formColor">{{Zn.name }}</td>
          <td class="formColor">{{Ga.name}}</td>
          <td class="titleColor">{{Ge.name }}</td>
          <td class="titleColor">{{As.name }}</td>
          <td class="titleColor">{{Se.name}}</td>
          <td class="menuColor">{{Br.name}}</td>
          <td class="menuColor">{{Kr.name}}</td>
        </tr>
        <tr>
          <td class="headColor">{{Rb.name}}</td>
          <td class="inlineColor">{{Sr.name}}</td>
          <td class="inlineColor">{{Y.name}}</td>
          <td class="inlineColor">{{Zr.name}}</td>
          <td class="inlineColor">{{Nb.name}}</td>
          <td class="inlineColor">{{Mo.name}}</td>
          <td class="inlineColor">{{Tc.name}}</td>
          <td class="inlineColor">{{Ru.name}}</td>
          <td class="blockColor">{{Rh.name}}</td>
          <td class="blockColor">{{Pd.name}}</td>
          <td class="blockColor">{{Ag.name}}</td>
          <td class="formColor">{{Cd.name}}</td>
          <td class="formColor">{{In.name}}</td>
          <td class="formColor">{{Sn.name}}</td>
          <td class="titleColor">{{Sb.name}}</td>
          <td class="titleColor">{{Te.name}}</td>
          <td class="menuColor">{{I.name}}</td>
          <td class="menuColor">{{Xe.name}}</td>
        </tr>
        <tr>
          <td class="headColor">{{Cs.name}}</td>
          <td class="headColor">{{Ba.name}}</td>
          <td class="inlineColor">La-Lu</td>
          <td class="inlineColor">{{Hf.name}}</td>
          <td class="inlineColor">{{Ta.name}}</td>
          <td class="inlineColor">{{W.name}}</td>
          <td class="inlineColor">{{Re.name}}</td>
          <td class="inlineColor">{{Os.name}}</td>
          <td class="blockColor">{{Ir.name}}</td>
          <td class="blockColor">{{Pt.name}}</td>
          <td class="blockColor">{{Au.name}}</td>
          <td class="formColor">{{Hg.name}}</td>
          <td class="formColor">{{Tl.name}}</td>
          <td class="formColor">{{Pb.name}}</td>
          <td class="titleColor">{{Bi.name}}</td>
          <td class="titleColor">{{Po.name}}</td>
          <td class="menuColor">{{At.name}}</td>
          <td class="menuColor">{{Rn.name}}</td>
        </tr>
        <tr>
          <td class="headColor">{{Fr.name}}</td>
          <td class="headColor">{{Ra.name}}</td>
          <td class="inlineColor">Ac-Lr</td>
          <td class="inlineColor">{{Rf.name}}</td>
          <td class="inlineColor">{{Db.name}}</td>
          <td class="inlineColor">{{Sg.name}}</td>
          <td class="inlineColor">{{Bh.name}}</td>
          <td class="inlineColor">{{Hs.name}}</td>
          <td class="blockColor">{{Mt.name}}</td>
          <td class="blockColor">{{Ds.name}}</td>
          <td class="blockColor">{{Rg.name}}</td>
          <td class="formColor">{{Cn.name}}</td>
          <td class="formColor">{{Nh.name}}</td>
          <td class="formColor">{{Fl.name}}</td>
          <td class="titleColor">{{Mc.name}}</td>
          <td class="titleColor">{{Lv.name}}</td>
          <td class="menuColor">{{Ts.name}}</td>
          <td class="menuColor">{{Og.name}}</td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td class="blueColor">{{La.name}}</td>
          <td class="blueColor">{{Ce.name}}</td>
          <td class="blueColor">{{Pr.name}}</td>
          <td class="blueColor">{{Nd.name}}</td>
          <td class="blueColor">{{Pm.name}}</td>
          <td class="blueColor">{{Sm.name}}</td>
          <td class="blueColor">{{Eu.name}}</td>
          <td class="blueColor">{{Gd.name}}</td>
          <td class="blueColor">{{Tb.name}}</td>
          <td class="blueColor">{{Dy.name}}</td>
          <td class="blueColor">{{Ho.name}}</td>
          <td class="blueColor">{{Er.name}}</td>
          <td class="blueColor">{{Tm.name}}</td>
          <td class="blueColor">{{Yb.name}}</td>
          <td class="blueColor">{{Lu.name}}</td>
        </tr>
        <tr>
          <td></td>
          <td class="blueColor">{{Ac.name}}</td>
          <td class="blueColor">{{Th.name}}</td>
          <td class="blueColor">{{Pa.name}}</td>
          <td class="blueColor">{{U.name}}</td>
          <td class="blueColor">{{Np.name}}</td>
          <td class="blueColor">{{Pu.name}}</td>
          <td class="blueColor">{{Am.name}}</td>
          <td class="blueColor">{{Cm.name}}</td>
          <td class="blueColor">{{Bk.name}}</td>
          <td class="blueColor">{{Cf.name}}</td>
          <td class="blueColor">{{Es.name}}</td>
          <td class="blueColor">{{Fm.name}}</td>
          <td class="blueColor">{{Md.name}}</td>
          <td class="blueColor">{{No.name}}</td>
          <td class="blueColor">{{Lr.name}}</td>
        
        </tr>
      </table>
    </div>
    
    <div class="info">
      <h3></h3>
      <p></p>
      <a href="###">Mozilla,W3C Reference</a>
    </div>
    <div class="end">
      <ul>
        <li><span class="htmlColor"></span>根元素</li>
        <li><span class="headColor"></span>元数据和脚本</li>
        <li><span class="inlineBlockColor"></span>嵌入式内容</li>
      </ul>
      <ul>
        <li><span class="inlineColor"></span>文本级别语义</li>
        <li><span class="blockColor"></span>组合内容</li>
      </ul>
      <ul>
        <li><span class="formColor"></span>表单</li>
        <li><span class="titleColor"></span>文档章节</li>
      </ul>
      <ul>
        <li><span class="tableColor"></span>表格数据</li>
        <li><span class="menuColor"></span>交互元素</li>
      </ul>
    </div>
</div>
</template>
<script>
export default {
data() {
return {
H:{index:1,name:"氢",relativeAtomicMass:1.00794},
He:{index:2,name:"氦",relativeAtomicMass:4.002602},
Li:{index:3,name:"锂",relativeAtomicMass:6.941},
Be:{index:4,name:"铍",relativeAtomicMass:9.012182},
B:{index:5,name:"硼",relativeAtomicMass:10.811},
C:{index:6,name:"碳",relativeAtomicMass:12.011},
N:{index:7,name:"氮",relativeAtomicMass:14.007},
O:{index:8,name:"氧",relativeAtomicMass:15.999},
F:{index:9,name:"氟",relativeAtomicMass:18.998},
Ne:{index:10,name:"氖",relativeAtomicMass:20.17},
Na:{index:11,name:"钠",relativeAtomicMass:22.9898},
Mg:{index:12,name: "镁",relativeAtomicMass:24.305},
Al:{index:13,name:"铝",relativeAtomicMass:26.982},
Si:{index:14,name:"硅",relativeAtomicMass:28.085},
Plin:{index:15,name:"磷",relativeAtomicMass:30.974},
S:{index:16,name:"硫",relativeAtomicMass:32.06},
Cl:{index:17,name:"氯",relativeAtomicMass:35.453},
Ar:{index:18,name: "氩",relativeAtomicMass:39.94},
K:{index:19,name:"钾",relativeAtomicMass:39.098},
Ca:{index:20,name:"钙",relativeAtomicMass:40.08},
Sc:{index:21,name:"钪",relativeAtomicMass:44.956},
Ti:{index:22,name:"钛",relativeAtomicMass:47.9},
V:{index:23,name:"钒",relativeAtomicMass:50.94},
Cr:{index:24,name:"铬",relativeAtomicMass:51.996},
Mn:{index:25,name:"锰",relativeAtomicMass:54.938},
Fe:{index:26,name:"铁",relativeAtomicMass:55.845},
Co:{index:27,name:"钴",relativeAtomicMass:58.9332},
Ni:{index:28,name:"镍",relativeAtomicMass:58.69},
Cu:{index:29,name:"铜",relativeAtomicMass:63.54},
Zn:{index:30,name:"锌",relativeAtomicMass:65.38},
Ga:{index:31,name:"镓",relativeAtomicMass:69.72},
Ge:{index:32,name:"锗",relativeAtomicMass:72.5},
As:{index:33,name:"砷",relativeAtomicMass:74.922},
Se:{index:34,name:"硒",relativeAtomicMass:78.9},
Br:{index:35,name:"溴",relativeAtomicMass:79.904},
Kr:{index:36,name:"氪",relativeAtomicMass:83.8},
Rb:{index:37,name:"铷",relativeAtomicMass:85.467},
Sr:{index:38,name:"锶",relativeAtomicMass:87.62},
Y:{index:39,name:"钇",relativeAtomicMass:88.906},
Zr:{index:40,name:"锆",relativeAtomicMass:91.22},
Nb:{index:41,name:"铌",relativeAtomicMass:92.9064},
Mo:{index:42,name:"钼",relativeAtomicMass:95.94},
Tc:{index:43,name:"锝",relativeAtomicMass:97.907},
Ru:{index:44,name:"钌",relativeAtomicMass:101.1},
Rh:{index:45,name:"铑",relativeAtomicMass:102.906},
Pd:{index:46,name:"钯",relativeAtomicMass:106.42},
Ag:{index:47,name:"银",relativeAtomicMass:107.868},
Cd:{index:48,name:"镉",relativeAtomicMass:112.41},
In:{index:49,name:"铟",relativeAtomicMass:114.82},
Sn:{index:50,name:"锡",relativeAtomicMass:118.6},
Sb:{index:51,name:"锑",relativeAtomicMass:121.7},
Te:{index:52,name:"碲",relativeAtomicMass:127.6},
I:{index:53,name:"碘",relativeAtomicMass:126.905},
Xe:{index:54,name:"氙",relativeAtomicMass:131.3},
Cs:{index:55,name:"铯",relativeAtomicMass:132.905},
Ba:{index:56,name:"钡",relativeAtomicMass:137.33},
La:{index:57,name:"镧",relativeAtomicMass:138.9},
Ce:{index:58,name:"铈",relativeAtomicMass:140.1},
Pr:{index:59,name:"镨",relativeAtomicMass:140.9},
Nd:{index:60,name:"钕",relativeAtomicMass:144.2},
Pm:{index:61,name:"钷",relativeAtomicMass:147},
Sm:{index:62,name:"钐",relativeAtomicMass:150.3},
Eu:{index:63,name:"铕",relativeAtomicMass:151.96},
Gd:{index:64,name:"钆",relativeAtomicMass:157.25},
Tb:{index:65,name:"铽",relativeAtomicMass:158.9},
Dy:{index:66,name:"镝",relativeAtomicMass:162.5},
Ho:{index:67,name:"钬",relativeAtomicMass:164.9},
Er:{index:68,name:"铒",relativeAtomicMass:167.2},
Tm:{index:69,name:"铥",relativeAtomicMass:168.9},
Yb:{index:70,name:"镱",relativeAtomicMass:173.04},
Lu:{index:71,name:"镥",relativeAtomicMass:174.967},
Hf:{index:72,name:"铪",relativeAtomicMass:178.4},
Ta:{index:73,name:"钽",relativeAtomicMass:180.947
},
W:{index:74,name:"钨",relativeAtomicMass:183.8},
Re:{index:75,name:"铼",relativeAtomicMass:186.207},
Os:{index:76,name:"锇",relativeAtomicMass:190.2},
Ir:{index:77,name:"铱",relativeAtomicMass:192.2},
Pt:{index:78,name:"铂",relativeAtomicMass:195.08},
Au:{index:79,name:"金",relativeAtomicMass:196.967},
Hg:{index:80,name:"汞",relativeAtomicMass:200.5},
Tl:{index:81,name:"铊",relativeAtomicMass:204.3},
Pb:{index:82,name:"铅",relativeAtomicMass:207.2},
Bi:{index:83,name:"铋",relativeAtomicMass:208.98},
Po:{index:84,name:"钋",relativeAtomicMass:209},
At:{index:85,name:"砹",relativeAtomicMass:201},
Rn:{index:86,name:"氡",relativeAtomicMass:222},
Fr:{index:87,name:"钫",relativeAtomicMass:223},
Ra:{index:88,name:"镭",relativeAtomicMass:226.03},
Ac:{index:89,name:"锕",relativeAtomicMass:227},
Th:{index:90,name:"钍",relativeAtomicMass:232.0},
Pa:{index:91,name:"镤",relativeAtomicMass:231.03588},
U:{index:92,name:"铀",relativeAtomicMass:238.0},
Np:{index:93,name:"镎",relativeAtomicMass:237.05},
Pu:{index:94,name:"钚",relativeAtomicMass:244.06},
Am:{index:95,name:"镅",relativeAtomicMass:243},
Cm:{index:96,name:"锔",relativeAtomicMass:247},
Bk:{index:97,name:"锫",relativeAtomicMass:247},
Cf:{index:98,name:"锎",relativeAtomicMass:251},
Es:{index:99,name:"锿",relativeAtomicMass:252.08},
Fm:{index:100,name:"镄",relativeAtomicMass:257.10},
Md:{index:101,name:"钔",relativeAtomicMass:258.10},
No:{index:102,name:"锘",relativeAtomicMass:259.10},
Lr:{index:103,name:"铹",relativeAtomicMass:262},
Rf:{index:104,name:"𬬻",relativeAtomicMass:261.11},
Db:{index:105,name:"𬭊",relativeAtomicMass:262.11},
Sg:{index:106,name:"𬭳",relativeAtomicMass:263.12},
Bh:{index:107,name:"𬭛",relativeAtomicMass:264.12},
Hs:{index:108,name:"𬭶",relativeAtomicMass:273},
Mt:{index:109,name:"鿏",relativeAtomicMass:268},
Ds:{index:110,name:"𫟼",relativeAtomicMass:269},
Rg:{index:111,name:"𬬭",relativeAtomicMass:272},
Cn:{index:112,name:"鿔",relativeAtomicMass:277},
Nh:{index:113,name:"鿭",relativeAtomicMass:278},
Fl:{index:114,name:"𫓧",relativeAtomicMass:289},
Mc:{index:115,name:"镆",relativeAtomicMass:288},
Lv:{index:116,name:"𫟷",relativeAtomicMass:289},
Ts:{index:117,name:"鿬",relativeAtomicMass:291},
Og:{index:118,name:"鿫",relativeAtomicMass:294}
 }
 
 }
 
}
</script>
<!-- <script>
$(function(){
  var $td = $("td");
  var $info = $(".info");
  var data;
  $.ajax({
    type:"get",
    url:"@/views/js/elements.json",
    async:true,
    success:function(d){
      data = d;
    }
  });
  $td.mouseenter(function(e){
    $(this).mousemove(function(e){
      mousex = e.clientX;
      mousey = e.clientY;
      var $tdCont = $(this).text();
      if($tdCont!= ""){
        $(this).addClass("active");
      }
      
      for(var attr in data){
        var title = data[attr].name;
        if(title == $tdCont){
          
          $info.css("display","block");
          $info.find("h3").html("<"+title+">");
          $info.find("p").html(data[attr].value);
          if(mousex > ($(window).width()- $info.width()-10)){
            $info.offset({left:mousex - $info.width()-10,top:mousey+10})
          }else{
            $info.offset({left:mousex +10,top:mousey+10})
          }
        }
      }
      
      
    })
    
  })
  
  $td.mouseleave(function(){
    $(this).removeClass("active");
    $info.hide();
  })
  
})
</script> -->
<style lang="less">
@labelWidth:60px;
@fontSize:12px;
 
@htmlColor:#81d183;
@headColor:#6575d3;
@inlineColor:#d1d157;
@blockColor:#d17d47;
@formColor:#55d157;
@titleColor:#8591d3;
@tableColor:#d17d57;
@menuColor:#d1d1d3;
@inlineBlockColor:#d17dd3;
@blueColor:#bff6f9;
html{
    font-family: "microsoft yahei";
}
body{
    width: 100%;
    height:100%;
    overflow: hidden;
    background:#1C1D26;
}
.blueColor{
  background-color:@blueColor;
}
li{list-style: none;color: #fff;}
.main{
    margin:50px 0;
}
.active{
    opacity: 1;
    box-shadow: 1px 1px 5px  #fff ;
}
a{
    text-decoration: none;
    color:#FF8215 ;
}
.info{
    background:#fff;
    box-shadow: 1px 1px 5px #000;
    width: auto;
    float: left;
    padding: 10px;
    border-radius: 10px;
    position: absolute;
    display: none;
}
table{
    border: 0;
    margin: 0 auto;
 
    tr{
        td{
            width:@labelWidth;
            height:@labelWidth;
            border-radius: 10px;
            text-align: center;
            border:none;
            font-size: @fontSize;
            word-break: break-all;
            opacity: 0.7;
            position: relative;
        }
    }
}
 
.htmlColor{
    background:@htmlColor;
}
.tableColor{
    background:@tableColor;
}
.headColor{
    background: @headColor;
}
.inlineColor{
    background:@inlineColor;
}
.titleColor{
    background:@titleColor;
}
.blockColor{
    background: @blockColor;
}
.formColor{
    background: @formColor;
}
.menuColor{
    background: @menuColor;
}
.inlineBlockColor{
    background: @inlineBlockColor;
}
 
.end{
    margin-top:100px;
    ul{
        float: left;
        margin-right: 100px;
        li{
            height:30px;
            
            span{
                display: block;
                width:20px;
                height:20px;
                border-radius: 2px;
                float:left;
                margin-right: 10px;
            }
        }
    }
}
 
</style>
<!-- <style lang="less">
 
 
html{
    font-family: "microsoft yahei";
}
body{
    width: 100%;
    height:100%;
    overflow: hidden;
    background:#1C1D26;
}
li{list-style: none;color: #fff;}
.main{
    margin:50px 0;
}
.active{
    opacity: 1;
    box-shadow: 1px 1px 5px  #fff ;
}
a{
    text-decoration: none;
    color:#FF8215 ;
}
.info{
    background:#fff;
    box-shadow: 1px 1px 5px #000;
    width: auto;
    float: left;
    padding: 10px;
    border-radius: 10px;
    position: absolute;
    display: none;
}
table{
    border: 0;
    margin: 0 auto;
 
    tr{
        td{
            width:52px;
            height:52px;
            border-radius: 10px;
            text-align: center;
            border:none;
            font-size:12px;
            word-break: break-all;
            opacity: 0.7;
            position: relative;
        }
    }
}
 
.htmlColor{
    background:#81d183;
}
.tableColor{
    background:#d17d57;
}
.headColor{
    background:#6575d3;
 
}
.inlineColor{
    background:#d1d157;
}
.titleColor{
    background:#8591d3;
}
.blockColor{
    background: #d17d47;
}
.formColor{
    background: #55d157;
}
.menuColor{
    background: #d1d1d3;
}
.inlineBlockColor{
    background:#d17dd3;
}
 
.end{
    margin-top:100px;
    ul{
        float: left;
        margin-right: 100px;
        li{
            height:30px;
            
            span{
                display: block;
                width:20px;
                height:20px;
                border-radius: 2px;
                float:left;
                margin-right: 10px;
            }
        }
    }
}
</style> -->
 
 
目录
打赏
0
2
2
2
42
分享
相关文章
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
146 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
3月前
|
如何解决前端工程化中出现的版本冲突问题?
如何解决前端工程化中出现的版本冲突问题?
177 61
前端 CSS 优化:提升页面美学与性能
前端CSS优化旨在提升页面美学与性能。通过简化选择器(如避免复杂后代选择器、减少通用选择器使用)、合并样式表、合理组织媒体查询,可减少浏览器计算成本和HTTP请求。利用硬件加速和优化动画帧率,确保动画流畅。定期清理冗余代码并使用缩写属性,进一步精简代码。这些策略不仅加快页面加载和渲染速度,还提升了视觉效果,为用户带来更优质的浏览体验。
|
28天前
|
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
118 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
125 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
34 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
|
10天前
|
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
28 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
75 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
81 12
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    11
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    35
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    3
  • 4
    详解智能编码在前端研发的创新应用
    14
  • 5
    巧用通义灵码,提升前端研发效率
    19
  • 6
    智能编码在前端研发的创新应用
    34
  • 7
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    7
  • 8
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    29
  • 9
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    11
  • 10
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    21
  • 1
    开箱即用的GO后台管理系统 Kratos Admin - 前端权限
    3
  • 2
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    34
  • 3
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    62
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    28
  • 5
    巧用通义灵码,提升前端研发效率
    94
  • 6
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    146
  • 7
    详解智能编码在前端研发的创新应用
    100
  • 8
    智能编码在前端研发的创新应用
    83
  • 9
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    40
  • 10
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    125