简洁个人博客信息展示网页模板下载

代码部署教程

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>

下载地址

立即下载