标签: css

在图像底部创建箭头很简单.

但是,如果第二张图像不是背景而是第一张图像之后的另一张图像,这是否可能达到这样的效果:

我在codepen.io上创建了"pen"

.wrap {
  position: relative;
  overflow: hidden;
  width: 70%;
  height: 200px;
  margin: 0 auto;
}
.wrap img {
  width: 100%;
  height: auto;
  display: block;
}
.arrow {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.arrow:before,
.arrow:after {
  content: '';
  position: absolute;
  bottom: 100%;
  width: 50%;
  box-sizing: border-box;
}
.arrow:before {
  right: 50%;
  border-bottom: 20px solid #000;
  border-right: 20px solid transparent;
}
.arrow:after {
  left: 50%;
  border-bottom: 20px solid #000;
  border-left: 20px solid transparent;
}

<div …

我有一个容器是整个窗口的高度/宽度.在这个容器里面,我想要一个垂直和水平居中的表格.下面,我还想在容器的底部基线上打印一份副本.类似于下面的蹩脚插图.现在我只能让它们都垂直居中,并且找不到一个很好的方法将底部复制引脚本身放到容器的底部.

---------
|       |
|       |
|<form> |
|       |
|<copy> |
---------

.container {
  background-color: #eee;
  height: 100vh;
  width: 100vw;
  padding: 1em;
  display: flex;
  text-align: center;
  justify-content: center;
  flex-direction: column;
}

form {
  
}

.bot {
  align-self: flex-end;
}

<div class="container">
  <form>
    <input type="text" />
    <button type="submit">submit</button>
   </form>
  <p class="bot">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quae quisquam neque cupiditate adipisci magnam facilis, distinctio suscipit possimus hic voluptatibus in illo est id alias unde sapiente ab eius.</p> …

任何人都知道如何计算css px或rem中的photoshop字母间距.示例:我在photoshop中有140个字母间距.现在,CSS应该是什么？或者有没有办法与sass这样做？

我一直在努力实现这个简单的事情.我试图<TreeMenu/>用伪选择器在材料UI v1中显示/隐藏我的组件但不知何故它不起作用.这是代码:CSS:

      root: {
        backgroundColor: 'white',
        '&:hover': {
          backgroundColor: '#99f',
        },
      },

  hoverEle: {
    visibility: 'hidden',
    '&:hover': {
      visibility: 'inherit',
    },
  },
      rootListItem: {
        backgroundColor: 'white',
        display: 'none',
        '&:hover': {
          display: 'block',
          backgroundColor: '#99f',
        },
      },
      '@global': {
        'li > div.nth-of-type(1)': {
          display: 'block !important',
          backgroundColor: "'yellow',",
        },
      },

root css类在列表上工作正常但是rootListItem甚至@global li选择器都不起作用.我不确定我在选择器上做错了什么.我读了材料-ui文档并说V1支持伪选择器.

JSX:

<div>
      {props.treeNode.map(node => (
        <ListItem
          key={`${node.Type}|${node.NodeID}`}
          id={`${node.Type}|${node.NodeID}`}
          className={(classes.nested, classes.root)}
          button
          divider
          disableGutters={false}
          dense
          onClick={() => props.onNodeClick(node.Type, node.NodeID, node.NodeName)}
          title={props.adminUser ? node.NodeID : ''}
          onMouseOver={() => …

我想让下面的html显示在n个相等的列中是否有两个,三个或更多的子元素使用css网格到行元素 - Flexbox使这很容易但我无法使用css网格完成 - 任何帮助非常感谢.

<div class="row">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

我通过互联网查看了这里的问题和文章,但还没有找到满足我要求的解决方案.所以现在在2017年,是否有一种优雅的方式来实现<table>:

1. 用html + css编写(没有js)
2. 有固定的标题(不可滚动;不粘)
3. 具有可滚动性<tbody>(滚动条可能始终可见)
4. 标题和正文将正确处理调整大小并且不会使<thead>列和<tbody>列的对齐混乱
5. 不会使用嵌套表或单独的表作为标题

我正在尝试使用Angular构建一个静态站点.我想要的是将一些全局的css/js /图像文件添加到index.html

这是我的代码 index.html

<link rel="stylesheet" type="text/css" href="css/layers.css">

我css在同一级别的文件夹index.html文件

我为我添加的每个样式表收到此错误(来自ng服务与chrome)

拒绝从' http:// localhost:4200/css/layers.css ' 应用样式,因为其MIME类型('text/html')不是受支持的样式表MIME类型,并且启用了严格的MIME检查.

我也试过添加它

#.angular-cli.json
"styles": [
        "styles.css",
        "css/layers.css"
      ],

我怎样才能解决这个问题？

我的角度设置是

Angular CLI: 1.6.5
Node: 8.1.4
OS: darwin x64
Angular: 5.2.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.5
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.5
@schematics/angular: 0.1.17
typescript: 2.5.3
webpack: 3.10.0

我在React项目中使用Material UI Next.我有卡组件,里面有图像(卡片介质)和文本(卡片文本).我的文字下方还有一个按钮.我的问题是..如何使整张卡片可点击？即.无论用户是否按下卡片文本,卡片图像或按钮,都应触发我在按钮上调用的onClick事件.

我正在努力学习如何使用jquery.scombobox但是当我将scombobox添加到模态时我会陷入困境

<div id="modalA" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">My Modal</h4>
                </div>
                <div class="modal-body">
                    <select id="combo-021">
                        <option value="1">item 1</option>
                        <option value="2">item 2</option>
                        <option value="3">item 3</option>
                        <option value="4">item 3</option>
                        <option value="5">item 3</option>
                        <option value="6">item 3</option>
                        <option value="7">item 3</option>
                        <option value="8">item 3</option>
                        <option value="9">item 3</option>
                        <option value="10">item 3</option>
                        <option value="11">item 3</option>
                        <option value="12">item 3</option>
                        <option value="13">item 3</option>
                        <option value="14">item 3</option>
                        <option value="15">item 3</option>
                        <option value="16">item 3</option>
                        <option value="17">item 3</option>
                        <option value="18">item …

我有一个搜索栏,最左边 有搜索图标,如下面的小提琴 和下面的屏幕截图所示.

我用来制作搜索图标和方形边框的HTML和CSS代码是:

HTML:

<form class="back">
  <span class="fa fa-search searchicon" aria-hidden="true"> 
</span>
  <input type="text" name="search" class="extand ">
</form>

CSS:

.back{
  padding: 0.5%;
  background: #10314c;

}

.searchicon {
   float: left;
   margin-top: -20px;
   position: relative;
   top: 26px;
   left: 8px;
   color: white;
   z-index: 2;
   }

.extand {
    width: 2.4%;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background: #10314c;
    background-position: 10px 10px;
    background-repeat: no-repeat;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}
.extand-now …