时间戳

首页 > 解决方案 > 使用 CSS/ 渲染简单的 html 页面响应式

html - 使用 CSS/ 渲染简单的 html 页面响应式

问题描述

我正在呈现一个简单的响应式 HTML 页面。打算在全尺寸左侧导航时将其设为 3 列，然后在移动视图中时所有内容都居中，因此标题、导航、内容以及底部图像适合屏幕底部。但是现在当我运行它时，导航栏保持在左侧并与其他内容重叠。指针将不胜感激，因为我很新。谢谢！

这是我的 HTML 和 CSS： CSS：

      body {
        background-color: #88abc2;
        margin:0;
      }
    
      .image{
          height: 250px;
          border-radius:5px; 
          background-repeat: no-repeat;
          display:block;
          padding-bottom:10px;
          float:left;
          margin-top: 20px;
          width: 25%
      }
    
      .header{
          padding-top: 100px;
          color: white;
          text-align: center;
          font-size: 50px;
          font-family: papyrus;
          background-color:#49708A;
          justify-content: center;
          align-items:center;
      }
    
    #wrapper {
        /* width:900px; */
        height:100%;
        margin: 10px;
        padding: 0px;
        width:67%;
    }
    @media (max-width: 768px) {
        /* nav li { display: inline-block;
                  width: 7em;
                  padding: 0.5em;
                  border: none; }
        .nav a   { text-align: center;
                 float: none;
                 width: 100%;
                 font-size: 17px;}
        main     { float: left;
                   width: 55%; } */
                #wrapper { width:100%; }
                .nav { width:100%; margin:0; border:none;
                display:inline-block;
                width: 7em;
                padding: 0.5em;
                border: none; }
               .nav a{ text-align: center;}
               main{ float: left;
                width: 55%;}
       }
    
    .nav {
        height: 100%;
        width: 20%;
        padding-top: 40px;
        background-color:#49708A;
      } 
    
    .nav a{
        padding-left:3px;
        padding: 6px 6px 6px 32px;
        font-weight: bold;
        color: #EBF7F8;
        text-decoration: none;
        font-size: 25px;
        display: block;
    }
    ul {
        list-style-type: none;
        margin: 0;
        overflow: hidden;
      }
    
    .nav a:hover {
        color: #CAFF42;
      }

    main{
       padding-top: 38px;
        text-align:left;
        padding-left: 30%;
    }
    
    .image2{
        height:250px;
        width:400px;
        position: absolute;
        right: 0px;
        bottom: 0px;
        right:0px;
        bottom: 0px; 
    }
    <!DOCTYPE html>
    <html lang="en">
    <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,user-scalable=no">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="HandheldFriendly" content="true">  
        <title>Lab 7</title>
        
            <link rel="stylesheet" href="lab7.css">
          
    </head>
    <body>
            <img class= "image" alt="flower" src="flower.jpg"style="max-width:100%;height:auto;">
            <header>
                <h1 class="header">Photos By Doug</h1>
           </header>
           <div id ="wrapper">
            <main> Here is some content info about Doug Kowalski Photography</div>
            <!-- <div id="header"></div> -->
            <div class="nav">
                <a href="#">Home</a><br>
                <a href="#">Journals</a><br>
                <a href="#">Books</a><br>
                <a href="#">Nature</a><br>
                <a href="#">Contact</a><br>
              </div>
             
                  
              <img class ="image2" alt="vine" src="vine.jpg"style="max-width:100%;height:auto;">
          
       
            </main>
    </body>
    </html>

标签： htmlcssresponsive

解决方案

首先，您应该注意标签及其关闭。您在 div 标签中有主标签，并且在关闭主标签之前先关闭 div。首先你应该检查一下

<div id ="wrapper">
 <main> Here is some content info about Doug Kowalski Photography</div>                   
 </main>

至

<div id ="wrapper">
 <main> Here is some content info about Doug Kowalski Photography                   
 </main>
</div>

其次，您的标题 css 类中有 align-items 和 justify-content 。它们仅在您的显示器是柔性的时才起作用。小心它。

最后，很难理解您的问题，但您可以在导航、内容和图像部分使用 flex，首先您可以在包含导航栏和另一个 div 的 div 中使用 display:flex 作为 flex-direction:flex-row（此 div 包含内容和图像），它们将并排放置。在移动版之后，您可以制作 flex-direction:flex-col 以便导航栏位于上方，然后您将获得内容和图像。不要忘记您应该在导航栏之后将内容和图像放在一个 div 中，并且您应该按顺序声明标签。如果你想在左边或顶部看到导航，你应该先声明它。

您可以检查它的弹性和移动示例

弹性方向

响应式设计中存在一个常见错误，有时您的 mobil 代码将无法工作，因为您已经声明了该 css 属性。您将及时获得最佳实践。现在，如果您遇到这样的问题，请使用

 !important

在您的媒体 css 中的 css 属性之后。

推荐阅读