这个个人博客才好看嘛！！

最新推荐文章于 2024-06-15 09:59:21 发布

锁住子锁不住

最新推荐文章于 2024-06-15 09:59:21 发布

阅读量367

点赞数 9

分类专栏： html模板文章标签：学习前端 javascript 模板 html

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

版权

html模板专栏收录该内容

33 篇文章 0 订阅

订阅专栏

以前做毕业设计的时候老想找一些不掺杂后端代码的前端模板。

可是下载下来，不是php就是python后台的。看又看不懂，想换语言就必须先把里面的后台代码拿掉。

就很像买了个精装的二手房，白白多花了砸墙钱。

就比如，想做个带菜单的手机网页模板，一下载下一大堆。我只是想要一个简单单纯的html模板而已啊，亲！！

就比如这个（其实，什么主题无所谓）的纯html模板就很nice。

打开文件夹就只看到一个index.html文件以及一些必要的js,css,img这些个文件。稍微改改就能复用，用来做些个个人博客，课程作业什么的岂不是美滋滋。

页面是这样婶儿的：

就很丝滑。

就很nice。

就很基础。

就很简单。

那么，我们简单看一下html代码把。看看麻雀虽小五脏俱全的这么个功能的文件到底是怎么写出来的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Handmade 1.0: Designed by Enjay for xxxxxx.com</title>
<meta name="keywords" content="free css template, free web template, free template, template, xhtml, css, tableless" />
<meta name="description" content="Handmade 1.0 is a free CSS template designed by Enjay for xxxxxx.com." />
<meta name="robots" content="all" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<!-- begin page wrapper -->
<div id="wrapper" style="height: 100%;">
	<!-- begin header section -->
	<div id="header">
		<h1><a href="#">Handmade 1.0</a></h1>
		<p>Designed by <a href="#">Enjay</a> for <a href="http://www.xxxxxx.com/">xxxxxx.com</a></p>
	</div>
	<!-- end header section -->
	<!-- begin page - holds the content area and the sidebar -->
	<div id="page">
		<!-- begin content - the main content area -->
		<div id="content">
			<!-- begin post - an example post area -->
			<div class="post">
				<div class="title">
					<h2>About this Free CSS Template</h2>
					<p>December 1st, 2008</p>
				</div>
				<div class="entry">
					<p><strong>Handmade 1.0</strong> is a free CSS web template coded with valid <strong><a href="http://validator.w3.org/check/referer">XHTML 1.0 Transitional</a></strong> and <strong><a href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A//www.xxxxxx.com/preview/lightspeed/index.html&amp;profile=css21&amp;usermedium=all&amp;warning=1&amp;lang=en">CSS 2.1 standards</a></strong>. This design uses pure CSS and no tables for layout and is released under the <span class="legal"><a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/ph/">Creative Commons Attribution-Share Alike 3.0 Philippines License</a></span>, which basically says that:</p>
					<ul>
						<li>You <strong>CAN</strong> use this design for both personal or commercial purposes free of charge.</li>
						<li>You <strong>CAN</strong> copy, distribute and transmit this template.</li>
						<li>You <strong>CAN</strong> modify this template however you want.</li>
					</ul>
					<p>In return, we only ask that you keep the attribution link in the footer intact or if you modify it, just add a link back to our site in any way you like. That's it and have fun!</p>
					<div class="meta">
						<p class="tags"><b>Tags:</b> <a href="http://www.xxxxxx.com/category/thewebhubcom/">free css template</a>, <a href="http://www.xxxxxx.com/category/thewebhubcom/">xhtml</a>, <a href="http://www.xxxxxx.com/category/thewebhubcom/">css</a></p>
						<p class="links"><a href="#" class="comments">99 Comments</a> <a href="#" rel="bookmark" title="Permanent link to Handmade 1.0" class="permalink">Permalink</a> <a href="#" class="continue">Continue Reading</a></p>
					</div>
				</div>
			</div>
			<!-- end post -->
			<div class="post">
				<div class="title">
					<h2>Some More Credits</h2>
					<p>December 1st, 2008</p>
				</div>
				<div class="entry">
					<p>This design borrows some pretty cool design materials and thanking them is the least I could do:</p>
					<ul>
						<li>Thanks goes to Mark James for his very useful <a href="http://www.famfamfam.com/archive/silk-icons-thats-your-lot/">Silk Icons</a>.</li>
						<li>Thanks goes to <a href="http://sxc.hu/">Stock Exchange</a> for the free photo I used in the header and title backgrounds.</li>
					</ul>
					<p>In return, we only ask that you keep the attribution link in the footer intact or if you modify it, just add a link back to our site in any way you like.</p>
					<div class="meta">
						<p class="tags"><b>Tags:</b> <a href="#">icons, photos</a>, <a href="#">thanks</a></p>
						<p class="links"><a href="#" class="comments">99 Comments</a> <a href="#" rel="bookmark" title="Permanent link to Handmade 1.0" class="permalink">Permalink</a> <a href="#" class="continue">Continue Reading</a></p>
					</div>
				</div>
			</div>
		</div>
		<!-- end content -->
		<!-- begin sidebar - holds the links and the ad spaces -->
		<div id="sidebar">
			<div class="padded">
				<p>You can find more templates at <a href="http://www.xxxxxx.com/">xxxxxx.com</a> or buy premium templates from <a href="http://www.4templates.com/?aff=momoink">4Templates.com</a>.</p>
			</div>
			<ul>
				<li>
					<h2>Friends &amp; Partners</h2>
					<ul>
						<li><a href="#">AboutEnjay.com</a></li>
						<li><a href="http://www.xxxxxx.com/">xxxxxx.com</a></li>
						<li><a href="http://www.4templates.com/?aff=momoink">4Templates.com</a></li>
						<li><a href="http://store.templatemonster.com/?aff=enjay">TemplateMonster.com</a></li>
						<li><a href="http://www.dreamhost.com/r.cgi?432620">DreamHost.com</a></li>
						<li><a href="http://www.sxc.hu/">SXC.hu</a></li>
					</ul>
				</li>
			</ul>
			<h2>Filler Text</h2>
			<div class="padded">
				<p>All &lt;H2&gt;&lt;/H2&gt;	tags	on	this sidebar will look like that title above while all &lt;UL&gt;&lt;/UL&gt; will be styled too.</p>
			</div>
		</div>
		<!-- end sidebar -->
		<div style="clear: both;">&nbsp;</div>
	</div>
	<!-- end page -->
	<!-- begin footer - please support our work by keeping these links intact -->
	<div id="footer">
		<p>&copy;2008 xxxxxx.com &nbsp;&bull;&nbsp; <a href="#">Free CSS Template By Enjay</a> for <a href="http://www.xxxxxx.com/">xxxxxx.com</a></p>
	</div>
	<!-- end footer -->
</div>
<!-- end page wrapper -->
</body>
</html>

@charset "utf-8";

* {
	margin: 0;
	padding: 0;
}

body {
	background: #fff url(images/bg.jpg);
	font: 13px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #523f2c;
}

h1, h2, h3 {
	text-transform: uppercase;
	color: #382818;
}

h1 {
	font-size: 2.4em;
}

h2 {
	font-size: 1.8em;
}

h3 {
	font-size: 1.2em;
}

p, ol, ul {
	line-height: 160%;
}

a {
	color: #a00;
}

a:hover {
	text-decoration: none;
}

.padded {
	padding: 20px;
}

#wrapper {
	padding: 14px 0;
	background: url(images/bg_horz.jpg) repeat-x;
}

/*** Header ***/

#header {
	width: 970px;
	height: 190px;
	margin: 0 auto;
	background: url(images/bg_header.jpg);
}

#header h1 {
	padding: 120px 0 0 35px;
	letter-spacing: -.05em;
}

#header p {
	padding: 0 0 0 35px;
	line-height: 1;
}

#header a {
	text-decoration: none;
	color: #000;
}

/*** Page ***/

#page {
	width: 970px;
	margin: 0 auto;
	background: url(images/bg_page.jpg);
}

/*** Content ***/

#content {
	float: left;
	width: 651px;
	padding: 20px 35px;
	background: url(images/bg_content.jpg) no-repeat;
}

.post {
}

.post .title {
	border-bottom: 1px dotted #e7b56d;
}

.post .title p {
	margin: -18px 0 0 0;
	padding: 0 0 5px 0;
	line-height: 1;
	text-align: right;
}

.post .entry {
	padding: 20px;
}

.post .entry p, .post .entry ol, .post .entry ul {
	margin-bottom: 1.5em;
}

.post .entry ol, .post .entry ul {
	margin-left: 3em;
}

.post .meta {
	border-top: 1px dotted #e7b56d;
}

.post .meta p {
	margin: 0;
	padding: 5px;
	border-bottom: 1px dotted #e7b56d;
	line-height: normal;
}

.post .meta a {
	text-decoration: none;
	color: #000;
}

.post .meta a:hover {
	color: #a00;
}

.post .meta .links a {
	padding: 0 20px;
}

.post .meta .comments {
	background: url(images/comment.png) no-repeat 0 50%;
}

.post .meta .permalink {
	background: url(images/link.png) no-repeat 0 50%;
}

.post .meta .continue {
	background: url(images/arrow.png) no-repeat 0 50%;
}

/*** Sidebar ***/

#sidebar {
	float: right;
	width: 240px;
	padding: 0 5px 0 0;
	background: url(images/bg_sidebar.jpg) no-repeat;
	color: #fff;
}

#sidebar h2 {
	height: 30px;
	padding: 10px 0 0 10px;
	background: url(images/bg_sidebar_title.jpg);
	letter-spacing: -.05em;
	font-size: 1.2em;
}

#sidebar ul {
	list-style: none;
}

#sidebar li {
}

#sidebar li ul {
	padding: 20px;
	line-height: 200%;
}

#sidebar li li {
	padding-left: 16px;
	background: url(images/bullet.png) no-repeat 0 6px;
}

#sidebar a {
	color: #fff;
}

/*** Footer ***/

#footer {
	width: 970px;
	margin: 0 auto;
	padding: 50px 0;
	background: url(images/bg_footer.jpg) no-repeat;
}

#footer p {
	line-height: 1;
	text-align: center;
	font-size: smaller;
	color: #fff;
}

#footer a {
	color: #fff;
}

那么，在哪里可以搞到源代码呢？

这么巧，我这里就有一套，有兴趣的小伙伴可以整一整呦。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

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

锁住子锁不住

关注

9
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
这个个人博客才好看嘛！！

打开文件夹就只看到一个index.html文件以及一些必要的js,css,img这些个文件。稍微改改就能复用，用来做些个个人博客，课程作业什么的岂不是美滋滋。就比如，想做个带菜单的手机网页模板，一下载下一大堆。看又看不懂，想换语言就必须先把里面的后台代码拿掉。看看麻雀虽小五脏俱全的这么个功能的文件到底是怎么写出来的。就比如这个（其实，什么主题无所谓）的纯html模板就很nice。这么巧，我这里就有一套，有兴趣的小伙伴可以整一整呦。就很像买了个精装的二手房，白白多花了砸墙钱。那么，在哪里可以搞到源代码呢？
复制链接

扫一扫