简单的静态页面

Smoke filled ゞ away

于 2024-08-28 19:58:28 发布

阅读量185

点赞数 3

分类专栏：前端文章标签： html5 css

本文链接：https://blog.csdn.net/qq_53841892/article/details/141648460

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、页面展示

2、HTML代码

1、link链接css

2、创建表单

3、创建input输入框

4、创建p段落

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
    <form action="">
        <input class="style1" type="text" name="" value="" placeholder="账号">
        <br />
        <input class="style2" type="password" name="" value="" placeholder="密码">
        <br />
       <div align="center">
       <input class="style3" align="center" type="submit" name="" value="登录">
        <br />
        <p>版权所有&copy;hqyj.com</p>
           
       </div> 
    </form>
    </body>
</html>

重点：对submit类型的input进行居中，创建div块给居中属性

3、CSS代码

给每个模块对应的属性和属性值

注意：./images文件需要在当前目录下

*{
    margin: 0;
    padding: 0;
}
img{
    border:0;
}
ol, ul ,li{list-style: none;} 
body{
    background-image: url(./images/bgt.jpeg);
}
form{
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 0);
}
form .style1{
    width: 333px;
    height: 50px;
    border-radius: 30px;
    padding-left: 20px;
    border: none;
}
form .style2{
    width: 333px;
    height: 50px;
    border-radius: 30px;
    padding-left: 20px;
    border: none;
    margin-top: 20px;
    margin-bottom: 20px;
}

form .style3{
    width: 314px;
    height: 50px;
    background-image: url(./images/bgt.jpeg);
    color:white;
    font-size: 22px;

}
p{
    text-align: center;
}