Javascript 如何更改node.js计算器的颜色和外观?
im使用节点JSW express和jade 即使在更改css和布局之后,我也无法让我的计算器看起来除了平淡的颜色以外的任何东西。我不确定是否应该编辑css文件或其他文件 翡翠索引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
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,那么任何试图帮助你回答这个问题的人都可能会受益,如果不是的话,包括其当前状态的屏幕截图,以及您试图完成的内容的描述/屏幕截图。我应该如何做