小编Chi*_*ler的帖子

CSS 列不会水平对齐

我正在使用列数来允许我的文本流入两个不同的列,但第一列(最左侧)的顶部低于另一列?

#col {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}
Run Code Online (Sandbox Code Playgroud)
<div id="col">
  <h3>
    Options
  </h3>
  <h3>
    Features and Benefits
  </h3>
  <h3>
    Specifications
  </h3>
  <h3>
    hey
  </h3>
  <h3>
    30 Years Experience
  </h3>
</div>
Run Code Online (Sandbox Code Playgroud)

我已经包含了有限的代码部分,即使我用文本填充它,列的顶部仍然存在差异。

html css two-columns

5
推荐指数
1
解决办法
5351
查看次数

在 create-react-app 中使用 Socket.io-client 的 WebSockets 代理

我正在尝试为我的反应应用程序添加一个代理 socket.io-client

我使用的是setupProxy.jshttp-proxy-middleware工作正常的API,但不适合插座

带有节点 js 的服务器代码

var app = require('express')();
var http = require('http').createServer(app);
var io = require('socket.io')(http);

app.get('/', function (req, res) {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', function (socket) {
  setInterval(() => {
    console.log('emit event');
    io.emit('event', { data: 'worked successfully!' });
  }, 1000);
});

http.listen(8080, function () {
  console.log('listening on *:8080');
});
Run Code Online (Sandbox Code Playgroud)

带有反应的客户端代码

function App() {
  const socket = socketIOClient('/', {
    transports: ['websocket'],
  });

  useEffect(() => {
    socket.on('connect', () => {
      console.log('connected');
    });
    socket.on('event', (data) …
Run Code Online (Sandbox Code Playgroud)

proxy websocket node.js socket.io reactjs

5
推荐指数
1
解决办法
2259
查看次数

如何获得 SVG 折线点的百分比?

我希望能够创建 SVG 路径,其中 0,0 位于屏幕左上角,100,100 位于右下角。

这就是我到目前为止所拥有的,它只是在中心创建了图表,而不是我想要的。

* {
  margin: 0;
  padding: 0;
}

html,
body,
svg {
  overflow-x: hidden;
  overflow-y: hidden;
  width: 100%;
  height: 100%;
}

polyline {
  fill: none;
  stroke: gray;
  stroke-width: 5;
}
Run Code Online (Sandbox Code Playgroud)
<svg viewbox="0 0 100 100">
      <polyline points="0,0 5,10 20,20 30,5 50, 20, 100,100">
    </svg>
Run Code Online (Sandbox Code Playgroud)

有人可以帮忙吗?有可能吗?

html css svg

4
推荐指数
1
解决办法
2650
查看次数

如何git添加整个文件夹

我是git的新手,正在尝试git添加我的整个工作目录,但收到错误消息:

fatal:pathspec“文件夹”与任何文件都不匹配。

执行此命令时,我在工作目录中,我在做什么错?此外,是否最好提交整个文件夹而不是逐个文件提交?谢谢

git github

3
推荐指数
2
解决办法
1万
查看次数

HTML 文本不显示为白色

我有 html 文本,用 css 颜色为白色。我还将不透明度设置为 0.5,但这不会改变字体颜色。它应该保持白色。

有没有解决这个问题而不删除不透明度或背景颜色?

body {
  background: green;
}

.second-b {
  background-image: url(images/town.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.color-box {
  width: 100%;
  height: 300px;
  background-color: red;
  opacity: 0.5;
  line-height: 300px;
  text-align: center;
}

.color-box-content {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
  color: white;
  font-size: 22px;
}
Run Code Online (Sandbox Code Playgroud)
<div class="second-b">
  <div class="color-box">
    <div class="color-box-content">Lorem ipsum</div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

html css

3
推荐指数
1
解决办法
1093
查看次数

占位符颜色不会改变

我的占位符颜色不适用,我知道如何更改输入的占位符颜色但在此代码中它不会让我改变颜色

有人可以帮忙吗?

form {
  background-color: #4CAF50;
  padding: 30px;
  color: #fff;
}

 ::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #4CAF50;
}

 :-moz-placeholder {
  /* Firefox 18- */
  color: #4CAF50;
}
Run Code Online (Sandbox Code Playgroud)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<form>
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" placeholder="Email address" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" placeholder="Password" id="pwd">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
Run Code Online (Sandbox Code Playgroud)

html css twitter-bootstrap

3
推荐指数
1
解决办法
2482
查看次数

如何通过CSS屏蔽给定div中的图像?

基本上,我正在做一个看起来像这样的项目:

当鼠标在图像上移动时,div内的图像将通过动画放大,但只应显示div内部的图像部分,并且应剪切外部部分.根据div的宽度和高度,有没有办法剪辑图像?在我的情况下,它只在鼠标悬停在它上面时放大,但它没有被剪裁.

$('.thumbnail').on('mouseover',
  function() {
    $(this).find('.thumb_pic').addClass('hover_effect');
  }
);

$('.thumbnail').on('mouseout',
  function() {
    $(this).find('.thumb_pic').removeClass('hover_effect');
  }
);
Run Code Online (Sandbox Code Playgroud)
.thumbnail {
  display: inline-block;
  position: relative;
}

.thumb_pic {
  width: 500px;
  padding: 5px;
  transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -webkit-transition: all .5s ease-in-out;
}

.hover_effect {
  transform: scale(1.2, 1.2);
  -o-transform: scale(1.2, 1.2);
  -ms-transform: scale(1.2, 1.2);
  -moz-transform: scale(1.2, 1.2);
  -webkit-transform: scale(1.2, 1.2);
}

.mask {
  opacity: 0;
  position: absolute;
  top: 5px;
  left: 5px;
  width: 500px;
  height: 500px; …
Run Code Online (Sandbox Code Playgroud)

html javascript css jquery mask

1
推荐指数
1
解决办法
724
查看次数

无法在CSS中设置边框的宽度

我在HTML中设置了两个段落:

需要注意的是在宽度pp1是相同的:

p {
  font-family: calibri;
  font-size: 13px;
  border-style: double;
  text-align: center;
  height: 20px;
  width: 500px;
  margin-bottom: 80px;
  padding: 2cm 2cm;
}

p1 {
  font-family: impact;
  font size: 20px;
  border-style: groove;
  text-align: center;
  height: 20px;
  width: 500px;
  margin-bottom: 80px;
  padding: 2cm 2cm;
}
Run Code Online (Sandbox Code Playgroud)
<p>This is a paragraph</p>

<p1>This is another paragraph</p1>
Run Code Online (Sandbox Code Playgroud)

但是,在Web浏览器中预览时,边框的宽度会显示不同.是什么导致了这个?

如果我改变widthp1不同的值,在预览边框的宽度也不改变.但我能够p按预期调整宽度.

html css

1
推荐指数
1
解决办法
125
查看次数