在这个万物vue的年代，网页设计越来越框架化。
上网搜个资料学习学习吧，咵咵咵，“游泳健身，vue了解一下”
我只是想简单地学个html，js啊！怎么就这么复杂！
曾几何时，在网上找个网页模板，纯纯的html不带一点儿复杂的东西，最多加点儿jquery。我上面加个头就能当jsp的课后作业了。虽然这种东西已经过时。但是只是想做个作业而已。。。
或者，买个服务器，上面装个NGINX，或者tomcat，直接把模板往里一扔，我就直接有了一个小小的网站，不用配置什么后台。
但，首先，要有一个美美的模板！
但，首先，要有一个美美的模板！
但，首先，要有一个美美的模板！
那么，看看这个怎么样？
高端！
大气！
上档次！
关键还很简单！
高级色，高级，丝滑。
它只有一个页面，做一个小小的宣传站绰绰有余，稍作修改，添加些后台，做个个人博客也是美美哒。
有时候，也可以找到对应的位置，每个页面对应一个html网页，把它扒下来，学习学习人家是怎么写的，也是美滋滋。
就比如说咱导航啊，样式什么的。直接定位，十几行代码，哦，原来是这样。了解了基础原理再看vue那些精美的封装好的组件，就会有一种豁然开朗的感觉有木有！
来看看一个完整的页面
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>BasicAndStraightforward</title>
<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<div id="wrapper"><!-- #wrapper -->
<nav><!-- top nav -->
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</nav><!-- end of top nav -->
<header><!-- header -->
<h1><a href="#">Basic And Straightforward</a></h1>
</header><!-- end of header -->
<section id="main"><!-- #main content and sidebar area -->
<aside id="sidebar1"><!-- sidebar1 -->
<h3>Things To Do</h3>
<ul>
<li><a href="#">Play Games</a></li>
<li><a href="#">Chat With Friends</a></li>
<li><a href="#">Swap Stories</a></li>
<li><a href="#">Sell Stuff</a></li>
<li><a href="#">Buy Stuff</a></li>
<li><a href="#">Trade Stuff</a></li>
</ul>
<h3>Sponsors</h3>
<img src="images/ad125.jpg" alt="" />
<br />
<img src="images/ad125.jpg" alt="" />
<br /><br />
</aside><!-- end of sidebar1 -->
<div class="copyrights">Collect from <a href="http://www.xxxx.com/" >Website Template</a></div>
<section id="content"><!-- #content -->
<article>
<h2><a href="#">First Article Title</a></h2>
<img src="images/pic1.jpg" alt="" class="alignleft" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.</p>
</article>
<article>
<h2><a href="#">Second Article Title</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.</p>
</article>
</section><!-- end of #content -->
<aside id="sidebar2"><!-- sidebar2 -->
<h3>Stuff</h3>
<ul>
<li><a href="#">Curabitur sodales</a></li>
<li><a href="#">Sed dignissim</a></li>
<li><a href="#">Fusce nec</a></li>
<li><a href="#">Nulla quis</a></li>
</ul>
<h3>More Stuff</h3>
<ul>
<li><a href="#">Blah, blah and all blah</a></li>
<li><a href="#">More blah</a></li>
</ul>
<h3>Connect With Us</h3>
<ul>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ul>
<h3>Even More Stuff</h3>
<ul>
<li><a href="#">Curabitur sodales</a></li>
<li><a href="#">Sed dignissim</a></li>
<li><a href="#">Fusce nec</a></li>
<li><a href="#">Nulla quis</a></li>
</ul>
</aside><!-- end of sidebar -->
</section><!-- end of #main content and sidebar-->
<footer>
<section id="footer-area">
<section id="footer-outer-block">
<aside class="footer-segment">
<h4>Friends</h4>
<ul>
<li><a href="#">one linkylink</a></li>
<li><a href="#">two linkylinks</a></li>
<li><a href="#">three linkylinks</a></li>
<li><a href="#">four linkylinks</a></li>
<li><a href="#">five linkylinks</a></li>
</ul>
</aside><!-- end of #first footer segment -->
<aside class="footer-segment">
<h4>Awesome Stuff</h4>
<ul>
<li><a href="#">one linkylink</a></li>
<li><a href="#">two linkylinks</a></li>
<li><a href="#">three linkylinks</a></li>
<li><a href="#">four linkylinks</a></li>
<li><a href="#">five linkylinks</a></li>
</ul>
</aside><!-- end of #second footer segment -->
<aside class="footer-segment">
<h4>Coolness</h4>
<ul>
<li><a href="#">one linkylink</a></li>
<li><a href="#">two linkylinks</a></li>
<li><a href="#">three linkylinks</a></li>
<li><a href="#">four linkylinks</a></li>
<li><a href="#">five linkylinks</a></li>
</ul>
</aside><!-- end of #third footer segment -->
<aside class="footer-segment">
<h4>Blahdyblah</h4>
<p>Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. More Templates <a href="http://www.xxxx.com/" target="_blank" title="xxxx">xxxx</a> <a href="http://xxxxx.com" target="_blank">厚朴网络 淘宝店</a></p>
</aside><!-- end of #fourth footer segment -->
</section><!-- end of footer-outer-block -->
</section><!-- end of footer-area -->
</footer>
</div><!-- #wrapper -->
<!-- Free template created by http://freehtml5templates.com -->
</body>
</html>
再来看看css
body {
color : #000000;
background : #ffffff;
font-family : "Times New Roman", Times, serif;
font-size : 12pt;
}
a {
text-decoration : underline;
color : #0000ff;
}
a:link:after, a:visited:after {
content: " (" attr(href) ") ";
font-size: 70%;
}
nav, sidebar, footer, header, aside {
display : none;
}
/* Created by http://freehtml5templates.com */
/* reset */
* {
margin: 0;
padding: 0;
}
/* render html5 elements as block */
header, footer, section, aside, nav, article {
display: block;
}
body {
line-height: 1;
background: #fff;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #666;
font-size: 14px;
line-height: 18px;
}
/* layout */
#wrapper {
width: 940px;
margin: 0 auto;
margin-top: 5px;
margin-bottom: 5px;
border: 1px #000 solid;
}
nav {
width: 940px;
height: 50px;
margin: 0 auto;
background: #407E80;
}
header {
width: 940px;
height: 100px;
margin: 0 auto;
background: #000 ;
}
#main {
width: 940px;
margin: 0 auto;
padding-top: 30px;
background: #FFF;
overflow: hidden;
}
#content {
float: left;
width: 450px;
margin-left: 40px;
}
#sidebar1 {
float: left;
padding-left: 20px;
width: 180px;
}
#sidebar2 {
float: right;
padding-right: 30px;
width: 180px;
}
footer {
width: 940px;
margin: 0 auto;
clear: both;
}
/* basics */
h1,h2,h3,h4,h5,h6 {
font-weight: bold;
clear: both;
color: #333;
}
a:link, a:visited {
color:#407E80;
text-decoration: none;
}
a:hover, a:active {
color: #333;
text-decoration: underline;
}
p {
margin-bottom: 18px;
}
li {
padding-left: 5px;
}
/* nav */
nav .menu {
font-size: 16px;
font-weight: bold;
}
nav .menu ul {
margin: 0;
padding: 17px 0 0 20px;
list-style: none;
line-height: normal;
}
nav .menu li {
display: block;
float: left;
}
nav .menu a {
display: block;
float: left;
margin-right: 5px;
padding: 0px 15px;
text-decoration: none;
color: #FFF;
}
nav .menu a:hover {
text-decoration: underline;
}
/** HEADER */
header h1 {
margin: 0;
padding: 0 0 0 30px;
line-height: normal;
}
header h1 {
text-align: center;
padding-top: 20px;
font-size: 48px;
}
header h1 a:link, header h1 a:visited {
text-decoration: none;
color: #FFF;
}
header h1 a:hover {
text-decoration: underline;
}
/** ARTICLES **/
article img {
border: none;
-webkit-box-shadow: 3px 3px 7px #777;
-moz-box-shadow: 3px 3px 7px #777;
}
#content p, ul, ol, hr {
margin-bottom: 24px;
}
#content ul ul, ol ol, ul ol, ol ul {
margin-bottom: 0;
}
#content h1, h2, h3, h4, h5, h6 {
color: #333;
margin: 0 0 20px 0;
line-height: 1.5em;
text-shadow: 0px 2px 3px #ddd;
}
.alignleft, img.alignleft {
display: inline;
float: left;
margin-right: 24px;
margin-top: 4px;
}
.alignright, img.alignright {
display: inline;
float: right;
margin-left: 24px;
margin-top: 4px;
}
.aligncenter, img.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignleft, img.alignright, img.aligncenter {
margin-bottom: 12px;
}
/* sidebar and footer widget blocks */
aside h3 {
font-size: 18px;
text-shadow: 0px 2px 3px #ddd;
}
aside ul {
list-style: none;
margin-bottom: 20px;
margin-top: -15px;
}
#footer-area {
background: #000;
color: #FFF;
font-size: 90%;
padding: 18px 0;
overflow: hidden;
}
.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
.footer-segment {
float: left;
margin-right: 20px;
margin-left: 20px;
width: 190px;
}
footer aside h4 {
color: #FFF;
font-size: 16px;
line-height: 1.5em;
text-shadow: 0px 2px 3px #ddd;
}
footer a:link, footer a:visited {
color: #FFF;
}
footer a:hover {
text-decoration: underline;
}
footer p {
margin-top: -15px;
}
是不是很适合学习！！！
真是绝绝子
有需要的亲们可以直接下载：
安排！！
2317
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
