欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

div仿checkbox表單樣式美化及功能有素材

  發(fā)布時(shí)間：2014-05-06 10:01:52   作者：佚名   我要評(píng)論
checkbox的樣式不好看，div仿checkbox表單樣式美化及功能，素材在底部，需要的朋友可以參考下
div仿checkbox表單樣式美化及功能（checkbox的樣式不好看）素材在底部：

效果圖：
 
window.css

復(fù)制代碼
代碼如下:

.bj {
position: absolute;
top: 0;
left: 0;
bottom: 1px;
width: 100 % ;
height: 980px;
z - index: 9;
background - color: #000;
filter: alpha(opacity = 50); - moz - opacity: 0.5; - khtml - opacity: 0.5;
opacity: 0.5;
}
.window {
position: absolute;
top: 106px;
left: 33 % ;
width: 466px;
background - color: #fff;
color: #000;
border - bottom: 1px solid#dbdcdd;
padding - bottom: 8px;
overflow: hidden;
z - index: 10;
}.window.top {
width: 416px;
padding: 0px 25px 0 25px;
height: 48px;
line - height: 48px;
font - size: 18px;
background - color: #ececec;
border - bottom: 1px solid#d8d8d8;
overflow: hidden;
}.window.top.close {
float: right;
margin - top: 14px;
}.window.top span {
padding: 0 6px;
}
.window.add {
width: 394px;
margin: 0 auto;
padding - top: 10px;
font - size: 15px;
color: #686868;
overflow: hidden;
}.window.add dd,
.window.add dt {
width: 100 % ;
padding - bottom: 8px;
line - height: 38px;
overflow: hidden;
}.window.add span {
float: left;
width: 69px;
overflow: hidden;
}.window.add dd input {
width: 314px;
height: 36px;
line - height: 36px;
border: 1px solid#c9c5c1;
background - color: #f2f2f2;
font - family: "微軟雅黑",
"宋體";
font - size: 15px;
color: #686868;
}.window.add dt input {
vertical - align: middle;
margin - right: 10px;
}.window.add dt label {
margin - right: 10px;
margin - left: 20px;
}.window.add dt label.perlabel {
margin - left: 0px;
}.window.add dd input.two {
width: 192px;
height: 33px;
line - height: 33px;
border: none;
background: url('../images/input09.gif') no - repeat;
margin - right: 13px;
}.window.add dd a {
margin - left: 10px;
font - size: 16px;
}.window.add dt.button {
text - align: center;
padding - top: 8px;
}.window.add dt.button input {
width: 103px;
height: 41px;
line - height: 39px;
text - align: center;
border: none;
background: url('../images/input06.gif') no - repeat;
margin: 0 5px;
font - family: "微軟雅黑",
"宋體";
font - size: 15px;
color: #686868;
}.window.post {
width: 420px;
}.window.post span {
width: 86px;
}.window.post dt {
line - height: 26px;
}.window.post dt span {
height: 108px;
line - height: 108px;
}.window.post dt label {
width: 100px;
float: left;
}.window.post dt label.perlabel {
float: none;
}.window.post textarea {
width: 312px;
height: 62px;
line - height: 24px;
border: 1px solid#c9c5c1;
background - color: #f2f2f2;
font - family: "微軟雅黑",
"宋體";
font - size: 14px;
color: #686868;
}.window.post dd input.three {
width: 238px;
margin - right: 10px;
}.window.
default {
width:
406px;
}
.window.
default span {
width:
52px;
}.window.
default dd select {
width:
38px;
margin:
0 6px;
}.window.
default dd textarea {
width:
350px;
}.window.
default dd b {
float:
right;
margin - right: 5px;
font - weight: normal;
}.window.
default dd b input {
width:
auto;
height:
auto;
margin - right: 5px;
}

頁面中的css

復(fù)制代碼
代碼如下:

<span style="font-size:12px;"><style type="text/css">
.window{
left:25%;
width:676px;
}
.window .top{
width:626px;
}
.window span{
font-family:"微軟雅黑";
font-weight: bold;
}
.window .post{
width:645px;
}
.window .post label{
font-size: 13px;
}
.window dl{
margin-left:25px !important;
}
.window .post hr{
width:230px;
text-align: left;
margin-bottom: 20px;
}
.window .add dd div{
width:125px;
float:left;
vertical-align: middle;
height: 18px;
line-height: 18px;
}
.custom_checkbox_self{
width:18px;
height:18px;
text-indent:100px;
overflow:hidden;
float:left;
background:url(../images/custom_checkbox.png);
margin-right:10px;
}
</style></span>

js函數(shù)：

復(fù)制代碼
代碼如下:

function openJoinSetting(){
var joinSetting = document.getElementById('joinSetting');
joinSetting.style.display='block';
joinSetting.style.visibility='visible';
document.getElementById('back2').style.display='block';
document.getElementById('wiSsetting').style.display='block';
}
$(document).ready(function(){
$(".custom_checkbox_self").click(function(){
if($(this).text().trim()=="0"){
$(this).css("background","url(../images/custom_checkbox_checked.png)");
$(this).text('1');
}else{
$(this).css("background","url(../images/custom_checkbox.png)");
$(this).text('0');
}
});
});

窗口代碼：

復(fù)制代碼
代碼如下:

<div id="joinSetting" style="display: none; visibility: hidden; ">
<div id="back2" class="bj"></div>
<div id="wiSsetting" class="window">
<div class="top">
<a href="javascript:closealbum();" class="close"><img
src="../images/icon03.gif" alt="關(guān)閉" /> </a>申請(qǐng)表必填項(xiàng)設(shè)置</div>
<dl class="add post">
<dd>
<span>基本信息</span><br/>
<hr/>
<div><div id="MemberName" style="width:18px;" class="custom_checkbox_self">0</div><label for="MemberName">姓名</label></div>
<div><div id="Phone" style="width:18px;" class="custom_checkbox_self">0</div><label for="Phone">手機(jī)</label></div>
<div><div id="Company" style="width:18px;" class="custom_checkbox_self">0</div><label for="Company">企業(yè)</label></div>
<div><div id="Post" style="width:18px;" class="custom_checkbox_self">0</div><label for="Post">企業(yè)職位</label></div>
<div><div id="applyPosiGuid" style="width:18px;" class="custom_checkbox_self">0</div><label for="applyPosiGuid">申請(qǐng)職務(wù)</label></div>
</dd>
<dd>
<span>詳細(xì)信息</span><br/>
<hr/>
<div><div id="Hometown" style="width:18px;" class="custom_checkbox_self">0</div><label for="Hometown">籍貫</label></div>
<div><div id="Gender" style="width:18px;" class="custom_checkbox_self">0</div><label for="Gender">性別</label></div>
<div><div id="Birthday" style="width:18px;" class="custom_checkbox_self">0</div><label for="Birthday">生日</label></div>
<div><div id="Nation" style="width:18px;" class="custom_checkbox_self">0</div><label for="Nation">民族</label></div>
<div><div id="Party" style="width:18px;" class="custom_checkbox_self">0</div><label for="Party">政治面貌</label></div>

<div><div id="IdentityCard" style="width:18px;" class="custom_checkbox_self">0</div><label for="IdentityCard">身份證</label></div>
<div><div id="EducationLevel" style="width:18px;" class="custom_checkbox_self">0</div><label for="EducationLevel">學(xué)歷</label></div>
<div><div id="Telephone" style="width:18px;" class="custom_checkbox_self">0</div><label for="Telephone">電話</label></div>
<div><div id="Fax" style="width:18px;" class="custom_checkbox_self">0</div><label for="Fax">傳真</label></div>
<div><div id="Email" style="width:18px;" class="custom_checkbox_self">0</div><label for="Email">郵箱</label></div>
</dd>
<dd>
<span>企業(yè)信息</span><br/>
<hr/>
<div><div id="CompanyAddress" style="width:18px;" class="custom_checkbox_self">0</div><label for="CompanyAddress">地址</label></div>
<div><div id="CompanyStaffNumber" style="width:18px;" class="custom_checkbox_self">0</div><label for="CompanyStaffNumber">員工數(shù)</label></div>
<div><div id="CompanyLegalPerson" style="width:18px;" class="custom_checkbox_self">0</div><label for="CompanyLegalPerson">法人代表</label></div>
<div><div id="CompanyCreatedDate" style="width:18px;" class="custom_checkbox_self">0</div><label for="CompanyCreatedDate">成立時(shí)間</label></div>
<div><div id="CompanyProperty" style="width:18px;" class="custom_checkbox_self">0</div><label for="CompanyProperty">企業(yè)性質(zhì)</label></div>

<div><div id="CompanyIsPublic" style="width:18px;" class="custom_checkbox_self">0</div><label for="CompanyIsPublic">是否上市</label></div>
<div><div id="CompanyIndustry" style="width:18px;" class="custom_checkbox_self">0</div><label for="CompanyIndustry">所屬行業(yè)</label></div>
<div><div id="CompanyWebsite" style="width:18px;" class="custom_checkbox_self">0</div><label for="CompanyWebsite">網(wǎng)址</label></div>
<div><div id="CompanyAssets" style="width:18px;" class="custom_checkbox_self">0</div><label for="CompanyAssets">企業(yè)資產(chǎn)</label></div>
</dd>
<dd>
<span>附件</span><br/>
<hr/>
<div><div id="CompanyPicUrl" style="width:18px;" class="custom_checkbox_self">0</div><label for="CompanyPicUrl">營業(yè)執(zhí)照復(fù)印件</label></div>
<div><div id="IdentityPicUrl" style="width:18px;" class="custom_checkbox_self">0</div><label for="IdentityPicUrl">身份證照片</label></div>
<div style="width:150px;"><div id="PersionPicUrl" style="width:18px;" class="custom_checkbox_self">0</div><label for="PersionPicUrl">個(gè)人名片照片</label></div>
</dd>
<dt class="button">
<input name="" type="submit" value="確認(rèn)" onclick=""/>
<input name="" type="button" value="取消" onclick="" />
</dt>
</dl>
</div>
</div>

這是一個(gè)彈出層的表單選擇。

圖片素材：

相關(guān)文章

  • 如何實(shí)現(xiàn)div 圖片在DIV內(nèi)水平居中

    本文介紹了div 圖片如何在DIV內(nèi)水平居中，無論文字居中、圖片居中等內(nèi)容居中我們都可以使用以上兩種方法實(shí)現(xiàn)，一般推薦使用CSS進(jìn)行，但網(wǎng)頁多時(shí)候，我們只需要修改CSS文件
    2021-11-30

  • DIV CSS實(shí)現(xiàn)網(wǎng)頁背景半透明效果

    DIV半透明實(shí)現(xiàn)，使用CSS實(shí)現(xiàn)DIV成半透明效果，CSS實(shí)現(xiàn)層與背景半透明效果。本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧
    2021-11-30

  • 解析div與span區(qū)別與用法

    新手在使用web標(biāo)準(zhǔn)（div css）開發(fā)網(wǎng)頁的時(shí)候，遇到第一個(gè)問題是div與span有什么區(qū)別，什么時(shí)候用div，什么時(shí)候用span標(biāo)簽。下面小編就通過本文給大家講解下，感興趣的朋友
    2021-11-30

  • 設(shè)置div背景透明的方法示例

    這篇文章主要介紹了設(shè)置div背景透明的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)
    2021-02-20

  • CSS實(shí)現(xiàn)div不設(shè)高度完全居中

    這篇文章主要介紹了CSS實(shí)現(xiàn)div不設(shè)高度完全居中，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)
    2021-02-04

  • div自適應(yīng)高度自動(dòng)填充剩余高度

    這篇文章主要介紹了div自適應(yīng)高度自動(dòng)填充剩余高度,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)
    2020-07-08

  • 詳解DIV+CSS的命名規(guī)矩才能有利于SEO優(yōu)化的實(shí)現(xiàn)方法

    這篇文章主要介紹了DIV+CSS的命名規(guī)矩才能有利于SEO優(yōu)化的實(shí)現(xiàn)方法,需要的朋友可以參考下
    2018-11-15

  • DIV或者DIV里面的圖片水平與垂直居中的方法

    這篇文章主要介紹了DIV或者DIV里面的圖片水平與垂直居中的方法,需要的朋友可以參考下
    2018-11-15

  • 詳解如何用div實(shí)現(xiàn)自制滾動(dòng)條

    這篇文章主要介紹了詳解如何用div實(shí)現(xiàn)自制滾動(dòng)條,滾動(dòng)條是瀏覽器中最常見的組件了。想要學(xué)習(xí)如何自制滾動(dòng)條的方法，需要了解的朋友可以參考下
    2018-03-21

  • div對(duì)齊與網(wǎng)頁布局詳解

    Div布局是學(xué)習(xí)的重點(diǎn)，這篇文章主要為大家詳細(xì)介紹了div對(duì)齊與網(wǎng)頁布局的相關(guān)學(xué)習(xí)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2017-08-31

最新評(píng)論