CSS基礎范例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 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">立即登陸&gt;</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>

?

本文轉載于:猿2048?https://www.mk2048.com/blog/blog.php?id=hci2kab&title=CSS基礎范例

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/370780.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/370780.shtml
英文地址,請注明出處:http://en.pswp.cn/news/370780.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

測試環境搭建流程_前端構建 DevOps 搭建 DevOps 基礎平臺(中)

前言搭建基礎平臺搭建上篇的時候的時候&#xff0c;已經介紹過了項目流程設計、數據庫搭建、jwt 登錄等模塊。此篇我們介紹分支管理設計及其他的基礎模塊。后端模塊DevOps - Gitlab Api使用(已完成&#xff0c;點擊跳轉)DevOps - 搭建 DevOps 基礎平臺(已完成 50%)基礎平臺搭建…

什么是PermGen泄漏?

接下來是對Java應用程序中特定類型的內存問題的實用介紹。 即–我們將分析導致java.lang.OutOfMemoryError&#xff1a;PermGen空間的錯誤 堆棧跟蹤中的癥狀。 首先&#xff0c;我們將介紹理解該主題所需的核心概念&#xff0c;并說明什么是對象&#xff0c;類&#xff0c;類…

html浮動炫酷樣式,jQuery和CSS3炫酷表單浮動標簽特效

這是一款炫酷的jQuery和CSS3表單浮動標簽特效。浮動標簽是指輸入框中的文字或占位文本在輸入框聚焦的時候&#xff0c;以動畫的方式浮動到指定的地方。浮動標簽特效是一種新穎時尚的動畫特效&#xff0c;不僅效果很酷&#xff0c;而且能以明確的方式提示用戶該輸入框應該填寫上…

rto凈化效率計算公式_全面剖析 石油化工行業RTO蓄熱式焚燒爐的優勢要素

在我國的國民經濟發展中&#xff0c;石油化工產業是重要的能源基礎工業&#xff0c;但是廢氣的治理問題一直困擾著許多企業。直到RTO蓄熱式焚燒爐的面世&#xff0c;為石油化工行業的廢氣治理帶來了新希望。如今&#xff0c;有機廢氣治理工作越來越受到廣泛重視&#xff0c;傳統…

python作業:高級FTP程序

要求&#xff1a; 用戶加密認證允許同時多用戶登錄每個用戶有自己的家目錄 &#xff0c;且只能訪問自己的家目錄對用戶進行磁盤配額&#xff0c;每個用戶的可用空間不同允許用戶在ftp server上隨意切換目錄允許用戶查看當前目錄下文件允許上傳和下載文件&#xff0c;保證文件一…

webpack學習筆記 (一)

一、安裝nodejs&#xff1b; 點擊打開nodejs官方站點&#xff1b; 點擊下圖框住的按鈕&#xff0c;下周nodejs安裝包&#xff1b; 安裝下載好的安裝包。 安裝完畢之后&#xff0c;在cmd中輸入node -v查看是否已經安裝成功 如果有版本號顯示&#xff0c;則代表安裝成功&#xf…

將渦輪增壓器添加到JEE Apps

我扮演的關鍵角色之一是在本地社區中傳播Akka。 作為討論的一部分&#xff0c;人們通常會想到的問題/疑問是Akka如何針對編寫良好的Java / JEE應用程序提供更好的可伸縮性和并發性。 由于底層硬件/ JVM保持不變&#xff0c;因此參與者模型如何比傳統的JEE應用程序發揮更多的功…

python package_python之package定義

一.簡單說明 python是通過module組織代碼的&#xff0c;每一個module就是一個python文件&#xff0c;但是modules是通過package來組織的。我們平時在簡單測試的時候 一般就是幾個Python文件存放在同級的目錄下&#xff0c;但是當我們開始嘗試開發更為復雜的項目時&#xff0c;p…

html 手機端無法拖動地圖,關于騰訊地圖api的禁止地圖拖動問題

禁用滾動和拖動*{margin:0px;padding:0px;}body, button, input, select, textarea {font: 12px/16px Verdana, Helvetica, Arial, sans-serif;}p{width:603px;padding-top:3px;overflow:hidden;}.btn{width:142px;}#container{min-width:600px;min-height:767px;}//初始化函數…

《一起》個人進展——Day07

昨天做了些什么:實現登錄界面的美化 今天的計劃:還是準備進行與其他界面的融合 遇到的困難:代碼了解不夠&#xff0c;融合起來會出現bug轉載于:https://www.cnblogs.com/gxt-/p/6828131.html

epoll nio區別_【總結】兩種 NIO 實現:Selector 與 Epoll

我想用這個話題小結下最近這一階段的各種測試和開發。其實文章的內容主要還是想總結一下NIO Socket&#xff0c;以及兩種不同操作系統實現NIO的方式&#xff0c;selector和epoll。問題應該從服務器端開始說起。我們都寫過net包下的socket&#xff0c;用socket的accept方法來等待…

MapReduce的工作原理

一、MapReduce模型框架 MapReduce是一個用于大規模數據處理的分布式計算模型&#xff0c;最初由Google工程師設計并實現的&#xff0c;Google已經將完整的MapReduce論文公開發布了。其中的定義是&#xff0c;MapReduce是一個編程模型&#xff0c;是一個用于處理和生成大規模數據…

react實現多行文本超出加省略號

http://www.css88.com/archives/5206 overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 根據該文章方法&#xff0c;放在react項目中發現并不能實現&#xff0c;仔細觀察發現原來react解析出來的css樣…

Google Guava MultiMaps

番石榴 這是系列文章中的第一篇&#xff0c;我將嘗試解釋和探索Google很棒的Guava java庫 。 我在搜索Apache Commons Collections的通用版本時遇到了番石榴&#xff08;Guava&#xff09;–我需要一個Bimap并且厭倦了必須使用強制類型轉換來填充我的代碼–但是我發現要好得多…

qq群 html,我的群組-普通群組.html

&#xfeff;我的群組&#xff0d;普通群組$axure.utils.getTransparentGifPath function() { return resources/images/transparent.gif; };$axure.utils.getOtherPath function() { return resources/Other.html; };$axure.utils.getReloadPath function() { return resou…

查看PLC IP 端口_西門子828D數控系統X130接口通訊怪異現象(X130手動設置的 IP)...

西門子828D數控系統&#xff0c;調試PLC過程中遇到網絡通信怪異問題(不能直連非要加個路由器)&#xff0c;筆記本電腦的以太網網絡直接連接顯示網絡電纜被拔出&#xff0c;如下圖所示&#xff1a;奇怪&#xff0c;怎么出現這種情況了呢&#xff0c;因為我用這臺電腦調試過別的P…

基于嵌入式系統的gnash最小庫依賴關系

已經對gnash的依賴庫作了詳細的分析&#xff0c;下邊是必須依賴的庫&#xff1a;GIF Required libungif-devlibxml2 Required libxml2-devPNG Requir…

git 創建webpack項目_一次create-react-app創建項目升級webpack的流水賬

不再贅述為什么要升級webpack4&#xff0c;有興趣的小伙伴可以看一下 知乎&#xff1a;如何評價webpack4下面擼起袖子開干&#xff1a;克隆項目&#xff0c;新建分支git checkout -b feature_webpack_upgrade# 相當于以下兩句的簡寫git branch feature_webpack_upgradegit chec…

bzoj1263

貪心 n%31 分出一個4&#xff0c;其余用3&#xff0c;n%32&#xff0c;分出一個2&#xff0c;其余用3&#xff0c;然后高精度就行了 #include<bits/stdc.h> using namespace std; const int N 5005; struct BigInt {int len;int a[N];BigInt() { memset(a, 0, sizeof(a)…

c語言volatile_[技術]為什么單片機C語言編程時某一變量有時亂碼

最近一個項目里面&#xff0c;在KEIL中用C語言在單片機里面定義了一個狀態機全局變量&#xff0c;這個變量隨時會改變&#xff0c;用于切換觸摸屏的界面&#xff0c;可是程序運行中出現了一個問題&#xff0c;這個狀態機號總是出現了被莫名奇妙改變的問題&#xff0c;導致觸屏不…