简单的登陆界面

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

阿阿阿黄

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

阅读量2.9k

点赞数 2

分类专栏： CSS

本文链接：https://blog.csdn.net/MBLHQ/article/details/51996078

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

每一次做一个东西，都希望不要做得太丑，但无奈css太差，也只能坐一个简单的样式。给大家分享一个简单的登陆界面，在分享之前先讲解一下几个css中的属性。大神可以略过，只是自己在做这个登陆界面时的学习的新知识点。

1.overflow:规定当内容溢出元素框时发生的事情。

2.outline：（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。（设置元素周围的轮廓线）

注释：请始终在 outline-color 属性之前声明 outline-style 属性。元素只有获得轮廓以后才能改变

其轮廓的颜色。

例如：
设置点状轮廓的颜色：
p
{
outline-style:dotted;
outline-color:#00ff00;
}

在这可能有人和我一样搞不懂outline与border的区别了，网上是这么说的：

1.outline是不占空间的，既不会增加额外的width或者height

2.outline有可能是非矩形的

除了outline-style,outline-color，还有关于outline的其他属性，可以在W3C具体查看。
3.min-height：该属性值会对元素的高度设置一个最低限制。因此，元素可以比指定值高，但不能比其矮。不允许指定负值。

text-shadow 属性向文本设置阴影
语法
text-shadow: h-shadow v-shadow blur color;
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。参阅 CSS 颜色值。

例如：

text-shadow:2px 2px red;

text-shadow:20px 20px red;

4.a标签不同状态下的颜色变化

a:link {color: blue} /* 未被访问的链接*/
a:visited {color: blue}/* 已被访问过的链接*/
a:hover {color: blue} /* 鼠标悬浮在上的链接*/

a:active {color: blue} /* 鼠标点中激活链接*/ （鼠标按下去时的状态）

登陆界面的图片：

代码如下：

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<link type="text/css" rel="stylesheet" href="login.css">
<title>用户登录</title>
</head>
<body>
  <div id="login">
  <h1>Login</h1>
    <form method="post"action="login.php">
	<input type="text"name="username"placeholder="用户名"required="required"/>
    <input type="password"name="password"placeholder="密码"required="required"/>\
	<button class="but" type="submit">登陆</button>
	<a href="register.html">没注册<a/>
	</form>
  </div>
</body>
</html>

css:

@CHARSET "UTF-8";
*{
padding:0;
margin:0;
}
html{
height:100%;
width:100%;
overflow:hidden;
}
body{
height:100%;
width:100%;
background-color:#4A374A;
}
#login{
width:300px;
height:300px;
position:absolute;
top:50%;
left:50%;
}
#login h1{
color:#fff;
text-align:center;
letter-spacing:2px;
font-size:3em;
text-shadow:0 0 10px;
}
input{
width:278px;
height:18px;
margin-bottom:10px;
outline:none;
padding:10px;
font-size:15px;
border-top:1px solid #ccc;
border-left:1px solid #ccc;
border-bottom:1px solid #ccc;
border-right:1px solid #ccc;
border-radius:18px;
background-color:#2D2D3F;
}
a{
text-decoration:none;
margin:20px 0 ;
display:block;
}
a:link{ 
color:white;
}

a:visited{
color:white;
}
a:hover{
color: #9999FF;
}
.but{
 width:300px;
 min-height:20px;
 display:block;
 background-color:#4a77d4;
 border:1px solid #3762bc;
 color:#fff;
 font-size:16px;
 border-radius:5px;
 padding:10px;
 margin:-10px 0 ;
 line-height:normal;
}
.but:hover{
color:#99CCFF;
}

阿阿阿黄

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
简单的登陆界面

每一次做一个东西，都希望不要做得太丑，但无奈css太差，也只能坐一个简单的样式。给大家分享一个简单的登陆界面，在分享之前先讲解一下几个css中的属性。大神可以略过，只是自己在做这个登陆界面时的学习的新知识点。 1.overflow:规定当内容溢出元素框时发生的事情。 2.outline：（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。（设置元素周围的轮廓线
复制链接

扫一扫