Javascript 如何更改node.js计算器的颜色和外观?

Javascript 如何更改node.js计算器的颜色和外观?,javascript,css,node.js,express,pug,Javascript,Css,Node.js,Express,Pug,im使用节点JSW express和jade 即使在更改css和布局之后,我也无法让我的计算器看起来除了平淡的颜色以外的任何东西。我不确定是否应该编辑css文件或其他文件 翡翠索引 extends layout block content h1= title p Welcome to #{title} p hello this is my calculator form(name='Calc') table(border='4') tr td

im使用节点JSW express和jade 即使在更改css和布局之后,我也无法让我的计算器看起来除了平淡的颜色以外的任何东西。我不确定是否应该编辑css文件或其他文件

翡翠索引

    extends layout

block content
  h1= title
 p Welcome to #{title}
  p hello this is my calculator
  form(name='Calc')
   table(border='4')
    tr
      td
        input(type='text', name='Input', size='22')
        br
    tr
      td
            input(type='button', name='one', value='  1  ', onclick='Calc.Input.value +=       \'1\'')
        input(type='button', name='two', value='  2  ', onclick='Calc.Input.value += \'2\'')
        input(type='button', name='three', value='  3  ', onclick='Calc.Input.value += \'3\'')
        input(type='button', name='plus', value='  +  ', onclick='Calc.Input.value += \' + \'')
        br
        input(type='button', name='four', value='  4  ', onclick='Calc.Input.value += \'4\'')
        input(type='button', name='five', value='  5  ', onclick='Calc.Input.value += \'5\'')
        input(type='button', name='six', value='  6  ', onclick='Calc.Input.value += \'6\'')
        input(type='button', name='minus', value='  -  ', onclick='Calc.Input.value += \' - \'')
        br
        input(type='button', name='seven', value='  7  ', onclick='Calc.Input.value += \'7\'')
        input(type='button', name='eight', value='  8  ', onclick='Calc.Input.value += \'8\'')
        input(type='button', name='nine', value='  9  ', onclick='Calc.Input.value += \'9\'')
        input(type='button', name='times', value='  x  ', onclick='Calc.Input.value += \' * \'')
        br
        input(type='button', name='clear', value='  c  ', onclick='Calc.Input.value = \'\'')
        input(type='button', name='zero', value='  0  ', onclick='Calc.Input.value += \'0\'')
        input(type='button', name='DoIt', value='  =  ', onclick='Calc.Input.value = eval(Calc.Input.value)')
        input(type='button', name='div', value='  /  ', onclick='Calc.Input.value += \' / \'')
        br
杰德

    doctype html
html
  head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
 body
  block content
styles.css

    body {
 font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
 a {
  color: #00b7ff;
 }
app.js

      var express = require('express');
    var routes = require('./routes');
      var user = require('./routes/user');
    var http = require('http');
     var path = require('path');

    var app = express();

   // all environments
   app.set('port', process.env.PORT || 3000);
   app.set('views', path.join(__dirname, 'views'));
    app.set('view engine', 'jade');
       app.use(express.favicon());
   app.use(express.logger('dev'));
   app.use(express.json());
    app.use(express.urlencoded());
  app.use(express.methodOverride());
   app.use(app.router);
     app.use(require('stylus').middleware(path.join(__dirname, 'public')));
    app.use(express.static(path.join(__dirname, 'public')));

       // development only
        if ('development' == app.get('env')) {
           app.use(express.errorHandler());
        }

         app.get('/', routes.index);
         app.get('/users', user.list);

             http.createServer(app).listen(app.get('port'), function(){
   console.log('Express server listening on port ' + app.get('port'));
    });

您的CSS正在设置“a”标记的样式,但我在您的html中没有看到任何链接


为元素提供一个类,然后使用CSS设置该类的样式。

这可能不是一个解决方案,我会删除触控笔中间件,因为您没有使用it应用程序。userequire“触控笔”。。。。我很确定它会定期用.styl文件的编译版本替换你的.css文件。我也有一个.styl文件,但它看起来就像layoutStylus是TJ Holowaychuk制作的css预处理器,也是制作Express和Jade的同一个家伙。如果您使用的是手写笔,您应该只使用手写笔编辑.styl文件,而不使用.css。请注意,常规CSS也是有效的手写笔标记。至于设计计算器的样式,你应该在Firebug或ChromeWebdev工具中打开它,并使用样式窗格;一旦你的webapp进入浏览器,当你设计它的样式时,它是否是NodeJS应用并不重要。而且,如果你在加载页面时提供输出HTML,或者在JSFiddle中提供CSS,那么任何试图帮助你回答这个问题的人都可能会受益,如果不是的话,包括其当前状态的屏幕截图,以及您试图完成的内容的描述/屏幕截图。我应该如何做