CSS Selectors font,input

卞云瀚

2023-12-01

开头: before; 结尾 : after; 内边距 : padding:15px; 左对齐 : float:left;
边框border : border:1px solid gray; 行高 : line-height:35px;
动画 : transition:transform .5s ease-in; 水平翻转 : transform:totatry(180deg);
去除表单的活动框 : outline:none;
更改placeholder颜色; placeholder框内提示:
input::placeholder {
color: orangered;
}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>font,input</title>
    <meta name="Keywords" content="关键字">
    <meta name="description" content="简介">
    <!-- 开头 before; 结尾 after
        内边距:padding:15px; 左对齐:float:left;
        边框 border: border: 1px solid gray;
        行高: line-height: 35px;
        动画: transition: transform .5s ease-in;
        水平翻转: transform: rotatey(180deg);
        去除表单的活动边框: outline: none;
        更改placeholder颜色; placeholder框内提示:
        input::placeholder {
            color: orangered;
        }
    -->
    <style>
        /*开头*/
        p:before {
            content: '我';
        }

        p::first-letter {
            /*内边距*/
            padding: 15px;
            margin-top: 3px;
            font-size: 50px;
            /*左对齐*/
            float: left;
        }

        /*结尾*/
        p:after {
            content: '!';
        }

        p {
            /*边框 border*/
            border: 1px solid gray;
            width: 500px;
            /*行高*/
            line-height: 35px;
            /*动画*/
            transition: transform .5s ease-in;
        }

        p:hover {
            /*水平翻转*/
            transform: rotatey(180deg);
        }

        /*设置选取文字的颜色*/
        p::selection {
            color: lightgreen;
            background-color: mediumvioletred;
        }


        input {
            border: none;
            border-bottom: 1px dashed gray;
            padding: 5px;
            /*去除表单的活动边框*/
            outline: none;
        }

        /*更改placeholder颜色; placeholder框内提示*/
        input::placeholder {
            color: orangered;
        }
    </style>
</head>
<body>
<label>用户名:<input type="text" name="name" placeholder="用户名"></label><br>
<label>密&nbsp;&nbsp;&nbsp;码:<input type="password" name="name" placeholder="密码"></label>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium alias aliquam aspernatur beatae consectetur
    deleniti deserunt doloremque dolores dolorum exercitationem fugiat ipsam laborum maiores non porro possimus quia
    voluptas, voluptate!</p>
</body>
</html>

CSS Selectors font,input

相关阅读

相关文章

相关问答