HTML+CSS小实战案例

最新推荐文章于 2024-06-15 12:12:02 发布

小段大帅

最新推荐文章于 2024-06-15 12:12:02 发布

阅读量1.3k

点赞数 3

本文链接：https://blog.csdn.net/u011652364/article/details/89347737

版权

这篇博客分享了一个HTML+CSS的小实战案例，专注于登录界面的美化。作者通过实践应用所学，先搭建页面布局框架，再逐步填充内容，最终呈现了一个美观的登录界面。强调了网页设计中先布局后填充的规范流程。

摘要由CSDN通过智能技术生成

HTML+CSS小实战案例

HTML+CSS小实战案例

登录界面的美化，综合最近所学进行练习

网页设计先布局，搭建好大框架，然后进行填充，完成页面布局

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 4     <title>实验</title>
 5     <style type="text/css">
 6         *{
      margin:0;padding:0;}/*去掉页面样式*/
 7         body{
      color:white;}
 8         .content{
      
 9             background-color:pink;
10             position:absolute;/*绝对定位*/
11             top:50%;
12             left:0;
13             width:100%;
14             height:400px;
15             margin-top:-200px;
16             overflow:hidden;/*隐藏滚动条*/
17         }
18         .main{
      
19             text-align:center;/*文本居中*/
20             max-width:600px;
21             height:400px;
22             padding:100px 0px;/*上下80px,左右为0*/
23             /*background:yellow;*//*验证div的位置*/
24             margin:0 auto;/*设置上右下左,居中显示*/
25         }
26         .main h1{
      
27             font-family:"楷体";/*设置字体*/
28             font-size:70px;/*设置字体大小*/
29             font-weight:2px;/*调整字体粗细*/
30         }
31         form{
      
32             padding:20px 0;
33         }
34         form input{
      
35             border:1px solid white;
36             display:block;
37             margin:0px auto 10px auto;/*上 右  下 左*/
38             padding:10px;
39             width:220px;
40             border-radius:30px;/*H5设置圆角边框*/
41             font-size:18px;
42             font-weight:300;
43             text-align:center;
44         }
45         form input:hover{
      
46             background-color:pink;
47         }
48         form button{
      
49             background-color:yellow;
50             border-radius:10px;
51             border:0;
52             height:30px;
53             width:50px;
54             padding:5px 10px;
55         }
56         form button:hover{
      
57             background-color:red;
58         }
59     </style>
60 </head>
61 <body>
62 <div class="content">    
63     <div class="main">
64         <h1>Welcome</h1>
65         <form>
66             <input type="text" name="useid" placeholder="请输入账号"/>
67             <input type="password" name="pw" placeholder="请输入密码">
68             <button type="submit">登&nbsp;&nbsp;录

最低0.47元/天解锁文章

小段大帅

关注

3
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS小实战案例

HTML+CSS小实战案例 HTML+CSS小实战案例登录界面的美化，综合最近所学进行练习网页设计先布局，搭建好大框架，然后进行填充，完成页面布局 1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; ch...
复制链接

扫一扫