проблема макета CSS на каждом экране - PullRequest
Новая
       8

проблема макета CSS на каждом экране

0 голосов
/ 16 февраля 2019

Я создал html-страницу в том смысле, что у меня есть некоторые изображения и фон тела в соответствии с моим рабочим столом, но когда я открываю эту страницу на ноутбуке, компоновка меняется, и я не могу найти несколько изображений на экране, я установилпереполнение тела.

Я хочу установить страницу на ноутбуке, а также на большом экране рабочего стола, мобильный не нужен.как установить макет.в конце я хочу экспортировать этот индексный файл в .exe. 

body {
/* Location of the image */
 background-image: url(../BG_new.jpg);

/* Image is centered vertically and horizontally at all times */
background-position: center center;

/* Image doesn't repeat */
background-repeat: no-repeat;

/* Makes the image fixed in the viewport so that it doesn't move when 
   the content height is greater than the image height */
background-attachment: fixed;

/* This is what makes the background image rescale based on its container's 
  size */
background-size: cover;

/* Pick a solid background color that will be displayed while the 
background image is loading */
background-color:#464646;

/* SHORTHAND CSS NOTATION
 * background: url(background-photo.jpg) center center cover no-repeat 
fixed;
 */
 overflow: hidden;
 }




  .button1{

   height: 208px;
   width: 209px;

   bottom: -650px;
  left: 395px;


  position: relative;

 }




.button2{
  bottom: -565px;
   left: 571px;
  position: relative;
  height: 208px;
  width: 208px;


  }



.button3{
  bottom: -410px;
  left: 780px;
  position: relative;
  height: 208px;
  width: 208px;



 }



.button4{
  bottom: -200px;
  left: 984px;
    position: relative;
    height: 208px;
    width: 208px;

 }



  .button5{

    cursor: pointer;
    bottom: 62px;
    left: 1185px;
     position: relative;
     height: 208px;
     width: 208px;

 }



    .button6{


      bottom: 392px;
      left: 1350px;
        position: relative;
        height: 208px;
        width: 208px;

  }


 <!DOCTYPE html>
 <head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, 
  minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
         <div class="button3">
         <img src="./images/Button_03_B&W.png" class="image3" 
           onclick="nav3()" >


          </div>

          <!-- end third button  -->

          <div class="button4">

            <img type="image" src="./images/Button_04_B&W.png" 
            class="image4" >


        </div>

           <!-- end forth button  -->

               <div class="button5">
                <img type="image" src="./images/Button_05_B&W.png" 
                class="image5" onclick="nav5()">

               </div>
...