AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

HTML和CSS拼成的像素图

2023-12-12 44
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： HTML和CSS拼成的像素图

拼一个him和雪王吧~

HTML部分：

<div style="display: flex;">
      <!-- 超级无敌him -->
      <div style="margin-left: 10%;margin-right: 10%;">
        <!-- 头 -->
        <div id="head1"></div>
        <div id="head2">
          <!-- 眼睛 -->
          <div id="eye1">
            <div id="yanqiu1"></div>
          </div>
          <div id="eye2">
            <div id="yanqiu2"></div>
          </div>
          <!-- 痔 -->
          <div id="zhi1"></div>
          <div id="zhi2"></div>
          <div id="zhi3"></div>
          <div id="zhi4"></div>
          <div id="zhi5"></div>
          <div id="zhi6"></div>
          <!-- 鼻子 -->
          <div id="bizi1"></div>
          <div id="bizi2"></div>
          <!-- 头皮 -->
          <div id="fa"></div>
          <!-- 两鬓 -->
          <div id="bin1"></div>
          <div id="bin2"></div>
          <!-- 下巴 -->
          <div id="xia1"></div>
          <div id="xia2"></div>
          <div id="xia3"></div>
          <div id="xia4"></div>
          <div id="xia5"></div>
          <div id="xia6"></div>
          <div id="xia7"></div>
          <div id="xia8"></div>
        </div>
        <!-- 肩膀 -->
        <div id="jian1">
          <!-- 脖子 -->
          <div id="bozi1"></div>
          <div id="bozi2"></div>
          <div id="bozi3"></div>
          <div id="bozi4"></div>
          <div id="bozi5"></div>
          <div id="bozi6"></div>
          <div id="bozi7"></div>
          <div id="bozi8"></div>
          <div id="bozi9"></div>
          <div id="bozi10"></div>
          <div id="bozi11"></div>
          <div id="bozi12"></div>
          <div id="bozi13"></div>
          <div id="bozi14"></div>
          <div id="bozi15"></div>
          <div id="bozi16"></div>
          <div id="bozi17"></div>
          <div id="bozi18"></div>
          <div id="bozi19"></div>
          <div id="bozi20"></div>
          <div id="bozi21"></div>
          <div id="bozi22"></div>
          <div id="bozi23"></div>
          <div id="bozi24"></div>
          <div id="bozi25"></div>
          <div id="bozi26"></div>
          <div id="bozi27"></div>
          <div id="bozi28"></div>
          <div id="bozi29"></div>
          <div id="bozi30"></div>
        </div>
        <div id="jian2">
          <!-- 胳膊 -->
          <div id="gebo1"></div>
          <div id="gebo2"></div>
        </div>
        <!-- 腿 -->
        <div id="tui1">
          <div id="tui2"></div>
          <div id="tui3"></div>
          <div id="tui4"></div>
          <div id="tui5"></div>
          <div id="tui6"></div>
          <div id="tui7"></div>
          <div id="tui8"></div>
        </div>
      </div>
      <!-- 雪王 -->
      <div style="position: relative;">
        <div id="zhang1"></div>
        <div id="zhang2"></div>
        <div id="zhang3"></div>
        <div id="zhang4"></div>
        <div id="zhang5"></div>
        <div id="zhang6"></div>
        <div id="zhang7"></div>
        <div id="zhang8"></div>
        <div id="zhang9"></div>
        <div id="zhang10"></div>
        <div id="zhang11"></div>
        <div id="zhang12"></div>
        <div id="zhang13"></div>
        <div id="zhang14"></div>
        <div id="zhang15"></div>
        <div id="zhang16"></div>
        <div id="zhang17"></div>
        <div id="zhang18"></div>
        <div id="zhang19"></div>
        <div id="zhang20"></div>
        <div id="zhang21"></div>
        <div id="zhang22"></div>
        <div id="zhang23"></div>
        <div id="zhang24"></div>
        <div id="zhang25"></div>
        <div id="zhang26"></div>
        <div id="zhang27"></div>
        <div id="zhang28"></div>
        <div id="zhang29"></div>
        <div id="zhang30"></div>
        <div id="zhang31"></div>
        <div id="zhang32"></div>
        <div id="zhang33"></div>
        <div id="zhang34"></div>
        <div id="zhang35"></div>
        <div id="zhang36"></div>
        <div id="zhang37"></div>
        <div id="zhang38"></div>
        <div id="zhang39"></div>
        <div id="zhang40"></div>
        <div id="zhang41"></div>
        <div id="zhang42"></div>
        <div id="zhang43"></div>
        <div id="zhang44"></div>
        <div id="zhang45"></div>
        <div id="zhang46"></div>
        <div id="zhang47"></div>
        <div id="zhang48"></div>
        <div id="zhang49"></div>
        <div id="zhang50"></div>
        <div id="zhang51"></div>
        <div id="zhang52"></div>
        <div id="zhang53"></div>
        <div id="zhang54"></div>
        <div id="zhang55"></div>
        <div id="zhang56"></div>
        <div id="zhang57"></div>
        <div id="zhang58"></div>
        <div id="zhang59"></div>
        <div id="zhang60"></div>
        <div id="zhang61"></div>
        <div id="zhang62"></div>
        <div id="zhang63"></div>
        <div id="zhang64"></div>
        <div id="zhang65"></div>
        <div id="zhang66"></div>
        <div id="zhang67"></div>
        <div id="zhang68"></div>
        <div id="zhang69"></div>
        <div id="zhang70"></div>
        <div id="zhang71"></div>
        <div id="zhang72"></div>
        <div id="zhang73"></div>
        <div id="zhang74"></div>
        <div id="zhang75"></div>
        <div id="zhang76"></div>
        <div id="zhang77"></div>
        <div id="zhang78"></div>
        <div id="zhang79"></div>
        <div id="zhang80"></div>
        <div id="zhang81"></div>
        <div id="zhang82"></div>
        <div id="zhang83"></div>
        <div id="zhang84"></div>
        <div id="zhang85"></div>
        <div id="zhang86"></div>
        <div id="zhang87"></div>
        <div id="zhang88"></div>
        <div id="zhang89"></div>
        <div id="zhang90"></div>
        <div id="zhang91"></div>
        <div id="zhang92"></div>
        <div id="zhang93"></div>
        <div id="zhang94"></div>
        <div id="zhang95"></div>
        <div id="zhang96"></div>
        <div id="zhang97"></div>
        <div id="zhang98"></div>
        <div id="zhang99"></div>
        <div id="zhang100"></div>
        <div id="zhang101"></div>
        <div id="zhang102"></div>
        <div id="zhang103"></div>
        <div id="zhang104"></div>
        <div id="zhang105"></div>
        <div id="zhang106"></div>
        <div id="zhang107"></div>
        <div id="zhang108"></div>
        <div id="zhang109"></div>
        <div id="zhang110"></div>
        <div id="zhang111"></div>
        <div id="zhang112"></div>
        <div id="zhang113"></div>
        <div id="zhang114"></div>
        <div id="zhang115"></div>
        <div id="zhang115"></div>
        <div id="zhang116"></div>
        <div id="zhang117"></div>
        <div id="zhang118"></div>
        <div id="zhang119"></div>
        <div id="zhang120"></div>
        <div id="zhang121"></div>
        <div id="zhang122"></div>
        <div id="zhang123"></div>
        <div id="zhang124"></div>
        <div id="zhang125"></div>
        <div id="zhang126"></div>
        <div id="zhang127"></div>
        <div id="zhang128"></div>
        <div id="zhang129"></div>
        <div id="zhang130"></div>
        <div id="zhang131"></div>
        <div id="zhang132"></div>
        <div id="zhang133"></div>
        <div id="zhang134"></div>
        <div id="zhang135"></div>
        <div id="zhang136"></div>
        <div id="zhang137"></div>
        <div id="zhang138"></div>
        <div id="zhang139"></div>
        <div id="zhang140"></div>
        <div id="zhang141"></div>
        <div id="zhang142"></div>
        <div id="zhang143"></div>
        <div id="zhang144"></div>
        <div id="zhang145"></div>
        <div id="zhang146"></div>
        <div id="zhang147"></div>
        <div id="zhang148"></div>
        <div id="zhang149"></div>
        <div id="zhang150"></div>
        <div id="zhang151"></div>
        <div id="zhang152"></div>
        <div id="zhang153"></div>
        <div id="zhang154"></div>
      </div>
    </div>

CSS部分：

#head1 {
  background-color: #211B16;
  width: 7vw;
  height: 3.8vh;
}
#head2 {
  background-color: #B88C74;
  width: 7vw;
  height: 10vh;
  position: relative;
}
#eye1 {
  background-color: #FFF9F4;
  width: 1.7vw;
  height: 1.8vh;
  position: absolute;
  z-index: 2;
  top: 3vh;
  left: 2.2vh;
}
#eye2 {
  background-color: #FFF9F4;
  width: 1.7vw;
  height: 1.8vh;
  position: absolute;
  z-index: 2;
  top: 3vh;
  left: 9vh;
}
#yanqiu1{
  background-color: #523D89;
  width: 1vw;
  height: 1.8vh;
  margin-left: 1.4vh;
}
#yanqiu2{
  background-color: #523D89;
  width: 1vw;
  height: 1.8vh;
}
#zhi1 {
  background-color: #9D7159;
  width: 0.8vw;
  height: 1.6vh;
  position: absolute;
  top: 1.4vh;
  z-index: 1;
  left: 7.5vh;
  border-radius: 0.15vh;
}
#zhi2 {
  background-color: #B2866E;
  width: 1.8vw;
  height: 1.6vh;
  position: absolute;
  top: 1.4vh;
  z-index: 1;
  left: 3.85vh;
}
#zhi3 {
  background-color: #B2866E;
  width: 1.4vw;
  height: 2.5vh;
  position: absolute;
  top: 2.6vh;
  z-index: 1;
  left: 4.6vh;
}
#zhi4 {
  background-color: #97664E;
  width: 1vw;
  height: 1.4vh;
  position: absolute;
  top: 2vh;
  z-index: 1;
  right: 0;
}
#zhi5 {
  background-color: #97664E;
  width: 1vw;
  height: 1.4vh;
  position: absolute;
  top: 2vh;
  z-index: 1;
  right: 2vh;
}
#zhi6 {
  background-color: #97664E;
  width: 1vw;
  height: 3vh;
  position: absolute;
  top: 0vh;
  z-index: 1;
  right: 2vh;
}
#bizi1 {
  background-color: #6A3D2A;
  width: 1.6vw;
  height: 1.8vh;
  position: absolute;
  left: 5.73vh;
  top: 4.8vh;
  z-index: 2;
}
#bizi2 {
  background-color: #6A3D2A;
  width: 3vw;
  height: 1.8vh;
  position: absolute;
  left: 4.2vh;
  top: 6.4vh;
  z-index: 2;
}
#fa {
  background-color: #C5957E;
  width: 6vw;
  height: 5vh;
  position: absolute;
}
#bin1 {
  background-color: #281701;
  width: 1vw;
  height: 2vh;
  position: absolute;
  left: 0;
}
#bin2 {
  background-color: #281701;
  width: 1vw;
  height: 2vh;
  position: absolute;
  right: 0;
}
#xia1 {
  background-color: #966350;
  width: 1vw;
  height: 2vh;
  position: absolute;
  bottom: 3.2vh;
}
#xia2 {
  background-color: #966350;
  width: 1vw;
  height: 2vh;
  position: absolute;
  bottom: 3.2vh;
  right: 0;
}
#xia3 {
  background-color: #9B6C4C;
  width: 1vw;
  height: 2vh;
  position: absolute;
  bottom: 3.2vh;
  right: 1vh;
}
#xia4 {
  background-color: #966350;
  width: 2.1vw;
  height: 2vh;
  position: absolute;
  bottom: 1.6vh;
}
#xia5 {
  background-color: #9B6C4C;
  width: 1vw;
  height: 2vh;
  position: absolute;
  bottom: 2.2vh;
  right: 1vh;
  z-index: 2;
}
#xia6 {
  background-color: #966350;
  width: 2.1vw;
  height: 2vh;
  position: absolute;
  bottom: 1.6vh;
  right: 0;
}
#xia7 {
  background-color: #6E4329;
  width: 2vw;
  height: 1.7vh;
  position: absolute;
  bottom: 0;
}
#xia8 {
  background-color: #905F40;
  width: 5vw;
  height: 1.9vh;
  position: absolute;
  bottom: 0;
  right: 0;
}
#jian1{
  background-color: #00A3A3;
  position: relative;
  left: -6.4vh;
  width: 13vw;
  height: 6.4vh;
}
#bozi1{
  background-color: #745033;
  position: absolute;
  width: 6vw;
  height: 0.3vh;
  left: 7.5vh;
}
#bozi2{
  background-color: #745033;
  position: absolute;
  width: 3.5vw;
  height: 2.5vh;
  left: 10.4vh;
}
#bozi3{
  background-color: #8A6144;
  position: absolute;
  width: 0.8vw;
  height: 1.8vh;
  top: 0.6vh;
  left: 12.2vh;
}
#bozi4{
  background-color: #745033;
  position: absolute;
  width: 2vw;
  height: 1.6vh;
  top: 2.5vh;
  left: 12vh;
}
#bozi5{
  background-color: #028D8B;
  position: absolute;
  left: 6.2vh;
  top: 0.35vh;
  width: 2vw;
  height: 2vh;
}
#bozi6{
  background-color: #028D8B;
  position: absolute;
  width: 1vw;
  height: 1.8vh;
  top: 1.8vh;
  left: 4.4vh;
}
#bozi7{
  background-color: #028D8B;
  position: absolute;
  width: 1vw;
  height: 1.8vh;
  top: 4.6vh;
  left: 4.4vh;
}
#bozi8{
  background-color: #028D8B;
  position: absolute;
  width: 1vw;
  height: 1.8vh;
  top: 4.6vh;
}
#bozi9{
  background-color: #028D8B;
  position: absolute;
  width: 2vw;
  height: 3vh;
  z-index: 2;
  left: 12vh;
  top: 4vh;
}
#bozi10{
  background-color: #028D8B;
  position: absolute;
  width: 1vw;
  height: 5.8vh;
  z-index: 2;
  left: 14.1vh;
  top: 4vh;
}
#bozi11{
  background-color: #028D8B;
  position: absolute;
  width: 1vw;
  height: 5vh;
  z-index: 2;
  left: 12vh;
  top: 9.6vh;
}
#bozi12{
  background-color: #028D8B;
  position: absolute;
  width: 2.6vw;
  height: 1.8vh;
  z-index: 2;
  left: 6.2vh;
  top: 14.6vh;
}
#bozi13{
  background-color: #009896;
  position: absolute;
  width: 1vw;
  height: 5vh;
  z-index: 2;
  left: 14.1vh;
  top: 9.6vh;
}
#bozi14{
  background-color: #028D8B;
  position: absolute;
  width: 1.8vw;
  height: 3.6vh;
  z-index: 2;
  left: 6.2vh;
  top: 6.4vh;
}
#bozi15{
  background-color: #028D8B;
  position: absolute;
  width: 0.8vw;
  height: 3vh;
  z-index: 2;
  left: 6.2vh;
  top: 10vh;
}
#bozi16{
  background-color: #028D8B;
  position: absolute;
  width: 1vw;
  height: 2vh;
  z-index: 2;
  left: 17.4vh;
  top: 6.4vh;
}
#bozi17{
  background-color: #028D8B;
  position: absolute;
  width: 0.8vw;
  height: 14vh;
  z-index: 3;
  left: 19.4vh;
  top: 6.4vh;
}
#bozi18{
  background-color: #028D8B;
  position: absolute;
  width: 1vw;
  height: 2vh;
  z-index: 2;
  left: 21vh;
  top: 0vh;
}
#bozi19{
  background-color: #028D8B;
  position: absolute;
  width: 1vw;
  height: 2vh;
  z-index: 2;
  left: 21vh;
  top: 4.4vh;
}
#bozi20{
  background-color: #028D8B;
  position: absolute;
  width: 1vw;
  height: 2vh;
  z-index: 2;
  right: 0;
  top: 4.4vh;
}
#bozi21{
  background-color: #815B4A;
  position: absolute;
  width: 0.8vw;
  height: 3.6vh;
  z-index: 2;
  right: 1vh;
  top: 8.4vh;
}
#bozi22{
  background-color: #815B4A;
  position: absolute;
  width: 0.8vw;
  height: 5.6vh;
  z-index: 2;
  right: 4.4vh;
  top: 10.4vh;
}
#bozi23{
  background-color: #815B4A;
  position: absolute;
  width: 0.8vw;
  height: 4vh;
  z-index: 2;
  right: 2.8vh;
  top: 16.4vh;
}
#bozi24{
  background-color: #815B4A;
  position: absolute;
  width: 0.8vw;
  height: 1.8vh;
  z-index: 2;
  right: 4.4vh;
  top: 18.6vh;
}
#bozi25{
  background-color: #815B4A;
  position: absolute;
  width: 0.8vw;
  height: 1.6vh;
  z-index: 2;
  right:0;
  top: 18.8vh;
}
#bozi26{
  background-color: #815B4A;
  position: absolute;
  width: 0.8vw;
  height: 1.6vh;
  z-index: 2;
  left: 0;
  top: 18.8vh;
}
#bozi27{
  background-color: #815B4A;
  position: absolute;
  width: 0.8vw;
  height: 1.6vh;
  z-index: 2;
  left: 4.4vh;
  top: 18.8vh;
}
#bozi28{
  background-color: #815B4A;
  position: absolute;
  width: 0.8vw;
  height: 4vh;
  z-index: 2;
  left: 2.8vh;
  top: 16.4vh;
}
#bozi29{
  background-color: #815B4A;
  position: absolute;
  width: 0.8vw;
  height: 5vh;
  z-index: 2;
  left: 4.6vh;
  top: 10vh;
}
#bozi30{
  background-color: #815B4A;
  position: absolute;
  width: 1vw;
  height: 4vh;
  z-index: 2;
  left: 1vh;
  top: 8vh;
}
#jian2{
  background-color: #00A3A3;
  position: relative;
  left: -6.4vh;
  width: 13vw;
  height: 10vh;
}
#tui1{
  background-color: #413A9C;
  position: relative;
  left: -0.2vh;
  width: 7.2vw;
  height: 22vh;
}
#tui2{
  background-color: #009B99;
  position: absolute;
  right: 0.1vh;
  width: 1.6vw;
  height: 2vh;
}
#tui3{
  background-color: #33277F;
  position: absolute;
  right: 3.6vh;
  width: 1vw;
  height: 2vh;
}
#tui4{
  background-color: #33277F;
  position: absolute;
  right: 1.6vh;
  top: 2vh;
  width: 1vw;
  height: 2vh;
}
#tui5{
  background-color: #2B266C;
  position: absolute;
  right:7.6vh;
  top: 4vh;
  z-index: 3;
  width: 0.01vw;
  height: 18vh;
}
#tui6{
  background-color: #646665;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 7.2vw;
  height: 3vh;
}
#tui7{
  background-color: #34297C;
  position: absolute;
  right: 1.6vh;
  top: 9.4vh;
  width: 2vw;
  height: 2vh;
}
#tui8{
  background-color: #34297C;
  position: absolute;
  left: 1.6vh;
  top: 9.4vh;
  width: 2vw;
  height: 2vh;
}
#gebo1{
  position: absolute;
  left: 0;
  background-color: #A17962;
  width: 3vw;
  height: 14vh;
}
#gebo2{
  position: absolute;
  right: 0;
  background-color: #A17962;
  width: 3vw;
  height: 14vh;
}
/* 闆帇 */
/* 鍐版潠 */
#zhang1{
  background-color: #000000;
  position: absolute;
  width: 1vw;
  height: 2vh;
}
#zhang2{
  background-color: #000000;
  position: absolute;
  left: 1vw;
  top: 0.9vw;
  width: 1vw;
  height: 4vh;
}
#zhang3{
  background-color: #000000;
  position: absolute;
  right: 0;
  top: 0.9vw;
  width: 1vw;
  height: 4vh;
}
#zhang4{
  background-color: #000000;
  position: absolute;
  right: 1vw;
  top: 2.8vw;
  width: 1vw;
  height: 4vh;
}
#zhang5{
  background-color: #000000;
  position: absolute;
  left: 2vw;
  top: 2.8vw;
  width: 1vw;
  height: 4vh;
}
#zhang6{
  background-color: #000000;
  position: absolute;
  left: 3vw;
  top: 4.7vw;
  width: 1vw;
  height: 6vh;
}
#zhang7{
  background-color: #000000;
  position: absolute;
  right: 2vw;
  top: 4.7vw;
  width: 1vw;
  height: 6vh;
}
#zhang8{
  background-color: #000000;
  position: absolute;
  right: 3vw;
  top: 7.5vw;
  width: 1vw;
  height: 4vh;
}
#zhang9{
  background-color: #000000;
  position: absolute;
  left: 4vw;
  top: 7.5vw;
  width: 1vw;
  height: 4vh;
}
#zhang10{
  background-color: #000000;
  position: absolute;
  left: -3vw;
  top: 9.4vw;
  width: 7vw;
  height: 2vh;
}
#zhang11{
  background-color: #000000;
  position: absolute;
  left: -3vw;
  top: 10vw;
  width: 1vw;
  height: 4.2vh;
}
#zhang12{
  background-color: #000000;
  position: absolute;
  left: -2vw;
  top: 12vw;
  width: 1vw;
  height: 8vh;
}
#zhang13{
  background-color: #000000;
  position: absolute;
  left: -1vw;
  top: 15.8vw;
  width: 1vw;
  height: 7.4vh;
}
#zhang14{
  background-color: #000000;
  position: absolute;
  left: 3vw;
  top: 10vw;
  width: 1vw;
  height: 19.6vh;
}
#zhang15{
  background-color: #000000;
  position: absolute;
  left: 0vw;
  top: 17.6vw;
  width: 3vw;
  height: 2vh;
}
#zhang16{
  background-color: #F1930A;
  position: absolute;
  left: -2vw;
  top: 10.35vw;
  width: 1vw;
  height: 2vh;
}
#zhang17{
  background-color: #FDF2C5;
  position: absolute;
  left: -1vw;
  top: 10.35vw;
  width: 1vw;
  height: 2vh;
}
#zhang18{
  background-color: #F1930A;
  position: absolute;
  left: 0vw;
  top: 10.35vw;
  width: 1vw;
  height: 2vh;
}
#zhang19{
  background-color: #FDF2C5;
  position: absolute;
  left: 1vw;
  top: 10.35vw;
  width: 1vw;
  height: 2vh;
}
#zhang20{
  background-color: #F1930A;
  position: absolute;
  left: 2vw;
  top: 10.35vw;
  width: 1vw;
  height: 2vh;
}
#zhang21{
  background-color: #FDF2C5;
  position: absolute;
  left: -2vw;
  top: 11.3vw;
  width: 1vw;
  height: 2vh;
}
#zhang22{
  background-color: #F1930A;
  position: absolute;
  left: -1vw;
  top: 11.3vw;
  width: 1vw;
  height: 2vh;
}
#zhang23{
  background-color: #FDF2C5;
  position: absolute;
  left: 0vw;
  top: 11.3vw;
  width: 1vw;
  height: 2vh;
}
#zhang24{
  background-color: #F1930A;
  position: absolute;
  left: 1vw;
  top: 11.3vw;
  width: 1vw;
  height: 2vh;
}
#zhang25{
  background-color: #FDF2C5;
  position: absolute;
  left: 2vw;
  top: 11.3vw;
  width: 1vw;
  height: 2vh;
}
#zhang26{
  background-color: #FDF2C5;
  position: absolute;
  left: -1vw;
  top: 12.3vw;
  width: 1vw;
  height: 2vh;
}
#zhang27{
  background-color: #F1930A;
  position: absolute;
  left: 0vw;
  top: 12.3vw;
  width: 1vw;
  height: 2vh;
}
#zhang28{
  background-color: #FDF2C5;
  position: absolute;
  left: 1vw;
  top: 12.3vw;
  width: 1vw;
  height: 2vh;
}
#zhang29{
  background-color: #F1930A;
  position: absolute;
  left: 2vw;
  top: 12.3vw;
  width: 1vw;
  height: 2vh;
}
#zhang30{
  background-color: #F1930A;
  position: absolute;
  left: -1vw;
  top: 13.3vw;
  width: 1vw;
  height: 2vh;
}
#zhang31{
  background-color: #FDF2C5;
  position: absolute;
  left: 0vw;
  top: 13.3vw;
  width: 1vw;
  height: 2vh;
}
#zhang32{
  background-color: #F1930A;
  position: absolute;
  left: 1vw;
  top: 13.3vw;
  width: 1vw;
  height: 2vh;
}
#zhang33{
  background-color: #FDF2C5;
  position: absolute;
  left: 2vw;
  top: 13.3vw;
  width: 1vw;
  height: 2vh;
}
#zhang34{
  background-color: #FDF2C5;
  position: absolute;
  left: -1vw;
  top: 14.3vw;
  width: 1vw;
  height: 2vh;
}
#zhang35{
  background-color: #F1930A;
  position: absolute;
  left: 0vw;
  top: 14.3vw;
  width: 1vw;
  height: 2vh;
}
#zhang36{
  background-color: #FDF2C5;
  position: absolute;
  left: 1vw;
  top: 14.3vw;
  width: 1vw;
  height: 2vh;
}
#zhang37{
  background-color: #F1930A;
  position: absolute;
  left: 2vw;
  top: 14.3vw;
  width: 1vw;
  height: 2vh;
}
#zhang38{
  background-color: #F1930A;
  position: absolute;
  left: -1vw;
  top: 15vw;
  width: 1vw;
  height: 2vh;
}
#zhang39{
  background-color: #FDF2C5;
  position: absolute;
  left: 0vw;
  top: 15vw;
  width: 1vw;
  height: 2vh;
}
#zhang40{
  background-color: #F1930A;
  position: absolute;
  left: 1vw;
  top: 15vw;
  width: 1vw;
  height: 2vh;
}
#zhang41{
  background-color: #FDF2C5;
  position: absolute;
  left: 2vw;
  top: 15vw;
  width: 1vw;
  height: 2vh;
}
#zhang42{
  background-color: #F1930A;
  position: absolute;
  left: 0vw;
  top: 15.9vw;
  width: 1vw;
  height: 2vh;
}
#zhang43{
  background-color: #ffffff;
  position: absolute;
  left: 1vw;
  top: 15.9vw;
  width: 1vw;
  height: 2vh;
}
#zhang44{
  background-color: #F1930A;
  position: absolute;
  left: 2vw;
  top: 15.9vw;
  width: 1vw;
  height: 2vh;
}
#zhang45{
  background-color: #F1930A;
  position: absolute;
  left: 2vw;
  top: 15.9vw;
  width: 1vw;
  height: 2vh;
}
#zhang46{
  background-color: #FDF2C5;
  position: absolute;
  left: 0vw;
  top: 16.7vw;
  width: 1vw;
  height: 2vh;
}
#zhang47{
  background-color: #F1930A;
  position: absolute;
  left: 1vw;
  top: 16.7vw;
  width: 1vw;
  height: 2vh;
}
#zhang48{
  background-color: #FDF2C5;
  position: absolute;
  left: 2vw;
  top: 16.7vw;
  width: 1vw;
  height: 2vh;
}
#zhang49{
  background-color: #F8DA5C;
  position: absolute;
  left: 0vw;
  top: 18.4vw;
  width: 3vw;
  height: 2vh;
}
#zhang50{
  background-color: #000000;
  position: absolute;
  left: 0vw;
  top: 19.4vw;
  width: 3vw;
  height: 2vh;
}
#zhang51{
  background-color: #000000;
  position: absolute;
  left: 0vw;
  top: 20vw;
  width: 1vw;
  height: 42vh;
}
#zhang52{
  background-color: #000000;
  position: absolute;
  left: 2vw;
  top: 20vw;
  width: 1vw;
  height: 42vh;
}
#zhang53{
  background-color: #F8DA5C;
  position: absolute;
  left: 1vw;
  top: 20vw;
  width: 1vw;
  height: 42vh;
}
#zhang54{
  background-color: #000000;
  position: absolute;
  left: 1vw;
  top: 40vw;
  width: 1vw;
  height: 2vh;
}
#zhang55{
  background-color: #000000;
  position: absolute;
  left: -1vw;
  top: 21vw;
  width: 1vw;
  height: 2vh;
}
#zhang56{
  background-color: #000000;
  position: absolute;
  left: -2vw;
  top: 22vw;
  width: 1vw;
  height: 4vh;
}
#zhang57{
  background-color: #000000;
  position: absolute;
  left: -1vw;
  top: 24vw;
  width: 1vw;
  height: 2vh;
}
#zhang58{
  background-color: #000000;
  position: absolute;
  left: 3vw;
  top: 22vw;
  width: 1vw;
  height: 2vh;
}
#zhang59{
  background-color: #000000;
  position: absolute;
  left: 3vw;
  top: 27vw;
  width: 1vw;
  height: 18vh;
}
#zhang60{
  background-color: #000000;
  position: absolute;
  left: 4vw;
  top: 27vw;
  width: 1vw;
  height: 2vh;
}
#zhang61{
  background-color: #FE0104;
  position: absolute;
  left: 3vw;
  top: 35vw;
  width: 1vw;
  height: 8vh;
}
#zhang62{
  background-color: #FE0104;
  position: absolute;
  left: 4vw;
  top: 36vw;
  width: 1vw;
  height: 6vh;
}
#zhang63{
  background-color: #FE0104;
  position: absolute;
  left: 5vw;
  top: 37vw;
  width: 1vw;
  height: 2vh;
}
#zhang64{
  background-color: #000000;
  position: absolute;
  left: 3vw;
  top: 38.6vw;
  width: 1vw;
  height: 2vh;
}
#zhang65{
  background-color: #000000;
  position: absolute;
  left: 4vw;
  top: 38.6vw;
  width: 1vw;
  height: 2vh;
}
#zhang66{
  background-color: #000000;
  position: absolute;
  left: 4vw;
  top: 35.2vw;
  width: 1vw;
  height: 2vh;
}
#zhang67{
  background-color: #000000;
  position: absolute;
  left: 5vw;
  top: 36.2vw;
  width: 1vw;
  height: 2vh;
}
#zhang68{
  background-color: #000000;
  position: absolute;
  left: 5vw;
  top: 37.9vw;
  width: 3vw;
  height: 2vh;
}
#zhang69{
  background-color: #000000;
  position: absolute;
  left: 6vw;
  top: 37vw;
  width: 1vw;
  height: 2vh;
}
#zhang70{
  background-color: #000000;
  position: absolute;
  left: 8vw;
  top: 38.8vw;
  width: 2vw;
  height: 2vh;
}
#zhang71{
  background-color: #000000;
  position: absolute;
  left: 10vw;
  top: 39.8vw;
  width: 10vw;
  height: 2vh;
}
#zhang72{
  background-color: #000000;
  position: absolute;
  left: 20vw;
  top: 39vw;
  width: 2vw;
  height: 2vh;
}
#zhang73{
  background-color: #000000;
  position: absolute;
  left: 22vw;
  top: 38vw;
  width: 6vw;
  height: 2vh;
}
#zhang74{
  background-color: #000000;
  position: absolute;
  left: 24vw;
  top: 36.2vw;
  width: 1vw;
  height: 4vh;
}
#zhang75{
  background-color: #FE0104;
  position: absolute;
  left: 25vw;
  top: 35.2vw;
  width: 3vw;
  height: 6vh;
}
#zhang76{
  background-color: #000000;
  position: absolute;
  left: 25vw;
  top: 35.2vw;
  width: 1vw;
  height: 2vh;
}
#zhang77{
  background-color: #FE0104;
  position: absolute;
  left: 27vw;
  top: 34.4vw;
  width: 3vw;
  height: 6vh;
}
#zhang78{
  background-color: #000000;
  position: absolute;
  left: 26vw;
  top: 34.4vw;
  width: 1vw;
  height: 2vh;
}
#zhang79{
  background-color: #000000;
  position: absolute;
  left: 27vw;
  top: 29.6vw;
  width: 1vw;
  height: 10vh;
}
#zhang80{
  background-color: #FE0104;
  position: absolute;
  left: 28vw;
  top: 32.6vw;
  width: 1vw;
  height: 4vh;
}
#zhang81{
  background-color: #000000;
  position: absolute;
  left: 28vw;
  top: 31.8vw;
  width: 1vw;
  height: 2vh;
}
#zhang82{
  background-color: #000000;
  position: absolute;
  left: 29vw;
  top: 31.8vw;
  width: 1vw;
  height: 6vh;
}
#zhang83{
  background-color: #000000;
  position: absolute;
  left: 28vw;
  top: 37.2vw;
  width: 2vw;
  height: 2vh;
}
#zhang84{
  background-color: #000000;
  position: absolute;
  left: 26vw;
  top: 27.8vw;
  width: 1vw;
  height: 4vh;
}
#zhang85{
  background-color: #000000;
  position: absolute;
  left: 25vw;
  top: 27vw;
  width: 1vw;
  height: 2vh;
}
#zhang86{
  background-color: #000000;
  position: absolute;
  left: 29vw;
  top: 27vw;
  width: 1vw;
  height: 4vh;
}
#zhang87{
  background-color: #000000;
  position: absolute;
  left: 28vw;
  top: 25.2vw;
  width: 1vw;
  height: 4vh;
}
#zhang88{
  background-color: #000000;
  position: absolute;
  left: 27vw;
  top: 23.4vw;
  width: 1vw;
  height: 4vh;
}
#zhang89{
  background-color: #000000;
  position: absolute;
  left: 24vw;
  top: 22.6vw;
  width: 3vw;
  height: 2vh;
}
#zhang90{
  background-color: #000000;
  position: absolute;
  left: 21vw;
  top: 23.4vw;
  width: 3vw;
  height: 2vh;
}
#zhang91{
  background-color: #000000;
  position: absolute;
  left: 19vw;
  top: 22.6vw;
  width: 2vw;
  height: 2vh;
}
#zhang92{
  background-color: #FE0104;
  position: absolute;
  left: 21vw;
  top: 22.6vw;
  width: 3vw;
  height: 2vh;
}
#zhang93{
  background-color: #FE0104;
  position: absolute;
  left: 19vw;
  top: 21.7vw;
  width: 7vw;
  height: 2vh;
}
#zhang94{
  background-color: #000000;
  position: absolute;
  left:26vw;
  top: 21.7vw;
  width: 1vw;
  height: 2vh;
}
#zhang95{
  background-color: #000000;
  position: absolute;
  left:12vw;
  top: 21.7vw;
  width: 7vw;
  height: 2vh;
}
#zhang96{
  background-color: #FE0104;
  position: absolute;
  left:5vw;
  top: 21.7vw;
  width: 7vw;
  height: 2vh;
}
#zhang97{
  background-color: #000000;
  position: absolute;
  left:4vw;
  top: 21.7vw;
  width: 1vw;
  height: 2vh;
}
#zhang98{
  background-color: #000000;
  position: absolute;
  left:4vw;
  top: 22.6vw;
  width: 4vw;
  height: 2vh;
}
#zhang99{
  background-color: #FE0104;
  position: absolute;
  left:6vw;
  top: 20.8vw;
  width: 4vw;
  height: 2vh;
}
#zhang100{
  background-color: #FE0104;
  position: absolute;
  left:7vw;
  top: 19.8vw;
  width: 1vw;
  height: 2vh;
}
#zhang101{
  background-color: #000000;
  position: absolute;
  left:5vw;
  top: 20.8vw;
  width: 1vw;
  height: 2vh;
}
#zhang102{
  background-color: #000000;
  position: absolute;
  left:10vw;
  top: 20.8vw;
  width: 2vw;
  height: 2vh;
}
#zhang103{
  background-color: #000000;
  position: absolute;
  left: 6vw;
  top: 19.8vw;
  width: 1vw;
  height: 2vh;
}
#zhang104{
  background-color: #000000;
  position: absolute;
  left: 8vw;
  top: 19.8vw;
  width: 2vw;
  height: 1vw;
}
#zhang105{
  background-color: #000000;
  position: absolute;
  left: 19vw;
  top: 20.8vw;
  width: 2vw;
  height: 1vw;
}
#zhang106{
  background-color: #FE0104;
  position: absolute;
  left: 21vw;
  top: 20.8vw;
  width: 4vw;
  height: 1vw;
}
#zhang107{
  background-color: #000000;
  position: absolute;
  left: 25vw;
  top: 20.8vw;
  width: 1vw;
  height: 1vw;
}
#zhang108{
  background-color: #000000;
  position: absolute;
  left: 21vw;
  top: 19.8vw;
  width: 2vw;
  height: 1vw;
}
#zhang109{
  background-color: #FE0104;
  position: absolute;
  left: 23vw;
  top: 19.8vw;
  width: 1vw;
  height: 1vw;
}
#zhang110{
  background-color: #000000;
  position: absolute;
  left: 24vw;
  top: 19.8vw;
  width: 1vw;
  height: 1vw;
}
#zhang111{
  background-color: #000000;
  position: absolute;
  left: 23vw;
  top: 18.8vw;
  width: 1vw;
  height: 1vw;
}
#zhang112{
  background-color: #000000;
  position: absolute;
  left: 7vw;
  top: 18.8vw;
  width: 1vw;
  height: 1vw;
}
#zhang113{
  background-color: #000000;
  position: absolute;
  left: 8vw;
  top: 23.4vw;
  width: 3vw;
  height: 1vw;
}
#zhang114{
  background-color: #FE0104;
  position: absolute;
  left: 8vw;
  top: 22.4vw;
  width: 3vw;
  height: 1vw;
}
#zhang115{
  background-color: #000000;
  position: absolute;
  left: 11vw;
  top: 22.4vw;
  width: 1vw;
  height: 1vw;
}
#zhang116{
  background-color: #000000;
  position: absolute;
  left: 24vw;
  top: 17vw;
  width: 1vw;
  height: 2vw;
}
#zhang117{
  background-color: #000000;
  position: absolute;
  left: 25vw;
  top: 11vw;
  width: 1vw;
  height: 6vw;
}
#zhang118{
  background-color: #000000;
  position: absolute;
  left: 24vw;
  top: 9vw;
  width: 1vw;
  height: 2vw;
}
#zhang119{
  background-color: #000000;
  position: absolute;
  left: 23vw;
  top: 8vw;
  width: 1vw;
  height: 1vw;
}
#zhang120{
  background-color: #000000;
  position: absolute;
  left: 21vw;
  top: 7vw;
  width: 2vw;
  height: 1vw;
}
#zhang121{
  background-color: #000000;
  position: absolute;
  left: 10vw;
  top: 6vw;
  width: 11vw;
  height: 1vw;
}
#zhang122{
  background-color: #000000;
  position: absolute;
  left: 8vw;
  top: 7vw;
  width: 2vw;
  height: 1vw;
}
#zhang123{
  background-color: #000000;
  position: absolute;
  left: 7vw;
  top: 8vw;
  width: 1vw;
  height: 1vw;
}
#zhang124{
  background-color: #000000;
  position: absolute;
  left: 6vw;
  top: 9vw;
  width: 1vw;
  height: 2vw;
}
#zhang125{
  background-color: #000000;
  position: absolute;
  left: 5vw;
  top: 11vw;
  width: 1vw;
  height: 6vw;
}
#zhang126{
  background-color: #000000;
  position: absolute;
  left: 6vw;
  top: 17vw;
  width: 1vw;
  height: 2vw;
}
#zhang127{
  background-color: #000000;
  position: absolute;
  left: 12vw;
  top: 4vw;
  width: 1vw;
  height: 2vw;
}
#zhang128{
  background-color: #000000;
  position: absolute;
  left: 18vw;
  top: 4vw;
  width: 1vw;
  height: 2vw;
}
#zhang129{
  background-color: #000000;
  position: absolute;
  left: 11vw;
  top: 3vw;
  width: 1vw;
  height: 1vw;
}
#zhang130{
  background-color: #000000;
  position: absolute;
  left: 19vw;
  top: 3vw;
  width: 1vw;
  height: 1vw;
}
#zhang131{
  background-color: #000000;
  position: absolute;
  left: 10vw;
  top: 0vw;
  width: 11vw;
  height: 3vw;
}
#zhang132{
  background-color: #ffffff;
  position: absolute;
  left: 11vw;
  top: 1vw;
  width: 1vw;
  height: 2vw;
}
#zhang133{
  background-color: #ffffff;
  position: absolute;
  left: 19vw;
  top: 1vw;
  width: 1vw;
  height: 2vw;
}
#zhang134{
  background-color: #ffffff;
  position: absolute;
  left: 20vw;
  top: 0vw;
  width: 1vw;
  height: 1vw;
}
#zhang135{
  background-color: #ffffff;
  position: absolute;
  left: 10vw;
  top: 0vw;
  width: 1vw;
  height: 1vw;
}
#zhang136{
  background-color: #ffffff;
  position: absolute;
  left: 12vw;
  top: 0vw;
  width: 2vw;
  height: 1vw;
}
#zhang137{
  background-color: #ffffff;
  position: absolute;
  left: 17vw;
  top: 0vw;
  width: 2vw;
  height: 1vw;
}
#zhang138{
  background-color: #ffffff;
  position: absolute;
  left: 15vw;
  top: 0vw;
  width: 1vw;
  height: 3vw;
}
#zhang139{
  background-color: #000000;
  position: absolute;
  left: 15vw;
  top: -1vw;
  width: 1vw;
  height: 1vw;
}
#zhang140{
  background-color: #ffffff;
  position: absolute;
  left: 13vw;
  top: 1vw;
  width: 1vw;
  height: 1vw;
}
#zhang141{
  background-color: #ffffff;
  position: absolute;
  left: 17vw;
  top: 1vw;
  width: 1vw;
  height: 1vw;
}
#zhang142{
  background-color: #000000;
  position: absolute;
  left: 11vw;
  top: 10vw;
  width: 3vw;
  height: 4vw;
}
#zhang143{
  background-color: #000000;
  position: absolute;
  left: 18vw;
  top: 10vw;
  width: 3vw;
  height: 4vw;
}
#zhang144{
  background-color: #ffffff;
  position: absolute;
  left: 20vw;
  top: 11vw;
  width: 1vw;
  height: 1vw;
}
#zhang145{
  background-color: #ffffff;
  position: absolute;
  left: 13vw;
  top: 11vw;
  width: 1vw;
  height: 1vw;
}
#zhang146{
  background-color: #F76936;
  position: absolute;
  left: 15vw;
  top: 13vw;
  width: 3vw;
  height: 2vw;
}
#zhang147{
  background-color: #F76936;
  position: absolute;
  left: 16vw;
  top: 14vw;
  width: 7vw;
  height: 2vw;
}
#zhang148{
  background-color: #ffffff;
  position: absolute;
  left: 22vw;
  top: 14vw;
  width: 1vw;
  height: 1vw;
}
#zhang149{
  background-color: #FE0104;
  position: absolute;
  left: 10vw;
  top: 15vw;
  width: 2vw;
  height: 2vw;
}
#zhang150{
  background-color: #FE0104;
  position: absolute;
  left: 11vw;
  top: 16vw;
  width: 2vw;
  height: 2vw;
}
#zhang151{
  background-color: #FE0104;
  position: absolute;
  left: 12vw;
  top: 18vw;
  width: 2vw;
  height: 1vw;
}
#zhang152{
  background-color: #000000;
  position: absolute;
  left: 13vw;
  top: 17vw;
  width: 1vw;
  height: 1vw;
}
#zhang153{
  background-color: #000000;
  position: absolute;
  left: 14vw;
  top: 18vw;
  width: 4vw;
  height: 1vw;
}
#zhang154{
  background-color: #000000;
  position: absolute;
  left: 18vw;
  top: 17vw;
  width: 2vw;
  height: 1vw;
}

也就只是利用相对绝对定位然后用空div加背景图，然后确定位置就可以啦，就是有的肝，没有难度

文章标签：
前端开发
关键词：
HTML CSS
CSS html
HTML像素
CSS像素
HTML图
瑞崽崽崽
目录
相关文章
二二*一一
|
10天前
|
前端开发
如何利用 HTML 和 CSS 实现椭圆形布局，并在椭圆形路径上渲染可点击座位？
html 的椭圆形布局实现
二二*一一
33 1
进步`于辰
|
13天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]细节与使用经验
本文总结了前端开发中的一些重要细节和技巧，包括CSS选择器、定位、层级、全局属性、滚轮控制、轮播等。作者以纯文字形式记录，便于读者使用<kbd>Ctrl + F</kbd>快速查找相关内容。文章还提供了示例代码，帮助读者更好地理解和应用这些知识点。
进步`于辰
35 1
[HTML、CSS]细节与使用经验
进步`于辰
|
14天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
本文涵盖前端知识点扩展、HTML标签（如video、input、canvas）、datalist和details标签的使用方法，以及CSS布局技巧（如margin、overflow: hidden和动态height）。文章旨在分享作者的学习经验和实用技巧。
进步`于辰
28 1
[HTML、CSS]知识点
aliyun8599273441-30642
|
1月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站：从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代，拥有一个个人博客不仅是展示自我的平台，也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建，涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章，你将学会如何从零开始构建自己的网络空间，并在互联网世界留下你的足迹。
aliyun8599273441-30642
255 65
游客g5tp3lgf24cqc
|
9天前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
游客g5tp3lgf24cqc
39 12
温轻舟
|
5天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看！用HTML+CSS+JS打造企业级官网-源码直接可用，文章代码仅用于学习，禁止用于商业
温轻舟
33 1
蓝易云
|
10天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript，我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验，还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能，提升网站的安全性和用户友好性。
蓝易云
21 3
疯狂的猿
|
21天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码，带歌词显示。包括支持单曲循环，歌词显示，歌曲搜索，音量控制，列表循环等功能。利用json获取音乐歌单和歌词，基于html5 audio属性手机音乐播放器代码。
疯狂的猿
72 6
大树营养快线
|
19天前
|
前端开发 开发者 UED
设备像素、css像素、设备独立像素、dpr、ppi之间的区别
【10月更文挑战第24天】在实际应用中，这些概念相互关联，共同影响着网页在不同设备上的显示表现。开发者需要了解它们之间的区别和关系，以便更好地进行网页设计和优化，确保在各种设备上都能提供良好的用户体验。
大树营养快线
20 3
游客44yag4ft7nckq
|
20天前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式，通过&lt;head&gt;部分的&lt;style&gt;标签定义；外部样式表适用于多个页面，通过&lt;link&gt;标签引用外部CSS文件；&lt;style&gt;定义样式，&lt;link&gt;引用资源；已弃用的标签有&lt;font&gt;、&lt;center&gt;、&lt;strike&gt;，属性有color和bgcolor。
游客44yag4ft7nckq
23 0