Question

我是HTML / CSS的一个非常大的菜鸟，我通过制作简历来构建我的第一个项目。我拥有HTML中所需的所有东西，现在我正在组织和移动CSS中的东西。为了将东西移动到正确的位置，我几乎猜测并使用顶部/底部/左/右检查并从相对位置调整像素。有没有比这更有效的方法来移动页面？

h1 {
    text-align: center;
}

.SEE {
    border-bottom-style: solid;
    border-bottom-color: red;
    border-bottom-width: 5px;
    padding-top: 0px;
}

.skills {
    position: relative;
    top: 51px;
    left: 34px;
}

.experience {
    position: relative;
    text-align: center;
}

.education {
    position: relative;
    left: 1150px;
    bottom:51px;
}

img {
height:200px;
width:200px;
position: relative;
bottom:450px;
left:250px;
}

编辑：以下是与之关联的HTML。

<body>
    <h1>My Name</h1>

    <div class='SEE'>
        <h2 class='skills'>Skills</h2>
        <h2 class='experience'>Experience</h2>
        <h2 class='education'>Education</h2>
    </div>

    <div class='context'>
        <p class='Ski'>Skills Stuff</p>
        <p class='Exp'>Experience Stuff</p>
        <p class='Edu'>Education Stuff</p>
    </div>

    <div>
        <h3>Contact Info</h3>
        <p>Email: blank <br>
        Facebook: blank <br>
        Mobile Phone: blank
        </p>

    </div>

    <img src="blank">
</body>

Answer 1

诚实吗？使用相对尺寸：https://www.w3schools.com/cssref/css_units.asp

如果您正在设计移动设备，请查看https://developers.google.com/web/fundamentals/design-and-ui/responsive/。在开始之前你会需要一些很好的CSS知识。

Answer 2

使用“position：relative”和top / left / right / bottom来构建布局不是一个好习惯。我认为这只是在少数情况下和小的定位调整是合理的。

它将无法正确适应不同的屏幕尺寸，并且在您将来要修改该页面时难以维护。

在你的情况下，我认为你试图通过使用相对位置将所有三个H2标题放在一个水平线上，因为否则它们将处于垂直线。那是因为h1 / h2 / h3 ...默认情况下具有“display：block”样式，这意味着该元素之后的内容将移动到它之下。

如果你想让它们全部在一行中，你可以设置你的h2标签使用“display：inline-block”，它不会将下一个标题移动到下一行，并允许你为每个标题设置一个宽度。这样你就可以把它们放在一行。

同样，当将样式应用于容器内的多个元素时，您可以使用容器的选择器，然后使用另一个选择器来处理您想要影响的标记：

.SEE h2 { display:inline-block; }

您可以节省时间并避免重复样式

Answer 3

CSS是层叠样式表的缩写。级联意味着每个新层都继承自前一个层。进行样式设置的最佳方法是定义基类并设置样式。下一步是在这些基类中对元素进行排序。

我认为你需要给你的身体属性“position：relative;”然后继续。

Answer 4

CSS没有。用于控制屏幕上内容流的选项。大部分时间你都会和他们一起玩，以获得最准确的信息。这是我发现的视频系列，对初学者最有帮助。这是由DevTips，它包含信息。关于定位，浮动和放大清除，Flexbox（这是设置网站流程的非常好的响应方式），CSS单位等。检查这个系列是值得的。

这是链接： Devtips: Positioning Tutorial

Answer 5

使用transform: translate(x, y)或translateX()和translateY()。

有没有更有效的方法来移动CSS中的元素？

5 个答案: