学习CSS的第5天

H5新增input表单、表单属性(12分钟视频学习)

属性描述
requiredrequired必填
placeholderplaceholder占位符,如下图灰色的字在这里插入图片描述
autofocusautofocus自动定位光标
autocompleteon/off自动填充/不填充
multiplemultiple可以多选文件提交

案例如下

<head>
    <meta charest="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA -Compatible" content="ie-edge">
    <title>Document</title>
</head>

<body>
    <form action="">
        用户名: <input type="text" required="required" placeholder="请输入用户名" autofocus="autofocus" name=username autocomplete="on"><input type="submit" value="提交"> 
        上传头像: <input type=file name="" id="" multiple="multiple">
    </form>

</body>

在这里插入图片描述

CSS3属性选择器(11分钟视频学习)

标签选择器权重是1
属性选择器、类选择器、伪类选择器权重均为10
属性选择器=标签[属性],如:button[diasbled]

案例如下

<head>
    <meta charest="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA -Compatible" content="ie-edge">
    <title>Document</title>
</head>
<style>
    button {
        cursor: pointer;
    }
    
    button[disabled] {
        cursor: default;
    }
</style>

<body>
    <button>按钮</button>
    <button>按钮</button>
    <button disabled="disabled">按钮</button>
    <button>按钮</button>

</body>

在这里插入图片描述

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页