Nodejs开发者有没有同学也觉得黑色的导航太压抑?

Nodejs开发者有没有同学也觉得黑色的导航太压抑?

颜色太暗淡了, 看起来有点压抑… 而且界面显得很挤有没有 我倾向的风格是杂志浅色的背景区分出 div, 文字统一用暗淡的颜色 然后去掉圆角去掉阴影, 不用复杂的图标, 尽量文字标识和进行对齐 Web 的风格跟杂志类似, 而不是模仿高档汽车那么多按钮

貌似图片上传功能出了点问题, 求测试… 没图片只好上代码了, 我在 Ubuntu Chrome 下做的调试: jQuery… 你懂的…

$(".navbar-inner").removeClass()
$(".navbar").css("background-color", "hsl(240,20%,90%)")
$(".navbar .nav>li>a").css({
  "font-weight": "normal", "font-size": "13px", "line-height": "25px"
  })
$("body p").css({"font-size": "14px"})
reset_font_color = function(){$(this).css("color", "hsl(0,00%,40%)")}
reset_font_color()
$(".navbar .nav>li>a").hover(reset_font_color)
$("#q").css("background-color", "white")
$(".brand").html('CNodeJS').css({
  "font-size": "28px", "line-height": "34px", "color": "hsl(0,0%,40%)"
  })
$("a.topic_title").css({
  "font-size": "16px",
  "line-height": "34px"
})
$(".user_avatar").css({
  width: "34px",
  height: "34px"
})
$(".topic_wrap .sep10").remove()
$(".topic_wrap .col_fade").remove()
$(".panel").css({
  "box-shadow": "none"
})

$(".moon_tags").remove()
$(".board.cl").remove()


$(“pre.prettyprint”).css({
“background”: “hsl(0, 0%, 90%)”
})
$(“pre.prettyprint .str”).css({
“color”: “hsl(0, 6%, 39%)”
})
$(“pre.prettyprint .pun”).css({
“color”: “hsl(0, 0%, 55%)”
})
$(“pre.prettyprint .pln”).css({
“color”: “hsl(0, 6%, 54%)”
})
$(“pre.prettyprint .kwd”).css({
“color”: “hsl(54, 34%, 37%)”
})


6 回复

Node.js 开发者有没有同学也觉得黑色的导航太压抑?

颜色太暗淡了，看起来有点压抑… 而且界面显得很挤。有没有人也有同感？

我个人倾向于杂志风格的浅色背景，并使用不同的 div 来区分内容区域。文字统一使用暗淡的颜色，去掉圆角和阴影，不使用复杂的图标，尽量通过文字标识和对齐来增强可读性。

Web 风格应该更接近杂志的简洁明快，而不是模仿那些高档汽车那样堆满按钮。

貌似图片上传功能出了点问题，求测试…

由于没有图片，这里直接提供代码示例。我在 Ubuntu Chrome 下调试的代码如下：

// 移除原有样式
$(".navbar-inner").removeClass();

// 设置导航栏背景颜色为浅灰色
$(".navbar").css("background-color", "hsl(240,20%,90%)");

// 设置导航栏中的链接样式
$(".navbar .nav > li > a").css({
  "font-weight": "normal",
  "font-size": "13px",
  "line-height": "25px"
});

// 设置页面中段落的文字大小
$("body p").css({"font-size": "14px"});

// 重置文字颜色函数
var reset_font_color = function() {
  $(this).css("color", "hsl(0,0%,40%)");
};

// 应用重置文字颜色函数
reset_font_color();
$(".navbar .nav > li > a").hover(reset_font_color);

// 设置搜索框背景颜色为白色
$("#q").css("background-color", "white");

// 设置品牌文字样式
$(".brand").html('CNodeJS').css({
  "font-size": "28px",
  "line-height": "34px",
  "color": "hsl(0,0%,40%)"
});

// 设置话题标题样式
$("a.topic_title").css({
  "font-size": "16px",
  "line-height": "34px"
});

// 设置用户头像样式
$(".user_avatar").css({
  width: "34px",
  height: "34px"
});

// 移除多余元素
$(".topic_wrap .sep10").remove();
$(".topic_wrap .col_fade").remove();

// 设置面板样式
$(".panel").css({
  "box-shadow": "none"
});

// 移除不必要的标签和元素
$(".moon_tags").remove();
$(".board.cl").remove();

// 设置代码块样式
$("pre.prettyprint").css({
  "background": "hsl(0, 0%, 90%)"
});

// 设置代码块中不同部分的颜色
$("pre.prettyprint .str").css({
  "color": "hsl(0, 6%, 39%)"
});
$("pre.prettyprint .pun").css({
  "color": "hsl(0, 0%, 55%)"
});
$("pre.prettyprint .pln").css({
  "color": "hsl(0, 6%, 54%)"
});
$("pre.prettyprint .kwd").css({
  "color": "hsl(54, 34%, 37%)"
});

这段代码主要通过 jQuery 对页面元素进行了样式调整，使其更加符合杂志风格。通过调整背景颜色、字体大小、边距等，使得页面整体看起来更加简洁和舒适。希望这些代码对你有所帮助！


太灰色了吧，nav那边是淡紫色吗？初看有点不适应，觉得如果可以做点效果出来好

临时做的 Demo, 颜色没细调, 没多少人回帖说明喜欢黑色的人居多… 最近也没时间花这上边… 只能打住了

尝试改了下, 改出不少 Bug… 这样感觉好点不? http://huaban.com/pins/60707961/zoom/ http://huaban.com/pins/60707943/zoom/

用 theme 可以让用户自己选适合的。

Node.js开发者在构建Web应用时，确实会遇到如何选择合适的配色方案来提高用户体验的问题。深色的导航栏可能会让某些用户感到压抑，特别是在长时间浏览时。因此，使用浅色背景可以提高界面的可读性和舒适度。

根据你的描述，你希望界面采用杂志风格，以浅色背景区分不同的div，并保持文字和元素的简洁性。以下是一些调整样式的方法：

// 使用 jQuery 修改样式
$(document).ready(function() {
    // 设置导航栏背景为浅灰色
    $(".navbar").css("background-color", "hsl(240,20%,90%)");
    
    // 设置导航栏中的链接字体样式
    $(".navbar .nav > li > a").css({
        "font-weight": "normal", 
        "font-size": "13px", 
        "line-height": "25px"
    });
    
    // 设置页面主体段落字体大小
    $("body p").css("font-size", "14px");
    
    // 重置文字颜色
    reset_font_color = function() {
        $(this).css("color", "hsl(0,0%,40%)");
    }
    
    // 应用重置颜色函数
    reset_font_color();
    $(".navbar .nav > li > a").hover(reset_font_color);
    
    // 设置搜索框背景颜色
    $("#q").css("background-color", "white");
    
    // 设置品牌名称样式
    $(".brand").html('CNodeJS').css({
        "font-size": "28px", 
        "line-height": "34px", 
        "color": "hsl(0,0%,40%)"
    });
    
    // 设置主题标题样式
    $("a.topic_title").css({
        "font-size": "16px",
        "line-height": "34px"
    });
    
    // 设置用户头像尺寸
    $(".user_avatar").css({
        width: "34px",
        height: "34px"
    });
    
    // 移除多余的分割线
    $(".topic_wrap .sep10").remove();
    $(".topic_wrap .col_fade").remove();
    
    // 移除面板阴影效果
    $(".panel").css("box-shadow", "none");
    
    // 移除月标签和分类列表
    $(".moon_tags").remove();
    $(".board.cl").remove();
    
    // 设置代码块背景颜色
    $("pre.prettyprint").css("background", "hsl(0, 0%, 90%)");
    
    // 设置代码块中不同元素的颜色
    $("pre.prettyprint .str").css("color", "hsl(0, 6%, 39%)");
    $("pre.prettyprint .pun").css("color", "hsl(0, 0%, 55%)");
    $("pre.prettyprint .pln").css("color", "hsl(0, 6%, 54%)");
    $("pre.prettyprint .kwd").css("color", "hsl(54, 34%, 37%)");
});

以上代码使用jQuery来动态修改HTML元素的样式。你可以将这些样式规则应用于你的Node.js项目中，确保用户的浏览体验更加舒适。如果不需要使用jQuery，也可以直接在CSS文件中定义这些样式。

回到顶部