gpt4 book ai didi

html - 如何自动调整 div 大小以匹配窗口大小

转载 作者:太空宇宙 更新时间:2023-11-04 12:46:26 24 4
gpt4 key购买 nike

我想更改它,这样当我调整窗口大小时,包括 div 在内的所有内容都会调整大小。不仅仅是背景。我刚刚开始使用 HTML,所以我可能不熟悉更高级的概念。如何调整页面中的 div 大小以适应窗口?

这是我的主页

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<!-- META -->
<meta charset="UTF-8">
<title>Keyan Kazemian</title>
<link href='http://fonts.googleapis.com/css?family=Luckiest+Guy' rel='stylesheet' type="text/css" type='text/css'>
<link rel="stylesheet" href="styleone.css">
</head>
<body>
<div style="background: rgba(30,26,29,0.7); position: fixed; top:300px; left:440px; height:160px; width:600px; moz-border-radius:5px; border-radius:5px;">
<h1> Keyan Kazemian </h1>
<p> Hello, my name is Keyan and this is my life. </p>
</div>
<a style="display:block" href="about-me.html"> <div class="links">About Me</div> </a>
<a style="display:block" href="#music.html"> <div class="linktwo"> Music </div> </a>
<a style="display:block" href="#comingsoon"> <div class="linkthree"> Video </div> </a>
<a style="display:block" href="#comingsoon"> <div class="linkfour"> App Development </div> </a>

</body>
</html>

这是我的样式表

.links { background: rgba(30,26,29,0.7); position: fixed; top:300px; left:1046px; height:160px; width:200px; moz-border-radius:5px; border-radius:5px; color:#fcfcf5; font-size: 1.5em; font-family: 'Luckiest Guy', cursive; text-align: center; vertical-align: middle; line-height: 80px;}
.linktwo { background: rgba(30,26,29,0.7); position: fixed; top:300px; left:1252px; height:160px; width:200px; moz-border-radius:5px; border-radius:5px; color:#fcfcf5; font-size: 1.5em; font-family: 'Luckiest Guy', cursive; text-align: center; vertical-align: middle; line-height: 160px;}
.linkthree { background: rgba(30,26,29,0.7); position: fixed; top:300px; left:1458px; height:160px; width:200px; moz-border-radius:5px; border-radius:5px; color:#fcfcf5; font-size: 1.5em; font-family: 'Luckiest Guy', cursive; text-align: center; vertical-align: middle; line-height: 160px;}
.linkfour { background: rgba(30,26,29,0.7); position: fixed; top:300px; left:1664px; height:160px; width:200px; moz-border-radius:5px; border-radius:5px; color:#fcfcf5; font-size: 0.9em; font-family: 'Luckiest Guy', cursive; text-align: center; vertical-align: middle; line-height: 80px;}
a:link {text-align: center; color: #fcfcf5; text-decoration:none; font-size: 2em; font-family: 'Luckiest Guy', cursive;}
a:visited {text-align: center; color: #fcfcf5; text-decoration:none; font-size: 2em; font-family: 'Luckiest Guy', cursive;}
a:hover {text-align: center; color: #fcfcf5; text-decoration:none; font-size: 2em; font-family: 'Luckiest Guy', cursive;}
a:active {text-align: center; color: #fcfcf5; text-decoration:none; font-size: 2em; font-family: 'Luckiest Guy', cursive;}

html {
background: url(trop.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {font-size: 100%;}
h1 {color:#fcfcf5; font-size: 3em; font-family: 'Luckiest Guy', cursive; text-align: center;}
p {color:#fcfcf5; font-size: 1.5em; font-family: 'Luckiest Guy', cursive; text-align: center;}

最佳答案

您要实现的目标称为响应式布局,它会根据屏幕分辨率发生变化。请注意,仅仅调整 div、段落等的大小是不够的,您还需要考虑很多其他事情,例如

  • 导航栏
  • 图片
  • 网格等

在这篇文章中涵盖 RWD 是不可能的,但您可以在搜索引擎上找到很多东西。仍然引用这些可用的链接 here , herehere .

关于html - 如何自动调整 div 大小以匹配窗口大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26479109/

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