关于【html】的问题- 第1页

Siarhei789654

Asked: 2024-11-10 06:12:13 +0800 CST

选择字段标签的 CSS 动画

5

如何实现类似于输入的选择动画？输入代码工作正常，标签位于字段顶部，如果字段已填充，标签将保持在那里，并且在更改焦点时保持在顶部。

<style>
.form-control:focus ~ .form-label,
.form-control:not(:placeholder-shown) ~ .form-label{
    top: -18px;
    font-size: 12px;
}
</style>
<input class="form-control" list="datalistOptionsWaybill" id="waybill" placeholder=" ">
<label for="waybill" class="form-label">Waybill</label>

如何更改CSS选择？因为，类比输入，在这种情况下不起作用

<select id="carsField" class="form-control>
   <option>car</option>
</select>
<label for="carsField" class="form-label">Car</label>

谢谢

Kira

Asked: 2024-11-08 13:03:31 +0800 CST

如何使图像高度适应网格或柔性网格？

5

我想制作一张有两列的卡片。第一个包含图像，第二个包含内容。内容高度等于 min-content 并且您希望图像高度始终相同。而且，图像的初始高度比任何内容都大。不用JS可以实现这个功能吗？

代码：

.box {
  display: flex;
  column-gap: 20px;
}

.card__content {
  height: min-content;
}

.card__img {
  overflow: hidden;
}

.card__img img {
  height: 100%;
}

.card__content p {
  margin: 0;
}

<div class="box">
  <div class="card__img">
    <img src="images/products/yummy1.jpeg" alt="">
  </div>
  <div class="card__content">
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem, asperiores!</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem, asperiores!</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem, asperiores!</p>
  </div>
</div>"

Elijah_Pris

Asked: 2024-11-06 14:24:45 +0800 CST

从 HTML 对象中减去内部区域

7

如何从径向元素中减去内部图形（或看起来像是被减去）？

现在是这样的

我希望它看起来像这样

原始代码 https://codepen.io/oliver_merz/pen/zqXZQG

.cssplay-menu {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  margin: 20px auto 0;
  width: 100%;
  max-width: 568px;
  height: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.cssplay-menu>div {
  position: relative;
  margin-bottom: 250px;
  padding-bottom: 100%;
  max-width: 100%;
  height: 0;
}

.cssplay-menu * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.cssplay-menu .holder {
  position: relative;
  padding-bottom: 100%;
  max-width: 100%;
  height: 0;
  overflow: hidden;
}

.cssplay-menu input {
  position: absolute;
  display: none;
}

.cssplay-menu .segment {
  position: absolute;
  z-index: 100;
  left: 50%;
  top: 50%;
  margin-left: -48%;
  margin-top: -48%;
  width: 96%;
  height: 96%;
  border-radius: 50%;
  overflow: hidden;
  transform: scale(0);
  transition: 0.5s cubic-bezier(.58, 2.4, 0.5, 0.5);
  transition: 0.5s ease;
}

.cssplay-menu .curve-upper {
  position: absolute;
  left: 1%;
  top: 1%;
  width: 98%;
  height: 98%;
  background: #fff;
  border-radius: 50%;
  transform: scale(0);
  transition: 0s;
}

.cssplay-menu .curve-lower {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  transform: rotate(-140deg) scale(0);
  transition: 0s;
}

.cssplay-menu .curve {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  background: #8b0000;
  transform-origin: left top;
  transform: rotate(0deg) skewY(50deg);
}

.cssplay-menu .segment label {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 50%;
  background: #008080;
  border: 1px solid #fff;
  cursor: pointer;
  transform-origin: left top;
  transition: 0.25s cubic-bezier(0, 0, 1, 1);
  transition: 0.25s ease;
}

.cssplay-menu .segment label span {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 15px;
  bottom: 25px;
  margin: auto;
  width: 35px;
  height: 35px;
  background-position: center center;
  background-repeat: no-repeat;
}

.cssplay-menu .segment label:nth-of-type(1) {
  transform: rotate(-140deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(2) {
  transform: rotate(-100deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(3) {
  transform: rotate(-60deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(4) {
  transform: rotate(-20deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(5) {
  transform: rotate(20deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(6) {
  transform: rotate(60deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(7) {
  transform: rotate(100deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(8) {
  transform: rotate(140deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(9) {
  transform: rotate(180deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(1) span {
  background: url(cubic/truck-white.png);
  transform: skewY(-50deg) rotate(0deg);
}

.cssplay-menu .segment label:nth-of-type(2) span {
  background: url(cubic/location-white.png);
  transform: skewY(-50deg) rotate(-40deg);
}

.cssplay-menu .segment label:nth-of-type(3) span {
  background: url(cubic/mail-white.png);
  transform: skewY(-50deg) rotate(-80deg);
}

.cssplay-menu .segment label:nth-of-type(4) span {
  background: url(cubic/pen-white.png);
  transform: skewY(-50deg) rotate(-120deg);
}

.cssplay-menu .segment label:nth-of-type(5) span {
  background: url(cubic/tag-white.png);
  transform: skewY(-50deg) rotate(-160deg);
}

.cssplay-menu .segment label:nth-of-type(6) span {
  background: url(cubic/wallet-white.png);
  transform: skewY(-50deg) rotate(-200deg);
}

.cssplay-menu .segment label:nth-of-type(7) span {
  background: url(cubic/video-white.png);
  transform: skewY(-50deg) rotate(-240deg);
}

.cssplay-menu .segment label:nth-of-type(8) span {
  background: url(cubic/cup-white.png);
  transform: skewY(-50deg) rotate(-280deg);
}

.cssplay-menu .segment label:nth-of-type(9) span {
  background: url(cubic/cup-white.png);
  transform: skewY(-50deg) rotate(-320deg);
}

.cssplay-menu .center {
  display: block;
  position: absolute;
  z-index: 200;
  left: 50%;
  top: 50%;
  margin-left: -20%;
  margin-top: -20%;
  width: 40%;
  height: 40%;
  border-radius: 50%;
  background: #8b0000 url(cubic/settings.png) no-repeat center center;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 0 0 2px #fff;
}

.cssplay-menu #toggle:checked+.holder .segment {
  transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
  transition: 0.5s ease;
  transform: scale(1);
}

.cssplay-menu #toggle:checked+.holder .center {
  transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
  transition: 0.5s ease;
  transform: scale(1.2);
}

.cssplay-menu #toggle:checked+.holder .curve-upper {
  transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
  transition: 1s ease;
  transform: scale(1);
}

.cssplay-menu #toggle:checked+.holder .curve-lower {
  transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
  transition: 1s ease;
  transform: rotate(-140deg) scale(1);
}

.cssplay-menu #c1:checked~.holder .segment label:nth-of-type(1),
.cssplay-menu #c2:checked~.holder .segment label:nth-of-type(2),
.cssplay-menu #c3:checked~.holder .segment label:nth-of-type(3),
.cssplay-menu #c4:checked~.holder .segment label:nth-of-type(4),
.cssplay-menu #c5:checked~.holder .segment label:nth-of-type(5),
.cssplay-menu #c6:checked~.holder .segment label:nth-of-type(6),
.cssplay-menu #c7:checked~.holder .segment label:nth-of-type(7),
.cssplay-menu #c8:checked~.holder .segment label:nth-of-type(8),
.cssplay-menu #c9:checked~.holder .segment label:nth-of-type(9) {
  background: #eb8c00;
}

.cssplay-menu #c1:checked~#toggle:checked~.holder .curve-lower {
  transform: rotate(-140deg)
}

.cssplay-menu #c2:checked~#toggle:checked~.holder .curve-lower {
  transform: rotate(-100deg)
}

.cssplay-menu #c3:checked~#toggle:checked~.holder .curve-lower {
  transform: rotate(-60deg)
}

.cssplay-menu #c4:checked~#toggle:checked~.holder .curve-lower {
  transform: rotate(-20deg)
}

.cssplay-menu #c5:checked~#toggle:checked~.holder .curve-lower {
  transform: rotate(20deg)
}

.cssplay-menu #c6:checked~#toggle:checked~.holder .curve-lower {
  transform: rotate(60deg)
}

.cssplay-menu #c7:checked~#toggle:checked~.holder .curve-lower {
  transform: rotate(100deg)
}

.cssplay-menu #c8:checked~#toggle:checked~.holder .curve-lower {
  transform: rotate(140deg)
}

.cssplay-menu #c9:checked~#toggle:checked~.holder .curve-lower {
  transform: rotate(180deg)
}

.cssplay-menu .sub {
  position: absolute;
  left: 50%;
  top: 100%;
  margin-left: -50%;
  width: 100%;
  height: 0;
  overflow: hidden;
}

.cssplay-menu .sub dl {
  position: absolute;
  top: -190px;
  left: 50%;
  margin-left: -25%;
  padding: 0;
  width: 50%;
  opacity: 0;
  transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
  transition: all 0.5s ease;
}

.cssplay-menu .sub dl dt {
  text-align: center;
  font: bold 16px/20px 'Lato', arial, sans-serif;
  color: #8b0000;
}

.cssplay-menu .sub dl dd {
  margin: 0;
  padding: 0;
  text-align: center;
  font: normal 15px/20px 'Lato', arial, sans-serif;
  color: #000;
}

.cssplay-menu .sub dl dd a {
  color: #004040;
}

.cssplay-menu #c1:checked~#toggle:checked~.sub dl:nth-of-type(1),
.cssplay-menu #c2:checked~#toggle:checked~.sub dl:nth-of-type(2),
.cssplay-menu #c3:checked~#toggle:checked~.sub dl:nth-of-type(3),
.cssplay-menu #c4:checked~#toggle:checked~.sub dl:nth-of-type(4),
.cssplay-menu #c5:checked~#toggle:checked~.sub dl:nth-of-type(5),
.cssplay-menu #c6:checked~#toggle:checked~.sub dl:nth-of-type(6),
.cssplay-menu #c7:checked~#toggle:checked~.sub dl:nth-of-type(7),
.cssplay-menu #c8:checked~#toggle:checked~.sub dl:nth-of-type(8),
.cssplay-menu #c9:checked~#toggle:checked~.sub dl:nth-of-type(9) {
  top: 20px;
  opacity: 1;
  transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5) 0.5s;
  transition: opacity 0.5s ease, top 0.5s ease 0.5s;
}

.cssplay-menu #c1:checked~#toggle:checked~.sub,
.cssplay-menu #c2:checked~#toggle:checked~.sub,
.cssplay-menu #c3:checked~#toggle:checked~.sub,
.cssplay-menu #c4:checked~#toggle:checked~.sub,
.cssplay-menu #c5:checked~#toggle:checked~.sub,
.cssplay-menu #c6:checked~#toggle:checked~.sub,
.cssplay-menu #c7:checked~#toggle:checked~.sub,
.cssplay-menu #c8:checked~#toggle:checked~.sub,
.cssplay-menu #c9:checked~#toggle:checked~.sub {
  height: 250px
}

<div class="cssplay-menu">
  <div>
    <input type="radio" id="c1" name="segment" checked="checked">
    <input type="radio" id="c2" name="segment">
    <input type="radio" id="c3" name="segment">
    <input type="radio" id="c4" name="segment">
    <input type="radio" id="c5" name="segment">
    <input type="radio" id="c6" name="segment">
    <input type="radio" id="c7" name="segment">
    <input type="radio" id="c8" name="segment">
    <input type="radio" id="c9" name="segment">
    <input type="checkbox" id="toggle" checked="checked">
    <div class="holder">
      <div class="segment">
        <label for="c1"><span></span></label>
        <label for="c2"><span></span></label>
        <label for="c3"><span></span></label>
        <label for="c4"><span></span></label>
        <label for="c5"><span></span></label>
        <label for="c6"><span></span></label>
        <label for="c7"><span></span></label>
        <label for="c8"><span></span></label>
        <label for="c9"><span></span></label>
      </div>
      <div class="curve-lower">
        <div class="curve"></div>
      </div>
      <div class="curve-upper"></div>
      <label for="toggle" class="center"></label>
    </div>
    <div class="sub">
      <dl>
        <dt>SUB MENU #1</dt>
        <dd><a href="#url">Item #1.1</a></dd>
        <dd><a href="#url">Item #1.2</a></dd>
        <dd><a href="#url">Item #1.3</a></dd>
        <dd><a href="#url">Item #1.4</a></dd>
      </dl>
      <dl>
        <dt>SUB MENU #2</dt>
        <dd><a href="#url">Item #2.1</a></dd>
        <dd><a href="#url">Item #2.2</a></dd>
        <dd><a href="#url">Item #2.3</a></dd>
      </dl>
      <dl>
        <dt>SUB MENU #3</dt>
        <dd><a href="#url">Item #3.1</a></dd>
        <dd><a href="#url">Item #3.2</a></dd>
        <dd><a href="#url">Item #3.3</a></dd>
        <dd><a href="#url">Item #3.4</a></dd>
      </dl>
      <dl>
        <dt>SUB MENU #4</dt>
        <dd><a href="#url">Item #4.1</a></dd>
        <dd><a href="#url">Item #4.2</a></dd>
        <dd><a href="#url">Item #4.3</a></dd>
        <dd><a href="#url">Item #4.4</a></dd>
        <dd><a href="#url">Item #4.5</a></dd>
      </dl>
      <dl>
        <dt>SUB MENU #5</dt>
        <dd><a href="#url">Item #5.1</a></dd>
        <dd><a href="#url">Item #5.2</a></dd>
        <dd><a href="#url">Item #5.3</a></dd>
        <dd><a href="#url">Item #5.4</a></dd>
      </dl>
      <dl>
        <dt>SUB MENU #6</dt>
        <dd><a href="#url">Item #6.1</a></dd>
        <dd><a href="#url">Item #6.2</a></dd>
        <dd><a href="#url">Item #6.3</a></dd>
      </dl>
      <dl>
        <dt>SUB MENU #7</dt>
        <dd><a href="#url">Item #7.1</a></dd>
        <dd><a href="#url">Item #7.2</a></dd>
        <dd><a href="#url">Item #7.3</a></dd>
        <dd><a href="#url">Item #7.4</a></dd>
      </dl>
      <dl>
        <dt>SUB MENU #8</dt>
        <dd><a href="#url">Item #8.1</a></dd>
        <dd><a href="#url">Item #8.2</a></dd>
        <dd><a href="#url">Item #8.3</a></dd>
        <dd><a href="#url">Item #8.4</a></dd>
      </dl>
      <dl>
        <dt>SUB MENU #9</dt>
        <dd><a href="#url">Item #9.1</a></dd>
        <dd><a href="#url">Item #9.2</a></dd>
        <dd><a href="#url">Item #9.3</a></dd>
        <dd><a href="#url">Item #9.4</a></dd>
      </dl>
    </div>
  </div>
</div>

сас

Asked: 2024-11-05 04:49:12 +0800 CST

CSS 不与 HTML 链接

6

我不明白他们为什么不互相交流。

这是我的 html/css

.first #name {
  text-align: center;
  border: 2px solid #000000;
  padding: 10px 20px 10px 20px;
}

div {
  font-weight: 900;
  text-align: center;
}

#span {
  display: block;
  padding: 0.4em;
  width: 150px;
  background-color: #ccc;
  box-shadow: 0 0 0 1px #aaa;
  border-radius: 5px;
  text-align: center;
}

a {
  text-decoration: none;
}

a:link,
a:visited {
  color: #000;
}

#second {
  text-align: center;
}

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Gefestia</title>
</head>

<body>
  <div class="first">
    <div id="name">GEFESTIA</div>
    <div id="phone">Контактный номер: +7(916)303-33-92</div>
    <div id="rem">РЕМОНТ КВАРТИР ПОД КЛЮЧ</div>
    <div id="mosc">В МОСКВЕ И МОСКОВСКОЙ ОБЛАСТИ</div>
    <div id="fast">Быстро | Качественно | В срок</div>
    <a href="#link"><span>Рассчитать стоимость</span></a>
  </div>
  <!--div id="link">Рассчитать стоимость ремонта квартиры у нас</div> это в самый низ страницы-->
  <div id="second">
    <div>Мы Gefestia - ремонтно-подрядная организация, готовая на себя взять ответственность за создание уюта в вашем доме.</div>
    <div>За 10 лет работы мы сдали 500 квартир и 25 ремонтируются в настоящее время. Посмотрите как мы это делаем!</div>
  </div>

Alhimik_d

Asked: 2024-11-03 13:42:34 +0800 CST

为什么文字显示在背景下面而不是上面？以及如何修复它

5

body {
  font-family: "Rostov";
  color: #CD2C24;
  font-size: 32px;
  letter-spacing: 5px;
  z-index: 2;
}

h1 {
  z-index: 2;
}

div {
  height: 100vh;
  z-index: 1;
}

.striped {
  background: linear-gradient( lightblue 80%, gray 20%);
}

@font-face {
  font-family: "Rostov";
  src: url("../fonts/Rostov.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
  z-index: 2;
}

<center>
  <div class="striped"></div>
  <h1>Какие бывают технические зависимости, и как от них избавиться</h1>
</center>

选择字段标签的 CSS 动画

如何使图像高度适应网格或柔性网格？

从 HTML 对象中减去内部区域

CSS 不与 HTML 链接

为什么文字显示在背景下面而不是上面？以及如何修复它

我看不懂措辞

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

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

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

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

Python解析野莓

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

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

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

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

问题[html]