模仿一个好看的登录界面

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

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

附上B站视频链接

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

模仿一个好看的登录界面_第1张图片

代码如下

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>Loginp>div>
      <div class="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">Loginbutton>
          <div class="signup">Don't have account?  <a href="#">Sign upa>
  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不易,菜鸡叹气)

你可能感兴趣的:(小白且弱鸡的学习记录)