关于CSS的一些值得加深记忆的知识点

最新推荐文章于 2024-06-12 08:14:53 发布

大大大野

最新推荐文章于 2024-06-12 08:14:53 发布

阅读量35

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/HGninjago/article/details/130329921

版权

一、无序列表与有序列表

对于有序与无序列表主要是使用的标签容易记混所以需要加深记忆

无序用标签<ul>表示内部标签值则用<li>表示 || 有序用标签<ol>表示内部标签也用li表示

注意：自定义列表

自定义列表用标签<dl>表示内部列表项则用<dt>表示列表项的定义用<dd>表示

自定义列表可以进行嵌套达到多级选择的目的

二、表格的跨行跨列

在table定义表格对其中的td元素设置属性colspan属性来实现单元格可横跨列

<table border="1">
    <tr>
        <th>第一节</th>
        <th>第二节</th>
    <tr>
    <tr>
        <td colspan="2">语文</th>
    <tr>
<table>

设置跨列则是rowspan

<table border="1">
        <tr>
            <td rowspan="2">语文</td>
            <td>第一节</td>
        </tr>
        <tr>
            <td>第二节</td>
        </tr>
</table>

三、表单

表单元素包括文本框（text，password密码字段）、下拉列表（select）、单选框（radio-buttons）、多选框（checkbox复选框）、提交按钮（submint）、多选按钮（radio）、普通按钮（button）HTML 表单 | 菜鸟教程 (runoob.com)

表单的创建from标签表单标签input 对该标签设置不同的type属性可以实现不同的样式效果

input还有一些标签

HTML 标签 (w3school.com.cn)https://www.w3school.com.cn/tags/tag_input.asp
HTML 表单 | 菜鸟教程 (runoob.com)https://www.runoob.com/html/html-forms.html

四、位移、动画2D、3D

位移很好理解第四点都是作用于动画通过设置translate属性translateY(y)向Y轴与translateX(x)向X轴平移

<body>
    <div class="add"></div>
</body>
<style>
    .add {
        width: 100px;
        height: 100px;
        background-color: red;
    }

    .add:hover {
        transform: translateX(60px);
        transition: all 0.4s ease 0s;
        -webkit-transform: translateX(60px);
    }
</style>

动画2D、3D 这些网站比较推荐

CSS 2D 转换 (w3school.com.cn)https://www.w3school.com.cn/css/css3_2dtransforms.asp CSS 3D 转换 (w3school.com.cn)https://www.w3school.com.cn/css/css3_3dtransforms.asp

大大大野

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于CSS的一些值得加深记忆的知识点

表单元素包括文本框（text，password密码字段）、下拉列表（select）、单选框（radio-buttons）、多选框（checkbox复选框）、提交按钮（submint）、多选按钮（radio）、普通按钮（button）HTML 表单 | 菜鸟教程 (runoob.com)无序用标签<ul>表示内部标签值则用<li>表示 || 有序用标签<ol>表示内部标签也用li表示。自定义列表用标签<dl>表示内部列表项则用<dt>表示列表项的定义用<dd>表示。input还有一些标签。
复制链接

扫一扫