HTML与CSS基础 - 网页搭建2，CSS重点

最新推荐文章于 2024-08-06 21:02:26 发布

cosmosForMe

最新推荐文章于 2024-08-06 21:02:26 发布

阅读量99

点赞数

文章标签： css html sass

本文链接：https://blog.csdn.net/cosmosForMe/article/details/121787139

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Rick Astley - Never Gonna Give You Up</title>
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="css/style.css" />

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Corinthia&display=swap" rel="stylesheet">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Fuzzy+Bubbles&display=swap" rel="stylesheet">
</head>

<body>

    <header>

        <h1>Rick Astley</h1>
        <h2>Never Gonna Give You Up</h2>

    </header>

    <nav>

        <ul>
            <li><a href="https://en.wikipedia.org/wiki/Rick_Astley">Wikipedia</a></li>
            <li><a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">YouTube</a></li>
            <li><a href="https://open.spotify.com/album/6N9PS4QXF1D0OWPk0Sxtb4">Spotify</a></li>
            <li><a href="https://knowyourmeme.com/memes/rickroll">Know Your Meme</a></li>
        </ul>

    </nav>


    <main>

        <article>
            <h3>About The Song</h3>
            <p><strong>"Never Gonna Give You Up"</strong> is a song recorded by British singer and songwriter <a href="https://www.rickastley.co.uk/">Rick Astley</a>, released as a single on 27 July 1987.</p>
            <p>In 2004, <strong>"Never Gonna Give You Up"</strong> was voted number 28 in <strong>50 Most Awesomely Bad Songs... <em>Ever by VH1</em></strong>.</p>
            <p>The music video for the song has become the basis for the <em>"Rickrolling"</em> Internet meme, leading the song to also be referred to as <em>"The Rickroll Song"</em>.</p>
            <h3>Cover Versions</h3>
            <ul>
                <li>In 1997, French boy band 2Be3 covered the song under the name "Toujours là pour toi", which had success in France (No. 4) and Belgium (Wallonia) (No. 12).</li>
                <li>In 1998, an Italian cover entitled "Non ti lascerò" was made by Fiorello.</li>
                <li>Eurobeat artist Kevin Johnson covered the song in 2004 for the album Super Eurobeat 149.</li>
                <li>A group of London dance producers called The Rickrollerz made a house music cover version of "Never Gonna Give You Up". In May 2008, the track entered the UK Club Charts at no. 22.</li>
                <li>In August 2007, internet celebrity and singer Tay Zonday covered the song.</li>
                <li>On 25 November 2008, Barry Manilow released a version of the song on his The Greatest Songs of the Eighties album.</li>
                <li>In 2008, Ashley Tisdale released a cover of the song, along with three other songs of the 80s.</li>
            </ul>

            <h3>Rick-rolling</h3>
            <p><img src="images/meme.jpg" alt="Rick Astley in the Never Gonna Give You Up music video" /></p>
        </article>

        <aside>
            <h3>Lyrics</h3>
            <p>Never gonna give you up<br /> Never gonna let you down<br /> Never gonna run around and desert you<br /> Never gonna make you cry<br /> Never gonna say goodbye<br /> Never gonna tell a lie and hurt you</p>
            <p>Lyrics &copy; 1987 Stock Aitken Waterman and RCA Records</p>
        </aside>


    </main>


    <footer>

        <p>Text source: <a href="https://en.wikipedia.org/wiki/Never_Gonna_Give_You_Up">Wikipedia: Never Gonna Give You Up</a></p>
        <p>Image source: <a href="https://imgflip.com/memetemplate/21230687/Rick-Astley">ImgFlip Meme Generator</a></p>

    </footer>

</body>

</html>

调整页面的背景颜色，内容左右间距，给网页背景插图。

html {
    background-color: #d3dbde;
    background-image: url(../images/Star-wars-logo-new-tall.jpg);
}

body {
    background-color: #ffffff;
    color: #333333;
    font-family: Segoe UI, Arial, sans-serif;
    width: 1000px;
    border: 20px solid #ffffff;
    margin-left: auto;
    margin-right: auto;
}

header {
    background-color: #004499;
    color: #ffffff;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: url(../images/Star-wars-logo-new-tall.jpg);
    font-family: 'Corinthia', cursive;
}

header h1,
header h2 {
    margin: 0;
}

nav {
    background: #333333;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #ffffff;
}

nav a {
    font-weight: bold;
    color: #ffffff;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-around;
}

main {
    background-color: #ffffff;
    display: flex;
    padding: 20px;
    font-family: 'Fuzzy Bubbles', cursive;
}

aside {
    background-color: #dddddd;
    padding: 20px;
    width: 300px;
    flex-grow: 0;
    flex-shrink: 0;
}

footer {
    background-color: #3d4348;
    color: #ffffff;
    padding: 20px;
}

footer a {
    color: #99ddff;
    font-weight: bold;
}

cosmosForMe

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML与CSS基础 - 网页搭建2，CSS重点

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>Rick Astley - Never Gonna Give You Up</title> <meta name="viewport" content="width=device-width" /> <link rel="stylesheet.
复制链接

扫一扫