HTML和CSS拼成的像素图

简介: 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加背景图,然后确定位置就可以啦,就是有的肝,没有难度

相关文章
|
1天前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
64 24
|
1月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
60 7
|
1月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
37 6
|
1月前
|
移动开发 前端开发 JavaScript
[HTML、CSS]细节与使用经验
本文总结了前端开发中的一些重要细节和技巧,包括CSS选择器、定位、层级、全局属性、滚轮控制、轮播等。作者以纯文字形式记录,便于读者使用<kbd>Ctrl + F</kbd>快速查找相关内容。文章还提供了示例代码,帮助读者更好地理解和应用这些知识点。
48 1
|
1月前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
45 5
|
1月前
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
38 5
|
1月前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
本文涵盖前端知识点扩展、HTML标签(如video、input、canvas)、datalist和details标签的使用方法,以及CSS布局技巧(如margin、overflow: hidden和动态height)。文章旨在分享作者的学习经验和实用技巧。
37 1
[HTML、CSS]知识点
|
1月前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
65 12
|
1月前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
147 1