初学html,任务2:写一个简单的登陆/注册界面

先在body中把最基础的标签写出来

初学html,任务2:写一个简单的登陆/注册界面_第1张图片

现在页面运行出来是这样的

就是一个没有任何样式的基础界面:

初学html,任务2:写一个简单的登陆/注册界面_第2张图片

接下来我们为这些标签加上样式

首先还是让页面所有元素的padding和margin都设置为0,

清除浏览器本身对界面的影响:

初学html,任务2:写一个简单的登陆/注册界面_第3张图片

然后加上背景图,并且将字体设置为微软雅黑

初学html,任务2:写一个简单的登陆/注册界面_第4张图片

接下来给整个登陆框设置样式

并且让登陆框绝对居中,会使用到绝对位置属性

初学html,任务2:写一个简单的登陆/注册界面_第5张图片

给h1标签加上样式

初学html,任务2:写一个简单的登陆/注册界面_第6张图片

给两个输入框设置样式,border给输入框设置边框线样式、粗细和颜色;

border-radius属性给边框设置圆角角度,像素越接近10,弧度越大

初学html,任务2:写一个简单的登陆/注册界面_第7张图片

给登陆和注册按钮设置样式,

初学html,任务2:写一个简单的登陆/注册界面_第8张图片

样式设置完,界面就是这样的

 

代码实现如下

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录title>
<style>
*{margin:0;
padding:0;
box-sizing:border-box;
}
body {
    background: url(./img/timg.jpg) no-repeat center 0px fixed;
    background-size: cover;
    font-family: "微软雅黑", sans-serif;
}
.login { 
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -150px;
    width:300px;
    height:300px;
}
.login h1 { 
    color:#555555;
    text-shadow: 0px 10px 10px #CDC673;
    letter-spacing:2px;text-align:center;
    margin-bottom:20px;
}
input{
    padding:10px;
    width:100%;
    color:white;
    margin-bottom:10px;
    background-color:#555555;
    border: 1px solid black;
    border-radius:5px;
    letter-spacing:2px;
}
form button{
    width:100%;
    padding:10px;
    margin-bottom:10px;
    background-color:#CDC673;
    border:1px solid black;
    border-radius:5px;
    cursor:pointer; 
}                                                                                                                                       
style>
head>
<body>
<div class="headtop">div>
<div class="login">
  <h1>Loginh1>
    <form action="" method="post">
    <input type="text" name="user" placeholder="用户名" required="required">
    <input type="password" name="password" placeholder="密  码" required="required">
    <button type="submit">登录button>
    <button type="submit" onclick="location='zhuce.html'">注册button>
  form>
div>
body>
html>

若要实现页面跳转可以加入a标签,使跳转到注册界面。

 

转载于:https://www.cnblogs.com/SiminL0708/p/9115012.html

你可能感兴趣的:(初学html,任务2:写一个简单的登陆/注册界面)