When publishing a product on a Web page, there are generally several sets of price schemes, usually we put together a few sets of programs, users can compare each other to decide which package to buy. The most common is the host to release the Product price Information page, this article unifies the example to share with the pure css+html realizes the price list.
Html
We use a company to promote the VPS product as an example, the HTML structure is well laid out. In fact, we are talking about the price list is not a table, all ul,li elements, through the CSS to beautify, show the effect of the page in front of us looks like a table.
The
code is as follows:
<div id= "Priceplans" >
<ul id= "plans" >
<li class= "plan" >
<ul class= "Plancontainer" >
<li class= "title" ><h2> Entry type vps</h2></li>
<li class= "Price" ><p>￥149/<span> month </span></p></li>
<li>
<ul class= "Options" >
<li> Small Business, individual preferred </li>
<li> Dual-core Xeon processors </li>
<li>1g DDR3 ECC >span> High speed error correction memory </span></li>
<li>10g + 20G >span> high-speed enterprise hard drive </span></li>
<li>1m >span> Line Bandwidth </span></li>
<li>1 >span> Independent public network ip</span></li>
</ul>
</li>
<li class= "button" ><a href= "#" > click buy </a></li>
</ul>
</li>
.... Multiple duplicate Li
</ul>
</div>
Css
We use CSS to arrange a few Li lines, using CSS3 to achieve shadow, rounded corners and the mouse slide animation effect, the following is a copy of some CSS code. You can download the source package to see the full code, of course, you can also use CSS3 to construct the response layout.
The
code is as follows:
#plans, #plans ul, #plans ul li {
margin:0;
padding:0;
List-style:none;
}
#pricePlans: After {
content: ';
display:table;
Clear:both;
}
#pricePlans {
zoom:1;
}
#pricePlans {
Max-width:69em;
Margin:2em Auto;
}
#pricePlans #plans. Plan {
background: #fff;
Float:left;
Text-align:center;
border-radius:5px;
border:1px solid #d3d3d3;
-webkit-box-shadow:0 1px 3px rgba (0,0,0,0.1);
box-shadow:0 1px 3px rgba (0,0,0,0.1);
width:23%;
margin:0 1.33% 20px 0;
-webkit-transition:all 25s;
-moz-transition:all 25s;
-ms-transition:all 25s;
-o-transition:all 25s;
Transition:all 25s;
}
#pricePlans #plans. plan:hover {
-webkit-transform:scale (1.04);
-moz-transform:scale (1.04);
-ms-transform:scale (1.04);
-o-transform:scale (1.04);
Transform:scale (1.04);
}
. Plancontainer title H2 {
font-size:2.125em;
font-weight:300;
color: #3e4f6a;
margin:0;
padding: 6em 0;
}
. Plancontainer title H2.bestplantitle {
background: #3e4f6a;
background:-webkit-linear-gradient (top, #475975, #364761);
background:-moz-linear-gradient (top, #475975, #364761);
background:-o-linear-gradient (top, #475975, #364761);
background:-ms-linear-gradient (top, #475975, #364761);
background:linear-gradient (Top, #475975, #364761);
color: #fff;
border-radius:5px 5px 0 0;
}
. Plancontainer Price P {
background: #3e4f6a;
background:-webkit-linear-gradient (top, #475975, #364761);
background:-moz-linear-gradient (top, #475975, #364761);
background:-o-linear-gradient (top, #475975, #364761);
background:-ms-linear-gradient (top, #475975, #364761);
background:linear-gradient (Top, #475975, #364761);
color: #fff;
Font-size:1.2em;
font-weight:700;
Height:2.6em;
Line-height:2.6em;
margin:0 0 1em;
}
. Plancontainer Price P.bestplanprice {
background: #f7814d;
}
. Plancontainer Price p span {
color: #8394ae;
}
