CSS基础范例

Lyux 发布于2019-04-23 13:28 / 2690人阅读

摘要：重置页面背景色背景色圆弧距离上部，自动居中请注册项目标签立即登陆请输入手机号请输入短信验证码发送验证码请输入用户名请输入密码请再次输入密码请输入图形验证码此处为图形立即注册

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Titletitle>
 6     <style>
 7         *{
 8             margin: 0;                  /*重置*/
 9             padding: 0;
10         }
11         body{
12             background-color: whitesmoke;   /*页面背景色*/
13         }
14         .top{
15             width: 100%;
16             height: 60px;
17             background-color: black;
18             padding-left: 100px;
19         }
20         .box{
21             width: 500px;
22             height: 600px;
23             background-color: white;    /*背景色*/
24             border-radius: 5px;         /*圆弧*/
25             margin: 20px auto;          /*距离上部20px，自动居中*/
26         }
27         .box-top{
28             width: 500px;
29             height: 60px;
30             border-bottom: 1px solid black;
31             line-height: 60px;
32         }
33         .box-top h3{
34             float: left;
35             border-bottom: 3px solid #c18ef0;
36             font-size: 30px;
37         }
38         .box-top a{
39             float: right;
40             font-size: 20px;
41             color: skyblue;
42         }
43         .box-regist input{
44             width: 480px;
45             height: 40px;
46             border-radius: 5px;
47             margin:10px;
48         }
49         .box-regist .inpbox{
50             width: 300px;
51         }
52         .box-regist a{
53             display: inline-block;
54             border: 1px solid rebeccapurple;
55             width: 100px;
56             height: 40px;
57             border-radius: 5px;
58             margin: 10px;
59             line-height: 40px;
60             text-align: center;
61             color: rebeccapurple;
62         }
63         .btn{
64             background-color: aqua;
65         }
66         .tail{
67             width: 100%;
68             height: 120px;
69             background-color: grey;
70         }
71 
72     style>
73 head>
74 <body>
75     <div class="top">div>
76     <div class="box">
77         <div class="box-top">
78             <h3>请注册h3>
79             <a href="F:项目HTML标签.html">立即登陆>a>
80         div><br>
81         <div class="box-regist">
82             <form method="post" action="">
83                 <input type="text" placeholder="请输入手机号" name="phone"><br>
84                 <input class="inpbox" type="text" placeholder="请输入短信验证码" name="cookie"><a>发送验证码a><br>
85                 <input type="text" placeholder="请输入用户名" name="user"><br>
86                 <input type="password" placeholder="请输入密码" name="psw"><br>
87                 <input type="password" placeholder="请再次输入密码" name="pswt"><br>
88                 <input class="inpbox" type="text" placeholder="请输入图形验证码" name="img-cookie"><a>此处为图形a><br>
89                 <input class="btn" type="submit" value="立即注册">
90             form>
91         div>
92     div>
93     <div class="bot1">div>
94     <div class="bot2">div>
95     <div class="tail">div>
96 body>
97 html>

GPU云服务器云服务器 css基础基础css css基础教程基础选择器css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1920.html

杂谈：渐进增强与优雅降级

摘要：而渐进增强和优雅降级两种不同的开发流程，也是在我们项目初期做调研选型时会考虑的一个点。二者区别渐进增强和优雅降级只是看待同种事物的两种观点。渐进增强和优雅降级都关注于同一网站在不同设备里不同浏览器下的表现程度。作为一名前端开发人员，最头疼的莫过于浏览器兼容。远古时期万恶的IE6，到现在CSS3不兼容的IE7/8.为了保证不同版本浏览器都有共同或更优化的用户体验，前端搬砖的我们不得不与...

hiyang 2019-08-29 16:12 评论0 收藏0
杂谈：渐进增强与优雅降级

摘要：而渐进增强和优雅降级两种不同的开发流程，也是在我们项目初期做调研选型时会考虑的一个点。二者区别渐进增强和优雅降级只是看待同种事物的两种观点。渐进增强和优雅降级都关注于同一网站在不同设备里不同浏览器下的表现程度。作为一名前端开发人员，最头疼的莫过于浏览器兼容。远古时期万恶的IE6，到现在CSS3不兼容的IE7/8.为了保证不同版本浏览器都有共同或更优化的用户体验，前端搬砖的我们不得不与...

王军 2019-08-23 10:29 评论0 收藏0
杂谈：渐进增强与优雅降级

摘要：而渐进增强和优雅降级两种不同的开发流程，也是在我们项目初期做调研选型时会考虑的一个点。二者区别渐进增强和优雅降级只是看待同种事物的两种观点。渐进增强和优雅降级都关注于同一网站在不同设备里不同浏览器下的表现程度。作为一名前端开发人员，最头疼的莫过于浏览器兼容。远古时期万恶的IE6，到现在CSS3不兼容的IE7/8.为了保证不同版本浏览器都有共同或更优化的用户体验，前端搬砖的我们不得不与...

SimonMa 2019-08-02 11:03 评论0 收藏0