一个简单的个人介绍html网页制作

实验说明

1、环境：本实验用的windows

环境：ubantu
下载安装nginx参考:https://blog.csdn/qq_23832313/article/details/83578836

2、工具：nginx 、vs code（当然这里vs code只是个编辑框架，具体插件可根据需求下载）
3、小小的实验要求

制作一个个人介绍的静态网页
至少包括一张图片
至少包括一个二级跳转链接

网页制作

1、安装好Vs Code后，需要在安装几个插件如图所示

2、1、创建一个.html文件和一个.css文件（可以先创建，也可以在vs code里创建）

3、然后分别编写以下代码

.html文件代码



<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Instrucion</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
<header>
    <h1>超级简单的个人简介</h1>
</header>
<div id="containter">
    <nav>
        <h3>HTML学习链接</h3>
        <a href="https://www.runoob/">菜鸟教程</a>
    </nav>
    <section>
        <article>
            <header>
                <h1>简介</h1>
            </header>
            <ul type="square">
                <li>姓名：闲鱼没梦想</li>
                <li>性别：男</li>
                <li>爱好：运动，游戏，音乐，木有学习<li>
            </ul>
            <footer>
                <img border="0" src="F:\nginx\nginx\nginx-1.18.0\html\timg.jpg" alt=""  width="304" height="228">
            </footer>
        </article>
    </section>
</div>
</body>
</html>

.css文件代码


body{
    background-color: #cccccc;//这些均为颜色代码，也可以使用red等来代表
    font-family: "Microsoft Yahei","SimHei";
    margin: 0 auto;
    max-width: 900px;
    border: solid #FFFFFF;
}
header{
    background: brown;
    display: block;
    color: #FFFFFF;
    text-align: center;
}

h1{
    font-size: 72px;
    margin: 0;
}

h3{
    font-size: 18px;
    margin: 0;
    text-align: center;
    color: #F47D31;
}

nav{
    display: block;
    width:25%;
    float:left;
}
nav a:link, nav a:visited{
    display:block;
    color: #F47D31;
    border-bottom: 3px solid #FFFFFF;
    padding: 10px;
    text-decoration: none;
    font-weight: bold;
    margin: 5px;
}
nav a:hover{
    color: white;
    background-color: #F47D31;
}
nav h3{
    margin: 15px;
    color: white;
}
#container{
    background-color: #888888;
}
section{
    display: block;
    width: 50%;
    float:left;
}
article{
    background: #eee;
    display: block;
    margin: 10px;
    padding: 10px;
    /*
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    */
    border-radius: 10px;
    /*-webkit-box-shadow:2px 2px 20px #888;*/
    /*-webkit-transform:rotate(-10deg);*/
    /*-moz-box-shadow:2px 2px 20px #888;*/
    /*-moz-transform:rotate(-10deg);*/
    transform:rotate(-10deg);
    box-shadow: 2px 2px 20px #888;
}
article header{
    border-radius: 10px;
    padding: 5px;
}
article footer{
    border-radius: 10px;
    padding: 5px;
}
article h1{
    font-size: 18px;
}

footer{
    clear:both;
    display: block;
    background: #F47D31;
    color: #FFFFFF;
    text-align: center;
    padding: 15px;
}