在没给大家分享实现代码之前，先给大家展示下效果图：
具体实现代码如下所示：
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>iNettuts - Welcome!</title>
<link href="inettuts.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="head">
<h1>iNettuts</h1>
</div>
<div id="columns">
<ul id="column1" class="column">
<li class="widget color-green" id="intro">
<div class="widget-head">
<h3>简介窗口</h3>
</div>
<div class="widget-content">
<p>如果你活着，早晚都会死；如果你死了，你就永远活着。</p>
</div>
</li>
<li class="widget color-red">
<div class="widget-head">
<h3>窗口标题</h3>
</div>
<div class="widget-content">
<p>世界上本没有路，有了腿便有了路。</p>
</div>
</li>
</ul>
<ul id="column2" class="column">
<li class="widget color-blue">
<div class="widget-head">
<h3>窗口标题</h3>
</div>
<div class="widget-content">
<p>一个人只能全力以赴，等待命运去揭晓答案。</p>
</div>
</li>
<li class="widget color-yellow" id="dingzh">
<div class="widget-head">
<h3>窗口标题</h3>
</div>
<div class="widget-content">
<p>望着沧茫大海,令我得到片刻解脱;不怀缅过去,也不展望未来。</p>
</div>
</li>
</ul>
<ul id="column3" class="column">
<li class="widget color-orange">
<div class="widget-head">
<h3>窗口标题</h3>
</div>
<div class="widget-content">
<p>就像这些樱花，每个生命都会凋零。每吸一口气，每喝一杯茶，每杀一个人都能体悟人生，这就是武士精神。</p>
</div>
