HTML和CSS创建的网页不应在调整浏览器大小时更改/调整元素的位置

我是HTML和CSS的初学者。我正在尝试用HTML制作一个非常基本的网页。我面临一个问题。当我调整浏览器大小时，导航项目的位置会自动更改。有什么办法可以固定那里的位置吗？

@font-face { font-family: sansation; src: url('sanslight.ttf'); }
body{
    margin: 0;
    padding: 0;
    overflow: auto;
    background-color: #f8f8f8;
    font-family: sansation;
    color:white;
}
/* ---------Header-------------*/
.container{
    max-width: 920px;
    width: 100%;
    margin: auto;
    overflow: hidden;
    padding:10px 21px;
    border-bottom: 2px solid darkgrey;
    background-color: white;
    
}
.topnav {
    float: right;
    overflow: hidden;
    margin-top: 4px;
}
.topnav a{
    color: white;
    display: inline-block;
    line-height: normal;
    margin-left: 15px;
    text-decoration: none;
    padding: 10px 20px;
    background-color: #ff9900;
}
.topnav a:hover{
    background-color: #ffad33;
    font-style: italic;
    border: none;
    padding-bottom: 6px;
    border-bottom:  4px solid #e68a00;
}
.topnav a.active{
    padding-bottom: 6px;
    font-weight: 600;
    background-color: #ff9900;
    font-style: normal;
    border-bottom: 4px solid #e68a00;    
}
.logo{
    margin-top: 2px;
}
/*-------CONTENT-------*/
.slideshow{
    max-width: 960px;
    height: 100%;
    width: 100%;
    border: 2px solid darkgrey;
    margin-left: auto;
    margin-right: auto;
    margin-top: 21px;
}
h2{
    width: 923px;
    line-height: 25px;
    padding: 10px 21px;
    letter-spacing: 1px;
    margin-left: auto;
    margin-right: auto;
    background: #ff9900;
    
}
.doctor{
    color:black;
    max-width: 960px;
    width: 100%;  
    margin-left: auto;
    margin-right: auto;
    float: none;
    text-align: center;
    overflow: hidden;
    background: white;
    border-width: 2px;
}
.doctor tr{
    font-size: 14px;
    text-align: center;
    
}
.demo ,table ,td{
    color: darkgray;
    max-width: 960px;
    width: 33%;
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
    padding: inherit;
    text-align: center;
    
    
}

<!DOCTYPE html>
<html>
<head>
    <title>Online Doctor Support</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"/>
    <link rel="stylesheet" href="style.css">
    </head>
    
<body>
<header>
    <div class="container">
    <div class="logo">
        <a href="#"><img src="images/logo.png" style="width:150px;height:auto;"></a>
    <div class="topnav">
        <a class="active" href="#">Home</a>
        <a href="about.htm">About</a>
        <a href="#">Review</a>
        <a href="#">Contact</a>
        </div>
    </div></div>
</header>
<div class="slideshow">
    <img src="images/ste.png">
    </div>
    
    <h2>Welcome!</h2>
    
<table class="doctor">
    <tr>
        <th><img src="images/doctor.png" style="width:150px;height:150px"></th>
        <th><img src="images/doctor1.png" style="width:150px;height:150px"></th>
        <th><img src="images/doctor3.png" style="width:150px;height:150px"></th>
    </tr>
    
    <tr>
        <td><font size="35px">Doctor1</font></td>
        <td><font size="35px">Doctor2</font></td>
        <td><font size="35px">Doctor3</font></td>
    </tr>
    </table>
    
<table class="demo">
    <tr>
    <td>Description</td>
    <td>Description</td>
    <td>Description</td>
    </tr>
    </table>
    
    </body>
</html>

如果我的溺爱;)有错误，我真的很抱歉

这是我调整浏览器大小时页面的外观：https://i.stack.imgur.com/eAs83.jpg

这是因为您为.container提供了100%宽度。如果您不希望元素在调整窗口大小时更改位置，请考虑为容器提供固定宽度(但不建议这样做，并且违反响应式设计原则(。

一旦它在桌面浏览器上修复，那么也许你可以查看响应式网页设计(使用@media查询(来支持各种屏幕和分辨率。

    @font-face { font-family: sansation; src: url('sanslight.ttf'); }
body{
    margin: 0;
    padding: 0;
    overflow: auto;
    background-color: #f8f8f8;
    font-family: sansation;
    color:white;
}
/* ---------Header-------------*/
.container{
    max-width: 920px;
    width: 100%;
    margin: auto;
    overflow: hidden;
    padding:10px 21px;
    border-bottom: 2px solid darkgrey;
    background-color: white;
}
.topnav {
    float: right;
    overflow: hidden;
    margin-top: 4px;
}
.topnav a{
    color: white;
    display: inline-block;
    line-height: normal;
    margin-left: 15px;
    text-decoration: none;
    padding: 10px 20px;
    background-color: #ff9900;
}
.topnav a:hover{
    background-color: #ffad33;
    font-style: italic;
    border: none;
    padding-bottom: 6px;
    border-bottom:  4px solid #e68a00;
}
.topnav a.active{
    padding-bottom: 6px;
    font-weight: 600;
    background-color: #ff9900;
    font-style: normal;
    border-bottom: 4px solid #e68a00;    
}
.logo{
    margin-top: 2px;
}

/*-------CONTENT-------*/
.slideshow{
    max-width: 960px;
    height: 100%;
    width: 100%;
    border: 2px solid darkgrey;
    margin-left: auto;
    margin-right: auto;
    margin-top: 21px;
}
h2{
    width: 923px;
    line-height: 25px;
    padding: 10px 21px;
    letter-spacing: 1px;
    margin-left: auto;
    margin-right: auto;
    background: #ff9900;
}
.doctor{
    color:black;
    max-width: 960px;
    width: 100%;  
    margin-left: auto;
    margin-right: auto;
    float: none;
    text-align: center;
    overflow: hidden;
    background: white;
    border-width: 2px;
}
.doctor tr{
    font-size: 14px;
    text-align: center;
}
.demo ,table ,td{
    color: darkgray;
    max-width: 960px;
    width: 33%;
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
    padding: inherit;
    text-align: center;   
}
@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
p {
    min-height: 100px;
}
}

您写信给css这些类型以添加媒体查询并根据需要设计您的页面

相关内容

最新更新

热门标签：