chbronson提出的问题

chbronson

Asked: 2024-11-14 06:37:31 +0800 CST

CSS。边框的自定义样式（删除棕褐色）

5

是否可以在不接触 .circle_img 类的情况下保留 .img_border 的颜色（以便它没有棕褐色）？

<style>
.circle_img img {
  height: 100px;
  width: auto;
  border-radius: 50%;
  filter: sepia(100%);
}
.img_border {
  border: 5px solid green;
}
</style>

<div class="circle_img">
  <img src="https://i.imgur.com/buzfQTm.png" class="img_border" alt="">
</div>

chbronson

Asked: 2023-12-22 01:53:33 +0800 CST

将文档中的所有链接括在括号 () 中

5

如何将文档中的所有链接用括号（）括起来？

(http://ссылка)

我有一个 HTML 表格，单元格中有链接。链接仅属于这种类型：http://youtu.be/t3s1STiBxqU,https://goo.su/yl0Uqzd

<tr>
    <td></td>
    <td></td>
    <td>http://youtu.be/t3s1STiBxqU</td>
</tr>

@void 选项不完全包装此类链接

<td>(http://youtu.be)/t3s1STiBxqU</td>

@Qwertiy 的选项与标签一起包装

<td>(http://youtu.be/t3s1STiBxqU</td>)

我在标签上留了一个空格，链接转过来，空格被删除了。非常感谢你们，朋友们！

chbronson

Asked: 2023-12-15 23:24:33 +0800 CST

CSS。设计带有计数器的列表 <dl>

5

CodePen上有这样一个列表的例子，是否可以将dt中的长文本与第一行的第一个字母对齐？使它看起来像这样： https://i.postimg.cc/zfj2y9V4/demo.jpg

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background-color: $body-background-color;
  font-family: $base-font-family;
  font-size: $font-size-small;
  color: $body-text-color;
  line-height: 1.5;
}

.dl-blurbs {
  display: grid;
  @include tablet-up {
    grid-template-columns: repeat(2, 1fr);
    gap: 2vw;
  }
}


/* LIST */

dl {
  counter-reset: count;
  background: $dl-gradient-right;
  padding-left: 4vw; //default is smartphone
  padding-right: 4vw;
  margin: 0;
  @include tablet-up {
    padding-left: 2vw;
  }
  @include desktop {
    padding-top: 3vw;
    padding-bottom: 3vw;
  }
}

dl+dl {
  counter-reset: counter 4;
}

dt {
  counter-increment: count;
  color: $cadet;
  font-family: $base-font-family;
  font-size: 4vw;
  text-transform: uppercase;
}

dt::before {
  content: counter(count, decimal-leading-zero)".";
  font-family: $heading-font-family;
  color: $maximum-blue;
  margin-left: -1vw;
  padding-right: 12px;
}

dd {
  margin-left: 5vw;
  margin-bottom: 2vh;
}

<section class="dl-blurbs">
  <dl>
    <dt>Design</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</dd>
    <dt>Develop</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</dd>
    <dt>Test</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</dd>
  </dl>
  <dl>
    <dt>Deliver</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</dd>
    <dt>Rinse</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</dd>

    <dt>Repeat</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</dd>
  </dl>
</section>

chbronson

Asked: 2023-10-01 17:00:21 +0800 CST

记事本++。如何在空行中插入相同的文本？

5

例如插入WWW

曾是：

空行

2号线

空行

4号线

空行

6号线

变成：

万维网

2号线

万维网

4号线

万维网

6号线

chbronson

Asked: 2023-08-11 14:43:20 +0800 CST

CSS。定位在 h1...h6 标题内和带浮动的 div 内

5

标头

<h4><span>Михаил</span><span>36 лет</span></h4>

您需要将“Mikhail”留在左侧，将“36 年”留在右侧。

这段代码：

h4>span:last-child {
  float: right;
}

.panel>div:last-child {
  float: right;
}

.sub-panel-1,
.sub-panel-2 {
  display: inline-block;
}

<section>
  <div class="row">

    <div class="col-lg-4 col-md-4">
      <h4>
        <span>Михаил</span><span>36 лет</span>
      </h4>
      <div class="panel">
        <div class="sub-panel-1">
          <span><img src="https://cdn-icons-png.flaticon.com/64/4494/4494464.png"></span>
          <span><img src="https://cdn-icons-png.flaticon.com/64/4494/4494467.png"></span>
        </div>
        <div class="sub-panel-2">
          <span><img src="https://cdn-icons-png.flaticon.com/64/4494/4494688.png"></span>
          <span><img src="https://cdn-icons-png.flaticon.com/64/4494/4494490.png"></span>
        </div>
      </div>
    </div>

    <div class="col-lg-4 col-md-4">
      ...
    </div>

  </div>
</section>

我需要清理浮子吗？（看来页面顺序并没有违反）

chbronson

Asked: 2023-07-11 14:27:19 +0800 CST

jQuery、js。对具有相同类的元素进行单独的事件处理？

5

$('.buy').click(function() {
  $(this).parents('.bottom').addClass("clicked");
});

$('.remove').click(function() {
  $(this).parents('.bottom').removeClass("clicked");
});

html,
body {
  background: #E3E3D8;
  font-family: sans-serif;
  padding: 25px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.wrapper {
  width: 300px;
  height: 500px;
  background: white;
  margin: auto;
  position: relative;
  overflow: hidden;
  border-radius: 10px 10px 10px 10px;
  box-shadow: 0;
  transform: scale(0.95);
  transition: box-shadow 0.5s, transform 0.5s;
}

.wrapper:hover {
  transform: scale(1);
  box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
}

.wrapper .container {
  width: 100%;
  height: 100%;
}

.wrapper .container .top {
  height: 80%;
  width: 100%;
  background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center;
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
}

.wrapper .container .bottom {
  width: 200%;
  height: 20%;
  transition: transform 0.5s;
}

.wrapper .container .bottom.clicked {
  transform: translateX(-50%);
}

.wrapper .container .bottom h1 {
  margin: 0;
  padding: 0;
}

.wrapper .container .bottom p {
  margin: 0;
  padding: 0;
}

.wrapper .container .bottom .left {
  height: 100%;
  width: 50%;
  background: #f4f4f4;
  position: relative;
  float: left;
}

.wrapper .container .bottom .left .details {
  padding: 20px;
  float: left;
  width: calc(70% - 40px);
}

.wrapper .container .bottom .left .buy {
  float: right;
  width: calc(30% - 2px);
  height: 100%;
  background: #f1f1f1;
  transition: background 0.5s;
  border-left: solid thin rgba(0, 0, 0, 0.1);
}

.wrapper .container .bottom .left .buy i {
  font-size: 30px;
  padding: 30px;
  color: #254053;
  transition: transform 0.5s;
}

.wrapper .container .bottom .left .buy:hover {
  background: #A6CDDE;
}

.wrapper .container .bottom .left .buy:hover i {
  transform: translateY(5px);
  color: #00394B;
}

.wrapper .container .bottom .right {
  width: 50%;
  background: #A6CDDE;
  color: white;
  float: right;
  height: 200%;
  overflow: hidden;
}

.wrapper .container .bottom .right .details {
  padding: 20px;
  float: right;
  width: calc(70% - 40px);
}

.wrapper .container .bottom .right .done {
  width: calc(30% - 2px);
  float: left;
  transition: transform 0.5s;
  border-right: solid thin rgba(255, 255, 255, 0.3);
  height: 50%;
}

.wrapper .container .bottom .right .done i {
  font-size: 30px;
  padding: 30px;
  color: white;
}

.wrapper .container .bottom .right .remove {
  width: calc(30% - 1px);
  clear: both;
  border-right: solid thin rgba(255, 255, 255, 0.3);
  height: 50%;
  background: #BC3B59;
  transition: transform 0.5s, background 0.5s;
}

.wrapper .container .bottom .right .remove:hover {
  background: #9B2847;
}

.wrapper .container .bottom .right .remove:hover i {
  transform: translateY(5px);
}

.wrapper .container .bottom .right .remove i {
  transition: transform 0.5s;
  font-size: 30px;
  padding: 30px;
  color: white;
}

.wrapper .container .bottom .right:hover .remove,
.wrapper .container .bottom .right:hover .done {
  transform: translateY(-100%);
}

.wrapper .inside {
  z-index: 9;
  background: #92879B;
  width: 140px;
  height: 140px;
  position: absolute;
  top: -70px;
  right: -70px;
  border-radius: 0px 0px 200px 200px;
  transition: all 0.5s, border-radius 2s, top 1s;
  overflow: hidden;
}

.wrapper .inside .icon {
  position: absolute;
  right: 85px;
  top: 85px;
  color: white;
  opacity: 1;
}

.wrapper .inside:hover {
  width: 100%;
  right: 0;
  top: 0;
  border-radius: 0;
  height: 80%;
}

.wrapper .inside:hover .icon {
  opacity: 0;
  right: 15px;
  top: 15px;
}

.wrapper .inside:hover .contents {
  opacity: 1;
  transform: scale(1);
  transform: translateY(0);
}

.wrapper .inside .contents {
  padding: 5%;
  opacity: 0;
  transform: scale(0.5);
  transform: translateY(-200%);
  transition: opacity 0.2s, transform 0.8s;
}

.wrapper .inside .contents table {
  text-align: left;
  width: 100%;
}

.wrapper .inside .contents h1,
.wrapper .inside .contents p,
.wrapper .inside .contents table {
  color: white;
}

.wrapper .inside .contents p {
  font-size: 13px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Обработка события в элементах с одинаковым классом</title>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="./style.css">

</head>

<body>
  <div class="wrapper">
    <div class="container">
      <div class="top"></div>
      <div class="bottom">
        <div class="left">
          <div class="details">
            <h1>Номер 1</h1>
          </div>
          <div class="buy"><i class="material-icons">add_shopping_cart</i></div>
        </div>
        <div class="right">
          <div class="done"><i class="material-icons">done</i></div>
          <div class="details">
            <h1>Номер 1</h1>
          </div>
          <div class="remove"><i class="material-icons">clear</i></div>
        </div>
      </div>
    </div>
    <div class="inside">
      <div class="icon"><i class="material-icons">info_outline</i></div>
      <div class="contents">
        Описание
      </div>
    </div>
  </div>

  <div class="wrapper">
    <div class="container">
      <div class="top"></div>
      <div class="bottom">
        <div class="left">
          <div class="details">
            <h1>Номер 2</h1>
          </div>
          <div class="buy"><i class="material-icons">add_shopping_cart</i></div>
        </div>
        <div class="right">
          <div class="done"><i class="material-icons">done</i></div>
          <div class="details">
            <h1>Номер 2</h1>
          </div>
          <div class="remove"><i class="material-icons">clear</i></div>
        </div>
      </div>
    </div>
    <div class="inside">
      <div class="icon"><i class="material-icons">info_outline</i></div>
      <div class="contents">
        Описание
      </div>
    </div>
  </div>

  <div class="wrapper">
    <div class="container">
      <div class="top"></div>
      <div class="bottom">
        <div class="left">
          <div class="details">
            <h1>Номер 3</h1>
          </div>
          <div class="buy"><i class="material-icons">add_shopping_cart</i></div>
        </div>
        <div class="right">
          <div class="done"><i class="material-icons">done</i></div>
          <div class="details">
            <h1>Номер 3</h1>
          </div>
          <div class="remove"><i class="material-icons">clear</i></div>
        </div>
      </div>
    </div>
    <div class="inside">
      <div class="icon"><i class="material-icons">info_outline</i></div>
      <div class="contents">
        Описание
      </div>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</body>

</html>

现在，当点击buy,remove 的子元素时，会对所有底部元素进行点击处理。必须仅针对一个（其）父元素 Bottom处理单击。

CSS。边框的自定义样式（删除棕褐色）

将文档中的所有链接括在括号 () 中

CSS。设计带有计数器的列表 <dl>

记事本++。如何在空行中插入相同的文本？

CSS。定位在 h1...h6 标题内和带浮动的 div 内

jQuery、js。对具有相同类的元素进行单独的事件处理？

我看不懂措辞

请求的模块“del”不提供名为“default”的导出

"!+tab" 在 HTML 的 vs 代码中不起作用

我正在尝试解决“猜词”的问题。Python

可以使用哪些命令将当前指针移动到指定的提交而不更改工作目录中的文件？

Python解析野莓

问题：“警告：检查最新版本的 pip 时出错。”

帮助编写一个用值填充变量的循环。解决这个问题

尽管依赖数组为空，但在渲染上调用了 2 次 useEffect

数据不通过 Telegram.WebApp.sendData 发送

chbronson's questions