标签: styling

我正在使用名为 Skuid 的 Salesforce 应用程序。我只能通过 CSS / Javascript 进行样式设置，而无法访问 HTML。

无论如何，我正在设计一个联系表单，这就是各个字段的样式：

<div class="nx-field nx-modified required" data-uid="20"><textarea></textarea></div>

它们每个都有一个唯一的“data-uid”号。

如何在 CSS 中定位 data-uid="20"？有办法做到吗？我四处寻找，却什么也没找到。

请帮忙。

谢谢！

我已经能够通过传递自定义 muiTheme 属性来自定义 Material-UI 的许多颜色和间距相关属性，但似乎没有与任何特定状态下按钮的文本颜色相对应的调色板元素。

在本例中，我为 muiTheme 使用 #4275c7 的 Primary1Color - 并且主按钮文本显示为黑色。考虑到这种原色，白色文本看起来会更好并且更容易阅读。

我已经尝试过设置palette.primaryColor/primaryTextColor、button.primaryTextColor和raisedButton.textColor/primaryColor/primaryTextColor。它们都没有驱动按钮文本着色。我是否缺少一个明显的属性，或者是否需要不同类型的配置？

作为参考，这是我当前的 muiTheme 声明：

export const muiTheme = getMuiTheme({
  fontFamily: 'Roboto, sans-serif',
  borderRadius: 2,
  spacing: {
    iconSize: 24,
    desktopGutter: 24,
    desktopGutterMore: 32,
    desktopGutterLess: 16,
    desktopGutterMini: 8,
    desktopKeylineIncrement: 64,
    desktopDropDownMenuItemHeight: 32,
    desktopDropDownMenuFontSize: 15,
    desktopDrawerMenuItemHeight: 48,
    desktopSubheaderHeight: 48,
    desktopToolbarHeight: 56
  },
  palette: {
    primary1Color: '#4275c7',
    primaryTextColor: MaterialColors.white,
    primaryColor: MaterialColors.white,
    primary2Color: MaterialColors.cyan700,
    primary3Color: MaterialColors.grey400,
    accent1Color: MaterialColors.pinkA200,
    accent2Color: MaterialColors.grey100,
    accent3Color: MaterialColors.grey500,
    textColor: MaterialColors.darkBlack,
    secondaryTextColor: (0, MaterialColorManipulator.fade)(MaterialColors.darkBlack, 0.54),
    alternateTextColor: MaterialColors.white,
    canvasColor: MaterialColors.white, …

如何将 hr 分隔线居中？由于某种原因，尽管有文本中心引导类，它还是左对齐的。居中前后的文本！\n您可以在此处查看： http: //www.mokado.pl/index.html#about

<section class="about page-section bg-primary" id="about">\n      <div class="container">\n        <div class="row justify-content-left">\n          <div class="text col-lg-4 text-center">\n            <h2 class="text-white mt-0">Mokado</h2>\n            <hr class="divider light my-4 text-center" />\n            <p class="text-white mb-4">\n              Ide\xc4\x85 marki Mokado jest po\xc5\x82\xc4\x85czenie estetyki i komfortu... \n            </p>\n            <!-- <a class="btn btn-light btn-xl js-scroll-trigger" href="#services"\n              >Get Started!</a\n            > -->\n          </div>\n        </div>\n      </div>\n    </section>\n

我正在映射一个名为 items2

items2: [
  {
    id: 1,
    title: 'TRENDING ON THE COURT',
    image1: 'https://c.static-nike.com/a/images/f_auto/dpr_2.0/h_500,c_limit/8ef2ada7-0cf4-43d4-a0a1-4a60e3071b06/jordan.jpg',
    image2: 'https://c.static-nike.com/a/images/f_auto/dpr_2.0/h_500,c_limit/1b387797-073a-4f60-8b67-9485c23ca556/jordan.jpg',
    image1title: 'AIR JORDAN XXXIV SE',
    image2header: 'L.A BORN',
    image2title: 'JORDAN "WHY NOT?" ZERO.3',
    a1text: 'Shop',
    a2text: 'Shop'

  },
  {
    id: 2,
    title: 'TRENDING ON THE STREETS',
    image1: 'https://c.static-nike.com/a/images/f_auto/dpr_2.0/h_500,c_limit/ac454c04-2d8b-4cf5-b73a-7245545b6f7c/jordan.jpg',
    image2: 'https://c.static-nike.com/a/images/f_auto/dpr_2.0/h_500,c_limit/de7332be-8c0d-405f-af9e-201ba9f61ab3/jordan.jpg',
    image1title: 'JORDAN AIR MAX 200',
    image2title: "JORDAN WOMEN'S FLIGHT CAPSULE",
    a1text: 'Shop',
    a2text: 'Shop'
  },
  {
    id: 3,
    title: 'MEMBER ACCESS',
    image1: 'https://c.static-nike.com/a/images/f_auto/dpr_2.0/h_500,c_limit/2225370e-a461-4ea3-ac94-3ece70dc3575/jordan.jpg',
    image2: 'https://c.static-nike.com/a/images/f_auto/dpr_2.0/h_500,c_limit/037f5213-a631-4e91-9c70-9187aefda947/jordan.jpg',
    image1header: "'JORDAN UNITE COLLECTION'",
    image1title: 'AIR JORDAN III',
    image2title: …

我正在使用Material ui 的选项卡，并且能够对选项卡的指示器进行更改。但是，我正在尝试使用样式将指示器的宽度减小到每个选项卡的固定宽度。但似乎指标的位置靠左并带有一些计算值，并且给它一个宽度不会使指标居中对齐。找不到合适的解决方案，请帮助我。这是可编辑的CodeSandbox。

找到以下片段：

1. 默认全角标签。指标占据基本按钮的全宽：

2. 指示器的宽度固定，但未与选项卡标签下方的中心对齐。

我正在构建一个应用程序，以各种视觉形式显示股票相关性数据，包括应用了热图的矩阵。我的热图是通过将相关矩阵数据帧传递到 IPy Widgets 输出中来创建的，因此我可以稍后将其显示为 VBox 的一部分。我已成功应用背景渐变并将数字格式设置为 2dp。谁能帮我编辑这个功能来减小字体大小，我只是想缩小一点？

注意：我选择使用 matplotlib 上的数据框样式来执行此操作，因为在以我想要的方式显示输出时遇到了许多问题。我还有一个功能可以下载数据框，以便在应用样式后表现出色。

我尝试将以下代码行放在笔记本的开头，这样我就可以将其保留在函数之外，但一旦数据帧传递到输出，它似乎就会被忽略。

pd.options.display.float_format = "{:,.2f}".format 

这是我的代码示例：

import seaborn as sns
import ipywidgets as ipw
import pandas as pd
import numpy as np

#Sample Data
data = np.random.randint(5,30,size=500)
df = pd.DataFrame(data.reshape((50,10)))
corr = df.corr()

#Function produces dataframe as Output
def output_heatmap_df(df):
    out = ipw.Output()
    with out:
        display(df.style\
                .background_gradient(cmap=sns.diverging_palette(220,10, as_cmap=True),axis=None).format("{:,.2f}"))
        out.layout.width='1600px'
    return out

output_heatmap_df(corr)

我有这个页面:

http://www.comehike.com/hiking.php

        <div style="align:center">
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=217585988283772&amp;xfbml=1"></script>
<fb:like href="" send="true" width="450" show_faces="false" action="recommend" font=""></fb:like>
        </div>

我正在使用此代码尝试集中对齐Facebook共享按钮,但它没有发生.

知道如何中心对齐它吗？

我想知道我是否可以像这样制作qtip bubble looke:

请注意我使用4张图片:左,中,右和下;

我不希望你们为我服务但是我想确保它在我开始之前是可行的,如果你能给我一个指导或开始的方向.

<div class="qtip qtip-stylename">
   <div class="qtip-tip" rel="cornerValue"></div>
   <div class="qtip-wrapper">
      <div class="qtip-borderTop"></div> // Only present when using rounded corners
      <div class="qtip-contentWrapper">
         <div class="qtip-title"> // All CSS styles...
            <div class="qtip-button"></div> // ...are usually applied...
         </div>
         <div class="qtip-content"></div> // ...to these three elements!
      </div>
      <div class="qtip-borderBottom"></div> // Only present when using rounded corners
   </div>
</div>

问题是我知道如何设置顶部/底部图像,而不是左/右图像:s

我有2 Button,当点击时,添加一个新段落或删除当前段落.这是使用完成的jQuery.我也jQuery用来将段落文本的颜色从黑色更改为红色hover.我遇到的问题是,在添加新段落后jQuery,悬停效果未应用于它.它适用于原始段落,但不适用于动态创建的段落.

当我查看source code页面时,我看到原始段落应用了内联样式,但不是我添加的内容jQuery.我一直在寻找最后一小时试图寻找解决方案,但到目前为止没有一个对我有用.我发现了一些类似的问题,但解决方案要么对我不起作用,要么我没有正确应用它们.问题是我jQuery几个小时前开始学习,因此无法确定我是在修理某些东西还是让它变得更糟.此外,我所看到的大多数问题都与jQuery移动设备有关,因为我正在使用我的电脑,这让我更加困惑.

http://jsfiddle.net/2Xh75/

HTML

<button>Add line</button>
<button>Remove line</button>

<div id="p_wrap">
    <p> Original Line </p>
    <p> Original Line </p>
    <p> Original Line </p>
</div>

jQuery的

$(document).ready(function(){

    //Add line   
    $("button:nth-of-type(1)").click(function(){
        $("#p_wrap").append("<p>New Line</p>");
    });

    //Remove line
    $("button:nth-of-type(2)").click(function(){
    $("p:last-of-type").remove();
    });

    //Hover effect
    $("p").hover(
      function(){
          $(this).css("color", "red");
      },
      function(){
          $(this).css("color", "black");
      }
    );

}); // Document Ready End

以下是我已经看过的一些问题:

强制jQuery Mobile重新评估动态插入内容的样式/主题

动态添加内容后,jQuery Mobile不会应用样式

jquery样式未应用于动态创建

我提前道歉,因为这可能是一个noob问题,但它让我难过,我会感激任何帮助.

-谢谢

我正在使用以下函数在地图上设置折线样式:

countyLayer.addListener('click', function(event) {

  countyLayer.overrideStyle(event.feature, {strokeWeight: 8});

});

现在我想在点击折线时删除样式,如果之前已设置样式.

我试过这个:

countyLayer.addListener('click', function(event) {

  if (feature.strokeWeight == 8){  //problem is here I think ?

     countyLayer.overrideStyle(event.feature, {strokeWeight: 2});
  }
   else {
     countyLayer.overrideStyle(event.feature, {strokeWeight: 8});
   }
 });

我试着在这里获得一些帮助:https://developers.google.com/maps/documentation/javascript/examples/layer-data-dynamic 但他没有解释如何删除点击样式

谢谢你的帮助