table藉助css樣式美化例子-新增員工資訊
<table class="sp-grid-job">
<tbody>
<tr>
<td style="width: 90px;">姓 名</td>
<td style="width: 210px;"><input type="text" /></td>
<td style="width: 90px;">性 別</td>
<td style="width: 210px;">
<select class="sp-select" name="sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
</td>
<td style="width: 90px;">出生年月</td>
<td style="width: 210px;"><input type="text" class="laydate-icon" onclick="laydate({ format: 'YYYY-MM' })" /></td>
<td rowspan="3" style="width: 90px;">
<img id="manPhoto" src="" alt="照片" style="width:90px;height:100px;" onclick="addPhoto()" />
</td>
</tr>
<tr>
<td>籍 貫</td>
<td><input type="text" /></td>
<td>民 族</td>
<td><input type="text" /></td>
<td>健康狀況</td>
<td>
<select class="sp-select" name="healthStatus">
<option value="良好">良好</option>
<option value="一般">一般</option>
</select>
</td>
</tr>
<tr>
<td>政治面貌</td>
<td>
<select class="sp-select" name="political">
<option value="群眾">群眾</option>
<option value="團員">團員</option>
<option value="中共黨員">中共黨員</option>
</select>
</td>
<td>婚 否</td>
<td>
<select class="sp-select" name="marry">
<option value="未婚">未婚</option>
<option value="已婚">已婚</option>
</select>
</td>
<td>最高學歷</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>專 業</td>
<td colspan="3">
<input type="text" />
</td>
<td>學 校</td>
<td colspan="2">
<input type="text" />
</td>
</tr>
<tr>
<td>部 門</td>
<td>
<input type="text" />
</td>
<td>崗 位</td>
<td>
<input type="text" />
</td>
<td>職務狀態</td>
<td colspan="2" >
<select class="sp-select" name="positionStatus">
<option value="試用期">試用期</option>
<option value="在職">在職</option>
</select>
</td>
</tr>
<tr>
<td>入公司日期</td>
<td>
<input type="text" class="laydate-icon" onclick="laydate()" />
</td>
<td>合同型別</td>
<td>
<select class="sp-select" name="contractType">
<option value="3年期">3年期</option>
<option value="試用期">試用期</option>
</select>
</td>
<td></td>
<td colspan="2" >
</td>
</tr>
<tr>
<td>聯絡電話</td>
<td>
<input type="text" />
</td>
<td>身份證號碼</td>
<td>
<input type="text" />
</td>
<td>地 址</td>
<td colspan="2" >
<input type="text" />
</td>
</tr>
</tbody>
</table>
<div class="sp-grid-job-div">教育經歷</div>
<table class="sp-grid-job" style="border-top:none;">
<tr>
<td style="width:300px;">開始日期</td>
<td style="width:300px;">結束日期</td>
<td style="width:300px;">學 校</td>
<td style="width:90px;">證明人</td>
</tr>
<tr>
<td><input type="text" class="laydate-icon" onclick="laydate()" /></td>
<td><input type="text" class="laydate-icon" onclick="laydate()" /></td>
<td ><input type="text" /></td>
<td><input type="text" /></td>
</tr>
</table>
<div class="sp-grid-job-div">添 加</div>
<div class="sp-grid-job-div">工作經歷</div>
<table class="sp-grid-job" style="border-top:none;">
<tr>
<td style="width:300px;">開始日期</td>
<td style="width:300px;">結束日期</td>
<td style="width:300px;">公司名稱</td>
<td style="width:90px;">職務</td>
</tr>
<tr>
<td><input type="text" class="laydate-icon" onclick="laydate()" /></td>
<td><input type="text" class="laydate-icon" onclick="laydate()" /></td>
<td ><input type="text" /></td>
<td><input type="text" /></td>
</tr>
</table>
<div class="sp-grid-job-div">添 加</div>
<div class="sp-grid-job-div">家庭關係</div>
<table class="sp-grid-job" style="border-top:none;">
<tr>
<td style="width:200px;">關 系</td>
<td style="width:200px;">姓 名</td>
<td style="width:300px;">工作單位</td>
<td style="width:200px;">聯絡電話</td>
</tr>
<tr>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td ><input type="text" /></td>
<td><input type="text" /></td>
</tr>
</table>
<div class="sp-page-box text-center"><input type="button" value="保 存" class="sp-btn-blue" /></div>
</div>
相關推薦
table藉助css樣式美化例子-新增員工資訊
<div class="sp-page-content" style="width:900px;"> <table class="sp-grid-job">
css樣式簡單例子
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"&g
css input checkbox和radio樣式美化
tex 功能 pri pretty radi 方法 soft cursor 上傳 css input checkbox和radio樣式美化 2014年9月1日 132495次瀏覽 在之前的一篇文章中，我已經介紹了input file上傳按鈕的美化，地址：http://ww
如何給table的指定td進行css樣式改變
背景 ble 背景色 blog css code -c div pre td:nth-child(3){background-color:#000; color:#fff;}/*把第3個td的背景設為黑色*/ :nth-child()不止可以給table指定樣式 p標簽
css - 表單元素默認樣式美化 - 單選框
NPU color 效果 lin ont put inpu dde -c 單選框 HTML代碼 樣式 .radio input{ visibility: hidden;}.radio label{ position: relative;}.radio label:a
Vuejs使用scoped style為v-html中標籤新增CSS樣式
本文最新版本及更多技術文章請訪問我的個人技術部落格： http://blog.sbot.io 謝謝大家支援！ 在Vue元件中，我們可以使用<style scoped>標籤來新增針對該元件的CSS樣式。 <template>
HTML+CSS第六課：初識CSS之CSS選擇器的使用、為HTML文件新增CSS樣式的3種方式
知識點：CSS的概念及語法、CSS選擇器的使用、CSS選擇器的優先順序、新增CSS樣式的3種方式。 1、CSS概念理解 CSS 是Cascading Style Sheet的縮寫，可以翻譯為“層疊樣式表”或者“級聯樣式表”，即“樣式
@Html.LabelFor 如何直接新增CSS樣式
樣式用的是bootstrap。 我想單獨調整一下其中一個控制元件的樣式，大概這個造型。 @Html.LabelFor(m => m.DerivationRate, new { @class = "control-label", @style = "font-weight: normal;
【前端】設定好CSS樣式動態新增元素會按照樣式顯示
這篇就是簡單記錄下一個小點： 設定好CSS樣式先，然後動態生成元素，元素可以按照CSS樣式顯示，只要對應到相應的規則即可。 <!DOCTYPE html> <html> <head> <title>Grid Layout Tes
開始學習CSS，為網頁新增樣式
目錄 任務 認識CSS樣式 CSS全稱為“層疊樣式表 (Cascading Style Sheets)”，它主要是用於定義HTML內容在瀏覽器內的顯示樣式，如文字大小、顏色、字型加粗等。 如下列程式碼： p{ font-size:12px;
CSS樣式基本知識，新增樣式,
認識CSS樣式 CSS全稱為”層疊樣式表(Cascading Style Sheets)”, 它主要是用於定於HTML內容在瀏覽器內的顯示樣式，如文字大小，顏色，字型加粗等。 如下列程式碼: p{ font-size:12px; c
【CSS筆記一】開始學習CSS，為網頁新增樣式
一、認識CSS樣式 CSS全稱為“層疊樣式表 (Cascading Style Sheets)”，它主要是用於定義HTML內容在瀏覽器內的顯示樣式，如文字大小、顏色、字型加粗等。 如下列程式碼：
第 1 章 開始學習 CSS，為網頁新增樣式
認識 CSS 樣式 CSS 全稱為“層疊樣式表 (Cascading Style Sheets)”，它主要是用於定義 HTML 內容在瀏覽器內的顯示樣式，如文字大小、顏色、字型加粗等。 如下列程式碼： p{ font-size:20px
網頁中新增CSS樣式表的四種方式
1.內嵌樣式 <p style="color: sienna;margin-left: 20px;"> 這是一個段落 </p> <!--這個段落顏色為土黃，左邊距為20象素-->2.匯入外部樣式表 a <head>
網頁新增CSS樣式表的四種方法
一、使用STYLE屬性： 將STYLE屬性直接加在個別的元件標籤裡。 <元件(標籤) STYLE="性質(屬性)1: 設定值1; 性質(屬性)2: 設定值2; ...} 例如： <TD STYLE="COLOR:BLUE; font-size:9pt; fo
在Html新增CSS樣式
<head> <meta name="GENERATOR" content="Microsoft FrontPage 6.0"> <meta name="ProgId" content="FrontPage.Editor.Document"&g
table裡的cellSpacing用css樣式代替方法
我們做WEB程式開發過程中,經常會為了Table中的cellSpacing,cellpadding等樣式的設定發愁,經常沒有辦法可想了,就會直接在Table中設定cellSpacing,cellpadding了,這樣以後要改頁面風格時,或做多主題風格時,就會發現改起來是多麼的
TABLE 的css的樣式表
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 下面為HTML <head><title></title><link rel="stylesheet" hr
好看的table css樣式
漂亮的table表格樣式css原始碼漂亮的table表格樣式css原始碼<head> <title></title> <style type="text/css"> table {
html——table標籤及其css樣式
<table border="1" width="400px" height="200px"> <caption>完整table</caption> //標題