这是一个简单的网页登录页面

这篇主要和大家给大家介绍好看有简单的网页代码。下面是一个简单的网页登录页面。注意:代码要求简洁,严格。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">

<title>默一博客</title>

<style type="text/css">

*{

padding:0;

margin:0;

}

html{

height:100%;

}

body{

height:100%;

}

.kuangjia{

height:100%;

background-image: linear-gradient(to right, #FED0FC, #63D1EC);

overflow:auto;

}

.gujia{

height:800px;

width:1200px;


border-radius:20px;

position:relative;

margin:80px auto;

}

.huanying{

height: 200px;

width: 1200px;

font-size: 144px;

padding-top: 50px;

text-align: center;

}

.kaishi{

height:80px;

width:1200px;

font-size:36px;

padding-top:20px;

text-align:right;

}

.denglu{

height:100px;

width:700px;

float:left;

margin-left:50px;

margin-top:50px;

font-size:30px;

border-radius:20px;

position:relative;

border: 0;

border-bottom: 1px solid rgb(128, 125, 125);

outline:none;

display:block;

}

.zouni{

height: 80px;

width: 200px;

float: right;

background: #FFF;

margin-right: 150px;

margin-left: 50px;

margin-top: 50px;

font-size: 36px;

text-decoration:none;

padding-top:22px;

border-radius: 20px;

position: relative;

border: 0;

border-bottom: 1px solid rgb(128,125,125);

outline: none;

display: block;

text-align: center;

}

</style>

</head>

<body>

<div class="kuangjia">

  <div class="gujia">

      <div class="huanying">Welcome</div>

    <div class="kaishi">Let's have a good day from now on!</div>

      <input name="Account number" type="text" class="denglu" placeholder="Account number" size="3" maxlength="8">

    <a class="zouni" href="https://blog.csdn.net/weixin_59064057">Anter</a>

    </div>

</div>

</body>

</html>

效果图

本文章由javascript技术分享原创和收集

如若转载请注明原文及出处:https://www.dsiab.com/post/6e693c6c-0200-47ce-9267-63d516b5e106
本站文章由javascript技术分享原创和收集,内容如有问题,请联系站长删除。

评论: