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;录</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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏.Net移动开发

VisualStudio移动开发(C#、VB.NET)Smobiler开发平台——GifView控件的使用方式

获取或设置获取图像模式,默认设置为“File”,表示直接从文件中读取图像,如图 4;

532
来自专栏前端知识分享

第7天:input和label标签

今天学的不多,就只学了表单元素中的input和label标签。搬了房子,收拾了一下东西,太累了,所以没有学很多。明天还上班,今天就先到这。

691
来自专栏向治洪

android顶部导航条

  今天给大家介绍在Android中实现顶部导航菜单左右滑动效果的二种解决方案。   第一种解决方案:    在以前的一篇博文中我使用android-su...

5115
来自专栏每日一篇技术文章

IOS开发必须知道的3DLabel实现过程

最近写了很多关于SceneKit 的入门教程文章,初衷就是想给应用增加一点色彩,今天就教大家实现一个简单的3DLabel 的小框架.如果你的应用中需要实现3D字...

591
来自专栏IMWeb前端团队

移动端重构实战系列5——form元素

form 大概要实现的效果如下图(具体demo可见sheral form): ? 粗略一看,跟line list差不多,好像可以直接套用,但是深究起来还是有那么...

2225
来自专栏计算机编程

SNS项目笔记<三>--fab与遮罩

<b>在项目界面搭建过程中,使用fab的时候发现ionic自带的控件中并没有遮罩这样的属性这让我们实际操作起来很不舒服如下图所示:

734
来自专栏抠抠空间

Bootstrap框架

Bootstrap介绍 Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。 它是为实现快速开发Web应用程序而设计的...

3846
来自专栏技术博文

在vim中快速复制粘贴多行

用vim写代码时,经常遇到这样的场景,复制多行,然后粘贴。 我现在这样做: 1. 将光标移动到要复制的文本开始的地方,按V(是大写V)进入可视模式。 2. 将光...

26110
来自专栏Material Design组件

Material Design — 按钮( Buttons)

36316
来自专栏小轻论坛

Adobe Audition常用快捷键

2、播放和录制   播放/停止 【空格】   录制/暂停 【Ctrl】+【空格】   从光标所在处开始播放 【Shift】+【空格】   从头开始播放 【Ctr...

972

扫码关注云+社区