CSS之高级元素的使用 (七)：列表元素、表格元素、表格合并、表单元素、表单常见属性

AHuSjCoding

已于 2023-06-10 15:05:17 修改

阅读量811

点赞数

分类专栏： CSS3 文章标签： css javascript 前端

于 2023-05-18 14:53:25 首次发布

本文链接：https://blog.csdn.net/sedrick_/article/details/130714140

版权

CSS3 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

跳转目录🚀

篇章	知识点
CSS之邂逅(一)	认识CSS、编写CSS样式、CSS注释、常见的CSS属性
CSS额外知识补充(二)	link元素、计算机进制、CSS表示颜色、Chorme调试工具、浏览器渲染流程
CSS属性与选择器(三)	CSS文本属性、CSS字体属性、CSS常见选择器
CSS属性的特性(四)	CSS属性的继承、CSS属性的层叠、CSS属性的类型、display属性、元素的隐藏、overflow属性、CSS不生效技巧
CSS盒子模型(五)	认识盒子模型、内容width/height、内边距padding、边框/圆角border、外边距margin、盒子和文字阴影、box-sizing
CSS设置背景(六)	background-(image、repeat、size、position、attachment)、background、background-image和img对比
CSS高级元素的使用(七)	列表元素、表格元素、表格合并、表单元素、表单常见属性
CSS之Emme语法t和结构伪类(八)	认识Emmet、常见Emmet语法、常见的结构伪类、否定伪类的使用
CSS额外知识补充(九)	border图形、Web网络字体、Web字体图标、CSS精灵图、cursor属性
CSS元素定位(十)	标准流布局、认识元素的定位、静态定位、相对定位、固定定位、绝对定位、粘性定位、z-index
CSS元素浮动(十一)	认识浮动、浮动的规则、浮动的案例、高度塌陷、清除浮动、布局方案对比
CSS flex布局(十二)	认识flex布局、flex布局的理解、flex-container属性、flex-item属性

1. 列表元素

1.1 有序列表 ol->li (ordered list)

注意:有序列表ol中直接元素只能是li

li 的含义 ==> list item 即表示列表中的每一项

案例演示：

 <h1>喜欢的电影排名</h1>
  <ol>
    <li>阿甘正传</li>
    <li>阿甘正传</li>
    <li>阿甘正传</li>
    <li>阿甘正传</li>
    <li>阿甘正传</li>
    <li>阿甘正传</li>
  </ol>

在这里插入图片描述

可以从上面的案例按出来，ol其实是自带效果的，有时候我们往往不喜欢这样，因此我们会重新给它覆盖样式。
在这里插入图片描述

	ol,
    li {
      padding: 0;
      margin: 0;
      list-style-type: none;
    }

1.2 无序列表 ul-> li (unordered list)

注意:无序列表ul中直接元素只能是li，与ol相同的是直接子元素也只能是li

案例演示：

<h1>常见的编程语言</h1>
  <ul>
    <li>JavaScript</li>
    <li>JavaScript</li>
    <li>JavaScript</li>
    <li>JavaScript</li>
    <li>JavaScript</li>
    <li>JavaScript</li>
    <li>JavaScript</li>
  </ul>

在这里插入图片描述
其实无论是有序还是无序列表，或者其它元素，当它们有一些自带的效果我们很难去控制时，我们都习惯于将它们一次性的进行重置，像两个列表元素本质就是list-style-type不同，我们很少使用自带的序号，反而经常使用list-style-type:none;.

	ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
    }

在这里插入图片描述
如果我们的确想用序号，现在手动去添加会有点麻烦，等到之后学习js后可以通过循环来添加。

1.3 定义列表 dl->dt&dd（definition list）

注意:定义列表的直接子元素是dt 和 dd

dt 的含义 ==> definition term 即表示列表中每一项的项目名

dd的含义 ==>

definition description 即表示列表中每一项的具体描述，是对dt的描述、解释、补充
一个dt后面跟着一个或者多个dd

案例演示：

<h1>前端开发</h1>
  <dl>
    <dt>阶段1：</dt>
    <dd>HTML</dd>
    <dd>HTML</dd> 
    <dd>HTML</dd>
    <dt>阶段2</dt>
    <dd>JavaScript</dd>
    <dd>JavaScript</dd>
    <dd>JavaScript</dd>
  </dl>

在这里插入图片描述
还是喜欢重置，同上

应用场景举例：
在这里插入图片描述

1.4 练习案例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 重置样式 */
    body,
    ul,
    ol,
    li,
    dl,
    dd,
    dt,
    a {
      margin: 0;
      padding: 0;
    }

    ul,
    ol,
    li,
    dl,
    dd,
    dt {
      list-style-type: none;
    }

    a {
      text-decoration: none;
      color: #222;
    }

    /* 自我喜好修改 */
    ul>li {
      margin: 12px 0;
    }

    .item>a {
      display: inline-block;
      height: 24px;
      line-height: 24px;
    }

    ul>li .ranking {
      display: inline-block;
      width: 24px;
      /* font-size: 20px; */
      font-weight: 700;
      margin-right: 8px;
      line-height: 24px;
      height: 24px;
      text-align: center;
      color: #999;
    }

    ul>li:first-child span {
      color: #a82e2e;
    }

    ul>li:nth-child(2) span {
      color: #f04142;
    }

    ul>li:nth-child(3) span {
      color: #ff9a03;
    }

    .content {
      display: inline-block;


    }

    .content:hover {
      color: #F04142;
    }

    ul>li .icon {
      position: relative;
      top: 2px;
      display: inline-block;
      width: 16px;
      height: 16px;

    }

    .new {
      background-image: url(./img/new.svg);
    }

    .hot {
      background: no-repeat url(./img/hot.svg);
    }
  </style>
</head>

<body>
  <ul>
    <li class="item">
      <a href="#">
        <span class="ranking">1</span>
        <div class="content">载39人渔船印度洋倾覆：中国籍17人</div>
        <i class="icon hot"></i>
      </a>
    </li>
    <li class="item">
      <a href="#">
        <span class="ranking">2</span>
        <div class="content">载39人渔船印度洋倾覆：中国籍17人</div>
        <i class="icon hot"></i>
      </a>
    </li>
    <li class="item">
      <a href="#">
        <span class="ranking">3</span>
        <div class="content">载39人渔船印度洋倾覆：中国籍17人</div>
        <i class="icon new"></i>
      </a>
    </li>
    <li class="item">
      <a href="#">
        <span class="ranking">4</span>
        <div class="content">载39人渔船印度洋倾覆：中国籍17人</div>
        <i class="icon"></i>
      </a>
    </li>
    <li class="item">
      <a href="#">
        <span class="ranking">5</span>
        <div class="content">载39人渔船印度洋倾覆：中国籍17人</div>
        <i class="icon new"></i>
      </a>
    </li>
    <li class="item">
      <a href="#">
        <span class="ranking">6</span>
        <div class="content">载39人渔船印度洋倾覆：中国籍17人</div>
        <i class="icon"></i>
      </a>
    </li>
    <li class="item">
      <a href="#">
        <span class="ranking">7</span>
        <div class="content">载39人渔船印度洋倾覆：中国籍17人</div>
        <i class="icon"></i>
      </a>
    </li>
    <li class="item">
      <a href="#">
        <span class="ranking">8</span>
        <div class="content">载39人渔船印度洋倾覆：中国籍17人</div>
        <i class="icon new"></i>
      </a>
    </li>
    <li class="item">
      <a href="#">
        <span class="ranking">9</span>
        <div class="content">载39人渔船印度洋倾覆：中国籍17人</div>
        <i class="icon"></i>
      </a>
    </li>

  </ul>
</body>

</html>

在这里插入图片描述

代码编写思路总结：
1.先完成结构
2.重置样式(body,a,ul,ol,li等等)
3.先整体再局部
备注：样式的添加顺序最好跟页面结构一样，方便查找
4.将重复的逻辑放到一个单独的class中(如上面案例中的.icon)
5.不同的代码提炼到不同的样式中(如案例中的 .hot .new）

备注: 继承的属性优先级是最低的，如果元素本身自己设置了相应的属性肯定会被替换掉的。

在这里插入图片描述

2. 表格元素

2.1 表格常见元素

编写表格时使用到的元素：

table => 表示表格
tr => 表示表格中的一行 即 table row
td => 表示每一行中的单元格 即 table data

表格有很多相关的属性可以设置表格的样式, 但是已经不推荐使用了

2.2 表格边框 border-collapse

==作用： == 该CSS 属性是用来决定表格的边框是分开的还是合并的

collapse => 重复边框折叠，或者说合并单元格边框
separate => 边框分开

表格案例练习：

其中表格边框需要通过css进行调整，会使用到border-collapse

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    table {
      padding: 0;
      margin: 0 auto;
      width: 400px;
      height: 200px;
      border-collapse: collapse;
    }

    table tr:first-child {
      font-weight: 700;
    }

    td {
      border: 1px solid;
      margin: 0;
      padding: 0;

      text-align: center;
    }
  </style>
</head>

<body>
  <table>
    <tbody>
      <tr>
        <td>排名</td>
        <td>股票名称</td>
        <td>股票代码</td>
        <td>股票价格</td>
        <td>股票涨跌</td>
      </tr>
      <tr>
        <td>1</td>
        <td>贵州茅台</td>
        <td>600519</td>
        <td>1800</td>
        <td>5%</td>
      </tr>
      <tr>
        <td>2</td>
        <td>腾讯控股</td>
        <td>00700</td>
        <td>400</td>
        <td>3%</td>
      </tr>
      <tr>
        <td>3</td>
        <td>五粮液</td>
        <td>000858</td>
        <td>160</td>
        <td>8%</td>
      </tr>
      <tr>
        <td>4</td>
        <td>东方财富</td>
        <td>30059</td>
        <td>25</td>
        <td>4%</td>
      </tr>
    </tbody>

  </table>
</body>

</html>

2.3 表格的其他元素

如果表格中全部都是tr组成，会导致语义化不明确。因此为了区分表格的各个部分，而衍生出了以下几个标签增加表格元素的语义化。

caption => 表格的标题
thead => 表格的表头
th => 表格的表头单元格
tbody => 表格的主体
tfoot => 表格的页脚

在这里插入图片描述
多了这些标签后，需要注意css属性如何精准的选中想要的元素

3. 表格合并

3.1 单元格合并

如何使用单元格合并呢？首先要搞清楚什么是 跨行 什么是 跨列

跨列合并：colspan 跨列是想右跨的
跨行合并：rowspan 跨行是向下跨的

单元格合并三步骤：
1.确定“谁” 需要跨列或者跨行
2.确定跨行还是列
3.确定跨几行或者几列

案例练习：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    table {
      width: 500px;
      height: 400px;
      border-collapse: collapse;
      text-align: center;
    }

    caption,
    th,
    td {
      padding: 5px 0;
      border: 1px solid #f00;
    }

    caption {
      font-size: 20px;
      font-weight: 700;
      border-bottom: none;
    }

    .morning,
    .afternoon,
    .night {
      width: 100px;
    }
  </style>
</head>

<body>
  <table>
    <caption>课程表</caption>
    <thead>
      <th></th>
      <th>星期一</th>
      <th>星期二</th>
      <th>星期三</th>
      <th>星期四</th>
      <th>星期五</th>
    </thead>
    <tbody>
      <tr>
        <td class="morning" rowspan="4">上午</td>
        <td>英语</td>
        <td>英语</td>
        <td>英语</td>
        <td>英语</td>
        <td>英语</td>
      </tr>
      <tr>
        <td>英语</td>
        <td>英语</td>
        <td>英语</td>
        <td>英语</td>
        <td>英语</td>
      </tr>
      <tr>
        <td>英语</td>
        <td>英语</td>
        <td>英语</td>
        <td>英语</td>
        <td>英语</td>
      </tr>
      <tr>
        <td>英语</td>
        <td>英语</td>
        <td>英语</td>
        <td>英语</td>
        <td>英语</td>
      </tr>
      <tr>
        <td class="afternoon" rowspan="4">下午</td>
        <td>英语</td>
        <td>英语</td>
        <td>英语</td>
        <td>英语</td>
        <td>英语</td>
      </tr>
      <tr>
        <td>英语</td>
        <td>英语</td>
        <td>英语</td>
        <td>英语</td>
        <td>英语</td>
      </tr>
      <tr>
        <td>英语</td>
        <td>英语</td>
        <td>英语</td>
        <td>英语</td>
        <td>英语</td>
      </tr>
      <tr>
        <td>英语</td>
        <td>英语</td>
        <td>英语</td>
        <td>英语</td>
        <td>英语</td>
      </tr>
      <tr>
        <td class="night" rowspan="2">晚自习</td>
        <td>英语</td>
        <td>英语</td>
        <td>英语</td>
        <td>英语</td>
        <td>英语</td>
      </tr>
      <tr>
        <td>英语</td>
        <td>英语</td>
        <td>英语</td>
        <td>英语</td>
        <td>英语</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

影院案例练习：

遇到的问题：如果设置了表格的固定高度，如果所有行的高度总和最低要达到固定高度的值。否则单独修改td过低会不起作用。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>影院电影放映列表</title>
  <style>
    table {
      width: 1000px;
      /* height: 300px; */
      text-align: center;
      border-collapse: collapse;
    }

    th,
    td {
      padding: 0;
    }

    caption,
    th,
    .start-time {
      font-weight: 700;
    }

    caption {
      height: 60px;
      line-height: 60px;
      font-size: 20px;
    }

    th {
      height: 50px;
      line-height: 50px;
      background-color: #f5f5f5;
    }

    td {
      height: 55px;
      /* line-height: 60px; */
    }

    tbody>tr:nth-child(2n+1) {
      background-color: #f3ecec;
    }

    tbody>tr:nth-child(2n) {
      background-color: #f5f5f5;
    }

    tbody>tr>td:nth-child(4) {
      color: #e73030;
    }

    .end-time {
      margin-top: 5px;
      font-size: 13px;
      color: #797773;
    }

    .seat-button {
      display: inline-block;
      width: 80px;
      height: 30px;
      color: #fff;
      font-size: 14px;
      line-height: 30px;
      border-radius: 10px;
      background-color: #e73030;
      text-decoration: none;
    }
  </style>
</head>

<body>
  <table class="movie-list">
    <caption>影院电影放映列表</caption>
    <thead>
      <tr>
        <th>放映时间</th>
        <th>语言版本</th>
        <th>放映厅</th>
        <th>售价(元)</th>
        <th>选座购票</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="start-time">13:15</div>
          <div class="end-time">15:00散场</div>
        </td>
        <td>国语3D</td>
        <td>2号厅</td>
        <td>¥48.5</td>
        <td>
          <a href="#" class="seat-button">选座购票</a>
        </td>
      </tr>
      <tr>
        <td>
          <div class="start-time">13:15</div>
          <div class="end-time">15:00散场</div>
        </td>
        <td>国语3D</td>
        <td>2号厅</td>
        <td>¥48.5</td>
        <td>
          <a href="#" class="seat-button">选座购票</a>
        </td>
      </tr>
      <tr>
        <td>
          <div class="start-time">13:15</div>
          <div class="end-time">15:00散场</div>
        </td>
        <td>国语3D</td>
        <td>2号厅</td>
        <td>¥48.5</td>
        <td>
          <a href="#" class="seat-button">选座购票</a>
        </td>
      </tr>
      <tr>
        <td>
          <div class="start-time">13:15</div>
          <div class="end-time">15:00散场</div>
        </td>
        <td>国语3D</td>
        <td>2号厅</td>
        <td>¥48.5</td>
        <td>
          <a href="#" class="seat-button">选座购票</a>
        </td>
      </tr>
      <tr>
        <td>
          <div class="start-time">13:15</div>
          <div class="end-time">15:00散场</div>
        </td>
        <td>国语3D</td>
        <td>2号厅</td>
        <td>¥48.5</td>
        <td>
          <a href="#" class="seat-button">选座购票</a>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

4. 表单元素

4.1 认识表单

什么是表单？

HTML表单元素是和用户交互的重要方式之一, 在很多网站都需要使用表单

常见的表单元素：
form：表单，在一般情况下其他表单元素都是它的后代元素
input：输入框（文本输入框，单选框，复选框，按钮等等）
textarea：多行文本框
select,option：下拉选择框
button：按钮
label：表单元素的标题

4.2 input元素的使用

以上表单元素中，input的使用频率是比较多的，我们展开理解一下。

input元素的常见属性

input属性	值
type	text password radio checkbox button reset submit file	文本框密码框单选框复选框按钮重置按钮提交按钮文件上传
readonly	readonly	只读
disabled	disabled	禁用
checked	checked	默认被选中
autofocus	autofocus	当页面加载时，自动对焦
name	-	在提交数据给服务器时，可用于区分数据类型
value	-	取值

疑问：input是替换元素吗？
img是一个可替换元素，行为是非常固定的。input的类型很多，不同的类型展现形式是不同的，不同浏览器的表现可能不一样，因此会很难直接定义成一种类型，我们把它用一个术语 小挂件Widgets来描述。
在这里插入图片描述

4.3 布尔属性 (boolean attributes)

有很多元素都是有布尔属性的，在上面input元素中就是这样。如disabled、checked、readonly、multiple、autofocus、selected

什么叫布尔属性？

布尔属性可以没有属性值，写上属性名就代表使用这个属性
如果要给布尔属性设值，值就是属性名本身

4.4 表单按钮的使用 input (type=“button”)

表单可以实现按钮的效果

普通按钮 type="button" 使用value属性设置按钮文字
重置按钮 type="reset" 重置它所属form的所有表单元素（包括input、textarea、select）
提交按钮 type="submit" 提交它所属form的表单数据给服务器（包括input、textarea、select）

按钮的两种实现方式：

button 按钮标签，
input 表单标签

其中，button标签在表单中没有指定类型时，默认值是submit

<form action="">
    <input type="text">
    <input type="date">

    <br>
    <!-- button 可以实现按钮 -->
    <button type="button">普通按钮</button>
    <button type="reset">重置按钮</button>
    <button type="submit">提交按钮</button>

    <br>
    <!-- 使用input来实现 -->
    <input type="button" value="普通按钮">
    <!-- 可以对form中的其它表单内容进行重置 -->
    <input type="reset" value="重置按钮">
    <!-- 可以对form中的其它表单内容进行提交(提交给服务器) -->
    <input type="submit" value="提交按钮">
  </form>

在这里插入图片描述

4.5 input和label的关系

label元素一般跟input配合使用，用来表示input的标题
label可以跟某个input绑定，点击label就可以激活对应的input变成选中。

在这里插入图片描述

<label for="username">
    用户名：<input id="username" type="text">
  </label>
  <label for="password">
    密码：<input id="password" type="password">
  </label>

4.6 单选框的使用 input (type=“radio”)

作用当input表单元素的type类型选择了radio后会以单选框的形式呈现

类型为radio时 input的属性：

name：radio需要name来进行分组，并且在提交报单时各个参数的形式是key=value&key=value，其中的name就是决定了其中的key值。
value：道理和name是一样的，我们在浏览器上选择了单选框，同时需要传递相应的数据到服务端，决定了value的值

在这里插入图片描述

结合label标签来实现性别选择案例：

<!-- 
    label与单选框radio 
    多个radio需要用name属性组合到一起
  -->
  <!-- url ：https://www.baidu.com/s?age=18&height=1&sex=male -->
  <label for="male">
    <input type="radio" name="sex" id="male" value="male">男
  </label>
  <label for="female">
    <input type="radio" name="sex" id="female" value="female">女
  </label>

在这里插入图片描述

4.7 复选框的使用 input (type=“checkbox”)

作用当input表单元素的type类型选择了checkbox后会以复选框的形式呈现。

类型为checkbox时 input的属性：

name 复选框也是需要使用name分组的
value 和radio的含义是一致的

案例演练：
在这里插入图片描述

<form action="">
    <div>您的爱好：</div>
    <label for="hobby">
      <input type="checkbox" id="hobby" name="hobby" value="basketball"> 篮球
      <input type="checkbox" id="hobby" name="hobby" value="swimming"> 游泳
      <input type="checkbox" id="hobby" name="hobby" value="football"> 足球

      <input type="submit" value="提交">
    </label>
  </form>

4.8 多行输入文本框 textarea的使用

作用： textarea 表示一个多行输入文本框

textarea常见的属性

cols: 设置文本框的列数
rows: 设置文本框的行数

其实就是设置了多行文本框的宽高

案例演练：

<form action="">
    <label for="info">
      个人简介：
      <textarea name="info" id="info" cols="30" rows="10"></textarea>
    </label>
  </form>

在这里插入图片描述

我们可以发现在右下角会两条线，我们可以拖动鼠标调整文本框的宽高。我们也可以在css对它进行缩放设置

resize 缩放的CSS设置

resize:"none" 禁止缩放
resize:"horizontal" 允许水平缩放
resize:"vertical" 允许垂直缩放
resize:"both" 允许水平垂直缩放

案例练习：
在这里插入图片描述

	textarea {
      resize: none;
      /* resize: horizontal; */
      /* resize: vertical; */
      /* resize: both; */
    }

4.9 下拉菜单 select和option的使用

作用： select 表示一个下拉菜单，option表示里面的每一项

select的常用属性

multiple 可以多选
size 显示多少项

option的常用属性

selected 设置默认被选项

案例练习：

<select name="fruits" id="" multiple size="2">
    <option value="apple">苹果</option>
    <option value="orange">橙子</option>
    <option value="banana">香蕉</option>
    <option value="melon" selected>西瓜</option>
  </select>

在这里插入图片描述

5.form表单常见的属性

作用：form通常作为表单元素的父元素, form可以将整个表单作为一个整体来进行操作,例如重置或提交整个表单。

form的常用属性

action：把该表单里所有收集的信息都提交给里面的地址
method：确定发送请求的方式 GET或POST
target：发送请求后打开页面的方式，和超链接同理

此图的提交方式为 GET请求，所有的数据都会显示在URL上，容易暴露数据。建议使用POST请求，具体区别到学AJAX时来区分。
在这里插入图片描述
案例的代码就不放了，其实现在都不单独使用form的action来发送请求了，一般使用axios那些，但是还是需要掌握一下。

请求方式的对比
在这里插入图片描述

AHuSjCoding

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS之高级元素的使用 (七)：列表元素、表格元素、表格合并、表单元素、表单常见属性

:有序列表ol中直接元素只能是lili 的含义 ==> list item 即表示列表中的每一项案例演示：可以从上面的案例按出来，ol其实是自带效果的，有时候我们往往不喜欢这样，因此我们会重新给它覆盖样式。1.2 无序列表 ul-> li (unordered list):无序列表ul中直接元素只能是li，与ol相同的是直接子元素也只能是li案例演示：其实无论是有序还是无序列表，或者其它元素，当它们有一些自带的效果我们很难去控制时，我们都习惯于将它们一次性的进行重置，像两个列表元素本质就是lis
复制链接

扫一扫