模仿一个好看的登录界面

最新推荐文章于 2024-04-30 09:20:11 发布

Goblin_Slayer777

最新推荐文章于 2024-04-30 09:20:11 发布

阅读量271

点赞数

分类专栏：小白且弱鸡的学习记录

本文链接：https://blog.csdn.net/Goblin_Slayer777/article/details/111405944

版权

小白且弱鸡的学习记录专栏收录该内容

15 篇文章 0 订阅

订阅专栏

尝试模仿一个好看的登录界面

某日，本菜鸡在b站上看到了一个简洁美观的登录界面。顿时两眼放光，啪的一下，很快啊！打开了HBulider。决定跟着大佬up主的视频模仿一个差不多的界面，顺便学习一些新的CSS样式。

附上B站视频链接

这是本菜鸡粗劣的模仿作品:

菜鸡的模仿作品

代码如下

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录界面</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="content">
      <div class="header"><p>Login</p></div>
      <div class="item">
          <input type="text"placeholder="USERS NAME" class="input_item">
		  <input type="text" name="phonenumber" placeholder="PHONE NUMBER" maxlength="11"  class="input_item" >
          <input type="password" name="password"  placeholder="PASSWORD" maxlength="16" class="input_item">
		  <button type="button" onclick="alert('逻辑实现?不存在的!')" class="Login">Login</button>
          <div class="signup">Don't have account?&nbsp;&nbsp;<a href="#">Sign up</a>
  </div>  
</body>
</html>

CSS部分

*{
   padding: 0;
   margin: 0;
   position: relative; 
}
html{
    height: 100%;
}
body{
    height: 100%;
	background-image: linear-gradient(to top,#86fde8,#acb6e5);
}
.content{
	width: 450px;
	height: 600px;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
.header{
	width: 100%;
	border-radius: 15px 15px 0px 0px;
	background-color: white;
/* 	color: aquamarine; */
    text-align: center;
	font-size: 35px;
	font-weight: bold;
	line-height: 250px;
	letter-spacing: 5px;
}
.item{
	text-align: center;
	width: 100%;
	height: 350px;
	background-color: white;
	border-radius: 0px 0px 15px 15px;
}
.input_item{
	width: 350px;
	display: block;
	height: 50px;
	font-size:15px;
	margin-left: 50px;
	margin-bottom: 20px;
	border: 0;
	border-bottom: 2px solid rgb(128,125,125);
	text-indent: 15px;
	outline: none;
}
.Login{
	font-size: 15px;
	margin-top: 15px;
	width: 350px;
	height: 40px;
	background-color: #badffb;
}
.signup{
	margin-top: 15px;
	font-weight: 600;
}
.signup a{
	text-decoration-line: none;
}
.signup a:visited{
	color: blue;
}
.signup a:hover{
	color: coral;
}

笔记:

如何让页面充满整个屏幕

 html{
	 height: 100%;
 }
 
 body{
	 height: 100%;
 }

( 为html标签设置height是为了让body标签设置height 从而实现充满屏幕的效果)

设置boxsizing:border-box；
把内容限制在元素内，防止元素内容溢出，如果内容溢出，内容看上去就向右偏移
（width = 100%是该元素的宽度等于父元素的宽度，没有把padding和border算在内）

为该部分内容设置渐变背景颜色

background-image: linear-gradient(to top,#86fde8,#acb6e5);

to right – 从左向右
to top – 从下到上
to left – 从右到左
to bottom — 从上到下（默认值）

为内容设置字体样式(可设置多种样式,当写在前的样式在用户电脑无法显示时,自动按后面的样式显示)
font-family:

调整内容中文字间距
letter-spacing:

描出元素的边框(可设置颜色和样式)
outline:

在输入框内显示的半透明提示词

placeholder="提示词"

总结:

CSS真是一个神奇的东西，在欣赏了各大平台大佬用CSS做出来的各种好看的样式以后，本菜鸡感叹道：CSS学好了是真的能玩出花来······（CSS不易，菜鸡叹气）

Goblin_Slayer777

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
模仿一个好看的登录界面

尝试模仿一个好看的登录界面某日，本菜鸡在b站上看到了一个简洁美观的登录界面。顿时两眼放光，啪的一下，很快啊！打开了HBulider。决定跟着大佬up主的视频模仿一个差不多的界面，顺便学习一些新的CSS样式。附上B站视频链接这是本菜鸡粗劣的模仿作品:代码如下HTML部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewp
复制链接

扫一扫