Tag: css
是一个捆绑的CSS用于所有子网站好？
我最近开始使用node.js的东西。 发现了webpack和sass-loader，请阅读它们。 我想我知道了，但有一件事是困扰着我。 当sass-loader将我所有的scss文件都捆绑到一个css文件中，我是否肯定要在所有子站点上使用这个文件？ 我猜这是错误的，所以我打算在大型，多个网站应用程序中做什么？
Node.js app.js使css和js可用
我想知道怎样才能让我的app.js，以便我可以从我的index.html或任何其他HTML页面放置在我的“公共”文件夹中访问任何.js或.css文件。 我有.css和.js文件放在“公共”文件夹内的不同的“CSS”或“JavaScript”文件夹，但我真的不知道如何使我的index.html连接到他们没有CSS和JavaScript直接放置在公众没有子文件夹的文件夹。 是否有可能使我的所有文件在“公共”文件夹可以连接，而无需我一直将它们添加到app.js？ 这是app.js： var http = require('http'), path = require('path'), fs = require('fs'), extensions = { ".html" : "text/html", ".css" : "text/css", ".js" : "application/javascript", ".png" : "image/png", ".gif" : "image/gif", ".jpg" : "image/jpeg" }; function getFile(filePath,res,page404,mimeType){ fs.exists(filePath,function(exists){ if(exists){ fs.readFile(filePath,function(err,contents){ if(!err){ res.writeHead(200,{ "Content-type" : mimeType, "Content-Length" : contents.length }); res.end(contents); } else { console.dir(err); […]
实时更新.log文件
我试图刷新一个.log文件，每秒显示即时/实时更新直接到网页。 我的HTML如下 HTML <html> <head> <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> </head> <body> <div id="console" style="background-color:black;color:green;overflow:auto;width:500px;height:700px;"> </div> </body> 使用Javascript <script type="text/javascript"> $(document).ready(function(){ setInterval(function(){ $("#console").load('/log/latest.log'); }, 1000; }); 文件设置
Node.js公共css文件404找不到
我正在学习node.js，并有一个公共的CSS文件提供给一个URL的错误。 它几乎可以处理每个页面，我在页面上，并从127.0.0.1/css/style.css加载的CSS文件。 当URL是127.0.0.1/project/idProject时，它尝试从127.0.0.1/project/css/style.css获取css文件。 // INCLUDE MODULES ======================================================= var express = require('express'); var app = express(); var server = require('http').createServer(app); var io = require('socket.io').listen(server); var Twig = require('twig'); var twig = Twig.twig; var path = require('path'); var mongoose = require('mongoose'); var passport = require('passport'); var flash = require('connect-flash'); var configDB = require('./config/database.js'); // Assets ================================================================ app.use(express.static(path.join(__dirname, […]
在linemanjs中引用供应商文件夹css和js
我正在使用linemanjs创build一个web应用程序，但是当我明确引用供应商的css和js文件时，将不会引用该位置。 让我知道我在做什么linemanjs错了。 我在我的文件中试过的简单的事情是 – link(rel="stylesheet",href="/vendor/css/myvendor.css") 和 link(rel="stylesheet",href="/css/myvendor.css") 和 link(rel="stylesheet",href="css/myvendor.css") – > myvendor.css肯定位于供应商下的css文件夹中。
无法在导航栏中看到标签文字
即时通讯在JADE中使用下面的代码，我没有看到导航栏中的标签文本，这里可能是什么问题，我尝试玩没有成功的缩进我猜我缺less一些basic.please协助 html head title= title link(rel="stylesheet", href="bootstrap.min.css") link(rel='stylesheet', href='//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap-theme.min.css') script(src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js') body div nav.navbar.navbar-inverse.navbar-fixed-top(role='navigation') .container .navbar-header button.navbar-toggle(data-toggle='collapse', data-target='#bs-example-navbar-collapse-1') span.sronly span.icon-bar span.icon-bar span.icon-bar #bs-example-navbar-collapse-1.collapse.navbar-collapse ul.nav.navbar-nav li a(href='/recipes/bbq') Tab1 li a(href='/recipes/bbq') Tab2 div.container block content 这里是js小提琴http://jsfiddle.net/jo1nnrp4/3/ 这是视图，我想在导航栏中看到tab1＆tab2，并将到达文本放在灰色区域，我该怎么做？ 更新 html head title= title link(rel="stylesheet", href="bootstrap.min.css") link(rel='stylesheet', href='//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap-theme.min.css') script(src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js') body div nav.navbar.navbar-inverse.navbar-fixed-top(role='navigation') .container .navbar-header button.navbar-toggle(data-toggle='collapse', data-target='#bs-example-navbar-collapse-1') span.sronly span.icon-bar span.icon-bar span.icon-bar […]
翡翠模板不按预期显示页面
我使用Node.js＆express，并为我使用翡翠模板的视图，我想要的是testing文本将在底部的黑色导航栏下，目前我无法这样做（它隐藏在黑色的导航栏我怎么能把它移到底部），我在这里错过了什么？ 我把分区 这是玉-Layout.jade的代码 html head title= title link(rel="stylesheet", href="bootstrap.min.css") link(rel='stylesheet', href='//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap-theme.min.css') script(src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js') body nav.navbar.navbar-inverse.navbar-fixed-top(role='navigation') .container .navbar-header button.navbar-toggle(data-toggle='collapse', data-target='#bs-example-navbar-collapse-1') spansronly span.icon-bar span.icon-bar span.icon-bar #bs-example-navbar-collapse-1.collapse.navbar-collapse ul.nav.navbar-nav li a(href='/recipes/bbq') Tab1 li a(href='/recipes/bbq') Tab2 div.container block content 这是内容的扩展布局 扩展布局 块内容.jumbtroon h1 ='testing' 我把div.container放在第一个div的相同位置 这是呈现的HTML <html> <head> <title> Arrivals </title> <link href="bootstrap.min.css" rel="stylesheet"></link> <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet"></link> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> […]
GraphicsMagick使用nodejs不能返回正确的图像
我正在使用GraphicsMagick。 这是图像： https://hbr.org/resources/images/article_assets/hbr/1405/F1405A_A.gif 我用来裁剪： 我的代码在这里： gm(request(url), "myimage.jpeg") .resize(270, 270, '^') .gravity('Center') .quality(50) .crop(270,270) .compress('JPEG') .flatten() .stream(function (err, stdout, stderr) { if (err) console.log(err); else { //upload the file file.uploadFileFromGm(fileDetails, stdout, cb); } }); 代码工作正常。 但是我得到了一个透明的图像，左侧是空的。 我得到了以下图像： 为什么白色背景不能在透明部分工作？ 任何想法如何解决这个问题？
正确的Autoprefix插件为我的less中间件节点expressjs
目前我使用较less的中间件（ https://www.npmjs.com/package/less-middleware ）。 我不满意这个解决scheme，因为less-middlware创build一个编译的css文件。 我想要一个记忆的解决scheme，我可以通过expressjs路由。 此外，我想与一个适当的autoprefix解决scheme，因为有许多很好的CSS技术，我不能使用，因为我需要很多时间来添加供应商的前缀。 有没有人知道一个更好的解决scheme，即时编译而不输出一个单独的CSS文件。 这个解决scheme可以提供某种自动修复function吗？ 提供较less的中间件是否提供自动修复function？ 我还没有find那个方向。
Twitter Bootstrap和typeahead不能一起正常工作
下面的Jade代码 body div.container div.jumbotron h2 What do you want to find? form(action='/search', method='get') div.input-group input.typeahead.form-control( type='text', name='q', placeholder='Search' ) div.input-group-btn button.btn.btn-default(type='submit') i.glyphicon.glyphicon-search 转换为这个HTML（根据Chrome的F12）： <div class="container"> <div class="jumbotron"> <h2>What do you want to find?</h2> <form action="/search" method="get"> <div class="input-group"><span class="twitter-typeahead" style="position: relative; display: inline-block;"><input type="text" class="typeahead form-control tt-hint" readonly="" autocomplete="off" spellcheck="false" tabindex="-1" dir="ltr" style="position: absolute; top: […]
