时间戳

首页 > 解决方案 > 每个屏幕上的CSS布局问题

css - 每个屏幕上的CSS布局问题

问题描述

我已经根据我的桌面创建了 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>

标签： csslayoutscreen

解决方案

推荐阅读