前端入门之定位、表单

LN Feng

已于 2022-10-27 20:01:01 修改

阅读量215

点赞数

文章标签：前端 css html

于 2022-08-17 21:49:02 首次发布

本文链接：https://blog.csdn.net/weixin_45000466/article/details/126395100

版权

固定/相对/绝对定位、表格、表单

定位

CSS 布局 - 定位属性 (w3school.com.cn)

它的作用是控制元素在包含块中的精准位置

定位位置相同的情况下文档后面的会覆盖文档前面的

固定定位

postion: fixed
相对于浏览器窗口脱离文档流
用途：eg: 返回顶部按钮…

相对定位

position: relative
相对于元素原来的位置

绝对定位

position: absolute
相对于有定位的父元素或者祖先元素如果都没有就相对于boby
用途: 一个元素在另一个元素显示(父元素用相对子元素用绝对)

相对定位一般和绝对定位配合使用，父元素设置相对定位子元素设置绝对定位

层级

z-index
层级数越大元素越靠上
层级默认为0
只有定位元素有层级

eg:

<!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>
        .img_show{
            width: 350px;
            position: relative;
        }
        .img_show .image{
            width: 350px;
            position: absolute;
            left: 0;
            bottom: 0;
        }

        .img_show .vip{
            width: 60px;
            position: absolute;
            right: 5px;
            top: 5px;
        }
        .img_show span{
            color: white;
            position: absolute;
            left: 10px;
            bottom: 10px;
        }

    </style>
</head>
<body>

    <div class="img_show">
        <img style="border-radius: 20px;" src="img/5f9f4ba6c0518f32515a82df007e5ed.jpg" alt="">
        <img class="image" src="img/下载.png" alt="">
        <img class="vip" src="img/sss.png" alt="">
        <span>全60集</span>
    </div>
    
</body>
</html>

表格

HTML 表格 (w3school.com.cn)

表格由<table>标签来定义。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。

表头

<thead>
  <!-- tr代表行 -->
  <tr>
    <!-- th代表标头的列 -->
    <th>书名</th>
  </tr>
</thead>

表身

<tbody>
  <tr>
    <!-- td代表身体中的列 -->
    <td>西游记</td>
  </tr>
</tbody>

属性

border= "1" 设置表格的边框
cellspacing= "0" 设置单元格之间的距离
cellpadding= "10" 设置单元格的内边距
rowspan="3" 垂直合并单元格(合并行)
colspan="2" 水平合并单元格(合并列)

单元格只能合并不能拆分

示例代码

<table border="1" cellspacing="0" cellpadding="10px">
    <!-- 表名 -->
    <caption>河套学院</caption>
    <thead>
      <tr>
            <th>书名</th>
            <th>作者</th>
            <th>价格</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <!-- td代表身体中的列 -->
            <td rowspan="3">西游记</td>
            <td colspan="2">吴承恩</td>
        </tr>
        <tr>
            <td>吴承恩</td>
            <td>69</td>
        </tr>
        <tr>
            <td>吴承恩</td>
            <td>69</td>
        </tr>
    </tbody>
</table>

表单

HTML 表单元素 (w3school.com.cn)

HTML 表单用于搜集不同类型的用户输入。

表单属性

HTML 表单属性 (w3school.com.cn)

action="/action_page.php" 请求地址(网络、相对、绝对)
target="" 提交表单后在何处显示响应

_self(默认) 在当前窗口显示

_blank 在新窗口或选项卡显示
method="" get post
区别
1. get是明文（值展示在网址上）post不会
2. get请求相对来说比post更快捷post传递东西更大（传文件）

<form action="http://csdn.net/" target="_blank" method="get">
</form>

表单元素

HTML 表单元素 (w3school.com.cn)

input->type属性

text: 文本框、password: 密码框
```
<input type="text">
<input type="password">
```
radio: 单选框、checkbox: 多选框
```

男：<input type="radio" name="sex">
女：<input type="radio" name="sex">

lol <input type="checkbox">
dnf <input type="checkbox">
```
单选框的name属性一致才能实现单选

单选框和多选框设置checked默认选中

file: 文件上传
```
<input type="file">
```
reset: 重置注意：在当前表单中的内容重置
```
<input type="reset" value="恢复默认"> 
```
submit: 提交按钮按钮改文字要用value
```
<input type="submit" value="注册">
```
button: 按钮 input(button)情况改文字用value
```
<input type="button" value="点击爆炸">
```
hidden: 没有实际效果但是默认提交内容
```
<input type="hidden" name="myname" value="喜羊羊">
```
新标签
color 颜色板
date 日期
range 范围框
number 数字
time 日期
email 邮箱

select->option 下拉选择框

<select name="" id="">
  <option value="呼和浩特" >呼和浩特</option>
  <option value="石家庄"selected>石家庄</option>
  <option value="通辽">通辽</option>
  <option value="齐齐哈尔 ">齐齐哈尔</option>
</select>

textarea 可输入区域(可以拖拽大小)

设置 resize: none 固定大小

col="30" rows="10" 调整默认输入区域大小
```
留言板<textarea name="" id="" cols="30" rows="10"style="resize:none"></textarea>
```
button 只写button按钮有提交功能
表单元素属性

name: 后台需要的键

placeholder: 输入提示

disabled: 禁止操作

readonly: 只读不用写

required: 必填字段提示
label->for填写属性表单id可以使该表单元素获取焦点
清除文本输入框的默认选中样式
```
input{
 outline: 0;
 }
```