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

小了白了兔 2019-12-10 1,397 阅读

代码部署教程

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>

演示地址下载地址

最新游戏