| 一个简单的个人介绍html网页制作 | 您所在的位置：网站首页 › 搞怪网页链接怎么做 › 一个简单的个人介绍html网页制作 |
一个简单的个人介绍html网页制作
|
目录
实验说明网页制作
实验说明
1、环境：本实验用的windows 环境：ubantu 下载安装nginx参考:https://blog.csdn.net/qq_23832313/article/details/83578836 2、工具：nginx 、vs code（当然这里vs code只是个编辑框架，具体插件可根据需求下载） 3、小小的实验要求 制作一个个人介绍的静态网页 至少包括一张图片 至少包括一个二级跳转链接 网页制作1、安装好Vs Code后，需要在安装几个插件如图所示
3、然后分别编写以下代码 .html文件代码 Instrucion 超级简单的个人简介 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目录下
|
2、1、创建一个.html文件和一个.css文件（可以先创建，也可以在vs code里创建）
5、稍微修改nginx的conf目录下的nginx.conf文件的内容 
6、然后运行nginx.exe并且打开浏览器访问127.0.0.1就可以看到我们制作的网页了 ●双击运行nginx.exe
●可以查看打开任务管理器查看是否打开了服务，如果有更改也需要结束引应用后重新启动 
●打开浏览器访问127.0.0.1即可 
【本文地址】
公司简介
联系我们