node js网页制作

最新推荐文章于 2024-07-25 03:30:51 发布

� 鲸叫我照顾海 �

最新推荐文章于 2024-07-25 03:30:51 发布

阅读量832

点赞数

文章标签： html js

本文链接：https://blog.csdn.net/a8802110/article/details/114969287

版权

这篇博客记录了使用Node.js制作网页的过程，包括界面框架的设计、布局、通过键盘控制菜单栏移动的功能实现，以及Node.js服务器的部署。虽然代码基于老师的例子，但实现了服务器创建的基本功能。

摘要由CSDN通过智能技术生成

#上课任务：完成以下网页界面

首先，1画出大体框架

如下：

（ps：真讨厌画界面，好麻烦！）

2.界面布局（没有照片）

3.实现按上下左右键菜单栏的移动

4.完成node.js服务器的部署

附：代码

html

<!DOCTYPE html>
<html lang="en" style="height:100%">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>7天连锁酒店</title> 
    <link rel="stylesheet" href="css/index.css" >
   
</head>

    <div class="main-div">
      <div class="top-div">
          <div class="top-div-col1">
              <img src="image/images/logo-s.png"  class="img4-center" style="margin-top: -1%;font-size: 20px;">
          </div>
          <div class="top-div-col2">七天连锁酒店集团</div>
          <div class="top-div-col2" id="Date"></div>
          <div class="top-div-col3">上海 晴转多云 22℃-25℃</div>
          <div class="top-div-col4" id="mytime" style="margin-top: -1%;font-size: 20px;">
     
           </div>
          
      </div>
      <div class="mid-div-col1">
          <img class="img-center" src="image/images/i-flash.png" style="height: 100%;width: 90%;">
      </div>
      <div class="mid-div-col2">
          <div class="midr-div-col1">
              <div style="position: relative; top: 50%;left: 50%;
              transform: translate(-50%,-50%);"> 
                 <div style="position: absolute; top: 50%;left: 50%;
                 transform: translate(-42%,-70%);">
                      <img src="image/images/ico-1.png"/> 
                      </div>  
                    <img src="image/images/dish-bg.png"/>
                    <span style="position: absolute; bottom: 15%; left: 38%;">汽车租赁</span>
              </div>  
              
          </div>
          <div class="midr-div-col2">
            <div style="position: relative; top: 50%;left: 50%;transform: translate(-50%,-50%);"> 
                 <div style="position: absolute; top: 50%;left: 50%;
                 transform: translate(-42%,-65%);">
                      <img src="image/images/ico-2.png"/> 
                      </div>  
                    <img src="image/images/dish-bg.png"/>
                    <span style="position: absolute; bottom: 10%; left: 38%;">出行信息</span>
              </div>  
          </div>
          <div class="midr-div-col3">
            <div style="position: relat