• 惊！这么好用的纯html网页模板可还行？偷偷拿去做作业真是绝绝子！！

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

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

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

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

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

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

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

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

    那么，看看这个怎么样？

    高端！

    大气！

    上档次！

    关键还很简单！

    包含首页在内，它有六个页面，点击上面的导航栏就可以进行切换，做一个小小的宣传站绰绰有余，稍作修改，添加些后台，做个个人博客也是美美哒。

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

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

    一个小小的导航，如此简洁明了

    1. 	
    2.     <header>
    3.     	<div class="main">
    4.         	<div class="wrapper">
    5.                 <h1><a href="index.html">EaglesTroopsa>h1>
    6.                 <nav class="fright">
    7.                     <ul class="menu">
    8.                         <li><a class="active" href="index.html">Abouta>li>
    9.                         <li><a href="foundation.html">Foundation a>li>
    10.                         <li><a href="program.html">Programa>li>
    11.                         <li><a href="leaders.html">Leaders a>li>
    12.                         <li><a href="gallery.html">Gallerya>li>
    13.                         <li><a href="contacts.html">Contactsa>li>
    14.                     ul>
    15.                 nav>
    16.             div>
    17.         div>
    18.         <div class="row-bot">
    19.         	<div class="main">
    20.                 <figure class="img-indent-r"><img src="images/page1-img1.png" alt="" />figure>
    21.                 <div class="extra-wrap indent">
    22.                     <strong class="title-1">Welcome to Eagles Boy Scout Troops!strong>
    23.                     <p>Eagles is one of free web templates created  team. It is optimized for 1280X1024 resolution. This Eagles Template goes with two packages - with PSD source files and without them. PSD files are available for the registered members of Template Monster. The basic package (without PSD source) is available for anyone without registration.p>
    24.                     <a class="button2" href="#">morea>
    25.                 div>
    26.                 <div class="clear">div>
    27.             div>
    28.         div>
    29.     header>

    再来看看一个完整的页面

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <title>Abouttitle>
    5.     <meta charset="utf-8">
    6.     <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
    7.     <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
    8.     <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">   
    9.     <script src="js/jquery-1.7.1.min.js" type="text/javascript">script>
    10.     <script src="js/cufon-yui.js" type="text/javascript">script>
    11.     <script src="js/cufon-replace.js" type="text/javascript">script>
    12.     <script src="js/Glegoo_400.font.js" type="text/javascript">script> 
    13.     <script src="js/FF-cash.js" type="text/javascript">script>
    14.     <script src="js/script.js" type="text/javascript">script>      
    15. 	
    16.     
    17. head>
    18. <body id="page1">
    19. 	
    20.     <header>
    21.     	<div class="main">
    22.         	<div class="wrapper">
    23.                 <h1><a href="index.html">EaglesTroopsa>h1>
    24.                 <nav class="fright">
    25.                     <ul class="menu">
    26.                         <li><a class="active" href="index.html">Abouta>li>
    27.                         <li><a href="foundation.html">Foundation a>li>
    28.                         <li><a href="program.html">Programa>li>
    29.                         <li><a href="leaders.html">Leaders a>li>
    30.                         <li><a href="gallery.html">Gallerya>li>
    31.                         <li><a href="contacts.html">Contactsa>li>
    32.                     ul>
    33.                 nav>
    34.             div>
    35.         div>
    36.         <div class="row-bot">
    37.         	<div class="main">
    38.                 <figure class="img-indent-r"><img src="images/page1-img1.png" alt="" />figure>
    39.                 <div class="extra-wrap indent">
    40.                     <strong class="title-1">Welcome to Eagles Boy Scout Troops!strong>
    41.                     <p>Eagles is one of free web templates created  team. It is optimized for 1280X1024 resolution. This Eagles Template goes with two packages - with PSD source files and without them. PSD files are available for the registered members of Template Monster. The basic package (without PSD source) is available for anyone without registration.p>
    42.                     <a class="button2" href="#">morea>
    43.                 div>
    44.                 <div class="clear">div>
    45.             div>
    46.         div>
    47.     header>
    48.     
    49. 	
    50.     <section id="content"><div class="ic">More Website Templates @ <a href="http://www.xxxxx.com/" >xxxxxa> <a href="http://gxxxxx.com" target="_blank">xxxxxa> - February 06, 2012!div>
    51.         <div class="main">
    52.             <div class="container_12">
    53.                 <div class="wrapper p3">
    54.                 	<article class="grid_4">
    55.                     	<div class="banner">
    56.                         	<figure><img src="images/banner-1.png" alt="" />figure>
    57.                             <a class="button" href="#">morea>
    58.                         div>
    59.                     article>
    60.                     <article class="grid_4">
    61.                     	<div class="banner">
    62.                         	<figure><img src="images/banner-2.png" alt="" />figure>
    63.                             <a class="button" href="#">morea>
    64.                         div>
    65.                     article>
    66.                     <article class="grid_4">
    67.                     	<div class="banner">
    68.                         	<figure><img src="images/banner-3.png" alt="" />figure>
    69.                             <a class="button" href="#">morea>
    70.                         div>
    71.                     article>
    72.                 div>
    73.                 <div class="wrapper">
    74.                 	<article class="grid_8">
    75.                     	<h2>Next Eventh2>
    76.                         <div class="wrapper border-bot p3">
    77.                         	<time class="tdate-1" datetime="2012-10-21">
    78.                             	<span>Tuesdayspan>
    79.                                 <strong>31strong>
    80.                             time>
    81.                             <div class="extra-wrap">
    82.                             	<p class="prev-indent-bot"><span class="color-1">Lorem ipsum dolor sit amet, consetetur sadipscing elitrspan> sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus ipsum dolor sit amet. p>
    83.                                 <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet lorem ipsum dolor sit amet.p>
    84.                                 <a class="button2" href="#">morea>
    85.                             div>
    86.                         div>
    87.                         <div class="wrapper">
    88.                         	<time class="tdate-1" datetime="2012-10-21">
    89.                             	<span>Mondayspan>
    90.                                 <strong>23strong>
    91.                             time>
    92.                             <div class="img-indent">
    93.                             	<p class="p3"><img src="images/page1-img2.png" alt="">p>
    94.                                 <a class="button2" href="#">morea>
    95.                             div>
    96.                             <div class="extra-wrap">
    97.                             	<span class="color-1">Stet clita kasd gubergrenspan>, no sea takimata sanctus est Lorem ipsum dolor sit amet lorem ipsum dolor sit amet, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    98.                             div>
    99.                         div>
    100.                     article>
    101.                     <article class="grid_4">
    102.                     	<div class="indent-top">
    103.                             <h3 class="indent-bot">Our Adventuresh3>
    104.                             <div class="indent-left p3">
    105.                                 <ul class="list-2">
    106.                                     <li><a href="#">Lorem ipsum dolor sit ameta>li>
    107.                                     <li><a href="#">Consetetur sadipscing elitr sed diama>li>
    108.                                     <li><a href="#">Nonumy eirmod tempor invidunt uta>li>
    109.                                     <li><a href="#">Labore et dolore magnaa>li>
    110.                                     <li><a href="#">Aliquyam erat sed diam voluptuaa>li>
    111.                                     <li><a href="#">Vero eos et accusam et justo duoa>li>
    112.                                     <li class="last-item"><a href="#">Stet clita kasd gubergrena>li>
    113.                                 ul>
    114.                             div>
    115.                             <div class="box">
    116.                             	<div class="padding">
    117.                                 	<strong class="text-1">Troop # 345 Meetingsstrong>
    118.                                     <figure class="p2"><img src="images/page1-img3.jpg" alt="">figure>
    119.                                     <h6><strong>Monday 9:00 - 12:00strong>h6>
    120.                                     Lorem ipsum dolor sit amet, consetetur sadipscing elitr sed diam nonumy.
    121.                                 div>
    122.                             div>
    123.                         div>
    124.                     article>
    125.                 div>
    126.             div>
    127.         div>
    128.     section>
    129.     
    130. 	
    131.     <footer>
    132.         <div class="main">
    133.         	<div class="container_12">	
    134.             	<div class="wrapper">
    135.                     <div class="grid_8">
    136.                         <div class="aligncenter">
    137.                             Eagles Troops © 2012
    138.                             <span><a rel="nofollow" target="_blank" href="http://www.xxxxx.com/">Website Templatea>  | <a rel="nofollow" target="_blank" href="http://www.xxxxx.com/">xxxxxa> <a href="http://gxxxxx.com" target="_blank">xxxxxa>span>
    139.                         div>
    140.                     div>
    141.                     <div class="grid_3 prefix_1">
    142.                         <ul class="list-services">
    143.                             <li><a href="#">a>li>
    144.                             <li class="item-1"><a href="#">a>li>
    145.                             <li class="item-2"><a href="#">a>li>
    146.                             <li class="item-3"><a href="#">a>li>
    147.                         ul>
    148.                     div>
    149.                 div>
    150.             div>
    151.         div>
    152.     footer>
    153. 	<script type="text/javascript"> Cufon.now(); script>
    154. body>
    155. html>

    是不是很适合学习！！！

    真是绝绝子

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

    安排！！

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

  • 相关阅读:
    细讲Java连接Kafka构建生产者和消费者
    在 Mac 上将 PDF 转换为 PowerPoint 的 5 种解决方案
    微服务实战 06 seata 搭建与集成SpringCloud Alibaba
    Inner-IoU：具有辅助边界框的更有效的交并比损失
    flutter报错HTTP Host Availability (the doctor check crashed)的解决办法
    Kubernetes 基础架构最佳实践：从架构设计到平台自动化
    jQuery 动画小练习
    Decoupled Contrastive Learning 论文解读和感想
    C++之函数重载【详解】
    PMP备考大全：经典题库（敏捷管理第5期）
  • 原文地址：https://blog.csdn.net/qqhxmdq/article/details/132140035