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

2024-03-13 22:44

本文主要是介绍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

这篇关于t_t 你们到底是从哪儿找的那种拿我当制杖一样教的简单的纯HTML模板的呀?的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/806433

相关文章

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

Mysql表的简单操作(基本技能)

《Mysql表的简单操作(基本技能)》在数据库中,表的操作主要包括表的创建、查看、修改、删除等,了解如何操作这些表是数据库管理和开发的基本技能,本文给大家介绍Mysql表的简单操作,感兴趣的朋友一起看... 目录3.1 创建表 3.2 查看表结构3.3 修改表3.4 实践案例:修改表在数据库中,表的操作主要

springboot简单集成Security配置的教程

《springboot简单集成Security配置的教程》:本文主要介绍springboot简单集成Security配置的教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录集成Security安全框架引入依赖编写配置类WebSecurityConfig(自定义资源权限规则

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

如何使用Python实现一个简单的window任务管理器

《如何使用Python实现一个简单的window任务管理器》这篇文章主要为大家详细介绍了如何使用Python实现一个简单的window任务管理器,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起... 任务管理器效果图完整代码import tkinter as tkfrom tkinter i

C++中函数模板与类模板的简单使用及区别介绍

《C++中函数模板与类模板的简单使用及区别介绍》这篇文章介绍了C++中的模板机制,包括函数模板和类模板的概念、语法和实际应用,函数模板通过类型参数实现泛型操作,而类模板允许创建可处理多种数据类型的类,... 目录一、函数模板定义语法真实示例二、类模板三、关键区别四、注意事项 ‌在C++中,模板是实现泛型编程

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性(如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构:try: with sync_playwright(