css实现商品多规格选择购买页面效果代码-html代码-BFW代码库

css实现商品多规格选择购买页面效果代码

代码语言：html

代码描述：css实现商品多规格选择购买页面效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
	
<style>
    	#wrap{
		width:600px;
		height:400px;
		margin:50px auto;
	}
	#top{
		width:600px;
		height:220px;
		border-bottom:1px solid #bbb;
		font-family:'Microsoft yahei';
	}
	#top p{
		margin-bottom:15px;
	}
	#top p font{
		font-size:14px;
		color:#000;
		margin-right:15px;
	}
	#top p span{
		font-size:14px;
		color:#666;
		border:1px solid #999;
		display:inline-block;
		padding:8px;
		cursor:pointer;
	}
	#top p span.on{
		border:2px solid #f60;
		padding:7px;
		background:url(//repo.bfw.wiki/bfwrepo/image/6077f1e1d3008.png) no-repeat right bottom;
	}
	#bottom{
		width:600px;
		height:159px;
		padding-top:20px;
		font-family:'Microsoft yahei';
	}
	#bottom p font{
		color:#f60;
		font-size:20px;
		margin-right:20px;
	}
	#bottom p a{
		font-size:14px;
		color:blue;
	}
	#bottom p a i{
		margin:0 5px;
		color:#90c;
	}
	#bottom button{
		width:330px;
		height:50px;
		font-family:'Microsoft yahei';
		margin-top:20px;
		font-size:20px;
		background:#f60;
		color:#fff;
		border:none;
		
	}
</style>
	</head>
<body>

<div id="wrap">
	<div id="top">
		<p id="model">
			<font>型号</font>
			<span class="on">4.7英寸</span>
			<span>5.5英寸</span>
		</p>
		<p id="color">
			<font>颜色</font>
			<span class="on">银色</span>
			<span>金色</span>
			<span>深空灰色</span>
		</p>
		<p id="rom">
			<font>内存</font>
			<span class="on">16GB</span>
			<span>64GB</span>
			<span>128GB</span>
		</p>
		<p id="banben">
			<font>版本</font>
			<span class="on">公开版</span>
			<span>移动赠费版</span>
			<span>联通合约版</span>
		&l.........完整代码请登录后点击上方下载按钮下载查看