时间戳

首页 > 解决方案 > 如何进行 HTML/CSS 定位

html - 如何进行 HTML/CSS 定位

问题描述

我是 html 和 css 的新手，所以很抱歉提出这个问题，但是您如何管理 html 中的多个项目？似乎很难。我正在尝试对其进行图像和悬停效果，并在此效果下方有一个文本，然后在其下方有一个画廊并将其全部居中。请建议我这样做的方法。我将包含我在下面编写的代码，这是针对 django 网站的，因此某些内容可能与实际的 html/css 不同。

html:

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hey</title>

    <link rel="stylesheet" href="{% static "portofolio/css/cc.css" %}">
</head>
<body>
<div class="card">
    <img src="{% static 'portofolio/img/save.png' %}" alt="Card Back">
    <img src="{% static 'portofolio/img/try.png' %}" class="img-top" alt="Card Front">
</div>
<div class="text">
    <h1>Hello. This is me</h1>
</div>
</body>

</html>

CSS：

body{
    background-color: black;
}
.card {
    position: relative;
    display: inline-block;
}

.card .img-top {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
}

.card:hover .img-top {
    display: inline;
}
.text{
    color: white;
    font-family: 'TYPOGRAPH PRO',sans-serif;
    margin-left: 500px;
    margin-bottom: 500px;
}

标签： htmlcssdjango

解决方案

推荐阅读