目录
- 实验说明
- 网页制作
实验说明
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;
}
4、将刚才的两个文件复制粘贴到nginx的html目录下
5、稍微修改nginx的conf目录下的nginx.conf文件的内容
6、然后运行nginx.exe并且打开浏览器访问127.0.0.1就可以看到我们制作的网页了
●双击运行nginx.exe
●可以查看打开任务管理器查看是否打开了服务,如果有更改也需要结束引应用后重新启动
●打开浏览器访问127.0.0.1即可
更多推荐
一个简单的个人介绍html网页制作
发布评论