gpt4 book ai didi

html - 如何在 css/html 中垂直减少两个单词之间的空间

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

最初我的设计是这样的,我很满意,除了加载时间很糟糕,因为大圆圈标志是一张图片。

enter image description here

所以我能想到的加快加载时间的唯一方法是将它从图像更改为 css3,不幸的是我找不到合适的替代品,但这就是我目前所拥有的。

enter image description here

现在我主要关心的是试图缩小“Pavel”和“Design”之间的差距,但我不确定如何做到这一点。

一个不太重要的注意事项,如果您有任何方法可以让我保持原始设计而没有可怕的加载时间,那会很好。我尝试降低 img 质量,大小从 1.6MB 变为 140kb,负载仍然很差。

div.homepage {
position: fixed;
text-align: center;
margin: 0 auto;
left: 0;
right: 0;
}

/* Logo Design */
div.circle {
margin: 0 auto;
border-radius: 50%;
width: 900px;
height: 900px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}


p.pavel, p.design {
font-family: 'Open Sans', sans-serif;
font-size: 10em;
color: #708090;
}
<body>
<div class="homepage">
<div class="circle">
<p class="pavel">Pavel</p>
<p class="design">Design</p>
</div>
<ul>
<li class="button"><a href="index.html" data-text="Home">Home</a></li>
<li class="button"><a href="about.html" data-text="About">About</a></li>
<li class="button"><a href="services.html" data-text="Services">Services</a></li>
<li class="button"><a href="contact.html" data-text="Contact">Contact</a></li>
</ul>
</div>
</body

最佳答案

段落元素默认有一个边距,如果你移除它那么它们应该在垂直方向上更靠近彼此。您可以调整边距或使用一些填充来获得所需的间距。

p.pavel, p.design{
margin: 0;
}

关于html - 如何在 css/html 中垂直减少两个单词之间的空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40456656/

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