0
点赞
收藏
分享

微信扫一扫

html实训大作业 HTML5+CSS大作业——简单个人博客(2页) web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码

船长_Kevin 2022-04-20 阅读 85

简单个人博客(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">&gt;&gt;关于我</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">&gt;&gt;日志</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">&gt;&gt;相册</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号 获取更多源码

举报

相关推荐

0 条评论