HTML+CSS小实战案例

简介: HTML+CSS小实战案例 登录界面的美化,综合最近所学进行练习 网页设计先布局,搭建好大框架,然后进行填充,完成页面布局 1 2 3 4 实验 5 6 *{margin:0;padding:0;}/*去掉页面样式*/ 7 body{color:white;} 8 .

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;</button>
69         </form>
70     </div>
71 </div>    
72     
73 </body>
74 </html>

登录界面实战运行结果如下

自己动手丰衣足食

 

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 4 <!--link href="*.css" rel="stylesheet" type="text/css">-->    
 5     <title>柠檬学院</title>
 6     <style type="text/css">
 7         *{margin:0;padding:0;}
 8         .content{
 9             background-color:yellow;/*设置背景颜色*/
10             position:absolute;/*设置绝对定位*/
11             width:100%;/*设置div的宽度*/
12             height:400px;/*设置div的高度*/
13             top:50%;/*距离上面的距离是一半*/
14             margin-top:-200px;/*向上距顶端的距离减200像素*/
15             overflow:hidden;/*隐藏滚动条*/
16         }
17         .container{
18             /*background-color:pink;*//*背景颜色*/
19             text-align:center;/*文字居中*/
20             padding:80px 0px;/*设置上下和左右*/
21             max-width:600px;/*设置最大宽度*/
22             height:400px;/*设置div的高度*/
23             margin:-10 auto 0 auto;/*上  右 下  左*/
24         }
25         .container h1{
26             background-color:pink;
27             font-size:80px;
28             border-radius:30px;
29             color:blue;
30             height:80px;
31             width:600px;
32             text-align:center;
33             font-family:"楷体";
34         }
35         form input{
36             font-size:30px;
37             display:block;
38             border-radius:30px;
39             padding:10px 5px;/*上下  左右*/
40             text-align:center;
41             margin:25 auto 15 auto;/*上  右 下  左*/
42             font-weight:300px;
43         }
44         form input:hover{
45             background-color:gold;
46         }
47         form button{
48             background-color:grad;
49             height:50px;
50             width:100px;
51             border-radius:20px;
52             font-family:"楷体";
53             font-size:30px;
54         }
55         form button:hover{
56             background-color:pink;
57         }
58     </style>
59 </head>
60 <body>
61     <div class="content">
62         <div class="container">    
63             <h1>柠檬学院</h1>
64             <form>
65                 <input type="text" name="useid" placeholder="请输入账号"/>
66                 <input type="password" name="pw" placeholder="请输入密码"/>
67                 <button type="submit">登录</button>
68                 <button type="submit">注册</button>    
69             </form>
70         </div>
71     </div>
72 </body>
73 </html>

 

 

先布局,后填充,网页设计的规范格式

 

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 4 <!--link href="*.css" rel="stylesheet" type="text/css">-->    
 5     <title>柠檬学院</title>
 6     <style type="text/css">
 7         *{
 8             margin:0px;
 9             padding:0px;/*设置距顶点的距离设置为0*/
10         }
11         .header{
12             background-color:pink;
13             color:blue;
14             height:80px;
15             width:100%;
16             text-align:center;
17             font-size:60px;
18         }
19         .main{
20             margin:0 auto 0 auto;
21             background-color:yellow;
22             text-align:center;
23             font-size:60px;
24             width:80%;
25             height:600px;
26         }
27         .foot{
28             background-color:gray;
29             width:80%;
30             margin:0 auto 0 auto;
31             height:200px;
32             text-align:center;
33             font-size:60px;
34         }
35     </style>
36 </head>
37 <body>    
38     <div class="header">
39         页面头部信息
40     </div>
41     <div class="main">
42         页面的主要内容
43     </div>
44     <div class="foot">
45         页面的版权信息
46     </div>
47 </body>
48 </html>

 

 

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 4 <!--link href="*.css" rel="stylesheet" type="text/css">-->    
 5     <title>柠檬学院</title>
 6     <style type="text/css">
 7         *{
 8             margin:0px;
 9             padding:0px;/*设置距顶点的距离设置为0*/
10             text-align:center;
11         }
12         .header{
13             background-color:yellow;
14             height:100px;
15             width:100%;
16             font-size:80px;
17             font-family:"楷体";
18             
19         }
20         .main{
21             width:80%;
22             margin:0 auto 0 auto;
23         }
24         .left{
25             background-color:brown;
26             float:left;/*改变位置*/
27             height:200px;
28             width:20%;
29             font-size:60px;
30             color:yellow;
31         }
32         .right{
33             background-color:peachpuff;
34             height:200px;
35             width:80%;
36             float:right;
37             font-size:60px;
38             color:blue;
39         }
40         .main1{
41             margin:0 auto 0 auto;
42             background-color:yellow;
43             text-align:center;
44             font-size:60px;
45             width:80%;
46             height:600px;
47         }
48        .foot{
49             background-color:gray;
50             width:80%;
51             margin:0 auto 0 auto;
52             height:200px;
53             text-align:center;
54             font-size:60px;
55          }
56     </style>
57 </head>
58 <body>    
59     <div>
60         <div class="header">
61             页面头部信息
62         </div>
63         <div class="main">
64             <div class="left">
65                 LOGO
66             </div>
67             <div class="right">
68                 页面导航
69             </div>
70         </div>
71          <div class="main1">
72             页面的主要内容
73         </div>
74         <div class="foot">
75              页面的版权信息
76         </div>    
77     </div>
78 </body>
79 </html>

 

  1 <html>
  2 <head>
  3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  4 <!--link href="*.css" rel="stylesheet" type="text/css">-->    
  5     <title>柠檬学院</title>
  6     <style type="text/css">
  7         *{
  8             margin:0px;
  9             padding:0px;/*设置距顶点的距离设置为0*/
 10             text-align:center;
 11         }
 12         .header{
 13             background-color:yellow;
 14             height:100px;
 15             width:100%;
 16             font-size:80px;
 17             font-family:"楷体";
 18             
 19         }
 20         .main{
 21             width:80%;
 22             margin:0 auto 0 auto;
 23             height:200px;
 24         }
 25         .left{
 26             background-color:brown;
 27             float:left;/*改变位置*/
 28             height:200px;
 29             width:20%;
 30             font-size:60px;
 31             color:yellow;
 32         }
 33         .right{
 34             background-color:peachpuff;
 35             height:200px;
 36             width:80%;
 37             float:right;
 38             font-size:60px;
 39             color:blue;
 40         }
 41         ad{
 42             height:480px;
 43             width:100%;
 44             margin:auto 0 0 auto;
 45         }
 46         .ad1{
 47             width:10%;
 48             height:550px;
 49             margin:0 auto auto auto;
 50             background-color:blue;
 51             float:left;
 52             font-size:60px;
 53         }
 54         .main1{
 55             margin:0 auto 0 auto;
 56             background-color:yellow;
 57             text-align:center;
 58             font-size:60px;
 59             width:80%;
 60             height:480px;
 61             float:left;
 62         }
 63         .ad2{
 64             width:10%;
 65             height:550px;
 66             margin:0 auto auto auto;
 67             background-color:blue;
 68             float:right;
 69             font-size:60px;
 70         }
 71        .foot{
 72             background-color:gray;
 73             width:80%;
 74             margin:0 auto 0 auto;
 75             height:200px;
 76             text-align:center;
 77             font-size:60px;
 78          }
 79     </style>
 80 </head>
 81 <body>    
 82     <div>
 83         <div class="header">
 84             页面头部信息
 85         </div>
 86         <div class="main">
 87             <div class="left">
 88                 LOGO
 89             </div>
 90             <div class="right">
 91                 页面导航
 92             </div>
 93         </div>
 94         <div class="ad">
 95             <div class="ad1">
 96                 广告投放
 97             </div>        
 98             <div class="main1">
 99                 页面的主要内容
100             </div>
101             <div class="ad2">    
102                 广告投放
103             </div>
104         </div>    
105         <div class="foot">
106             页面的版权信息
107         </div> 
108     </div>
109 </body>
110 </html>

 

目录
相关文章
|
5天前
|
前端开发
CSS实现充电效果案例
CSS实现充电效果案例
14 1
|
5天前
|
XML 前端开发 JavaScript
Html:CSS介绍
Html:CSS介绍
18 1
|
5天前
|
前端开发
Html:CSS的书写位置
Html:CSS的书写位置
13 0
|
1天前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML与CSS之旅
【9月更文挑战第31天】在这个数字时代,拥有一个个人博客网站是展示自我、分享知识和连接世界的重要方式。本文将引导你通过简单的HTML和CSS知识,一步步构建起你的在线空间。无论你是编程新手还是希望通过实践加深理解,这篇文章都将是你的理想指南。我们将探索基本概念,实现页面布局,并点缀以个性化样式,最终将静态页面转变为动态交互式网站。准备好了吗?让我们开始吧!
|
4天前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
8 2
|
6天前
|
JavaScript 前端开发
JavaScript HTML DOM - 改变CSS
JavaScript HTML DOM - 改变CSS
15 4
|
4天前
|
前端开发 JavaScript
HTML+JavaScript+CSS DIY 分隔条splitter
HTML+JavaScript+CSS DIY 分隔条splitter
|
5天前
|
前端开发 数据安全/隐私保护 容器
HTML+CSS 水滴登录页
该代码实现了一个创意的水滴登录页面,包含一个水滴形状的登录框与两个按钮(忘记密码和注册)。登录框包括用户名、密码输入框及登录按钮。页面设计独特,采用渐变色与动态效果,增强了交互性和视觉美感。以下为关键实现步骤: - 重置默认样式。 - 设置页面背景颜色和尺寸。 - 定义登录表单容器的布局、位置和尺寸。 - 设置登录表单内容样式,包括3D效果和过渡动画。 - 创建伪元素增强水滴效果。 - 设定输入框容器和输入框样式。 - 为提交按钮、忘记密码和注册按钮设定特定样式,并添加悬停效果。
WK
|
7天前
|
存储 移动开发 前端开发
HTML5和CSS5有什么区别
HTML5和CSS5在网页设计中扮演不同角色。HTML5是超文本标记语言的第五版,通过新特性如实时更新、跨平台运行及更好的安全性等,定义网页内容和结构。尽管常说CSS5,实际最新的CSS版本包含多个模块如CSS Grid和Flexbox,主要用于控制网页布局和样式,提供强大的选择器、动画支持和响应式设计,与HTML5相辅相成,共同构建现代网页的基础架构。
WK
22 3
|
19天前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
20 0
下一篇
无影云桌面