登录界面

最新推荐文章于 2024-06-05 23:56:34 发布

爱娶媳妇的苗同学

最新推荐文章于 2024-06-05 23:56:34 发布

阅读量247

点赞数 1

分类专栏： Web前端文章标签：前端登录界面 CSS

本文链接：https://blog.csdn.net/weixin_44609873/article/details/102570069

版权

Web前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

实现效果如图：

实现代码：

test.html

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
<title>登录页面</title>
<link rel="stylesheet" type="text/css" href="images/style.css">
</head>
<body>
<form id="login-form" action="#" method="post">
    <fieldset>
        <legend>登录</legend>  <!-- <legend> 标签为 fieldset 元素定义标题。 -->
        <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" 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.xxxxxx.cn</strong></p>
</body>
</html>

CSS代码：

style.css

* {
    margin: 0;
    padding: 0;
}
body {
    font-family: Georgia, serif;
    background: url(login-page-bg.jpg) center -55px no-repeat #c4c4c4;
    color: #3a3a3a;
}
.clear { clear: both; }  /* 图像的左侧和右侧均不允许出现浮动元素： */
form {
    width: 406px;
    margin: 120px auto 0;
}
legend { display: none; }  /* <legend> 标签为 fieldset 元素定义标题。 */
fieldset { border: 0; }
label {
    width: 115px;
    text-align: right;
    float: left;
    margin: 0 10px 0 0;
    padding: 10px 0 0 0;  /* label之间上内边距10px */
    font-size: 16px;
}
input {
    width: 220px;
    display: block;  /* bolck是此元素将显示为块级元素，此元素前后会带有换行符。 */
    padding: 4px;
    margin: 0 0 10px 0;	
    font-size: 18px;
    color: #3a3a3a;
    font-family: Georgia, serif;
}
input[type=checkbox] {
    width: 30px;
    margin: 0 0 0 -4px;
    display: inline-block;
    position:relative;
    top: 2px;   
}
.button {
    background: url(button-bg.png) repeat-x top center;
    border: 1px solid #999;
    -moz-border-radius: 4px;   /* 老的 Firefox支持 */
    -webkit-border-radius: 4px;  /* Safari, Chrome等浏览器支持 */
    border-radius: 4px;     /* 允许向元素添加圆角 */
    padding: 5px;
    color: black;
    font-weight: bold;
    font-size: 13px;
    width: 70px;
}
.button:hover {  /* 选择鼠标指针浮动在上面的样式 */
    background: white;
    color: black;
}

运用到的素材图片

login-page-bg.jpg

button-bg.png

爱娶媳妇的苗同学

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
登录界面

实现效果如图：实现代码：test.html<!doctype html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta charset="utf-8"><titl...
复制链接

扫一扫