跳至主要內容

other

chanchaw小于 1 分钟html

html 模板

<!doctype html>
<html lang="zh">
<head>
  <!-- 
		html lang 语言编码:
    中文(简体和繁体一样):zh
    英文:en
    所有代码见:https://www.w3school.com.cn/tags/html_ref_language_codes.asp
  -->
  <meta charset="utf-8">
  <title>语音播报</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <script type="text/javascript"></script>
</body>

去掉html原生的空白区域

*{
  padding:0px;margin:0px
}

计算宽高

概述

父容器高度基准减少指定px

父容器 div 使用了 padding 同时设置子 div 的高度为 100% 会导致子 div 超出父 div - 100%是按照父div计算的。如果要子 div 不要超过父 div 的高度,则要用到上面的计算高度 calc(100% - 50px),注意括号里面的减号两侧要有空格。

前置后置

为所有 p标签在内容前面追加“子曰”

p:before{
    content:'子曰:';
}

后置追加:

p:after{
  content: ' -- 摘自论语';
}

文本不换行显示省略号

overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap

手型光标

  1. 在目标标签上定义类 class="hoverPointer"
  2. 在 css 文件中实现样式
.hoverPointer:hover {
    cursor:pointer
}

div按照内容最大宽度

max-width: max-content