3. 创建在线教育网站界面
本步骤将指导您创建HTML，创建完成后，通过浏览器访问相应地址，可看到在线教育网站。
- 在ECS命令行界面，复制并执行以下命令，将在根目录下创建新目录。
mkdir /alidata/www/default/edu
执行命令后，将返回如下界面。
- 复制并执行以下命令，命令行将跳转到如下界面，在此可编辑index.html文件。
vim /alidata/www/default/edu/index.html
按下 i 键进入编辑模式。
将如下代码复制并粘贴：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>在线教育</title> <meta name="keywords" content="在线教育"> <meta name="description" content="在线教育"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <!--Favicon--> <link rel="shortcut icon" href="" title="Favicon"> <style> @media all and (orientation : portrait) { /*竖屏*/ .mypic { width: 80%; } } @media all and (orientation : landscape) { /*横屏*/ .mypic { width: 40%; } } a { color: #000000; } a:link { color: #000000; } a:visited { color: #000000; } a:hover { color: #000000; } a:active { color: #000000; } </style> </head> <body style=" font-family: 'Microsoft JhengHei UI';"> <div id="wrapper" style=" margin: 0 15px; padding: 15px 0; position: relative;"> <div style="padding:20px;"> <p><font size="10" color="green">在线教育网</font></p> <p><font size="3" >您贴身的教育管家</font></p> </div> <p style="text-align:center"><font size="6" color="green">您可在此获取到丰富的教学视频，充分满足学习要求</font></p> <div style="padding:50px;"> <h1 style="text-align:center">精选课程</h1> <p style="text-align:center">口碑好，效益佳</p> <div> <table style="float: center;"> <tbody> <tr> <td> <b> <center> <div class="video"> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> </video> <p>实战视频1</p> <p>您可以在此视频学习相关内容1</p> </div> </center> </b> </td> <td> <b></b> <center><b> <div class="video"> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> </video> <p>实战视频2</p> <p>您可以在此视频学习相关内容2</p> </div> </b></center> </td> <td> <b> <center> <div class="video"> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> </video> <p>实战视频3</p> <p>您可以在此视频学习相关内容3</p> </div> </center> </b> </td> <td> <b> <center> <div class="video"> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> </video> <p>实战视频4</p> <p>您可以在此视频学习相关内容4</p> </div> </center> </b> </td> </tr> </tbody> </table> </div> <h1 style="text-align:center">观看金牌讲师直播</h1> <p style="text-align:center">所有导师来自名企，有多年教学经验</p> <div> <table style="float: center;"> <tbody> <tr> <td> <b> <center> <div class="video"> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> </video> <p>张佳佳</p> <p>擅长教学产品知识</p> </div> </center> </b> </td> <td> <b></b> <center><b> <div class="video"> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> </video> <p>李文</p> <p>多年web开发经验</p> </div> </b></center> </td> <td> <b> <center> <div class="video"> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> </video> <p>王杰</p> <p>专攻大数据计算</p> </div> </center> </b> </td> <td> <b> <center> <div class="video"> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> </video> <p>刘子雯</p> <p>运营专家</p> </div> </center> </b> </td> </tr> </tbody> </table> </div> <p style=" margin: 0 auto; text-align: center; "> <img class="mypic" src="" style=" vertical-align: middle; text-align: center;"> </p> <p> 更多： <a style=" font-size:14px; font-family: 'Microsoft JhengHei UI'" href="aliyun.com" target="_blank">aliyun.com</a> </p> <p>电话号码：xxxxx；</p> </div> </div> <div style="text-align: center; margin: 0px; width: 100%; font-size: 14px; font-family: 'Microsoft JhengHei UI';"> @ <a href="https://beian.miit.gov.cn/" target="_blank" style="text-decoration:none">京ICP备15047403号-1</a> </div> </body> </html>
粘贴后将出现以下对话框，点击确定。
确定后出现如下界面，此时按下 Esc 键，并输入 :wq 后按下Enter键保存并退出。
以上操作后，将返回命令行界面。
- 在浏览器打开新页签，在地址栏输入http:///edu，访问在线教育网站。创建的网站如图所示：
说明：ECS公网地址可在云产品资源列表查看。
