简单个人博客(2页) web前端课程设计
文章目录
一、作品展示
二、文件目录
三、代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>博客世界</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="banner">
<img src="images/banner.gif">
</div>
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">日志</a></li>
<li><a href="#">相册</a></li>
<li><a href="#">留言板</a></li>
<li><a href="#">关于我</a></li>
</ul>
<div class="search">
<p>站内搜索</p>
<input type="text" class="input1" />
<input type="button" value="搜索" class="input2">
</div>
</div>
<div class="main">
<div class="guanyu">
<div class="title">>>关于我</div>
<div class="renwu">
<img src="images/renwu.jpg">
</div>
<div class="mingzi">
<img src="images/girl.gif">张梅
</div>
<div class="dizhi">重庆市 南岸区</div>
<div class="jieshao">
<p>
天微明,冬天的光透过窗,印在左手的无名指上。 回忆的颜色是透明的冷,于是,用窗口透入的薄薄的光暖一暖心。
</p>
</div>
</div>
<div class="main-right">
<div class="rizhi">
<div class="title">>>日志</div>
<ul>
<li>
<p><a href="wenzhang.html">IMAX加长版《变形金刚》(Transformers)亲历简报</a></p>
<span>2007-09-25</span>
</li>
<li>
<p><a href="wenzhang.html">《变形金刚》发烧友的看图说话(多图)</a></p>
<span>2007-09-22 10:13</span>
</li>
<li>
<p><a href="wenzhang.html">《反恐王国》(The Kingdom):生猛的空心弹</a></p>
<span>2007-09-22 08:03</span>
</li>
<li>
<p><a href="wenzhang.html">《东方承诺》(Eastern Primises):不动如山,暗流汹涌</a></p>
<span>2007-09-20 11:07</span>
</li>
<li>
<p><a href="wenzhang.html">《妖精的旋律》(Elfen Lied):日式YY的经典案例</a></p>
<span>2007-09-20 10:44</span>
</li>
</ul>
</div>
<div class="xiangce">
<div class="title">>>相册</div>
<img src="images/1.jpg">
<img src="images/2.jpg">
<img src="images/3.jpg">
</div>
</div>
</div>
<div class="footer">
<p>BLOG公司版权所有 1997-2010</p>
</div>
</body>
</html>
四、获取更多源码
~ 关注我,点赞博文~ 每天带你涨知识!
相关问题可以相互学习,可关注↓公Z号 获取更多源码