gpt4 book ai didi

html - 侧边栏随机从左跳到右,不记得触摸 CSS

转载 作者:行者123 更新时间:2023-11-28 07:00:47 27 4
gpt4 key购买 nike

我有点慌张,因为我根本想不通。

我正在尝试制作页眉、副标题、侧边栏、内容 Pane 和页脚的简单页面布局。我编写了所有内容,并且运行良好。然后我进入我的 javascript 文件写一个函数,当我回来的时候,我的侧边栏从左边跳到右边,我就是想不通为什么。我试过一次在一个部分中复制我的脚本,而且似乎真的只有侧边栏有问题。任何见解将不胜感激!

我的 HTML:

    <html lang ="en">
<head>
<meta charset="utf-8">
<title>....</title>
<link rel="stylesheet" type="text/css" href="../CSS/styleCss.css">
<script type="text/javascript" src="../JavaScript/dateandtime.js"></script>
</head>
<body>
<div id="header">
<a href="index.html">
<img src="..." alt="..." height="200" width="500" />
</a>
</div>

<div id="subheader">
<p id="timeStamp"><br/></p>
</div>

<div id="sidebar">
<ul>
<li><a href="index.html">...</a></li>
<li><a href="underConstruction.html">...</a></li>
<li><a href="underConstruction.html">...</a></li>
<li><a href="registration.html">...</a></li>
<li><a href="underConstruction.html">...<br /></a></li>
</ul>
</div>

<div id="content">content area</div>

<div id="footer">footer</div>

</body>
</html>

还有我的 CSS:

body{
width:100%;
background-color:#e3f2fd;
}

#header {
width:1030px;
height:200px;
margin-left:50px;
background-color:#2196f3;
float:left;
}

#header img {
float:left;
}

#header h1 {
margin-left:550px;
color:black;
font-family:"arial black";
font-size:40px;
}

#header p {
margin-left:550px;
color:white;
font-family:"arial black";
font-style:italic;
font-size:200%;
}

#subheader {
position:relative;
margin-left:50px;
width:1030px;
height:75px;
background-color:black;
float:left;
border-top:1px solid red;
}

#subheader p {
margin-left:50px;
color:white;
font-family:"arial black";
font-style:italic;
font-size:150%;
float: left;
}

#sidebar {
position:relative;
font-size:20px;
margin-top:75px;
background-color:#0d47a1;
width:230px;
height:600px;
border:1px solid red;
float:left;
}

#sidebar a {
text-decoration:none;
color:white;
}

#sidebar a:hover{
background-color:black;
color:white;
}

#sidebar ul {
list-style-type:none;
}

#sidebar li {
padding-top:60px;
padding-left:0px;
font-family:"arial black";
}

#content {
position:relative;
width:798px;
margin-top:-602px;
margin-left: 282px;
height:600px;
background-color:#90caf9;
float:left;
border-top:1px solid red;
border-bottom:1px solid red;

}

#footer {
position: relative;
height:150px;
width:1030px;
background-color:#82b1ff;
margin-left:50px;
float:left;

}

我将非常感谢任何帮助,我一定是遗漏了什么!

最佳答案

请像下面这样将所有的 div 包装到一个 div 中,并更新一些 css ID 和类不需要的边距

<style type="text/css"> 
.main-cont {
width: 1030px;
float: left;
}

#content {
margin-left: 0;
margin-top: 0;
}
#sidebar {
margin-top: 0;
}
</style>
<body>

<div class="main-cont">
<div id="header">
<a href="index.html">
<img src="..." alt="..." height="200" width="500" />
</a>
</div>

<div id="subheader">
<p id="timeStamp"><br/></p>
</div>

<div id="sidebar">
<ul>
<li><a href="index.html">...</a></li>
<li><a href="underConstruction.html">...</a></li>
<li><a href="underConstruction.html">...</a></li>
<li><a href="registration.html">...</a></li>
<li><a href="underConstruction.html">...<br /></a></li>
</ul>
</div>

<div id="content">content area</div>

<div id="footer">footer</div>

</div>

</body>

关于html - 侧边栏随机从左跳到右,不记得触摸 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33251393/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com