DIV的表單布局

表單布局其實用表格最好了,可是表格的話,無法定位,這個是一個硬傷。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表單布局</title>
<link rel="stylesheet" type="text/css" href="css/jnreset.css">
<style>
.formList{ margin:2px 0;}
.formList:before,.formList:after {content:""; display:table;}
.formList:after { clear:both; }
.formList{ zoom:1;}
.formList .formTit{ width:100px; line-height:30px; float:left; text-align:right;}
.formList .formMain{ margin-left:100px; padding-top:2px;}
.formList .formMain input{position:relative;top:2px;}
.formList .formMain select{position:relative;top:4px;}
.formList .formMain label{ margin-right:20px;}
.formList .formMain label input{ margin-right:3px; top:2px;}
</style>
</head>
<body><div class="formList"><div class="formTit"><label for="name">姓名:</label></div><div class="formMain"><input type="text" id="name" /></div>
</div><div class="formList"><div class="formTit">性別:</div><div class="formMain"><input type="radio" name="sex" id="man" /><label for="man"></label><input type="radio" name="sex" id="woman" /><label for="woman"></label></div>
</div><div class="formList"><div class="formTit">性別:</div><div class="formMain"><input type="checkbox" name="sex" /><label></label><input type="checkbox" name="sex" /><label></label></div>
</div><div class="formList"><div class="formTit">性別:</div><div class="formMain"><select><option>我的這個是什么情況</option></select></div>
</div><div class="formList"><div class="formTit">文件:</div><div class="formMain"><input type="file" /></div>
</div><div class="formList"><div class="formTit">備注:</div><div class="formMain"><textarea></textarea></div>
</div><div class="formList"><div class="formTit"></div><div class="formMain"><input type="button" value="登錄" /></div>
</div></body></html>

?

轉載于:https://www.cnblogs.com/busicu/p/4024404.html

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

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

相關文章

后臺系統可擴展性學習筆記(三)DNS機制原理

文章目錄DNS概念梳理域名基本概念資源記錄基本概念路由策略DNS 域空間結構實現原理復制機制查詢機制緩存機制參考DNS概念梳理 DNS&#xff08;Domain Name System&#xff09;相當于互聯網的通訊錄&#xff0c;能夠把域名翻譯成 IP 地址。 從技術角度來講&#xff0c;DNS 是個…

后臺系統可擴展性學習筆記(四)CDN機制原理

文章目錄概念梳理CDN拓撲結構CDN內容分發方式架構原理工作原理實現原理概念梳理 CDN&#xff08;Content Delivery Network&#xff0c;內容分發網絡&#xff09;是由分布在不同地理位置的代理服務器及其數據中心組成的網絡&#xff0c;希望在空間距離上為用戶就近提供服務&am…

Javascript 基礎—變量 運算符

經過找工作筆試的洗禮&#xff0c;感覺自己js語法方面掌握的不是很系統&#xff0c;今天來梳理下——變量以及運算符。 基礎篇 和C語言的不同點&#xff1a;是一種弱類型語言&#xff0c;申明變量時不需要指定類型&#xff1b;變量名的命名方法也有不同&#xff1b;簡單類型種類…

后臺系統可擴展性學習筆記(五)負載均衡

文章目錄Load balancer(負載均衡器)請求傳輸拆解DNS 負載均衡客戶端負載均衡OSI 七層模型回顧2 層、3 層負載均衡3/4 層負載均衡7 層負載均衡在 第一節談到了系統的橫向擴展在于從單機擴展到多機&#xff0c;那么面臨的第一個問題就是這些機器如何協同工作&#xff0c;即如何調…

Struts2第一個工程helloStruts極其基本配置

前面已經準備好了Struts-2.3.15&#xff0c;現在就可以直接搭建Struts2的工程了。前面http://blog.csdn.net/huangchnegdada/article/details/9179041有對Struts-2.3.15的準備工作的詳述。 首先打開MyEclispe新建一個Web Project&#xff0c;名字就叫Struts2_0100_Introduction…

[LeetCode]Find Minimum in Rotated Sorted Array

題目描述&#xff1a; Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e., 0 1 2 4 5 6 7 might become 4 5 6 7 0 1 2). Find the minimum element. You may assume no duplicate exists in the array. 解題方案&#xff1a; 直接貼代碼&…

后臺系統可擴展性學習筆記(六)反向代理

文章目錄Web代理服務反向代理反向代理作用Web代理服務 Web 代理服務指的是在客戶端資源請求和提供這些資源的 Web 服務之間充當中介的角色&#xff0c;代理服務可以實現在客戶端&#xff0c;或者從客戶端到目標服務器中間的任意環節。 例如&#xff0c;客戶端不直接向提供目標…

(C)單鏈表

老師版 1 #include <stdio.h>2 #include <stdlib.h>3 4 // 定于Node數據類型5 struct Node6 {7 int data; // 數據域8 struct Node *next; // 指針域9 };10 11 // 創建一個單鏈表&#xff0c;并把head節點返回&#xff1b;…

實驗:sigsuspend(),sigprocmask()

實驗&#xff1a;sigsuspend(),sigprocmask()源代碼&#xff1a;/* * Program: pause_suspend.c * To test the difference between sigsuspend() and paus(). * Author: zsl * Date: 2014-10-17 * First release. * 參見網頁&#xff1a;http://blog.csdn.net/liwentao1091/ar…

后臺系統可擴展性學習筆記(七)Service Discovery與微服務

文章目錄應用層微服務架構服務注冊查詢 Service Discovery客戶端 Service DiscoveryDNS-SD DNS-based Service Discovery服務端 Service Discovery服務注冊與注銷自注冊模式第三方注冊模式總結參考應用層 在簡單的 3 層結構中&#xff0c;Web 服務層既要處理請求&#xff0c;又…

很久沒寫代碼了,這(那)幾天真是累死了。。。先寫一個幻方的程序吧

1 #include <stdio.h>2 #include <stdlib.h>3 #include <windows.h>4 5 #define EVEN_DOUBLE_4 4 //雙偶的最基本類型&#xff0c;4階雙偶6 #define SCREEN_SIZE 19 //屏幕顯示不變形的最大尺寸&#xff08;主要是因為窗口大小限制&#xff09;7 #defi…

#pragma once

http://baike.baidu.com/view/1276747.htm?fraladdin 轉載于:https://www.cnblogs.com/prayer521/p/4069040.html

后臺系統可擴展性學習筆記(八)Service Mesh

文章目錄網絡傳輸可靠性將微服務控制下沉到網絡棧&#xff1f;Sidecar從 Sidecar 到 Service MeshService Mesh 部署平臺參考網絡傳輸可靠性 從計網的學習過程中我們可以知道數據在網絡傳輸中可能會出現一些異常狀況&#xff1a; 數據丟失&#xff1a;數據包可能會到達一個緩…

關于Spring batch的學習之CSV2DB

最近在學習Spring batch相關的內容&#xff0c;網上也有不少Spring Batch相關的知識&#xff0c;不過大多都是使用xml進行配置的。這里是我用注解的方式進行相關的學習心得。 首先我們來看如何將一個文本文件中的內容導入到數據庫中。 我們先來看一下我們所需要的環境。我們這里…

后臺系統可擴展性學習筆記(九)Database Replication

文章目錄數據庫擴展一致性問題Replication &#xff08;復制&#xff09;異步復制同步復制半同步復制拓撲結構單主結構多主結構無主結構復制具體措施參考數據庫擴展 之前在第一章后臺系統可擴展性學習筆記&#xff08;一&#xff09;概要談到&#xff1a;理論上&#xff0c;有…

python中的sum函數.sum(axis=1)

看起來挺簡單的樣子&#xff0c;但是在給sum函數中加入參數。sum&#xff08;a&#xff0c;axis0&#xff09;或者是.sum(axis1) 就有點不解了 在我實驗以后發現 我們平時用的sum應該是默認的axis0 就是普通的相加 而當加入axis1以后就是將一個矩陣的每一行向量相加 例如&…

后臺系統可擴展性學習筆記(十)Database Partitioning

為了提升數據庫的處理能力&#xff0c;我們把單庫擴展成多庫&#xff0c;并通過更新同步機制&#xff08;即Replication&#xff09;來保證多份數據的一致性。然而&#xff0c;在 各種復制方案下&#xff0c;每個數據庫都持有一份完整數據&#xff0c;基于全量數據提供增刪改查…

基于FPGA的HDTV視頻圖像灰度直方圖統計算法設計

隨著HDTV的普及&#xff0c;以LCD-TV為主的高清數字電視逐漸進入蓬勃發展時期。與傳統CRT電視不同的是&#xff0c;這些高清數字電視需要較復雜的視頻處理電路來驅動&#xff0c;比如&#xff1a;模數轉換&#xff08;A/D Converter&#xff09;、去隔行&#xff08;De-interla…

后臺系統可擴展性學習筆記(十一)Database Denormalization

之前的兩篇筆記中談到了從單庫擴展到多庫以承載更多的請求量以及單庫&#xff08;表&#xff09;拆分成多庫&#xff08;表&#xff09;&#xff0c;打破單庫的性能瓶頸。 這都是為了應對大數據量下的措施。 然而&#xff0c;除卻數據量外&#xff0c;還有一個極其影響單庫性能…