一个简单的个人介绍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后,需要在安装几个插件如图所示 2、1、创建一个.html文件和一个.css文件(可以先创建,也可以在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目录下 5、稍微修改nginx的conf目录下的nginx.conf文件的内容 6、然后运行nginx.exe并且打开浏览器访问127.0.0.1就可以看到我们制作的网页了 ●双击运行nginx.exe ●可以查看打开任务管理器查看是否打开了服务,如果有更改也需要结束引应用后重新启动 ●打开浏览器访问127.0.0.1即可 |
CopyRight 2018-2019 实验室设备网 版权所有 |