一个确认商品表单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>简单jQuery商品属性选择表单</title>
	<meta name="keywords" content="属性选择,jQuery" />
	<meta name="description" content="。" />
	<link rel="stylesheet" type="text/css" href="http://www.sucaihuo.com/jquery/css/common.css" />
	<style>
	.yListr {
	690px;
	font-family: "微软雅黑";
	margin: 46px auto 0 auto;
	}

	.yListr ul {
	border-bottom: 1px solid #dcdcdc;
	padding-bottom: 10px;
	margin-bottom: 13px;
	}

	.yListr ul li {
	height: 36px;
	margin-bottom: 23px;
	}

	.yListr ul li span {
	color: #000000;
	font-size: 14px;
	line-height: 36px;
	display: inline-block;
	42px;
	padding-left: 4px;
	}

	.yListr ul li em {
	cursor: pointer;
	color: #666666;
	font-size: 14px;
	display: inline-block;
	padding: 0 10px;
	font-style: normal;
	border: 1px solid #dcdcdc;
	line-height: 34px;
	height: 34px;
	}

	.yListr ul li em.yListrclickem {
	line-height: 32px;
	border: 2px solid #e9630a;
	height: 32px;
	position: relative;
	padding: 0 9px;
	}

	.yListr ul li em.yListrclickem i {
	display: block;
	15px;
	height: 14px;
	background: url(images/righbt.png) no-repeat 0 0;
	right: -1px;
	bottom: -1px;
	position: absolute;
	}

	.yListr .colorp00 {
	color: #333333;
	font-size: 18px;
	line-height: 50px;
	}

	.yListr .colorp00 span {
	color: #ed610c;
	font-size: 14px;
	padding-left: 20px;
	}

	.yListr .colorp00 em {
	font-style: normal;
	}

	.yListr form input, .yListr form select {
	outline: none;
	border: 1px solid #dcdcdc;
	86px;
	height: 34px;
	font-size: 14px;
	color: #333333;
	padding-left: 8px;
	}

	.yListr form select {
	height: 36px;
	}

	.yListr form .YImmediatelyininstallment {
	font-size: 24px;
	color: #ffffff;
	text-align: center;
	display: block;
	332px;
	height: 50px;
	line-height: 50px;
	border-radius: 3px;
	background: #e9630a;
	margin-top: 42px;
	}
	</style>
	</head>
	<body>
	<div class="head">
	<div class="head_inner clearfix">
	<ul id="nav">
	<li><a href="http://www.sucaihuo.com">首页</a></li>
	<li><a href="http://www.sucaihuo.com/templates">网站模板</a></li>
	<li><a href="http://www.sucaihuo.com/js">网页特效</a></li>
	</ul>
	<a class="logo" href="http://www.sucaihuo.com"><img src="http://www.sucaihuo.com/Public/images/logo.jpg" alt="素材火logo" /></a>
	</div>
	</div>
	<div class="container">
	<div class="demo">
	<h2 class="title"><a href="http://www.sucaihuo.com/js/87.html">简单jQuery商品属性选择表单</a></h2>
	<div class="yListr">
	<form>
	<ul>
	<li><span>颜色</span> <em class="yListrclickem">深灰色<i></i></em> <em>金色<i></i></em> <em>银色<i></i></em> </li>
	<li><span>内存</span> <em class="yListrclickem">16G ROM<i></i></em> </li>
	<li><span>尺寸</span> <em class="yListrclickem">5.5寸<i></i></em> </li>
	<li><span>尺寸</span> <em class="yListrclickem">港版（二网）<i></i></em> <em>类型<i></i></em>
	</li>
	</ul>
	<p class="colorp00">
	价值：<em>￥6099.00</em> <span>月供：<em>6281.97</em>元（本金：<em>6099.00</em>元 + 服务费：<em>182.97</em>元）分期
	x <em>1个月</em></span>
	</p>
	<label>
	首付金额：</label>
	<input type="text" />
	<label>
	元</label>
	<label style="margin-left: 40px;">
	分期月数：</label>
	<select>
	<option>1</option>
	<option>2</option>
	<option>3</option>
	<option>4</option>
	<option>5</option>
	<option>6</option>
	<option>7</option>
	<option>8</option>
	<option>9</option>
	<option>10</option>
	<option>11</option>
	<option>12</option>
	<option>13</option>
	<option>14</option>
	<option>15</option>
	<option>16</option>
	</select>
	<a href="" class="YImmediatelyininstallment">立即分期</a>
	</form>
	</div>
	</div>
	</div>
	<div class="foot">
	Powered by sucaihuo.com 本站皆为作者原创，转载请注明原文链接：<a href="http://www.sucaihuo.com" target="_blank">www.sucaihuo.com</a>
	</div>
	<script type="text/javascript" src="http://www.sucaihuo.com/Public/js/other/jquery.js"></script>
	<script type="text/javascript">
	$(function() {
	$(".yListr ul li em").click(function() {
	$(this).addClass("yListrclickem").siblings().removeClass("yListrclickem");
	})
	})
	</script>
	</body>
	</html>

css

html,body,div,span,h1,h2,h3,h4,h5,h6,p,pre,a,code,em,img,small,strong,sub,sup,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
a{color:#007bc4; text-decoration:none;}
a:hover{text-decoration:underline}
ol,ul{list-style:none}
table{border-collapse:collapse;border-spacing:0}
html{background:url(../images/demo_bg.png)}
body{height:100%; font:12px/18px "Microsoft Yahei", Tahoma, Helvetica, Arial, Verdana, "5b8b4f53", sans-serif; color:#51555C;}
img{border:none}
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.head {border-bottom: 1px solid #dadada;padding: 0 0 5px;}
.head_inner {margin: 0 auto; 980px;}
.container{980px; min-height:600px; margin:30px auto 0 auto; border:1px solid #d3d3d3; background:#fff; -moz-border-radius:5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px; border-radius:5px;}
h2.title{margin:4px 0 30px;padding:15px 0 10px 20px; border-bottom:1px solid #d3d3d3; font-size:18px; color:#a84c10; background:url(../images/arrow.jpg) no-repeat 2px 14px}
.foot{ height:60px;padding:10px 2px; line-height:24px; text-align:center}
.foot a:hover{color:#51555C}
.btn{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;
     background-color: #ff8400;color: #fff;display: inline-block;height: 28px;line-height: 28px;text-align: center;
      72px;transition: background-color 0.2s linear 0s;border:none;cursor:pointer;}
.demo{700px;margin:0 auto}
.btn:hover{background-color: #e95a00;text-decoration: none}

ul.ul_demo li {
    background: url("../images/demo_icon.gif") no-repeat scroll 0 6px;
    line-height: 28px;
    padding-left: 20px;
}
.input{border:1px solid #ccc;padding:0 5px;220px; height: 26px;line-height: 26px;}
#nav {
    float: right;
    margin: 30px 0 0;
}

#nav li {
    float: left;
    font-size: 16px;
    margin-right: 20px;
}