(网络编程)一个简单的静态网页

目录

  • 一、实验说明
  • 二、制作网页

一、实验说明

1、工具:nginx 、 vs code(当然这里VsCode只是个编辑框架,具体插件可根据需求下载)

2、实验要求

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

二、制作网页

1、创建一个.html文件和一个.css文件
(网络编程)一个简单的静态网页_第1张图片

2、分别编写以下代码

.html文件代码


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Instrucion</title>
    <link rel="stylesheet" href="./instrucion.css">
</head>
<body>
<header>
    <h1>一个简单的个人简介</h1>
</header>
<div id="containter">
    <nav>
        <h3>HTML学习链接</h3>
        <a href="https://www.runoob.com/">菜鸟教程</a>
    </nav>
    <section>
        <article>
            <header>
                <h1>个人简介</h1>
            </header>
            <ul type="square">
                <li>姓名:djl</li>
                <li>性别:男</li>
            </ul>
            <footer>
                <img border="0" src="./images/1.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;
}

3、将刚才的两个文件复制粘贴到nginx的html目录下
(网络编程)一个简单的静态网页_第2张图片
4、修改nginx的conf目录下的nginx.conf
(网络编程)一个简单的静态网页_第3张图片

(网络编程)一个简单的静态网页_第4张图片
5、然后运行nginx.exe并且打开浏览器访问127.0.0.1就可以看到我们制作的网页了
(1)、运行nginx.exe
(网络编程)一个简单的静态网页_第5张图片
(2)、这里可以查看打开任务管理器查看是否打开了服务
(网络编程)一个简单的静态网页_第6张图片
(3)、打开浏览器访问即可
(网络编程)一个简单的静态网页_第7张图片

你可能感兴趣的:(html,css,nginx)