jquery模拟快递单信息

来源：互联网 2023-03-16 23:54:47 372

jquery模拟快递单信息

工具/原料

adobe dreamweaver

方法/步骤

准备好需要用到的图标。

jquery模拟快递单信息

1此文章未经许可获取自百度经验

新建html文档。

jquery模拟快递单信息

书写hmtl代码。

div class="exlist">

div class="exlist_title">img src="images/paper-clip.png" />/div>

div id="title">

legend>快递运单信息/legend>

/div>

form method="post" action="">

fieldset>

legend>收件信息/legend>

div class="row">

label>1. 收货人:/label>

input style="width:100px" class="txt" type="text" />

label>2. 目的地:/label>

select>

option>北京/option>

option>上海/option>

option>武汉/option>

option>乌鲁木齐/option>

/select>

/div>

div class="row">

label>3. 联系电话:/label>

input class="txt" type="text" />

/div>

div class="row">

label>4. 详细地址:/label>

input class="txt" style="width:400px" type="text" />

/div>

/fieldset>

fieldset>

legend>发件信息/legend>

div class="row">

label>1. 发货人:/label>

input style="width:100px" class="txt" type="text" />

label>2. 始发地:/label>

select>

option>北京/option>

option>上海/option>

option>武汉/option>

option>乌鲁木齐/option>

/select>

/div>

div class="row">

label>3. 联系电话:/label>

input class="txt" type="text" />

/div>

div class="row">

label>4. 详细地址:/label>

input class="txt" style="width:400px" type="text" />

/div>

/fieldset>

fieldset>

legend>货物信息/legend>

div class="row">

label>1. 数量:/label>

input class="txt" style="width:30px" maxlength="2" type="text" />

label>（1-99件）/label>

label>2. 体积:/label>

input class="txt" style="width:30px" maxlength="3" type="text" />

label>3. 重量:/label>

input class="txt" style="width:30px" maxlength="3" type="text" />

label>（Kg）/label>

/div>

div class="row">

label>4. 运输方式:/label>

select>

option>航运/option>

option>火车/option>

option>汽车/option>

option>轮船/option>

/select>

/div>

div class="row">

label>5. 付款方式:/label>

label>

input type="radio" name="pay" value="单选"/>

现金付款/label>

label>

input type="radio" name="pay" value="单选"/>

收件人付款/label>

label>

input type="radio" name="pay" value="单选"/>

第三方付款/label>

/div>

/fieldset>

/form>

/div>

jquery模拟快递单信息

书写css代码。

body { background-image: url(../images/wood-bg2.jpg); }

.exlist { background-color: #F9EE70; margin: 30px auto; padding: 5px; width: 680px; min-height: 200px; height: auto; font-family: "微软雅黑"; -moz-box-shadow: 4px 4px 5px #333;/*firefox*/ box-shadow: 4px 4px 5px #333;/*opera或ie9*/ }

#title { width: 200px; margin: 20px auto; }

#title legend { font-size: 26px; }

div.exlist_title { background-color: #F9EE70; width: 680px; height: 20px; }

div.exlist_title img { float: right; margin: -15px 10px; }

fieldset { width: 90%; border: 1px dashed #666; margin: 40px auto; }

legend { background-color: #F9EE70; height: 120px; height: 30px; color: #630; font-weight: bolder; font-size: 20px; line-height: 30px; margin: -20px 10px 10px; padding: 0 10px; }

div.row { margin: 10px; padding: 5px; }

div.row label { height: 20px; font-size: 16px; line-height: 20px; margin: 0 10px; }

input.txt { background-color: #F9EE70; color: #333; width: 150px; height: 20px; margin: 0 10px; font-size: 16px; line-height: 20px; border: none; border-bottom: 1px solid #565656; }

input.txt:focus { color: #333; background-color: #FF0; border-bottom: 1px solid #F00; }

select { width: 100px; }

option { text-align: center; }

input.btn { width: 50px; height: 20px; color: #000008B; background-color: transparent; border: 0; padding: 0; }

jquery模拟快递单信息