更多的宽度在移动布局中显示

问题描述 投票：1回答：1

我是一个后端开发人员，所以对前端开发不是很熟悉。最近由于缺少前端设计师，我正在设计一个网站，但我遇到了问题。这是一个无响应的网站，在台式机上看起来不错，但在移动设备上，版式显示了100％以上，我正在附加屏幕截图]

@charset "utf-8";
/* CSS Document */

.top-all {
 margin: 0 auto;
  width: 900px;
  position: relative;
  margin-top: 5px;
}
.top-header {
  height: 120px;
  background-color: #1A1318;
  margin-bottom: -2px;
  margin-left: 1px;
  margin-right: 1px;
  position: relative;
}
.main-body {
 margin: 0 auto;
 width: 900px;
  background-color:  #ffffe6;
  position: relative;
  height: auto;


}
.header {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}
.logo-container {
  height: 100px;
  width: 180px;
  background-color: #E4E4E4;
  float: right;
  margin-right: 40px;
  margin-top: 5px;
  }
.container {
  width: 100%;
	background-color: #E8E8E8;
}

.main-left {
  width: 60%;
  display: inline-block;
  background-color:  #ffffe6;
  
}
.main-right {
  display: inline-block;
  float: right;
  width: 36%;

}
.news {
 border: 1px solid  #d5ff80;
  margin-bottom: 10px;
  border-radius: 8px;
  background-color: #f0f5f5;
}
ul {
  list-style-type: square;
}
ul li {
  color:#00001a;
  margin-top: 9px;
}
.announcement {
 border: 1px solid  #d5ff80;
  margin-bottom: 10px;
  border-radius: 8px;
  background-color: #f0f5f5;
}
.quick-inquiry {
  height: 400px;
  border: 1px solid  #d5ff80;
  border-radius: 8px;
  background-color: white;
}
h1 {
  color: #ffffff;
  font-size: 60px;
  font-weight: bold;
  font-family: "Lucida Console", Courier, monospace;
  padding: 30px;
  margin-left: 30px;
}
h3 {
  font-size: 24px;
  text-align: CENTER;
  color: white;
}
h4 {
  font-size: 18px;
  font-family: arial;
  margin-right: 6px;
  margin-left: 6px;
}
h5 {
  color: #ffffff;
  font-size: 30px;
}
h6 {
  color: white;
  font-size: 24px;
  margin-left: 8px;
}
.h6 {
  padding-top: 1px;
  background-image: linear-gradient( #ffff66,#999900, #ffff66);
  height: 48px;
  width: 400px;
}
h7 {
  font-size: 26px;
  color: white;
  margin-left: 8px;
}
.h7 {
    padding-top: 3px;
  background-image: linear-gradient(#706B6B,#000000,#706B6B);
  height: 50px;
}
h8{
  font-size: 20px;
  color: white;
  margin-left: 8px;
 
}
.h8{
   padding: 4px;
  background-color: #006633;
  background-image: linear-gradient(#4dffa6,#006633,#4dffa6);
  height: 40px;
  width: 120px;
}
p{
  font-size: 16px;
  margin-left: 5px;
}
.p {
 background-color:  #ffffff;
  border: 1px solid #b3b3ff;
  margin-bottom: 10px;
  border-radius: 8px;
}

.h3 {
  background-color: black;
  height: 68px;
  margin-right: 7px;
  margin-left: 7px;
  padding-top: 1px;
  background-image: linear-gradient(#706B6B,#000000,#706B6B);

}
marquee {
  border-top : 4px solid #ffff00;
  border-bottom : 4px solid #ffff00;
  height: 70px;
  background-color: #0EB177;
}
.footer {
  height: 200px;
  background-color: #150F0F;
  margin-bottom: 20px;
}
body {
  font-family: Arial;
  color: #535151;
  background-color: #e6ffff;
  padding: 0px;
  max-width: 100%;
  min-width: 99%;
  position: relative;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Patliputra ITI</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="css/style.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="css/style.navbar.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="top-all">
    <div class="top-header">
      <div class="logo-container">
        <img src="images/main_logo.png" style="height: 100px; width: 180px;" alt="logo">
  </div>
    <h1>Patliputra ITI</h1>
  </div>
 
<div class="navbar">
 <div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">About Us</a>
  <a href="#contact">Contact Us</a> 
  <a href="#about">News</a>
   <a href="#contact">Gallery</a> 
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>
<script>
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
</script>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.0.0.js"></script>
</div>

</div>
<div class="main-body">
  <div class="header">
  <h4>  "On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain."</h4>
  <div class="container">
  <h2>Welcome to Patliputra ITI</h2>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to
="3"></li>
    </ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner">

      <div class="item active">
        <img src="https://images.static-collegedunia.com/public/college_data/images/appImage/19709_BBSBCE_APP.jpg" alt="Chicago" style="width:100%;">
        <div class="carousel-caption">
          <h3>Patliputra ITI</h3>
          <p>Patliputra ITI</p>
        </div>
      </div>
      <div class="item">
        <img src="https://wallpaperaccess.com/full/1209519.jpg" alt="Chicago" style="width:100%;">
        <div class="carousel-caption">
          <h3>Patliputra ITI</h3>
          <p>Patliputra ITI</p>
        </div>
      </div>
    
      <div class="item">
        <img src="https://www.pixelstalk.net/wp-content/uploads/2016/10/College-Wallpapers-HD-1920x1080.jpg" alt="New York" style="width:100%;">
        <div class="carousel-caption">
          <h3>Patliputra ITI</h3>
          <p>Patliputra ITI</p>
        </div>
      </div>
      <div class="item">
        <img src="https://adrian.edu/uploads/galleries/TerraceWP.jpg" alt="New York" style="width:100%;">
        <div class="carousel-caption">
          <h3>Patliputra ITI</h3>
          <p>Patliputra ITI</p>
        </div>
      </div>
  
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>
  </div>
 <marquee width="100%" direction="left" height="100px">
<h5>The standard Lorem Ipsum passage, used since the 1500s
"Lorem ipsum dolor sit amet, consectetur adipiscing elit,</h5>
</marquee>
  <div class="main-left">
    <div class="h6"><h6>Why Patliputra ITI?</h6></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus. Proin fermentum mauris a lacus pellentesque interdum. Vestibulum sollicitudin augue ac dolor eleifend, mattis pretium eros auctor. Aliquam pharetra laoreet leo a accumsan. Pellentesque non mattis nisi. Vivamus quis congue risus.</p></div>
    <div class="h6"><h6>Our Mission And Vision</h6></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus. Proin fermentum mauris a lacus pellentesque interdum. Vestibulum sollicitudin augue ac dolor eleifend, mattis pretium eros auctor. Aliquam pharetra laoreet leo a accumsan. Pellentesque non mattis nisi. Vivamus quis congue risus.</p></div>
    <div class="h6"><h6> How to get Admission?</h6></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus. Proin fermentum mauris a lacus pellentesque interdum. Vestibulum sollicitudin augue ac dolor eleifend, mattis pretium eros auctor. Aliquam pharetra laoreet leo a accumsan. Pellentesque non mattis nisi. Vivamus quis congue risus.</p></div>
    <div class="h6"><h6>Eligibility</h6></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus. Proin fermentum mauris a lacus pellentesque interdum. Vestibulum sollicitudin augue ac dolor eleifend, mattis pretium eros auctor. Aliquam pharetra laoreet leo a accumsan. Pellentesque non mattis nisi. Vivamus quis congue risus.</p></div>
    <div class="h7"><h7>Admission process</h7></div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <div class="h8"><h8>Process 1</h8></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus.</p></div>
    <div class="h8"><h8>Process 2</h8></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus.</p></div>
    <div class="h8"><h8>Process 3</h8></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus.</p></div>

</div>
<div class="main-right">
  <div class="news">
   <div class="h3"><h3>Latest News</h3></div>
    <h4>Where can I get some?
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.</h4>
<ul class="ul_news">
  <li>News 1</li>
  <li>News 2</li>
  <li>News 3</li>
  <li>News 4</li>
  <li>News 5</li>
  <li>News 6</li>
  <li>News 7</li>
  <li>News 8</li>
  <li>News 9</li>
  <li>News 10</li>
</ul>
</div>
  <div class="announcement">
    <div class="h3"><h3>Latest Announcement</h3></div>
    <h4>Where can I get some?
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always fre</h4></div>
  <div class="quick-inquiry">
<div class="h3"><h3>Quick-Inquiry</h3></div>
  </div>
</div>
<div class="footer"></div>
  </div>
</body>
</html>

网站的桌面视图

网站的移动视图

我是一个后端开发人员，所以对前端开发不是很熟悉。最近由于缺少前端设计师，我正在设计一个网站，但我遇到了问题。这是一个非...

html css layout width responsive
1个回答
0
投票

您需要更改几件事：

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.