css 伪类选择器制作登录框表单

2018-06-18 02:33:56来源：未知阅读 ()

使用伪类选择器制作鼠标悬停时文本框出现橙色虚线边框制作鼠标激活时出现背景颜色淡橙色

使用css制作文本框圆角矩形效果,制作文本框背景图片,及背景不重复效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--伪类选择器-->
        <style type="text/css">
            .up:hover{
                border: 1px orangered dashed;
            }
            .up:focus{
                background-color: lightyellow;
            }
        </style>
    </head>
    <body>
        <div style="width: 300px;height: 230px;margin: 0 auto;border: 1px solid black;border-radius: 5px; line-height: 40px;background-image: url(img/bg1.jpg);">
            <p><center><span style="font-size: 20px;font-family: '微软雅黑';">用户登录</span></center></p>
            <p><center><span><b>用户名:</b></span>&nbsp;<span><input class="up" type="text" style="border-radius: 5px;width: 160px;height: 32px;background-image: url(img/head.png);background-repeat: no-repeat;padding-left:32px;"></span></center></p>
            <p><center><span><b>密&nbsp;码:</b></span>&nbsp;<span><input class="up" type="text" style="border-radius: 5px;width: 160px;height: 32px;background-image: url(img/keyboard.png);background-repeat: no-repeat;padding-left:32px;"></span></center></p>
            <p><center><span><input type="image" src="img/regbtn.jpg"></span></center></p>
        </div>
    </body>
</html>

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有