如何更改我的 node.js 计算器的颜色和外观？答案

【问题标题】：How can i change the colors and appearance of my node.js calculator?如何更改我的 node.js 计算器的颜色和外观？
【发布时间】：2014-06-13 11:57:07
【问题描述】：

我正在使用 node js w express 和 jam 即使在更改 css 和布局之后，我也无法让我的计算器看起来除了平淡的颜色。我不确定是否应该编辑 css 文件或其他文件

index.jade

    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

layout.jade

    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'));
    });

【问题讨论】：

（这可能不是解决方案）我会删除手写笔中间件，因为您没有使用它app.use(require('stylus')...。我很确定它会定期用 .styl 文件的编译版本替换您的 .css 文件。
我也有一个 .styl 文件，但它看起来就像布局
Stylus 是由 TJ Holowaychuk（制作 Express 和 Jade 的同一个人）制作的 CSS 预处理器。如果您使用的是 Stylus，则应该全力以赴（仅编辑 .styl 文件而不是 .css）。请注意，常规 CSS 也是有效的 Stylus 标记。至于计算器的样式，您应该在 Firebug 或 Chrome Web Dev Tools 中打开它并使用样式窗格；一旦您的 web 应用程序到达浏览器，当您对其进行样式设置时，它是否是 NodeJS 应用程序并不重要。
另外，如果您在加载页面时提供输出 HTML（可能在 JSFiddle 和 CSS 中，如果没有，包括当前状态的屏幕截图）以及您要完成的任务的描述/屏幕截图。

标签： javascript css node.js express pug

【解决方案1】：

您的 CSS 设置了“a”标签的样式，但我在您的 html 中看不到任何链接。

给你的元素一个类，然后使用 CSS 设置该类的样式。

【讨论】：

我该怎么做