【hover隐藏·HTML元素】

CSS实现hover状态隐藏

CSS 中的 hover 状态可以在用户鼠标悬停在元素上时触发特定样式。

一、定义一个 CSS 类

我们需要定义一个 CSS 类,让它能够隐藏元素。可以通过设置元素的 display 属性为 none 来实现。

.hide{
display: none;
}

二、将这个类应用于需要隐藏的元素的初始状态

<div class="hide">
<p>这是需要隐藏的元素</p>
</div>

这样,在元素没有被悬停时就会隐藏。

三、将:hover 选择器与上面定义的 .hide 类组合使用

用 CSS 中的 hover 状态去控制这个元素的显示与隐藏

<div class="hoverable">
<p class="hide">这是需要隐藏的元素</p>
</div>
.hoverable:hover .hide{
display: block;
}

参考:https://www.yzktw.com.cn/post/1553789.html

v-show

根据真假切换元素的显示状态

  • 原理是修改元素的display,实现显示隐藏,指令后面的内容,最终都会解析为布尔值
  • 值为true元素显示,值为false元素隐藏(操作地址,频繁切换时使用,切换小消耗小)

v-if

根据真假切换元素的显示状态(操作dom元素)(不频繁切换时使用)

align

  • 设置文字在元素内显示的位置
  • align=“center”/left/right

无序列表/有序列表/自定义列表

有序列表

【hover隐藏·HTML元素】_第1张图片

<ol  type="I" start="4">
  <li>项目一</li>
  <li>项目二</li>
  <li>项目三</li>
</ol>

无序列表

【hover隐藏·HTML元素】_第2张图片

自定义列表

用 dl 标签表示自定义列表,其中的 dt 是代表列表项,而 dd 是列表项的描述。

<dl>
  <dt>芍药花</dt>
  <dd>列表项一的描述</dd>
  <dt>列表项二</dt>
  <dd>列表项二的描述</dd>
</dl>

【hover隐藏·HTML元素】_第3张图片

行内标签(可以显示在同一行)

a 标签,span 标签(span 标签最大的特点时可以把很多标签放在同一行),strong 标签,img 标签

块级标签

div 标签,

~
标签,无序列表(ul)、有序列表(ol)、自定义列表(dl)

form标签

  • form 标签有两个重要的属性,action 和 method 属性,其中 action 的属性值是表单提交的地址,method 的属性值是提交的方法。
  • method 属性规定了表单提交方式,最常用的有两种方式,分别是 GET 和 POST。其中 GET 是把表单中的参数放置在 HTTP 请求的头部发送给服务器,而 POST 是将请求参数置于请求体内发送。
<form action="表单提交地址" method="提交方法"></form>

文本类表单元素

<input type="text" />

选择类表单元素

注意:使用单选框时,每个选项一定要设置相同的 name 值,否则就没有单选的效果。

  • type=“reset” 是重置按钮
 <form>
<!--单选框-->
<input type="radio" name="选项名" value="提交值" />
<!--复选框-->
<input type="checkbox" name="选项名" value="提交值" />
 <input type="reset" />
  </form>

文件和发送类型表单

type=“file” 表示文件类型表单元素

<input type="file" name="表单名字" accept="上传文件的格式" />
<input type="submit" name="表单名字" value="表单名" />

效果如下:
【hover隐藏·HTML元素】_第4张图片

下拉列表

通过 select 和 option 标签可以实现下拉列表框,select 标签用于显示可供用户选择的下拉列表,其中的每个选项都由 option 标签标识。

<select>
  <option>选项一</option>
  <option>选项二</option>
  <option>选项三</option>
</select>

【hover隐藏·HTML元素】_第5张图片

 <form>
      <p>
        学历:
        <select name="edu">
          <option value="0">初中</option>
          <option value="1">高中</option>
          <option value="2">大专</option>
          <option value="3" selected="selected">本科</option>
          <option value="4">硕士</option>
          <option value="5">博士</option>
          <option value="6">其他</option>
        </select>
        就业城市:
        <select name="city" multiple="multiple">
          <option value="A" selected="selected">北京</option>
          <option value="B">上海</option>
          <option value="C">深圳</option>
          <option value="D">广州</option>
          <option value="E">其他</option>
        </select>
      </p>
      <p><input type="submit" name="submit" value="提交" /></p>
    </form>

【hover隐藏·HTML元素】_第6张图片

你可能感兴趣的:(蓝桥杯,html,前端,vue.js)