小编Min*_*han的帖子

如何为标题标题添加部分边框？

我必须在标题文本中添加一个时尚的边框,如下所示:

但我不知道该怎么做.

我试过下面的代码,border-bottom但看起来不太好.

h1 {
  font-size:30px;
  color:#000;
  border-bottom: 1px solid #ccc;
  padding-bottom:5px;
}

Run Code Online (Sandbox Code Playgroud)

<h1>Navigation</h1>

Run Code Online (Sandbox Code Playgroud)

html css

Min*_*han

2017 11-18

33
推荐指数

6
解决办法

3804
查看次数

使用Masonry.JS和Vue.JS

我知道如何使用masonry.js除了vue.但是,我有问题让它运行并在vue框架内正确调用.我在创建或准备好的内部调用它,但似乎都没有正确形成网格.我怎样才能让这个在框架内工作？哦,我确实在此脚本之前的html中调用了jquery.这是组件内部的内容:

编辑:

我可以看到砌体通过使用JS指定其高度并将项目更改为绝对位置来影响网格.但是,它没有正确放置它们.它将它们堆叠在彼此上面而不是像它应该在网格中的并排侧面.

<template>
  <div class="projects--container">
    <div class="inner-section inner--options">
        <div class="grid">
            <div class="grid-item"></div>
            <div class="grid-item"></div>
            <div class="grid-item"></div>
        </div>
    </div>
  </div>
</template>

<script>
 export default{
    ready: function () {
        this.mason();
    },
     data: function () {
         return {
             options: [
                 {
                   option: 'projects',
                     phrase: 'for clients',
                     slogan: 'slogan...'
                 },
                 {
                     option: 'sides',
                     phrase: 'for us',
                     slogan: 'we love what we make'
                 },
                 {
                     option: 'moments',
                     phrase: 'with the crew'
                 }
             ]
         }
     },
     methods: {
         revert: function () {
             this.$dispatch('return-home', …

Run Code Online (Sandbox Code Playgroud)

javascript jquery jquery-masonry vue.js

Ric*_*ore

2017 09-05

16
推荐指数

3
解决办法

3744
查看次数

数字和文本之间的不一致差距

我有奇怪的间距问题.有数字和每个文本平行.并且在1,4,7和"每个"文本之间存在不同的间距.我们如何解决这个问题,或者无法修复.我没有使用任何间距和额外的CSS属性.

@import url('https://fonts.googleapis.com/css?family=Spectral');
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Spectral');

.bigger {
  font-size: 40px;
}

p {
  font-family: 'Open Sans', sans-serif;
}

Run Code Online (Sandbox Code Playgroud)

<p>
  <span class="bigger">81</span>
  <small>each</small>
</p> <br>
<p>
  <span class="bigger">84</span>
  <small>each</small>
</p> <br>
<p>
  <span class="bigger">87</span>
  <small>each</small>
</p> <br>

Run Code Online (Sandbox Code Playgroud)

html css fonts typography

Kum*_*mar

2017 06-16

10
推荐指数

2
解决办法

558
查看次数

如何通过javascript或jquery隐藏源代码和检查元素？

我想禁用我的网页源代码并检查元素栏。我用这个脚本做到了。但是如果我" view-source: "在我的 url 之前写，源代码将被显示。我怎样才能解决这个问题？有没有可能隐藏源代码？好的答案必须赞赏

<script>

  document.onkeydown = function(e) {
    if(e.keyCode == 123) {
     return false;
    }
    if(e.ctrlKey && e.shiftKey && e.keyCode == 'I'.charCodeAt(0)){
     return false;
    }
    if(e.ctrlKey && e.shiftKey && e.keyCode == 'J'.charCodeAt(0)){
     return false;
    }
    if(e.ctrlKey && e.keyCode == 'U'.charCodeAt(0)){
     return false;
    }

    if(e.ctrlKey && e.shiftKey && e.keyCode == 'C'.charCodeAt(0)){
     return false;
    }      
 }

</script>

Run Code Online (Sandbox Code Playgroud)

html javascript css jquery

Jis*_*V S

2016 08-12

9
推荐指数

2
解决办法

5万
查看次数

字体CSS速记需要字体大小吗？

我想用fontCSS缩写包括所有字体属性(如font-style,font-weight,font-size,等).

如果我使用所有属性,它都有效.

p.ex1 {
    font: 15px arial, sans-serif;
}

p.ex2 {
    font: italic bold 12px/30px Georgia, serif;
}

Run Code Online (Sandbox Code Playgroud)

<p class="ex1">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>
<p class="ex2">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. …

Run Code Online (Sandbox Code Playgroud)

html css

Min*_*han

2017 01-29

9
推荐指数

1
解决办法

181
查看次数

为什么Twitter Bootstrap添加:: before和:: after？

我注意到当我检查使用bootstrap类生成的代码时,CSS中的属性往往会有很多:: after和:: before.下面是一个例子(来自w3schools网站).

有人可以广泛地解释一下这些额外属性的设计目标,以及为什么它们似乎出现在几乎所有元素上？

据我所知,他们将所有被排除的元素放入表格元素并添加一个空的文本空间.我假设这是为了布局目的,但我想更多地了解它的原因.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Grid</h1>
  <p>This example demonstrates a 50%/50% split on small, medium and large devices. On extra small devices, it will stack (100% width).</p>
  <p>Resize the browser window to see the effect.</p>
  <div class="row">
    <div class="col-sm-6" style="background-color:yellow;">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et …

Run Code Online (Sandbox Code Playgroud)

html css pseudo-element twitter-bootstrap

Rob*_*bin

2016 10-17

6
推荐指数

1
解决办法

5681
查看次数

如何设置嵌套对象的Form.Item名称

const initalValue: any = {

        HIGH: {
          firstRespondedTime: 60000000000,
          everyResponseTime: 60000000000,
          resolutionTime: 300000000000,
        },
 };

Run Code Online (Sandbox Code Playgroud)

我想设置表格。项目名称firstRespondedTime那么在antd上如何实现

forms reactjs antd

Hum*_*ien

2022 01-12

6
推荐指数

1
解决办法

3960
查看次数

焦点问题上的自定义html输入框

我正在尝试开发一个HTML输入框,如下图所示:

我使用以下代码制作:

input[type=text] {
    background: transparent;
    border: none;
    border-bottom: 1px solid #000000;
     padding: 2px 5px;
}
input[type=text]:focus
{
    border: none;
    border-bottom: 1px dashed #D9FFA9;
}

Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  Name :  <input type="text" />
  
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

问题:
当我对输入框进行聚焦并开始输入文本时,输入框周围会出现一个蓝色边框,如下图所示.

我必须删除这个蓝色边框.怎么做？

html css

rus*_*bit

2016 08-08

5
推荐指数

1
解决办法

686
查看次数

css行是什么:*[class] .testClass {}实际上是什么意思？

我刚刚被聘请为一家营销公司创建互动电子邮件,这是一些前沿的东西.

我正在浏览离开这里的那个人的模板,他的CSS有一些我无法弄清楚的东西.我负责创建新的CSS文件和模板,但我以前从未见过这个.有人能帮我弄清楚这一切意味着什么吗？我无法在网上找到任何相关信息

例如,有些领先*[class],有些领先,*[id]有些领先,没有领先.

这是一个例子.

*[class].h83 {
    height:43px !important;
}

*[class].pt50 {
    padding-top:50px;
}

*[class].pl30 {
    padding-left:30px;
}

*[class].anim_h {
    display:none;
}

*[id]#MMGContainer {
    width:640px !important; 
    height:500px !important;
    position:relative; 
    text-align:left; 
    display:block;
    overflow:hidden;                
}

*[id]#MMGContainer #hotspot_03_btn.hotspot:after {                
    top:166px;
    padding:0;
    display:inline-block; 
    content: url(images/1/icon-2.png);
}

#mobile-cta, .mobile-only { 
    display: block !important;
    max-height: none !important;
    width: 100% !important; 
    height: auto !important; 
    overflow: visible !important; 
}

Run Code Online (Sandbox Code Playgroud)

html css email interactive

lum*_*nol

2017 04-11

5
推荐指数

1
解决办法

524
查看次数

CSS 隐藏每行的第一个 li 分隔符 - 响应式水平 css 菜单

有没有办法隐藏每行第一个元素中的分隔符？

我有一个响应式水平菜单，当窗口变小时会添加额外的行。

更糟糕的是，最终用户可以在此菜单中添加和删除项目，或者只是更改菜单项的顺序。

使用 first-child 不是一个选项，因为它只适用于第一行。当屏幕变得太小时，以下行将在它们的第一个 li 元素上有分隔符。

#block-views-solutions-block{ 
  box-sizing: border-box; 
  text-transform: uppercase; 
  font-weight: bold; 
  width: 92%; 
  max-width: $maxWidth; 
  margin: 20px auto 0 auto; 
  padding: 15px 0 0 0; 
  background-color: $colorBlue;  
  .content{ 
    box-sizing: border-box;
    width: 100%; 
    overflow: hidden;
  }
  ul{ 
    margin: 0 !important; 
    padding: 0 40px; 
    text-align: center; 
  }
  li{ 
    display: inline-block; 
    padding: 0 !important;
    &:before { 
      position: relative; 
      top: 0.125em; 
      display: inline-block; 
      width: 1px; 
      height: 1em; 
      border-left: solid 2px #fff; 
      content: " "; 
    }
    &:first-child{
      &:before{ border-left: none; } …

Run Code Online (Sandbox Code Playgroud)

css menu sass separator responsive

作者

2016 11-07

5
推荐指数

1
解决办法

1387
查看次数