果然光背书还是不行！！学JavaScript还得找个简单的项目实践一下

锁住子锁不住

已于 2024-02-28 09:38:18 修改

阅读量415

点赞数 12

分类专栏： html模板文章标签：开发语言 html css javascript 前端模板

于 2024-02-26 10:17:01 首次发布

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

版权

html模板专栏收录该内容

33 篇文章 0 订阅

订阅专栏

学JavaScript第一步该怎么做？

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

背书？NO！

咱们工科果然还是得亲手上手做的呀。

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

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

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

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

麻雀虽小，五脏俱全。

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

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

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

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

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

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

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

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

<!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">
<!-- Template Design by xxxx | http://www.xxxx | Released for free under a Creative Commons Attribution-Share Alike 3.0 Philippines -->
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Template Design by xxxx</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="header">
	<div id="logo">
		<h1>yourwebsite</h1>
		<h2>Design by TheWebHub </h2>
	</div>
	<div id="menu">
		<ul class="style1">
			<li><a href="#" class="active">Home</a></li>
			<li><a href="#">Products</a></li>
			<li><a href="#">Services</a></li>
			<li><a href="#">About Us</a></li>
			<li><a href="#">Contact Us</a></li>
		</ul>
	</div>
</div>
<div id="content-wrap">
	<div id="content">
		<div id="columnA">
			<h2>Welcome to Sitename.com!</h2>
			<div class="box1">
				<p>yourwebsite  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.xxxx/preview/lightspeed/index.html&amp;profile=css21&amp;usermedium=all&amp;warning=1&amp;lang=en">CSS 2.1 standards</a></strong> that uses pure CSS and no tables for layout. This design 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>&raquo;&nbsp;You <strong>CAN</strong> use, copy, distribute and transmit this template.</li>
					<li>&raquo;&nbsp;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.</p>
			</div>
			<h2>Praesent scelerisque</h2>
			<div class="two-columns">
				<div class="colA">
					<div>
						<h3>Mauris vulputate dolor</h3>
						<div class="content">
							<ul>
								<li><a href="#">Aliquam libero</a></li>
								<li><a href="#">Consectetuer adipiscing elit</a></li>
								<li><a href="#">Metus aliquam pellentesque</a></li>
								<li><a href="#">Suspendisse iaculis mauris</a></li>
								<li><a href="#">Urnanet non molestie semper</a></li>
								<li><a href="#">Proin gravida orci porttitor</a> </li>
							</ul>
						</div>
					</div>
				</div>
				<div class="colB">
					<div>
						<h3>Mauris vulputate dolor</h3>
						<div class="content">
						<p>Pellentesque pede. Donec pulvinar ullamcorper metus. In eu odio at lectus pulvinar mollis. Vestibulum sem magna, elementum ut, vestibulum eu, facilisis quis, arcu. Mauris a dolor. Nulla facilisi. Cum sociis natoque penatibus et magnis.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="columnB">
			<h2>Recent Updates</h2>
			<div class="box">
				<div class="content">
					<ul>
						<li><a href="#">Aliquam libero</a></li>
						<li><a href="#">Consectetuer adipiscing elit</a></li>
						<li><a href="#">Metus aliquam pellentesque</a></li>
						<li><a href="#">Suspendisse iaculis mauris</a></li>
						<li><a href="#">Urnanet non molestie semper</a></li>
						<li><a href="#">Proin gravida orci porttitor</a></li>
					</ul>
				</div>
			</div>
			<h2>Testimonials</h2>
			<div class="box">
				<div class="content">
					<h3>Aliquam gravida massa</h3>
					<p> Etiam odio mi, suscipit et, rhoncus ac, lacinia, nisl. Pellentesque pede. Donec pulvinar ullamcorper metus. Aliquam gravida massa. <a href="#">More&#8230;</a></p>
				</div>
			</div>
		</div>
		<div style="clear: both;"></div>
	</div>
</div>
<div id="footer-wrapper">
	<div id="footer">
		<p>Copyright &copy; 2006 Sitename.com. Template Designed by <a href="http://www.xxxx/">xxxx</a></p>
	</div>
</div>
</body>
</html>

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

下面是css

/*
Template Design by moobnn.com
http://www.moobnn.com
Released for free under a Creative Commons Attribution-Share Alike 3.0 Philippines
*/

/** Common Styles */

body {
	margin: 0px;
	padding: 0px;
	background: #333333 url(images/images01.jpg) repeat-x left top;
	text-align: justify;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #959595;

}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	font-weight: normal;
	color: #FFFFFF;
}

p {
	margin: 0px;
	padding: 0px;
	line-height: 2em;
}

ul {
	margin-left: 0px;
	padding-left: 0px;
	list-style-type: none;
}

a {
	color: #FC6700;
}

a:hover {
	text-decoration: none;
}

/** HEADER */

#header {
	width: 900px;
	height: 180px;
	margin: 0px auto;
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
}

/** LOGO */

#logo {
	float: left;
	width: 300px;
	height: 180px;
	background: #C90202 url(images/images03.jpg) no-repeat left top;
}

#logo h1 {
	margin: 0px;
	padding: 70px 0px 0px 0px;
	letter-spacing: -3px;
	text-align: center;
	font-size: 48px;
	color: #FFFFFF;
}

#logo h2 {
	margin: -10px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	letter-spacing: -2px;
	text-align: center;
	text-transform: lowercase;
	font-size: 30px;
	color: #000000;
}

/** MENU */

#menu {
	float: right;
	width: 600px;
	height: 50px;
}

#menu ul {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	list-style: none;
}

#menu li {
	display: inline;
}

#menu a {
	display: block;
	float: left;
	width: 120px;
	height: 34px;
	background: url(images/images02.jpg) no-repeat right top; 
	margin: 0px 0px 0px 0px;
	padding: 16px 0px 0px 0px;
	letter-spacing: -1px;
	text-align: center;
	text-transform: lowercase;
	text-decoration: none;
	font-weight: normal;
	font-size: 22px;
	color: #747474;
}

#menu a:hover {
	color: #FFFFFF;
}

#menu .active {
	color: #FFFFFF;
}

/** CONTENT */

#content-wrap {
}

#content {
	width: 860px;
	margin: 0px auto;
	padding: 30px 20px 30px 20px;
}

#columnA {
	float: right;
	width: 540px;
	margin-top: -140px;
}

#columnA h2 {
	margin: 0px;
	padding: 30px 0px 10px 0px;
	letter-spacing: -2px;
	text-transform: lowercase;
	font-size: 34px;
	font-weight: normal;
	color: #FFFFFF;
}

#columnB {
	float: left;
	width: 260px;
}

#columnB h2 {
	margin: 0px;
	padding: 0px 0px 10px 0px;
	letter-spacing: -2px;
	text-transform: lowercase;
	font-size: 26px;
	font-weight: normal;
	color: #FFFFFF;
}

#columnB strong {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #575757;
}


/** FOOTER */

#footer-wrapper {
	height: 100px;
	background: #000000;
}

#footer {
	width: 900px;
	height: 100px;
	margin: 0px auto;
	background: #000000;
	font-size: 11px;
	color: #4C4C4C;
}

#footer p {
	margin: 0;
	padding: 30px 0px;
	text-align: center;
	text-transform: lowercase;
}

#footer a {
}

.box {
	background: #1B1B1B;
}

.box .content {
	margin-bottom: 30px;
	padding: 20px 20px;
	line-height: 2em;
}

.box ul {
	line-height: 1.8em;
}

.box li a {
	padding: 0px 0px 0px 12px;
	background: url(images/images04.gif) no-repeat left 6px;
	color: #717171;
}

.box a {
	color: #717171;
}

.box h3 {
	padding: 0px 0px 10px 0px;
	color: #FFFFFF;
}

.box1 {
	margin-bottom: 20px;
}

.two-columns {
	margin-top: 5px;
}

.two-columns .colA {
	float: left;
	width: 260px;
	background: #1B1B1B;
}

.two-columns .colB {
	float: right;
	width: 260px;
	background: #1B1B1B;
}

.two-columns .content {
	padding: 10px 20px 20px 20px;
	line-height: 2em;
}

.two-columns .style1 {}

.two-columns h3 {
	margin: 0px;
	padding: 15px 10px 15px 20px;
	background: #000000;
}

css也不算长，好学得嘞！

嘻嘻(#^.^#)

锁住子锁不住

关注

12
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
1
评论
果然光背书还是不行！！学JavaScript还得找个简单的项目实践一下

虽然只有一个页面，但是，像什么标题，导航，侧边栏，快捷菜单，友链，搜索，列表，简介，预览页，就很全。我们可以先学，然后，再用我们的知识把它完美化，不知不觉就学会了这套技术。那么，就找一个现成的模板学一学呗，毕竟我们是高贵的Ctrl c v 工程师。简直爽歪歪，虽然直接用肯定不行，但是拿来当一个学习材料，那还是相当的顺手。这可比直接下载那些美轮美奂的模板要好的多，看也看不懂，学也学不会。但是这样也有个问题，那就是，那些模板都，太！只有100多行，简单的一批，十几分钟就搞清楚每块该怎么弄了。
复制链接

扫一扫