Question

我设计了一个带有css编码的html页面但是当我最小化页面时，所有事情都搞乱了。任何人都可以告诉我在哪里我必须更改css代码，以获得干净的页面没有任何陷阱？

我的css代码

 .body {
   min-width:600px;
}

.header{      
    height:30px;     
    background-color:#142441;
    color:white;  
    border-radius:10px;   
 }
.headerleft {

    float:left;   
    width:300px;
     text-align:center;
   height:25px;
   padding:2px;
   font-size:20px;
}
.headerright {

   width:200px;
   float:right;
    text-align:center;
    height:25px;
    padding:2px;
}
    .headerright a {
        color:white;
    }

.menu {
    background-color:#658ac4;
    height:30px;
    border-radius:10px;
}
 .menu ul {
       margin:0px;padding:0px;
    }
.menu a
{
    min-width:10px;
 width:150px;

float:left;
text-decoration:none;
color:black;
padding:0.2em 0.6em;
text-align:center;
height:30px;
}
.menu a:hover {background-color:white;}
.menu li {display:inline;}

.table{  
    border:1px solid black;  
    border-radius:5px;    
     float:left;   
     width:1127px;
    min-width:100px;
     min-height:30px;

}
    .table th {

        text-align:center;
        background-color:#a3c3e6;       
    }         
    .table tr:hover {
     background-color:#dfe1e1;
    }
    .table td {
        padding:5px;
        text-align:center;

    }
    .table th a {
        color:black;
        text-decoration:none;
        display:inline-block;
    } 


    .A tr:nth-child(2n+2) {
        background-color: #dfe1e1;
    }

.right { 

   width:196px;
   min-width:50px;
    border:1px solid black; 
    border-radius:5px;      
   float:right;
   text-align:left;
   padding:5px;
   min-height:30px;
}
    .right a {
       background-color:#dfe1e1;
    }

我的Html代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="AMLStyleSheet1.css" rel="stylesheet" />
</head>
<body class="body">  

        <div class="header">       
        <div class="headerleft">AML Independent Review Tool
        </div>        
        <div class="headerright">
        <label for="Application user">Application User</label>
        <a href="#">SignOut</a>
        </div>
    </div>

<div class="menu">
   <ul >
  <li><a href="/home" class="active"><span>Home</span></a></li>
  <li><a href="/Model"><span>Model</span></a></li>
  <li><a href="/New Assesment"><span>NewAssesment</span></a></li>
  <li><a href="/Settings"><span>Settings</span></a></li>
  <li><a href="/Help"><span>Help</span></a></li>
   </ul> 
</div>

    <div>
        <h4>AML Independent Review - Audit History</h4>
        <p>ghudhfuerdghdhgiblsjvi hwgjirg hijgvkrsjgvk uiuweitgsrkg isjgvierjgie gjuiejgi igjveijvgiji jgviejfgikgjeg igejvkjdgbik</p>
    </div>  

    <div>

           <table class="table"style="min-width:100px;">
         <tr>
             <th>AML Independent Review Name</th>
             <th>Country</th>
             <th>Started By</th>
             <th>Status</th>
             <th>Start Date</th>
             <th>End Date</th>
             <th>Compilance Distribution <br /><a style="padding-bottom:15px;" href="view Legend">view legend</a><a "href="#"><img src="go_down.png" /></a></th>
             <th>Action</th>
         </tr>
            <tr>
                <td>Australian Tech Annual AML Review-2014</td>
                <td>Australia</td>
                <td>AnthonyXYZ</td>
                <td>Completed</td>
                <td>25-feb-2014</td>
                <td>30-mar-2014</td>
                <td>60%</td>
                <td>Action</td>
            </tr>   
            <tr>
                <td>Australian Tech Annual AML Review-2014</td>
                <td>Australia</td>
                <td>AnthonyXYZ</td>
                <td>Completed</td>
                <td>25-Feb-2014</td>
                <td>30-Mar-2014</td>
                <td>70%</td>
                <td>Action</td>
            </tr>    
            <tr>
                <td>Australian Tech Annual AML Review-2014</td>
                <td>Australia</td>
                <td>AnthonyXYZ</td>
                <td>Completed</td>
                <td>25-Feb-2014</td>
                <td>30-Mar-2014</td>
                <td>70%</td>
                <td>Action</td>
            </tr>    
            <tr>
                <td>Australian Tech Annual AML Review-2014</td>
                <td>Australia</td>
                <td>AnthonyXYZ</td>
                <td>Completed</td>
                <td>25-Feb-2014</td>
                <td>30-Mar-2014</td>
                <td>70%</td>
                <td>Action</td>
            </tr>    
             <tr>
                <td>Australian Tech Annual AML Review-2014</td>
                <td>Australia</td>
                <td>AnthonyXYZ</td>
                <td>Completed</td>
                <td>25-Feb-2014</td>
                <td>30-Mar-2014</td>
                <td>70%</td>
                <td>Action</td>
            </tr>         
             <tr>
                <td>Australian Tech Annual AML Review-2014</td>
                <td>Australia</td>
                <td>AnthonyXYZ</td>
                <td>Completed</td>
                <td>25-Feb-2014</td>
                <td>30-Mar-2014</td>
                <td>70%</td>
                <td>Action</td>
            </tr>         
             <tr>
                <td>Australian Tech Annual AML Review-2014</td>
                <td>Australia</td>
                <td>AnthonyXYZ</td>
                <td>Completed</td>
                <td>25-Feb-2014</td>
                <td>30-Mar-2014</td>
                <td>70%</td>
                <td>Action</td>
            </tr>         
             <tr>
                <td>Australian Tech Annual AML Review-2014</td>
                <td>Australia</td>
                <td>AnthonyXYZ</td>
                <td>Completed</td>
                <td>25-Feb-2014</td>
                <td>30-Mar-2014</td>
                <td>70%</td>
                <td>Action</td>
            </tr>  
            <tr>
                <td>Australian Tech Annual AML Review-2014</td>
                <td>Australia</td>
                <td>AnthonyXYZ</td>
                <td>Completed</td>
                <td>25-feb-2014</td>
                <td>30-mar-2014</td>
                <td>60%</td>
                <td>Action</td>
            </tr>   

        </table>        
 </div>   

    <div class="right" >
        <label for="My Open Items">My Open Items</label><br />
        <a href="#">AML-122</a><br />
        Account Information Is Needed
        <br/>

          <label for="My Open Items">My Open Items</label><br />
        <a href="#">AML-122</a><br />
        Account Information Is Needed
         <br/>

          <label for="My Open Items">My Open Items</label><br />
        <a href="#">AML-122</a><br />
        Account Information Is Needed
         <br/>

          <label for="My Open Items">My Open Items</label><br />
        <a href="#">AML-122</a><br />
        Account Information Is Needed
         <br/>        
          <label for="My Open Items">My Open Items</label><br />
        <a href="#">AML-122</a><br />
        Account Information Is Needed
         <br/>        
          <label for="My Open Items">My Open Items</label><br />
        <a href="#">AML-122</a><br />
        Account Information Is Needed

  </div>
</body>
</html>

Answer 1

您正在寻找的是响应式网页设计。有几种可能的方法。您可以根据需要选择

您可以使用媒体查询为不同的屏幕定义不同的样式表。这是目前最常用的方式。
先睹为快：   http://css-tricks.com/css-media-queries/和   https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries



您可以使用视口元标记。
先睹为快：https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag



您可以用％（流体响应）设计所有内容，但这部分非常棘手。根据我的经验，我可以说设计一个完整的   以％为单位的网站非常困难。

我建议你学习媒体查询。它非常简单可靠。

Answer 2

编辑css：

.body{
     width:600px;
}

您实际想要实现的是响应式网页设计。

通过min-width声明身体，你无法实现你想要的目标。

现在就像我提到的那样改变。并学习响应式网页设计。然后进行更改

如何最大限度地减少HTML页面没有任何陷入困境？

2 个答案: