表单样式

最新推荐文章于 2022-04-22 19:21:55 发布

夕颜颜

最新推荐文章于 2022-04-22 19:21:55 发布

阅读量188

点赞数

分类专栏： html+css

本文链接：https://blog.csdn.net/weixin_43544733/article/details/104297895

版权

html+css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

效果图
在这里插入图片描述 1.表单结构

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="images/style.css" />
    <title></title>
</head>
<body>
    <form id="login-form" action="#" method="post">
        <fieldset>
            <legend >登录</legend>
                <label for="login">Email</label>
                <input type="text" id="login" name="login" />
                <div class="clear"></div>
                <label for="password"  >密码</label>
                <input type="password" id="password" name="password" />
                <div class="clear"></div>
                <label for="remember_me" style="padding: 0">记住状态？</label>
                <input type="checkbox" id="remember_me" style="position:relative;
                 top:3px; margin:0;" name="remember_me" />
                <div class="clear"></div>
                <br />
                <input type="submit" style="margin: -20px 0 0 287px;" class="button"
                 name="commit" value="登录"  />
               
        </fieldset>
    </form>
    <p align="center" ><strong>&copy; www.xxxxxxx.cn</strong></p>
</body>
</html>

2.css样式

*{
    margin:0; padding:0;
}
body {
font-family:'Adobe Fan Heiti Std'; background:url(login-page-bg.jpg)  
center -50px no-repeat #c4c4c4; color:#3a3a3a;
}
.clear {
clear:both;
}
form {
 width:406px; margin:120px auto 0;
}
legend {
display:none;
}
fieldest {
border:0;
}
label {
width:115px; text-align:right; float:left; margin:0 10px 0 0;
padding:9px 0 0 0; font-size:16px;
}
input {
width:220px; display:block; padding:4px; margin:0 0 10px 0;
font-size:18px; color:#3a3a3a; font-family:'Global Sans Serif';
}
input[type=checkbox] {
width:20px; margin:0; display:inline-block;
    }
.button {
background:url(button-bg.png) repeat-x top center; border:1px solid #999;
padding:5px; color:black; font-weight:bold; border-radius:5px;
font-size:13px; width:70px;
}
.button:hover {
background: white; color:black;
     }