Ubuntu下mysql裝置和操作圖文教程

Ubuntu下mysql裝置和操作圖文教程。本站提示廣大學習愛好者：（Ubuntu下mysql裝置和操作圖文教程）文章只能為提供參考，不一定能成為您想要的結果。以下是Ubuntu下mysql裝置和操作圖文教程正文

網頁上宣布產物時，普通都有幾套價錢計劃，平日我們將幾套計劃放在一路，用戶可以互相比擬決議購置哪一個套餐。最多見的是主機商宣布產物價錢信息頁，本文聯合實例給年夜家分享以純CSS+HTML完成的價錢表。

源碼下載：點此下載

HTML

我們以某公司推行VPS產物為例，將HTML構造結構好。其實我們所說的價錢表其實不是表格，滿是ul，li元素構成，經由過程CSS來丑化，展示在我們眼前的頁面後果看似表格罷了。


<div id="pricePlans">
<ul id="plans">
<li class="plan">
<ul class="planContainer">
<li class="title"><h2>入門型VPS</h2></li>
<li class="price"><p>￥149/<span>月</span></p></li>
<li>
<ul class="options">
<li>小型企業、小我首選</li>
<li>雙核至強處置器</li>
<li>1G DDR3 ECC >span>高速糾錯內存</span></li>
<li>10G + 20G >span>高速企業級硬盤</span></li>
<li>1M >span>專線帶寬</span></li>
<li>1個 >span>自力公網IP</span></li>
</ul>
</li>
<li class="button"><a href="#">點擊購置</a></li>
</ul>
</li>
....多個反復的li
</ul>
</div>


CSS

我們應用CSS將幾個li分列成一行，應用CSS3完成暗影、圓角和鼠標滑上動畫後果，以下是抄寫部門css代碼。年夜家可以下載源碼包檢查完全的代碼，固然你也能夠應用css3結構呼應式結構。


#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;
}

完~