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

相关文章

一文带你搞懂Python中__init__.py到底是什么

《一文带你搞懂Python中__init__.py到底是什么》朋友们,今天我们来聊聊Python里一个低调却至关重要的文件——__init__.py,有些人可能听说过它是“包的标志”,也有人觉得它“没... 目录先搞懂 python 模块(module)Python 包(package)是啥?那么 __in

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

IDEA自动生成注释模板的配置教程

《IDEA自动生成注释模板的配置教程》本文介绍了如何在IntelliJIDEA中配置类和方法的注释模板,包括自动生成项目名称、包名、日期和时间等内容,以及如何定制参数和返回值的注释格式,需要的朋友可以... 目录项目场景配置方法类注释模板定义类开头的注释步骤类注释效果方法注释模板定义方法开头的注释步骤方法注

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》:本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子:使用 Blob

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法(推荐)二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript