下拉框提示或其他信息

通常需要在页面上放置任何单词,短语或段落的提示或附加信息。

以明文形式执行此操作并不总是方便,因为文章的主要线程可能会丢失,因此在这种情况下,最好使用通过鼠标单击打开的隐藏文本。

点击的对象可以是文本的选定部分或“帮助”部分。 位于便利的位置。

附加信息将在单独段落中的文本的选定部分下打开,而所有其他内容将移动到底部,释放选项卡的空间。

П再次单击所选文本或按钮时,带有工具提示的选项卡将关闭。

例子:

1. 突出显示的文字.

文字-文字-文字-文字-文字 文字-文字-文字-文字-文字

文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字

 
代码:

Html

<div class="spravca">文字-文字-文字-文字-文字-文字 <input type="checkbox" id="hd-1" class="reference"/>
<label for="hd-1" >Справка</label> 文字-文字-文字-文字-文字-文字
<span class="story">
文字-文字-文字-文字-文字-文字
文字-文字-文字-文字-文字-文字
</span>
<div>

Css

.reference {
display: none;
}
.reference ~ .story {
display: none;
}
.reference + label {
font-size: 16px;
padding: 0;
color: green;
cursor: pointer;
display: inline-block;
}
.reference:checked ~ .story {
display: block;
background: Snow;
padding: 10px;
}

2. Кнопка, которую можно разместить в любой части контента.

文字-文字-文字-文字-文字-文字 文字-文字-文字-文字-文字-文字

文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字

 
代码:

Html 与第一个例子中的相同.

Css

.reference {
display: none;
}
.reference ~ .story{
display: none;
}
.reference + label {
position: absolute;
top: 0;
left: 200px;
border: 1px solid #333;
border-radius: 4px;
background: #F0FFF0;
padding: 3px;
color: green;
font-size: 16px;
cursor: pointer;
display: inline-block;
}
.reference:checked ~ .story {
display: block;
background: Snow;
padding: 10px;
}
.spravca {
position: relative;
}

您还可以在您的网站风格下在css中安排下拉块。

在HTML5中,默认情况下提供了类似的选项。

它由标签实现

1. <details></details> – 可以展开和折叠的容器.

2. <summary></summary> – 可点击的标题以展开容器。 重新单击折叠容器。

此选项看起来像这样:

текст текст текст текст

 

代码:


<details>
<summary>Заголовок</summary>
текст текст текст текст
</details>

Теги details и summary 默认情况下阻止元素,因此如果需要将容器插入字符串,则需要设置属性 display: inline-block;

您还可以设置其他样式设计。

祝你创造性的成功。

Рекомендую: Готовые HTML шаблоны на русском

此条目发表在免费网站脚本分类目录。将固定链接加入收藏夹。
А так же:

发表评论

电子邮件地址不会被公开。 必填项已用*标注