我不知道如何使用css来划分我的网站



我想创建一个这样的网站,我不知道如何在这种情况下使用边距和填充以及其他许多方法来确保菜单栏在左边,主要内容在中间,最后的描述和图片在右边。感谢您的关注!

[此图片是我需要创建的网站][1] :https://i.stack.imgur.com/XAWj3.png

如果需要,可以使用Bootstrap for CSS。它很容易与那里一起使用"用户指南";。如果你真的想自己做,你可以使用更容易使用的网格。以下是w3school页面,可帮助您使用网格:https://www.w3schools.com/css/css_grid.asp

此外,还有引导程序网站:https://getbootstrap.com/

如果你只是想用CSS移动它,那就没那么难了。以下是您将来可以使用的几个关键字:

"位置:绝对"这会使您的图像停留在您想要的位置。

"位置:相对"这使得你的图像在其他图像周围工作,在这种情况下,在它的顶部。

"左:_px"这允许您根据提供的像素数在x轴/水平方向上移动图像。

"底部:_px"这允许您根据提供的像素数在y轴/垂直方向上移动图像。

这些是移动标签的基础知识,下面是如何使用它们的示例:

HTML:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>test</title>
<link rel="stylesheet" href="Style.css">
</head>

<body>
<img src="https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" id="img1">
<img src="https://media.istockphoto.com/photos/small-island-reflected-in-calm-hintersee-lake-at-clear-autumn-morning-picture-id1297205117?s=612x612" id="img2">
<h1 id="text1">Hi.</h1>

<script>

</script>
</body>
</html>

CSS:

html{ 
background-color: green;
}
#img1{
position: absolute;
padding: -20px;
left: -5px;
bottom: -3px;
}
#img2{
position: relative;
left: 550px;
bottom: 7px;
}
#text1{
position: relative;
color: white;
left: 600px;
}

最新更新