时间戳

首页 > 解决方案 > 带有 CSS 编码的 HTML

html - 带有 CSS 编码的 HTML

问题描述

晚上好，目前我正在处理一些我无法解决的问题。当前网站看起来像点击这里。我的问题是

  1. 在顶部，我想超级酷的标语会去这里更接近艺术商店这个文本目前在正文中为 h2。艺术商店是h1
  2. 在底部，我需要最近的收购位于左上角，三张图片位于最近的收购下方。无论我尝试什么最近的收购永远不会进入页脚框背景的左上角。当前在页脚和图像中的最新收购也在页脚中。
  3. 图片周围的边框。

有人可以帮忙吗。我相信这很容易解决，但我是新手。

下面是我的代码

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="utf-8">
            <title>Art Store</title>
            <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300&display=swap" 
rel="stylesheet"> 
                <link rel="stylesheet" href="reset.css" />
                <link rel="stylesheet" href="Chapter04-Project03.css" />
    </head>
    <body>
        <header>
            <h1>Art Store</h1>
            <h2>Super cool tagline will go here</h2>
        </header>
        <article>
            <h2>Still Waiting</h2> 
            <p>Our website will be live in</p> 
            <p id="time">4 years, 3 months, and 2 days</p>
        <h3>*hopefully</h3>
    </article>
            <footer>
        <Text>Recent Acquisitions</text>
                <img src="images/07020.jpg" alt="This is a test" />
                <img src="images/05030.jpg" alt="This is a test" />
                <img src="images/106020.jpg" alt="This is a test" />
            </footer>
    </body>
</html>

然后这是我的css代码

h1, h2, h3, nav, footer, .actions
{
    font-family: 'Merriweather', serif;
}
body
{
    font-family: 'Merriweather', serif;
    font-size: 100%;
    background: #150b09 url(images/art-background4.jpg) no-repeat;
    background-size: cover;
}

header
{
    margin-left: 8rem;
    background-color: rgba(33, 33, 33,0.5);
    width: 28rem;
    height: 8rem;
    padding: 1rem;
    padding-top: 2rem;
    color: white;
    filter: drop-shadow(0 -6mm 4mm rgb(33,35,33,0.5));

}
header h2
{
    font-size: 0.75rem;
}
header h1
{
    font-family: 'Merriweather', serif;
    font-size: 3rem;
    background-color: (33,33,33,0.5);
}
article
{
    background-color:rgba(255,255,255,0.5);
    margin-top: 6rem;
    margin-right: 0rem;
    margin-bottom: 0rem;
    margin-left: 8rem;
    width: 30rem;
}
article p
{
    padding-top: 2rem;
    padding-right: 1rem;
    padding-bottom: 0rem;
    padding-left: 1rem;
    font-size: 1.4rem;
    font-weight: bold;
}
article h2
{
    background-color:rgba(224,224,224,0.5);
    padding: 1rem;
    font-size: 1.5rem;
}
article h3
{
font-family: 'Merriweather', serif;
color: red;
}
article p#time
{
    color: white;
    background-color:rgba(66,66,66,0.5);
    margin: 1rem;
    padding: 1rem;
    font-size: 1.2rem;
    font-weight: bold;
    width: 19rem;
 }
footer text
{
padding-top: 1rem;
}
footer img
{
img-align: top;
}
footer
{
    background-color: rgba(33,33,33,0.5);
    margin-top: 6rem;
    margin-right: 0rem;
    margin-bottom: 0rem;
    margin-left: 8rem;
    width: 30rem;
    color: white;
    filter: drop-shadow(0 -6mm 4mm rgb(33,33,33,0.5));
    text-align: bottom;

}

标签： htmlcss

解决方案

您可以使用 css 为标题添加边距和填充

h1,h2{
    margin:0;
    padding:0;
}

您可以在图像之前添加中断行。

<Text>Recent Acquisitions</text>
<br>
<img src="images/07020.jpg" alt="This is a test" />

您可以使用 CSS 添加边框

img {
  border: 5px solid #555;
}

你也应该检查一下，这样你就可以让倒数计时器自动工作。https://www.w3schools.com/howto/howto_js_countdown.asp

推荐阅读