t_t 你们到底是从哪儿找的那种拿我当制杖一样教的简单的纯HTML模板的呀？-编程知识

在这个万物vue的年代，网页设计越来越框架化。

上网搜个资料学习学习吧，咵咵咵，“游泳健身，vue了解一下”

我只是想简单地学个html，js啊！怎么就这么复杂！

曾几何时，在网上找个网页模板，纯纯的html不带一点儿复杂的东西，最多加点儿jquery。我上面加个头就能当jsp的课后作业了。虽然这种东西已经过时。但是只是想做个作业而已。。。

或者，买个服务器，上面装个NGINX，或者tomcat，直接把模板往里一扔，我就直接有了一个小小的网站，不用配置什么后台。

但，首先，要有一个美美的模板！

那么，看看这个怎么样？

高端！

大气！

上档次！

关键还很简单！

白色，高级，丝滑。

它只有一个页面，做一个小小的宣传站绰绰有余，稍作修改，添加些后台，做个个人博客也是美美哒。

有时候，也可以找到对应的位置，每个页面对应一个html网页，把它扒下来，学习学习人家是怎么写的，也是美滋滋。

就比如说咱导航啊，样式什么的。直接定位，十几行代码，哦，原来是这样。了解了基础原理再看vue那些精美的封装好的组件，就会有一种豁然开朗的感觉有木有！

来看看一个完整的页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="EN" lang="EN">
<head>
<title>Nature Theme</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="css/screen.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link rel="stylesheet" media="print" type="text/css" href="css/print.css" />
</head>
<body>
<div id="layout"><div id="header"><h1 id="logo"><a href="#">Nature Theme</a></h1><hr class="noscreen" /><p class="noscreen noprint"> <em>Jump to: <a href="#obsah">content</a>, <a href="#nav">navigation</a>.</em> </p></div><hr class="noscreen" /><div id="nav" class="box"><ul><li id="active"><a href="#">Home</a></li><li><a href="#">About us</a></li><li><a href="#">Products</a></li><li><a href="#">Links</a></li><li><a href="#">Photos</a></li><li><a href="#">Contacts</a></li></ul><hr class="noscreen" /></div><div id="container" class="box"><div id="intro"><div id="intro-in"><h2>Welcome to our site</h2><p class="intro"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident. </p></div></div><div class="inner_copyright">Collect from <a href="http://www.xxxx.com/" target="_blank" title="xxxx">xxxx</a> <a href="http://guantaow.taobao.com" target="_blank">xxxx</a></div><div id="obsah" class="content box"><div class="in"><div class="shadow"> <img src="img/image.jpg" alt="" class="thumb" /> </div><ul class="columns"><li class="col1"><h3>Lorem ipsum</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo <a href="#" class="more">Find out more</a> </p></li><li class="col2"><h3>Lorem ipsum</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo <a href="#" class="more">Find out more</a> </p></li><li class="col3"><h3>Lorem ipsum</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo <a href="#" class="more">Find out more</a> </p></li></ul><div class="clear"></div></div></div></div><div id="footer" class="shadow"><div class="f-left">Copyright &copy; 2008 <a href="#">Your Name</a></div><div class="f-right">Designed by <a href="http://www.xxxx.com/" title="xxxx" target="_blank">xxxx</a> <a href="http://guantaow.taobao.com" target="_blank">xxxx</a> | More Templates: <a href="http://www.xxxx.com/" target="_blank" title="xxxx">xxxx</a> <a href="http://guantaow.taobao.com" target="_blank">xxxx</a></div></div>
</div>
</body>
</html>

下面是css

* { margin:0; padding:0; }
body, div, span, p, a, img, ul, ol, li, table, th, tr, td, form, fieldset, legend, dl, dt, dd, blockquote, applet, object { border:0; }
body { padding: 0; background: #fff url("../img/bg.jpg") repeat-x; font: 0.8em/1.5 "arial",sans-serif; color: #354146; text-align: center; 
}/* obecne odkazy --------------------------------------------------------------- */
a {color:#1666a3;}
a:link {color:#1666a3;}
a:hover {color:#0b4775;}/* nadpisy --------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { margin:15px 0 10px 0; }
h1 { font-size:200%; font-family: Georgia;}
h1#logo a{color: #ced1d2; text-decoration: none; display: block;padding: 18px 0 17px; font-weight: normal;}
h1#logo a:hover{color: #fff;}
h2 { font-size:130%; color: #354146;font-weight: bold; padding: 0;margin:0; }
h3 { font-size:120%; }
h4 { font-size:120%; }
h5 { font-size:100%; }/* layout ---------------------------------------------------------------------- */
#layout { text-align:left; 
}#container { clear: both;}#intro{background: #e6e8e9;height: auto;}#intro-in{width:891px; margin:0 auto; padding: 20px 0;}/* hlavicka ------------------------------------------------------------------ */#header {width:891px; margin:0 auto; }/* horizontalni navigace --------------------------------------------------- */#nav {width:891px; margin:0 auto; }#nav ul {margin:0; padding:0; list-style:none;height: 35px;}#nav ul li {float:left; display:block; margin:0; padding:0;}#nav ul li a {display: block; float: left;font-size: 85%;color: #fff;text-decoration: none;padding: 12px 20px 10px;text-align: center;}#nav ul li a:hover {color: #ced1d2;text-decoration: underline;}#nav ul li#active a {color: #101517;border: 1px solid #fff;border-bottom:1px solid #e6e8e9;background:#e6e8e9; text-decoration:none;}.content {padding: 0 0 0 0;z-index: 10;width:891px; margin:0 auto; }.content .in{padding: 20px 0 30px;}p.intro{background: url("../img/line.jpg");line-height: 23px;margin:0 0 0;}.shadow{border-top: 1px solid #dddddd;padding: 10px 0;background: url("../img/shadow.jpg") no-repeat;}img.thumb{padding: 3px; background: #fff; border: 1px solid #d1d1d1;}.columns {list-style: none;margin:10px 0 0 0;padding:0; font-size: 90%;}.columns li{float: left; width: 32%;}.columns li.col2{border-left: 1px solid #d7d7d7;border-right: 1px solid #d7d7d7;}.columns li h3{padding: 0 10px;color: #2e4650; margin: 0 0 5px;}.columns li.col2 h3{padding-left: 20px;}.columns li.col3 h3{padding-left: 20px;}.columns li p{line-height: 22px;padding: 0 20px 0 10px; margin: 0; color: #3f4345;}.columns li.col2 p{padding: 0 20px 0 20px;}.columns li.col3 p{padding: 0 10px 0 20px;}.columns li a.more{display: block;color: #1666a3;padding: 5px 0;}.columns li a.more:hover{color: #0b4775; text-decoration: none;}/* paticka ----------------------------------------------------------------- */#footer {width:891px; margin:0 auto;clear:both;font-size: 85%;padding-bottom: 70px;color: #898989;}#footer a{color: #898989;}#footer a:hover{color: #666666; text-decoration: none;}#footer .f-left, #footer .f-right { padding: 0 10px; }/* odstavce -------------------------------------------------------------------- */
p { margin:15px 0; }/* tabulky --------------------------------------------------------------------- */
table { margin:15px 0; border-collapse:collapse; border-spacing:0; font-size:100%; }
th { text-align:center; font-weight:bold; }
th, td { padding:3px 5px; }/* seznamy --------------------------------------------------------------------- */
ul, ol { display:block; margin:15px 0 15px 40px; }
ul ul, ul ul ul, ol ol, ol ol ol { margin:0; margin-left:20px; }
ol { list-style-type:decimal; }
ol ol { list-style-type:upper-alpha; }
ol ol ol {list-style-type:lower-alpha; }
li { display:list-item; }
ul li a { text-decoration:underline; }/* definice -------------------------------------------------------------------- */
dl { margin:15px 0; }
dt { font-weight:bold; }
dd { margin-left:30px; }/* ostatni --------------------------------------------------------------------- */
fieldset { margin:15px 0; padding:10px; border:1px solid #CCC; }
legend { margin-left:10px; font-size:100%; font-weight:bold; color:#000; }
abbr, acronym, .help { border-bottom:1px dotted #CCC; cursor:help; }
blockquote { margin:15px 20px; font-style:italic; }
del, .del { text-decoration:line-through; }
strong, .strong { font-weight:bold; }
cite, em, q, var { font-style:italic; }
code, kbd, samp  {font-family:monospace; font-size:110%; }
hr { display:block; height:1px; margin:10px 0; padding:0; border:0 solid #CCC; background:#CCC; color:#CCC;} 
.f-left {float:left;}
.f-right {float:right;}
.a-left, tr.a-left td {text-align:left;}
.a-center, tr.a-center td {text-align:center;}
.a-right, tr.a-right td {text-align:right;}
.a-justify {text-align:justify;}
.va-top {vertical-align:top;}
.va-middle {vertical-align:middle;}
.va-bottom {vertical-align:bottom;}
.inner_copyright{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
.clear { clear:both; }
.box { min-height:1px; }
.box:after { display:block; visibility:hidden; clear:both; line-height:0; font-size:0; content:"."; }
.noscreen { display:none; }
.mleft10 { margin-left: 10px; }
.mright10 { margin-right: 10px; }
.mtop10 { margin-top: 10px; }
.mbottom10 { margin-bottom: 10px; }/* univerzalni prvky ------------------------------------------------------------ */
input.small{width: 50px;
}
input.normal{width: 146px;
}
.bigger {font-size:115%;}
.smaller {font-size:85%;}.high {color:#00F;}
.nonhigh {color:#777;}.foto{  display: block; border: 3px solid #ddd;}

是不是很适合学习！！！

真是绝绝子

有需要的亲们可以直接下载：

安排！！

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