代码部署教程
1. 引入CSS
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:400,200,200italic,300,300italic,400italic,600,600italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Seaweed+Script' rel='stylesheet' type='text/css'>
2. HTML代码
<div class="main">
<h1>Fashion Blogger</h1>
<div class="content">
<div class="content-top">
<div class="content-left">
<img src="images/pic2.jpg" alt=" " />
</div>
<div class="content-right">
<a href="#">
Follow me</a>
</div>
<div class="facebook">
<ul>
<li>
<a class="icon1" href="#">
</a>
</li>
<li>
<a class="icon2" href="#">
</a>
</li>
<li>
<a class="icon3" href="#">
</a>
</li>
<li>
<a class="icon4" href="#">
</a>
</li>
</ul>
</div>
</div>
<div class="content-bottom">
<div class="content-container">
<h2>
Jasmin</h2>
<p>
fashion blogger</p>
<div class="content-grids">
<div class="content-grid">
<h2>
Photos</h2>
<p>
752</p>
</div>
<div class="content-grid">
<h2>
Follows</h2>
<p>
2k</p>
</div>
<div class="content-grid">
<h2>
Following</h2>
<p>
2.5k</p>
</div>
<div class="clear">
</div>
</div>
<div class="cont-btm-grids">
<div class="cont-btm-grid">
<img src="images/pic3.jpg" alt=" " />
</div>
<div class="cont-btm-grid">
<img src="images/pic4.jpg" alt=" " />
</div>
<div class="cont-btm-grid">
<img src="images/pic5.jpg" alt=" " />
</div>
<div class="cont-btm-grid">
<img src="images/pic6.jpg" alt=" " />
</div>
<div class="clear">
</div>
</div>
</div>
</div>
<p class="footer">
© 2016 Fashion Blogger. All Rights Reserved | Design by <a href="https://cxvn.com/" target="_blank">
w3layouts</a>
</p>
</div>
</div>
