HTML+CSS页面练习——legend第五部分

<section id="services"> ???????<div class="container"> ???????????<div class="align"><i class="icon-cog-circled"></i></div> ???????????<h1>Services</h1> ???????????<div class="row"> ???????????????<div class="span3"> ???????????????????<div class="align"><i class="icon-desktop sev_icon"></i></div> ???????????????????<h2>Web design</h2> ???????????????????<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry‘s standard dummy text ever since the 1500s.</p> ???????????????</div> ???????????????<div class="span3"> ???????????????????<div class="align"><i class="icon-vector sev_icon"></i></div> ???????????????????<h2>Print Design</h2> ???????????????????<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry‘s standard dummy text ever since the 1500s.</p> ???????????????</div> ???????????????<div class="span3"> ???????????????????<div class="align"><i class="icon-basket sev_icon"></i></div> ???????????????????<h2>Ecommerce</h2> ???????????????????<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry‘s standard dummy text ever since the 1500s.</p> ???????????????</div> ???????????????<div class="span3"> ???????????????????<div class="align"><i class="icon-mobile-1 sev_icon"></i></div> ???????????????????<h2>Marketing</h2> ???????????????????<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry‘s standard dummy text ever since the 1500s.</p> ???????????????</div> ???????????</div> ???????</div> ???</section>

 ??????#services{ ???????????padding: 50px 70px; ???????????margin-top:0px; ???????????margin-bottom: 50px; ???????} ???????#services .span3{ ???????????background:#e9e9e9; ???????????padding: 3px 0 15px 10px; ???????????transition: all 0.3s ease-in-out; ???????????width: 22%; ???????????display: inline-block; ???????????margin: 9px; ???????} ???????#services .span3:hover{ ???????????background: #e3e3e3; ???????????box-shadow: 1px 1px 6px #c1bac1; ???????} ???????#services h1{ ???????????font-size: 3em; ???????????margin:0em 0 0.7em 0; ???????????font-family: ‘Patua One‘,cursive; ???????????text-align: center; ???????} ???????#services h2{ ???????????font-size: 22px; ???????????font-family: ‘Patua One‘,cursive; ???????????font-weight: lighter; ???????????margin: 0; ???????????padding: 0; ???????????text-align: center; ???????} ???????#services p{ ???????????margin: 10px; ???????????float: left; ?????????????line-height: 25px; ?????????????} ???????#services .align{ ???????????font-size: 6em; ???????????text-align: center; ???????????padding: 0; ???????} ???????#services .align .sev_icon{ ???????????text-align: center; ???????????margin: 10px 0 20px 0; ???????????font-size: 0.6em; ???????????color: #F0BF00; ???????}