html - CSS 中的 .class 无法正常工作如何修复？

标签 html css

基本上，我为所有图标和按钮以及图标或按钮图像创建了一个名为 botao 的类，并将其放入 html 中的所有这些元素中，然后尝试使它们的 width 和 height 等于 10%，这样我就可以看到它是怎么回事，但它们的大小没有改变，我不知道为什么。基本上，CSS 应该将它们的 size 更改为整个页面高度和宽度的 10%。这里发生了什么？如何解决？

html, body {
  margin:0;
   min-height: 100%;
   font-family: "Helvetica Neue", Helvetica, sans-serif;
   color: #444;
   -webkit-font-smoothing: antialiased;
   background-image: url("http://wallpaperask.com/wp-content/uploads/Amazing-1920x1080-HD-wallpaper.jpg");
   background-position: center;
   background-repeat: no-repeat;
   -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
   font-family: Arial, Helvetica, sans-serif;
   zoom:100%;
}


.botao{
 width:10%;
 height:10%;
}
/************** TOGGLE BUTTON***********************/
.switch {
    position: relative;
    display: inline-block;
    right:0px;
    width: 200px;
    height: 34px;
    padding:20px;
  }
  
.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ca2222;
  -webkit-transition: .30s;
  transition: .30s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 50px;
  width: 50px;
  left: 10px;
  bottom: 10px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2ab934;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(160px);
  -ms-transform: translateX(160px);
  transform: translateX(160px);
}

/*------ ADDED CSS ---------*/
.on
{
  display: none;
}

.on, .off
{
  color: white;
  position: absolute;
  transform: translate(-50%,-50%);
  top: 50%;
  left: 50%;
  font-size: 30px;
  font-family: Verdana, sans-serif;
}

input:checked+ .slider .on
{display: block;}

input:checked + .slider .off
{display: none;}

/*--------- END --------*/

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;}
/*******************************************SHUTDOWN BUTTON********************************/
#BtnTesteLogout{
  background-color: Transparent;
  background-repeat:no-repeat;
  border: none;
  cursor:pointer;
  overflow: hidden;
}

#LOGOUT{
    position: relative;
}

/*******************************************Split Screen, WIFI, Bluetooth*********************************/
#SSbutton, #WIFIButton, #BlueButton{
  background-color: Transparent;
  background-repeat:no-repeat;
  border: none;
  cursor:pointer;
  overflow: hidden;
}

#SplitScreen{
 

}

#WIFI{


}

#Bluetooth{
 
}


#SplitScreen button img, #WIFI button img,#Bluetooth button img{

  background-color: Transparent;
}

.clockdate-wrapper {
  background-color: none;
  padding:25px;
  max-width:500px;
  width:100%;
  text-align:center;
  border-radius:5px;
  margin:0 auto;
  height:300px;
  position: absolute;
  top:40px;
  right: 100px;
  border-radius: 15%;
}
#clock{
  background-color:none;;
  font-family: sans-serif;
  font-size:100px;
  text-shadow:0px 0px 1px #fff;
  color:#fff;
}
#clock span {
  color:white;
  text-shadow:0px 0px 1px black;
  font-size:50px;
  position:relative;
  top:-27px;
  left:-10px;
}
#date {
  letter-spacing:10px;
  font-size:50px;
  font-family:arial,sans-serif;
  color:#fff;
}

/**************************************************************************WIFI DROPDOWN********************************************************/

/**************************************************************************BLUETTOTH WINDOW****************************************************/
#BlueWindow{
  position: absolute;
  width:1900px;
  height:1500px;
  left:1500px;
  top:550px;
  border-radius:10px black solid;
  z-index: 10000;
}

#BlueWindowheader{
  height: 100px;
    background: rgb(30,87,153); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}

#closeBlue{
    width: 75px;
    height: 75px;
    top:0px;
    left:0px;
    background-color: none; 
    position:absolute;
}

#JoanaPTexto{
  color:black;
  text-align:center;
  text-shadow: 3px 2px grey;
  font-size:50px;
  top: 20px;
  position: relative;
}

#DocImgBlue{
  width: 400px;
  height: 400px;
  background-color: none;
  padding:40px; 
}

#bottomBlue{
  background-color:white;
  height:1415px;
  border-bottom-left-radius:5%;
  border-bottom-right-radius:5%;
}

#MariaDoc{
  position: absolute;
  left:140px;
  top:575px;  
}

#closeButtonBlue{
  width: 75px;
    height: 75px;
    background-color: none;
    padding:5px;  
    top: 45px;
    position: absolute;
    right:10px;
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden; 
}
#doc1{
  z-index:10010;
}
/**************************************************************************BLUETOOTH DROPDOWN**************************************************/
#BlueButton{
}

#wrapperB {
  color: #ffcccc;
  top: 100px;
  width: 400px;
}

#dispos{
  color:black;
}

a {
  text-decoration: none;
  color: inherit;
}

nav ul ul {
  -webkit-transition: all 500ms ease-in-out 500ms;
  -moz-transition: all 500ms ease-in-out 500ms;
  -ms-transition: all 500ms ease-in-out 500ms;
  -o-transition: all 500ms ease-in-out 500ms;
  transition: all 500ms ease-in-out 500ms;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  -ms-transform: rotateX(-90deg);
  -o-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-transform-origin: 0% 0%;
  -moz-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  -o-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-box-shadow: 0px -100px 500px rgba(0,0,0,0);
  box-shadow: 0px -100px 500px rgba(0,0,0,0);
}

nav ul li:hover > ul {
  -webkit-transition: all 500ms ease-in-out 0ms;
  -moz-transition: all 500ms ease-in-out 0ms;
  -ms-transition: all 500ms ease-in-out 0ms;
  -o-transition: all 500ms ease-in-out 0ms;
  transition: all 500ms ease-in-out 0ms;
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  -o-transform: rotateX(0deg);
  transform: rotateX(0deg);
  -webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.1);
  box-shadow: 10px 10px 10px rgba(0,0,0,0.1);
}

nav ul {
  padding: 0;
  list-style: none;
  position: relative;
  display: inline-table;
  border-radius: 5px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective: 200px;
  -ms-perspective: 200px;
  perspective: 200px;
}

nav ul:after {
  content: "";
  clear: both;
  display: block;
}

nav ul li {
  float: left;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective: 200px;
  -ms-perspective: 200px;
  perspective: 200px;
  border-right: 1px solid #890456;
}

nav ul > li:last-of-type {
  border-right: none;
  border-radius: 0 5px 5px 0;
}

nav ul span li { border-right: 1px solid #890456; }

nav ul li:first-of-type { border-radius: 5px 0 0 5px; }


#mphone:hover>a,#jphone:hover > a { color: #fff; }
#dispos:hover > a {color:none}

nav ul li a {
  display: block;
  padding: 10px 31px 10px 32px;
}

#wrapperB #mainB #subB {
  position: absolute;
  top: 400px;
  padding: 0;
  right: 20px;
  width:1000px;
  height:400px;
  border-radius: 0 0 5px 5px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a7cfdf+0,23538a+100;Blue+3d+%238 */
background: #a7cfdf; /* Old browsers */
background: -moz-linear-gradient(-45deg, #a7cfdf 0%, #23538a 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #a7cfdf 0%,#23538a 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #a7cfdf 0%,#23538a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

#wrapperB #mainB #subB li {
  float: none;
  position: relative;
  border: none;
}

.bottom{
  font-size:75px;
}

nav ul ul li:last-of-type { border-radius: 0 0 5px 5px; }

nav ul ul li a { padding: 8px 21px; }

/**************************************************************************SS DROPDOWN*************************************/
#SSButton{
}

#wrapperSS {
  color: black;
  top: 100px;
  width: 700px;
}

a {
  text-decoration: none;
  color: inherit;
}

nav ul ul {
  -webkit-transition: all 500ms ease-in-out 500ms;
  -moz-transition: all 500ms ease-in-out 500ms;
  -ms-transition: all 500ms ease-in-out 500ms;
  -o-transition: all 500ms ease-in-out 500ms;
  transition: all 500ms ease-in-out 500ms;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  -ms-transform: rotateX(-90deg);
  -o-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-transform-origin: 0% 0%;
  -moz-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  -o-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-box-shadow: 0px -100px 500px rgba(0,0,0,0);
  box-shadow: 0px -100px 500px rgba(0,0,0,0);
}

nav ul li:hover > ul {
  -webkit-transition: all 500ms ease-in-out 0ms;
  -moz-transition: all 500ms ease-in-out 0ms;
  -ms-transition: all 500ms ease-in-out 0ms;
  -o-transition: all 500ms ease-in-out 0ms;
  transition: all 500ms ease-in-out 0ms;
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  -o-transform: rotateX(0deg);
  transform: rotateX(0deg);
  -webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.1);
  box-shadow: 10px 10px 10px rgba(0,0,0,0.1);
}

nav ul {
  padding: 0;
  list-style: none;
  position: relative;
  display: inline-table;
  border-radius: 5px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective: 200px;
  -ms-perspective: 200px;
  perspective: 200px;
}

nav ul:after {
  content: "";
  clear: both;
  display: block;
}

nav ul li {
  float: left;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective: 200px;
  -ms-perspective: 200px;
  perspective: 200px;
  border-right: 1px solid #890456;
}

nav ul > li:last-of-type {
  border-right: none;
  border-radius: 0 5px 5px 0;
}

nav ul span li { border-right: 1px solid #890456; }

nav ul li:first-of-type { border-radius: 5px 0 0 5px; }


#mergeall:hover>a,#split2:hover > a,#split4:hover > a, #split6:hover > a  { color: green; }

nav ul li a {
  display: block;
  padding: 10px 31px 10px 32px;
}

#wrapperSS #mainSS #subSS {
  position: absolute;
  top: 400px;
  padding: 0;
  right: 20px;
  width:800px;
  height:400px;
  border-radius: 0 0 5px 5px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f6e6b4+0,ed9017+100;Yellow+3D+%231 */
background: #f6e6b4; /* Old browsers */
background: -moz-linear-gradient(-45deg, #f6e6b4 0%, #ed9017 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #f6e6b4 0%,#ed9017 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #f6e6b4 0%,#ed9017 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

#wrapperSS #mainSS #subSS li {
  float: none;
  position: relative;
  border: none;
}

.bottom{
  font-size:75px;
}

nav ul ul li:last-of-type { border-radius: 0 0 5px 5px; }

nav ul ul li a { padding: 8px 21px; }
/********************************************BOTTOM BAR***********************************/
/* Place the navbar at the bottom of the page, and make it stick */
.navbar {
    background-color: none;
    left: 30%;
    position: absolute;
    bottom: 0;
    height: 500px;
    width: 1500px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 10%;
    padding-right: 10%;
    border-top-right-radius: 30px;
    border-top-left-radius: 30px;
    text-align: center;
    overflow: hidden;
  }

  #NetImg, #contact{

      padding:20px;
      background: none;
  }

  /************************************************MAIN************************************/
  #net{
    position: absolute;
    width:3505px;
    height:1500px;
    left:1500px;
    top:550px;
    border-radius:10px black solid;
    z-index: 000;
  }

  #janela{
    position: absolute;
    width:1900px;
    height:1500px;
    left:1500px;
    top:550px;
    border-radius:10px black solid;
    z-index: 000;
  }

  #closeDocs, #closeNet{
    width: 75px;
    height: 75px;
    background-color: none;
    padding:5px;  
    top: 35px;
    position: absolute;
    right:20px;
  }

  #docsHeadTexto,#NetTexto{
    color:black;
    text-align:center;
    text-shadow: 3px 2px grey;
    font-size:50px;
    top: 20px;
    position: relative;
  }

  #netBottom{
    background-color:white;
    height:2515px;
    width: 3500px;
    left:-1px;
    top:130px;
    position: absolute;
    border-bottom-left-radius:0%;
    border-bottom-right-radius:0%;
  }
  


  .windowTop,.windowTop2,.windowTop1{
    height: 100px;
    background: rgb(30,87,153); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
  }

  #DocImg{
    width: 400px;
    height: 400px;
    background-color: none;
    padding:40px;
  }

  #bottomWindowDocs{
    background-color:white;
    height:1415px;
    border-bottom-left-radius:5%;
    border-bottom-right-radius:5%;
  }

  #DocEx{
    position: absolute;
    left:140px;
    top:575px;  
  }
  
  /****************************************************** CONTACTOS *************************************/
  /****************************************************** Calendario ************************************/
  #calendar{
    position:absolute;
    height:3000px;
    width:4000px;
    top:300px;
    left:800px;
  }

  #janelaCalendario{
    z-index:0000;
  }

  #iconeCal{
  }

  #janelaCalendarioHeader{
    position: absolute;
    top:200px;
    left:800px;
    width:4005px;
  }

  #closeCal{
    position: absolute;
    top:10px;
    left:3900px;
    height: 90px;
    width:90px;
  }
<!DOCTYPE html>
<html>
<head>
<title>Desk+ - Grupo 36</title>
<link rel="stylesheet" type="text/css" href="PF1.1.css">
</head>
<body>

<div id="Logout">
    <!---<a href="logout.php" id="LogoutAction"><img src="https://cdn2.iconfinder.com/data/icons/crystalproject/crystal_project_256x256/apps/exit.png"></a>-->
    <button onclick="location.href = 'PF1.html';" id="BtnTesteLogout" class="float-left submit-button" ><img src="https://cdn2.iconfinder.com/data/icons/crystalproject/crystal_project_256x256/apps/exit.png"></button>
</div>


<div id="BarraSDireita">
    <div id="Bluetooth">
        <nav id="wrapperB" class="wrapper">
                <ul id="mainB" class="main">
                  <li id="frontB" class="botao" class="front"><a href="#"><img id ="BlueButton" class="botao" src="https://cdn.pixabay.com/photo/2015/03/12/12/22/bluetooth-670069_960_720.png"></a>
                    <ul id="subB" class="sub">
                      <li class="bottom" id="onoff"><a> <label class="switch"><input type="checkbox" id="togBtn"><div class="slider round"><!--ADDED HTML --><span class="on">ON</span><span class="off">OFF</span><!--END--></div></label></a></li>
                      <li class="bottom" id="dispos"><a>Dispositivos emparelhados:</a></li>
                      <li class="bottom" id="jphone"><a onclick="abrirBlue()">Joana's Phone</a></li>
                      <li class="bottom" id="mphone"><a>Maria's Phone</a></li>
                    </ul>
                </li>
                </ul>
              </nav>
    </div>

    <div id="clockdate">
            <div class="clockdate-wrapper">
              <div id="clock"></div>
              <div id="date"></div>
            </div>
    </div>

    <div id="SplitScreen">
            <nav id="wrapperSS" class="wrapper">
                    <ul id="mainSS" class="main">
                      <li id="frontSS" class="botao" class="front"><a href="#"><img class="botao" id ="SSButton" src="bullet-splitscreen.png"></a>
                        <ul id="subSS" class="sub">
                          <li class="bottom" id="mergeall"><a href="#">Juntar todos os ecr&atildes</a></li>
                          <li class="bottom" id="split2"><a href="#">Dividir em 2</a></li>
                          <li class="bottom" id="split4"><a href="#">Dividir em 4</a></li>
                          <li class="bottom" id="split6"><a href="#">Dividir em 6</a></li>
                        </ul>
                    </li>
                    </ul>
                  </nav>
    </div>

    <div id="WIFI"> 
            <button id="WIFIButton" class=botao><img class="botao" src="https://purepng.com/public/uploads/large/purepng.com-wifi-icon-redwifi-iconwifiiconwireless-connection-1701528436213ktjmp.png"></button>
    </div>
</div>

<div id="BlueWindow" style="display:none;">
        <div id="BlueWindowheader">
                <header class="windowTop1">
                <button id="closeButtonBlue"><img id="closeBlue" class="X" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-dialog-close-icon.png" alt="X" onclick="fecharBlue()"></button>
                <h1 id="JoanaPTexto">Joana's Phone</h1>
                </header>
        </div>
        <div id="bottomBlue">
            <div id="doc1">
                <div id="doc1header">
                    <img id="DocImgBlue" src="https://img.icons8.com/pastel-glyph/2x/file.png">
                </div>
                    <h1 id="MariaDoc">Doc-exemplo-Joana</h1>
            </div>
        </div>

</div>

<div id="DOCS">
<img id="documentos_logo" class="botao" src="https://marketplace.canva.com/MAB7OE9Jppw/1/thumbnail_large/canva-folder-file-yellow-document-info-icon.-vector-graphic-MAB7OE9Jppw.png" alt="documentos" onclick="openDocs()">
</div>

<div id="janela">
</div>

<div id="docwindow" style="display: none;">
    <div id="docwindowheader">
    <header class="windowTop">
        <h1 id="docsHeadTexto">Documentos</h1>
    <img id="closeDocs" class="X" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-dialog-close-icon.png" alt="X" onclick="closeMain()">
    </header>
</div>

<div id="bottomWindowDocs">
    <div class="documents">
        <div>
            <img id="DocImg" src="https://img.icons8.com/pastel-glyph/2x/file.png" alt="doc">
            <h1 id="DocEx">Doc-exemplo</h1>
        </div>
    </div>
    <!----<div id="DocExemplo" S>
        <header class="windowhead">
            Documento exemplo
            <img class="X" src="https://banner2.kisspng.com/20180402/dwe/kisspng-computer-icons-social-media-email-webmail-cancel-button-5ac240963875f3.0504665115226799582313.jpg" alt="X" onclick="closeMain()">
            <button id="share">share</button>
            <button id="back">back</button>
        </header>
        <div id="corpo">
            <h4>Este é um exemplo de Documento</h4>
        </div>
    </div>-->
</div>
</div>

<div id="calendario">
        <a id="iconeCal" class="botao" onclick="abrirCal()"><img src="https://www.manisteelibrary.org/images/events-calendar.png/@@images/image.png"></a>
</div>

<div id="janelaCalendario" style="display:none;">
        <div id="janelaCalendarioHeader">
                <header class="windowTop">
                <img  id="closeCal" class="X" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-dialog-close-icon.png" alt="X" onclick="fecharCal()">
                </header>
        </div>
        <iframe src="https://teamup.com/ksbe6drnzpwdbyrgp2" id="calendar"></iframe>
    </div>

<div id="net" style=display:none;>
                <div id="Netheader">
                <header class="windowTop2">
                    <h1 id="NetTexto">Desk+ Browser</h1>
                <img id="closeNet" class="X" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-dialog-close-icon.png" alt="X" onclick="fecharNet()">
                </header>
            </div>
            <div id="netBottom1">
        <iframe id="netBottom" src="https://www.bing.com/" id="google"></iframe>
            </div>
</div>

<div class="navbar">
    <a id="NET" class="botao" onclick="openNet()"><img class="botao" src="NET.png" id="NetImg"></a>
    <a onclick="openAdressb()" class="botao"><img class="botao" src="http://download.seaicons.com/icons/paomedia/small-n-flat/1024/address-book-alt-icon.png" id="contact"></a>
</div>

</body>
<script src="PF1.1.js"></script>
</html>

.botao类的一些元素也没有出现

最佳答案

试试 .botao img{ width:10%;高度:10%；

这是您编辑的代码:

<!DOCTYPE html>
<html>
<head>
<title>Desk+ - Grupo 36</title>
<link rel="stylesheet" type="text/css" href="PF1.1.css">
</head>
<body>

<div id="Logout">
    <!---<a href="logout.php" id="LogoutAction"><img src="https://cdn2.iconfinder.com/data/icons/crystalproject/crystal_project_256x256/apps/exit.png"></a>-->
    <button onclick="location.href = 'PF1.html';" id="BtnTesteLogout" class="float-left submit-button" ><img src="https://cdn2.iconfinder.com/data/icons/crystalproject/crystal_project_256x256/apps/exit.png"></button>
</div>


<div id="BarraSDireita">
    <div id="Bluetooth">
        <nav id="wrapperB" class="wrapper">
                <ul id="mainB" class="main">
                  <li id="frontB"  class="front"><a href="#" class="botao"><img id ="BlueButton"  src="https://cdn.pixabay.com/photo/2015/03/12/12/22/bluetooth-670069_960_720.png"></a>
                    <ul id="subB" class="sub">
                      <li class="bottom" id="onoff"><a> <label class="switch"><input type="checkbox" id="togBtn"><div class="slider round"><!--ADDED HTML --><span class="on">ON</span><span class="off">OFF</span><!--END--></div></label></a></li>
                      <li class="bottom" id="dispos"><a>Dispositivos emparelhados:</a></li>
                      <li class="bottom" id="jphone"><a onclick="abrirBlue()">Joana's Phone</a></li>
                      <li class="bottom" id="mphone"><a>Maria's Phone</a></li>
                    </ul>
                </li>
                </ul>
              </nav>
    </div>

    <div id="clockdate">
            <div class="clockdate-wrapper">
              <div id="clock"></div>
              <div id="date"></div>
            </div>
    </div>

    <div id="SplitScreen">
            <nav id="wrapperSS" class="wrapper">
                    <ul id="mainSS" class="main">
                      <li id="frontSS"  class="front"><a href="#" class="botao"><img  id ="SSButton" src="bullet-splitscreen.png"></a>
                        <ul id="subSS" class="sub">
                          <li class="bottom" id="mergeall"><a href="#">Juntar todos os ecr&atildes</a></li>
                          <li class="bottom" id="split2"><a href="#">Dividir em 2</a></li>
                          <li class="bottom" id="split4"><a href="#">Dividir em 4</a></li>
                          <li class="bottom" id="split6"><a href="#">Dividir em 6</a></li>
                        </ul>
                    </li>
                    </ul>
                  </nav>
    </div>

    <div id="WIFI"> 
            <button id="WIFIButton" class="botao"><img  src="https://purepng.com/public/uploads/large/purepng.com-wifi-icon-redwifi-iconwifiiconwireless-connection-1701528436213ktjmp.png"></button>
    </div>
</div>

<div id="BlueWindow" style="display:none;">
        <div id="BlueWindowheader">
                <header class="windowTop1">
                <button id="closeButtonBlue"><img id="closeBlue" class="X" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-dialog-close-icon.png" alt="X" onclick="fecharBlue()"></button>
                <h1 id="JoanaPTexto">Joana's Phone</h1>
                </header>
        </div>
        <div id="bottomBlue">
            <div id="doc1">
                <div id="doc1header">
                    <img id="DocImgBlue" src="https://img.icons8.com/pastel-glyph/2x/file.png">
                </div>
                    <h1 id="MariaDoc">Doc-exemplo-Joana</h1>
            </div>
        </div>

</div>

<div id="DOCS"  class="botao" >
<img id="documentos_logo"src="https://marketplace.canva.com/MAB7OE9Jppw/1/thumbnail_large/canva-folder-file-yellow-document-info-icon.-vector-graphic-MAB7OE9Jppw.png" alt="documentos" onclick="openDocs()">
</div>

<div id="janela">
</div>

<div id="docwindow" style="display: none;">
    <div id="docwindowheader">
    <header class="windowTop">
        <h1 id="docsHeadTexto">Documentos</h1>
    <img id="closeDocs" class="X" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-dialog-close-icon.png" alt="X" onclick="closeMain()">
    </header>
</div>

<div id="bottomWindowDocs">
    <div class="documents">
        <div>
            <img id="DocImg" src="https://img.icons8.com/pastel-glyph/2x/file.png" alt="doc">
            <h1 id="DocEx">Doc-exemplo</h1>
        </div>
    </div>
    <!----<div id="DocExemplo" S>
        <header class="windowhead">
            Documento exemplo
            <img class="X" src="https://banner2.kisspng.com/20180402/dwe/kisspng-computer-icons-social-media-email-webmail-cancel-button-5ac240963875f3.0504665115226799582313.jpg" alt="X" onclick="closeMain()">
            <button id="share">share</button>
            <button id="back">back</button>
        </header>
        <div id="corpo">
            <h4>Este é um exemplo de Documento</h4>
        </div>
    </div>-->
</div>
</div>

<div id="calendario">
        <a id="iconeCal" class="botao" onclick="abrirCal()"><img src="https://www.manisteelibrary.org/images/events-calendar.png/@@images/image.png"></a>
</div>

<div id="janelaCalendario" style="display:none;">
        <div id="janelaCalendarioHeader">
                <header class="windowTop">
                <img  id="closeCal" class="X" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-dialog-close-icon.png" alt="X" onclick="fecharCal()">
                </header>
        </div>
        <iframe src="https://teamup.com/ksbe6drnzpwdbyrgp2" id="calendar"></iframe>
    </div>

<div id="net" style=display:none;>
                <div id="Netheader">
                <header class="windowTop2">
                    <h1 id="NetTexto">Desk+ Browser</h1>
                <img id="closeNet" class="X" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-dialog-close-icon.png" alt="X" onclick="fecharNet()">
                </header>
            </div>
            <div id="netBottom1">
        <iframe id="netBottom" src="https://www.bing.com/" id="google"></iframe>
            </div>
</div>

<div class="navbar">
    <a id="NET" onclick="openNet()" class="botao"><img  src="NET.png" id="NetImg"></a>
    <a onclick="openAdressb()" class="botao" ><img  src="http://download.seaicons.com/icons/paomedia/small-n-flat/1024/address-book-alt-icon.png" id="contact"></a>
</div>

</body>
<script src="PF1.1.js"></script>
</html>

关于html - CSS 中的 .class 无法正常工作如何修复？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56038552/

上一篇：html - 如何调整 col 到 row？

下一篇：javascript - 如何执行第二个 jQuery 片段以添加 html 代码

相关文章：

javascript - 在更改该页面上的类时定向到另一个页面

html - 我将如何使内容和图像响应

jquery - 当移出父 DIV 时，使 Div 不可见

css - 导航栏菜单项垂直居中

javascript - 使用 Javascript 删除 html 行和删除列按钮

jquery - 使用 jQuery 的点击事件

javascript - IE 没有在 onblur 事件中调用函数

javascript - div box size css 显示auto的值

javascript - 删除一项内的内容时在行上方创建的神秘空间

javascript - jQuery:抓取元素并仅应用于其容器

©2024 IT工具网  联系我们