快速上手 HTML & CSS 展开你的网页设计之旅！_成為網頁設計師的第一步快速上手 html css 展開你的網頁設計之旅-CSDN博客

本文链接：https://blog.csdn.net/canre/article/details/138004836

使用vs code先创建一个index.html加入以下内容：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>瓜子的个人首页</title>
    <link rel="stylesheet" href="style.css"
</head>
<body>
    <header>
        <h1>瓜子的个人首页
    </h1></header>
        
    
    <main>
        <h2>每天都要开开心心！</h2>
    <section class="csdn">
        <h3><strong><a href="https://csdn.net/">csdn抄代码</a></strong></h3>
        <ol>
            <ui>
                <p><strong><a href="https://blog.csdn.net/weixin_43529394/article/details/113249762?ops_request_misc=&request_id=&biz_id=102&utm_term=%E6%A0%91%E8%8E%93%E6%B4%BE%E6%8D%A2%E6%BA%90buster&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-1-113249762.142%5Ev99%5Epc_search_result_base7&spm=1018.2226.3001.4187">raspberry换源！</a></strong></p>
                <p><strong><a href="https://blog.csdn.net/weixin_44614230/article/details/127611454?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522171360033216800211552394%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=171360033216800211552394&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~times_rank-5-127611454-null-null.142^v100^pc_search_result_base6&utm_term=%E6%A0%91%E8%8E%93%E6%B4%BE%E5%86%85%E7%BD%91%E7%A9%BF%E9%80%8F&spm=1018.2226.3001.4187">树莓派内网穿透！</a></strong></p>
                <p><strong><a href="https://blog.csdn.net/qq_63913621/article/details/128924453?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522171360039316800227429754%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=171360039316800227429754&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-128924453-null-null.142^v100^pc_search_result_base6&utm_term=%E6%A0%91%E8%8E%93%E6%B4%BE%E6%B1%89%E5%8C%96&spm=1018.2226.3001.4187">树莓派汉化！</a></strong></p>
                <p><strong><a href="https://blog.csdn.net/weixin_44614230/article/details/127611454?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522171360033216800211552394%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=171360033216800211552394&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~times_rank-5-127611454-null-null.142^v100^pc_search_result_base6&utm_term=%E6%A0%91%E8%8E%93%E6%B4%BE%E5%86%85%E7%BD%91%E7%A9%BF%E9%80%8F&spm=1018.2226.3001.4187">树莓派内网穿透！</a></strong></p>
            </ui>
        </ol>
    </section>
        
    <section class="bilibili">
        <h3><strong><a href="https://bilibili.com/">哔哩哔哩看视频</a></strong></h3>
        <ol>
            <ui>
                <p><strong><a href="https://space.bilibili.com/946974?spm_id_from=333.337.0.0">影视剧风我爱你！</a></strong></p>
                <p><strong><a href="https://space.bilibili.com/395845182">阿肯真鸡儿帅！</a></strong></p>
                <p><strong><a href="https://space.bilibili.com/1280231019?spm_id_from=333.788.0.0">老6使命召唤，启动！</a></strong></p>
                <p><strong><a href="https://space.bilibili.com/3493118718511892">七月，爱情的时候到了！</a></strong></p>
                <p><strong><a href="https://space.bilibili.com/17871667">准备宅同学！</a></strong></p>
            </ui>
        </ol>
    </section>
</main>
</body>
</html>

先用这些完成编辑，然后创建一个style.css文件写入以下内容：

* {
    padding:0;
    margin:0;
}

h1 {
    color:red
}
h2 {
    color:aqua
}
header,main{
    background-color: #d6ccc2;
    border:5px #9d8189 dashed;
    padding:30px 0 20px 50px;
    margin: 30px;
}
header{
    background-color: #231C1A;
    height: 80px;
    width: 100%;
}
h1 {
    color:white;
    position:absolute;
    left: 700px;
    top: 30;
    line-height: 70px;
}
.csdn{
    color:black;
    height: 85vh;
    background-image: url("images/down.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content:center;
}
.bilibili{
    color:black;
    height: 85vh;
    background-image: url("images/a.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content:center;
}
.csdn h3{
    font-size:60px;
    text-decoration: none;
    border:1px solid #ACACAC
}
.bilibili h3{
    font-size:60px;
    text-decoration: none;
    border:1px solid #ACACAC
}
.csdn p{
    text-decoration: none;
    border:1px solid #ACACAC;
    padding: 10px 20px;
    border-radius:5px;
}
.bilibili p{
    text-decoration: none;
    border:1px solid #ACACAC;
    padding: 10px 20px;
    border-radius:5px;
}

可修改。

具体参考：成为网页设计师的第一步！快速上手 HTML & CSS 展开你的网页设计之旅！_哔哩哔哩_bilibili