学个人网页-谁一上来就造火箭呀？？

锁住子锁不住

已于 2024-01-22 10:56:51 修改

阅读量436

点赞数 7

分类专栏： html模板文章标签： html 前端 js 基础网页模板

于 2024-01-22 09:38:41 首次发布

本文链接：https://blog.csdn.net/qqhxmdq/article/details/135740512

版权

html模板专栏收录该内容

33 篇文章 0 订阅

订阅专栏

做一个个人博客第一步该怎么做？

好多零基础的同学们不知道怎么迈出第一步。

那么，就找一个现成的模板学一学呗，毕竟我们是高贵的Ctrl c v 工程师。

但是这样也有个问题，那就是，那些模板都，太！复！杂！了！！！！

直接打击了我99%的学习积极性。

直到我找到了这一款极其简单，只有一个html页面和css的个人博客模板。

麻雀虽小，五脏俱全。

基本上有了个人博客所需要的很多基本功能，下一步只要花个一两小时学会它，然后开始加图片美化就完了。

简直爽歪歪，虽然直接用肯定不行，但是拿来当一个学习材料，那还是相当的顺手。

界面看起来是这个样子的。

虽然只有一个页面，但是，像什么标题，导航，侧边栏，快捷菜单，友链，搜索，列表，简介，预览页，就很全。代码也很简单。我们可以先学，然后，再用我们的知识把它完美化，不知不觉就学会了这套技术。

这可比直接下载那些美轮美奂的模板要好的多，看也看不懂，学也学不会。

下载地址在这里↓↓↓↓↓

https://download.csdn.net/download/qqhxmdq/88768824

代码我就全贴到这儿了，大家可以看一看。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta name="description" content="description"/>
<meta name="keywords" content="keywords"/> 
<meta name="author" content="xxxxxx.com, www.xxxxxx.com.se"/> 
<link rel="stylesheet" type="text/css" href="default.css"/>
<title>Bright Pixel</title>
</head>

<body>

<div class="main">

	<div class="container">

		<div class="gfx"><a href="index.html"><span></span></a></div>

		<div class="menu">
			<a href="index.html"><span>Aenean</span></a>
			<a href="index.html"><span>Vestibulum cursus</span></a>
			<a href="index.html"><span>Suspendisse</span></a>		
			<a href="index.html" id="last"><span>Elemen</span></a>
		</div>

		<div class="content">

			<div class="item">
				<h1>Vestibulum cursus</h1>
				<p>In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare, nunc eget pretium porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed in est. Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sed purus. Fusce eleifend, dui ut posuere auctor, justo elit posuere sapien, at blandit enim quam fringilla mi.</p>
				<p>Aliquam risus justo, mollis in, laoreet a, consectetuer nec, risus. Nunc blandit sodales lacus. Nam luctus semper mi. In eu diam.</p>
			</div>

			<div class="item">
				<h1>Sagittis libero</h1>
				<p>Aliquam risus justo, mollis in, laoreet a, consectetuer nec, risus. Nunc blandit sodales lacus. Nam luctus semper mi. In eu diam. Phasellus rutrum elit vel nisi. Cras mauris nulla, egestas quis, cursus at, venenatis ac, ante. Fusce accumsan enim et arcu. Duis sagittis libero at lacus. Suspendisse lacinia nulla eget urna. Curabitur laoreet vehicula nunc. Vivamus sapien mi, tincidunt non, hendrerit vel, ultrices sit amet, urna. Aenean volutpat, leo et porttitor cursus, turpis mi adipiscing leo, ac vehicula elit mauris eu orci. Ut fermentum egestas tellus. Suspendisse quam. Sed vulputate arcu sit amet dui.</p>
				<p>In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare, nunc eget pretium porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed in est. Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sed purus. Fusce eleifend, dui ut posuere auctor, justo elit posuere sapien, at blandit enim quam fringilla mi.</p>
			</div>

			<div class="item">
				<h1>Leo tempor</h1>
				<p>Praesent nisi sem, bibendum in, ultrices sit amet, euismod sit amet, dui. Donec varius tincidunt nisi. Ut ut sapien. Integer porta. Fusce nibh. Curabitur pellentesque, lectus at volutpat interdum, sem justo placerat elit, eget feugiat est leo tempor quam. Ut quis neque convallis magna consequat molestie. Nullam semper massa eget ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque a nibh quis nunc volutpat aliquam</p>
			</div>

		</div>
		
		<div class="footer">
		
			<span class="left">&copy; 2007 <a href="index.html">Website.com</a>. Valid <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> &amp; <a href="http://validator.w3.org/check?uri=referer">XHTML</a></span>
		
			<span class="right"><a href="http://www.xxxxxx.com/">Website template</a> from <a href="http://xxxxxx.com/">xxxxxx.com</a></span>

			<div class="clearer"><span></span></div>
		
		</div>

	</div>	

</div>

</body>

</html>

只有65行，简单的一批，十几分钟就搞清楚每块该怎么弄了。

下面是css

/*
Template name: Bright Pixel
Template URI: http://www.moobnn.com/bright-pixel-website-template/
Release date: 2006-05-07
Description: A smooth, monochrome, lightweight design.
Author: Viktor Persson
Author URI: http://moobnn.com/

This template is licensed under a Creative Commons Attribution 2.5 License:
http://www.moobnn.com/license/
*/

/* standard elements */
a {
	color: #000;
	text-decoration: none;
}
body {
	background: #CCC url(img/bg.gif) repeat-y fixed bottom center;
	color: #333;
	margin: 20px 0;
	text-align: center;
	font: normal 0.6em sans-serif,Arial;
}
.gfx a {
	background: #F5F5F5 url(img/bright_pixel.gif) no-repeat; display: block; height: 240px;
}

/* header */
.header {
	background: #FFF;
	border-bottom: 1px solid #E5E5E5;
	font: bold 2.6em Arial;
	line-height: 3em;
}

/* main */
.main {
	background: #FFF; 
	border: 3px double #EEE; 
	border-color: #E4E4E4 #CFCFCF #CCC #CFCFCF; 
	margin: 20px auto 4px auto; 
	text-align: left;
	width: 620px; 
}
.container {
	margin: 10px;
}

/* menu */
.menu a {
	background: #EEE;
	border-right: 1px solid #CECECE;
	border-top: 1px solid #E5E5E5;
	color: #888;
	float: left;
	padding-top: 4px;
	width: 149px; height: 36px;
}
.menu a span {
	padding-left: 6px;
}
.menu a:hover {
	background: #EEE url(img/bgmenu.gif) repeat-x;
	color: #555;
}
.menu a#last {
	width: 150px;
	border-right: none;
}

/* content */
.content {
	background: #F5F5F5;
	border-top: 1px solid #E5E5E5;
	clear: both;
}
.content h1 {
	margin: 0;
	font: bold 1.1em sans-serif,Arial;
	color: #666;
}
.content p {
	margin: 3px 0 6px; color: #666;
}
.item {
	background: #FCFCFC url(img/bgitem.gif) repeat-x;
	padding: 10px;
}

/* footer */
.footer {
	padding: 5px;
	background: #F5F5F5;
	color: #666;
}
.footer .left, .footer .right {padding: 0 12px;}
.footer .right, .footer .right a {color: #AAA;}
.footer .right a:hover {color: #444;}

/* floats */
.left {float: left;}
.right {float: right;}
.clearer {clear: both;}

100多行的css也不算长，好学得嘞！

嘻嘻(#^.^#)