gpt4 book ai didi

html - 填充导致重叠,流体设计?

转载 作者:行者123 更新时间:2023-12-02 17:36:53 24 4
gpt4 key购买 nike

<分区>

我开始接触创建网站,但有些事情我不明白。例如:

我创建了一个 wrapperdiv。它里面有三个主要部分:页眉、内容和页脚。我给 wrapperdiv 一个固定大小(1280px x 1024px)并将内容 div 设置为该大小的 2/3。其余为 1/3。现在,每当我想在我的 subs div 中填充一些东西时,它就会与包装 div 重叠,我不知道如何修复它。

我决定在 wrapperdiv 中使用百分比,以便在有人查看网站时缩放等操作流畅。

对此有什么想法吗?我怎样才能做得更好?

谢谢!

代码:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<div id="pagewrapper">
<div id="header">

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

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

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

CSS:

@font-face {
font-family: "Bickley";
src: url(fonts/Bickley%20Script.ttf);
}

@font-face {
font-family: "American";
src: url(fonts/American%20Classic%20Bold.ttf);
}

body {
font-size: 1em;
font-family: sans-serif;
color: #c6c6c6;
background-image: url("images/bodybackground.jpg");
}

a:link {
text-decoration: none;
color: #c6c6c6;
}

a:visited {
color: #c6c6c6;
}

a:hover {
color: #c6c6c6;
}

a:active {
color: #c6c6c6;
}

#pagewrapper {
width: 1280px;
height: 1024px;
margin: 0 auto;
padding: 1%;
background-color: red;
}

#header {
width: 100%;
height: 16.75%;
background-color: blue;
}

#content {
width: 100%;
height: 66.5%;
background-color: yellow;
}

#footer {
width: 100%;
height: 16.75%;
background-color: green;
}

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