HTML 课程示例

任务：

制作个人网站：

  1. 创建HTML

  2. 创建样式表

HTML 代码

index.html

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

<head>
    <title>Personal Blog</title>
    <link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>
    <header>
        <h2>Zhijun Gao</h2>
    </header>

    <section>
        <nav>
            <ul>
                <li><a href="index.html">About</a></li>
                <li><a href="research.html">Research</a></li>
                <li><a href="#">Publications</a></li>
            </ul>
        </nav>

        <article>
            <h1>About me</h1>
            <p>I am a researcher and lecturer at Peking University.</p>
            <img src="images/jayzhou.png" width="320px">
        </article>
    </section>
    <footer>
        <p>Copyright at Peking University.</p>
    </footer>
</body>



</html>

research.html

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

<head>
    <title>Personal Blog</title>
    <link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>
    <header>
        <h2>research</h2>
    </header>

    <section>
        <nav>
            <ul>
                <li><a href="index.html">About</a></li>
                <li><a href="research.html">Research</a></li>
                <li><a href="#">Publications</a></li>
            </ul>
        </nav>

        <article>
            <h1>research projects</h1>
            <h2>project 1</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et quam ac tortor feugiat bibendum. Cras ex turpis, efficitur vitae fringilla ac, egestas et tellus. Maecenas placerat vulputate lectus, eget dictum leo imperdiet id. Aenean eleifend,
                lorem sit amet mollis malesuada, dolor lorem tempus ex, nec volutpat mi libero quis sapien. Nullam lacinia ipsum sit amet mollis dapibus. Suspendisse potenti. Nam dignissim semper eros sit amet vestibulum. Pellentesque semper non lectus
                vel venenatis. Etiam interdum ullamcorper enim, ac pretium neque consectetur non. Fusce vulputate eget elit at sodales.</p>
            <h2>project 2</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et quam ac tortor feugiat bibendum. Cras ex turpis, efficitur vitae fringilla ac, egestas et tellus. Maecenas placerat vulputate lectus, eget dictum leo imperdiet id. Aenean eleifend,
                lorem sit amet mollis malesuada, dolor lorem tempus ex, nec volutpat mi libero quis sapien. Nullam lacinia ipsum sit amet mollis dapibus. Suspendisse potenti. Nam dignissim semper eros sit amet vestibulum. Pellentesque semper non lectus
                vel venenatis. Etiam interdum ullamcorper enim, ac pretium neque consectetur non. Fusce vulputate eget elit at sodales.</p>
        </article>
    </section>
    <footer>
        <p>Copyright at Peking University.</p>
    </footer>
</body>



</html>

style.css

* {
    box-sizing: border-box;
}

body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}


/* Style the header */

header {
    background-color: rgb(73, 69, 69);
    padding: 1px;
    text-align: center;
    font-size: 30px;
    color: white;
}

nav {
    float: left;
    width: 30%;
    height: 600px;
    background: #ccc;
}

article {
    float: left;
    width: 70%;
    padding: 20px;
    background-color: #f1f1f1;
    height: 600px;
}

section::after {
    content: "";
    display: table;
    clear: both;
}

footer {
    text-align: center;
    background-color: #777;
    color: white;
    padding: 10px;
}

效果图

效果图