开发页面模板

最新推荐文章于 2023-02-04 20:09:45 发布
最新推荐文章于 2023-02-04 20:09:45 发布
阅读量170 收藏
点赞数
分类专栏： 前端开发 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ylnzzl/article/details/121070229
版权

目录

基本模板

目录结构

电脑端页面

电脑端框架页面

手机端页面

适配屏幕页面

基本模板

目录结构

webRoot

│  1.txt

│  index.html

│  说明.txt

│  

├─pc

│  │- main.html

│  │  

│  ├─css

│  ├─fonts

│  ├─imgs

│  ├─js

│  ├─modules

│  └─pages

│      ├─es6

│      └─jquery

├─screen

│  │- index.html

│  │  

│  ├─css

│  ├─fonts

│  ├─imgs

│  ├─js

│  ├─modules

│  └─pages

│      ├─es6

│      └─jquery

└─wap

    │- index.html

    │  

    ├─css

    ├─fonts

    ├─imgs

    ├─js

    ├─modules

    └─pages

        ├─es6

        └─jquery

电脑端页面

示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>Knote</title>
		<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
		<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
		<!--[if lt IE 9]>
		  <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
		  <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
		<![endif]-->

		<script type="text/javascript">
			if ((navigator.userAgent.match(
					/(phone|pad|pod|iPad|iPod|iPhone|ios|Android|Mobile|IEMobile|BlackBerry|JUC|Fennec|wOSBrowser|WebOS|MQQBrowser|BrowserNG|Symbian|Windows Phone)/i
					))) {
				window.location.href = "./wap/index.html";
			} else {
				//alert('电脑端')
			}
		</script>
		<style type="text/css">
		</style>

	</head>
	<body>
		<div class="wrapper">
			<!-- 页面封套 -->
			<div class="header">
				<!-- 顶部栏 -->
				<div class="logo">
					<!-- logo -->
				</div>
				<div class="menu">
					<!-- 一级菜单 -->
					<div class="submenu">
						<!-- 二级菜单 -->
						<!-- 三级菜单 可再嵌套一层div class="submenu-item" -->
					</div>
				</div>

				<div class="searchInput">
					<!-- 搜索栏 -->
					<div class="hot">
						<!-- 热点搜索关键词 -->
					</div>
				</div>
				<div class="loginBar">
					<!-- 登录、个人中心等按钮 -->
				</div>
			</div>
			<div class="content">
				<!-- 内容 -->
				<div class="sideBar">
					<!-- 左边 侧边栏 -->
					<div class="nav">
						<!-- 主导航 -->
						<div class="subnav">
							<!-- 二级导航 -->
						</div>
					</div>
					<div class="guild">
						<!-- 指南 -->
					</div>
				</div>
				<div class="container">
					<!-- 右边 容器 -->
					<iframe  id="mainIframe" name="mainIframe" src="./pc/main.html" frameborder="0" scrolling="auto" ></iframe>
				</div>
				<div class="toolBar">
					<!-- 右边 绝对定位 工具栏 ，如在线咨询按钮等-->
				</div>
			</div>
			<div class="footer">
				<!-- 底部栏 -->
				<div class="siteinfo">
					<!-- 网站信息 -->
					<div class="branding">
						<!-- 商标 -->
					</div>
					<div class="siteinfoCredits">
						<!-- 信誉 -->
					</div>
					<div class="copyright">
						<!-- 版权信息 -->
					</div>
					<div class="siteinfoLegal">
						<!-- 法律声明 -->
					</div>
				</div>
				<div class="links">
					<!-- 展示商标和一些链接等 -->
					<div class="partner">
						<!-- 合作伙伴 商标图片等 -->
					</div>
					<div class="sitemap">
						<!-- 网站地图，一些此网站相关链接等 -->
					</div>
				</div>

				<div class="contact">
					<!-- 联系信息【表单、地图、联系方式等等】 -->
				</div>
				<div class="service">
					<!-- 服务 -->
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
	</script>
</html>

电脑端框架页面

示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>Knote</title>
		<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
		<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
		<!--[if lt IE 9]>
		  <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
		  <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
		<![endif]-->
		<style type="text/css">
		</style>
		<script type="text/javascript">
		</script>
	</head>
	<body>
		<div class="main">
			<div class="tabs">
				<!-- 已打开标签页列表【可关闭】 -->
			</div>
			<div class="scroll">
				<!-- 可滚动 内容主体 -->
			</div>
		</div>
	</body>
	<script type="text/javascript">
	</script>
</html>

手机端页面

示例代码：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Knote Wap</title>
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<meta name="viewport"
			content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="viewport" id="viewport" content="width=640px, user-scalable=no">
		<meta name="format-detection" content="telephone=no" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<style type="text/css">
			body {
				font-size: 62.5%;
				font-family: "Microsoft YaHei", Arial;
				overflow-x: hidden;
				overflow-y: auto;
			}

			.viewport {
				max-width: 640px;
				min-width: 300px;
				margin: 0 auto;
			}
		</style>
		<script type="text/javascript">
			if ((navigator.userAgent.match(
					/(phone|pad|pod|iPad|iPod|iPhone|ios|Android|Mobile|IEMobile|BlackBerry|JUC|Fennec|wOSBrowser|WebOS|MQQBrowser|BrowserNG|Symbian|Windows Phone)/i
				))) {
				//alert('手机端')
			} else {
				window.location.href = "../index.html";
			}
		</script>
	</head>

	<body>
		<div class="wrapper">
			<div class="header">

			</div>
			<div class="content">
				<!-- 手机版网页内容 -->
			</div>
			<div class="footer">

			</div>
		</div>
	</body>
	<script type="text/javascript">

	</script>
</html>

适配屏幕页面

示例代码：

<!doctype html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>Knote screen</title>

		<!-- Bootstrap -->
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
			integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

		<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
		<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
		<!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
	</head>
	<body>
		<h1>你好，世界！</h1>

		<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
		<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
			integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous">
		</script>
		<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
			integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">
		</script>
	</body>
</html>

ylnzzl
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
网站开发之HTML
m0_71956657的博客
06-22 418
htyper text markup language 即超文本标记语言。是网站开发最基础的语言，简单易懂。
页面模板页面模板
01-10
页面模板在IT行业中，特别是在Web开发领域，是一个重要的概念。它是一种预定义的布局或设计，用于创建具有统一外观和感觉的网页。这种模板通常包含了HTML、CSS（层叠样式表）以及可能的JavaScript代码，使得开发者...
H5模板-正在建设中
05-06
一套H5模板，正在建设中……可以用于暂未开放的功能模块。
网站正在开发中倒计时页面源码(HTMl)
05-07
网站正在开发中倒计时页面源码HTML源码
HTML5开发和布局（待补充）
qq_34664510的博客
07-12 255
移动开发准则1.尽量使用单页面开发（SPA） 2.慎选UI框架 3.动画、特效使用（60fps）**浏览器消耗最小的CSS属性** 位置：transform:translate(x,y,z) 大小：transform:scale(n) 旋转：transform:rotate(ndeg) 透明度：opacity:0~1 4.长度单位用rem基本布局流式布局 绝对定位布局 Flexbox布局
页面开发中常用的方法
lsls22的专栏
11-28 678
1. jQuery获取宽、高 浏览器当前窗口可视区域高度：$(window).height(); 浏览器当前窗口文档的高度：$(document).height(); 浏览器当前窗口文档body的高度：$(document.body).height(); 浏览器当前窗口文档body的总高度：$(document.body).outerHeight(true);  (包括border pad
前端模板页面
06-02
在前端开发领域，模板页面是一种预先设计和构造的HTML页面，通常用于快速构建网站的布局和结构。这种页面可以作为基础，开发者可以根据需求进行定制，添加动态内容和交互功能。"太阳咖啡商城网站前端"这个压缩包文件...
静态页面模板
04-09
在IT行业中，静态页面模板是开发Web项目时常用的一种工具，尤其对于快速构建管理系统的前端界面尤为方便。静态页面模板通常由HTML、CSS和JavaScript等技术构建，它们提供了一个预设计的布局和样式，开发者可以在此...
bootstrap页面模板
09-03
总的来说，这个"bootstrap页面模板"压缩包提供了快速构建响应式网页的基础，无论是对于初学者还是经验丰富的开发者，都能有效地提高开发效率，并确保网页在不同设备上的表现一致性和美观性。通过深入理解Bootstrap...
常用页面模板
03-19
同时，随着技术的发展，如Vue.js、React.js等前端框架的广泛应用，现代页面模板往往支持组件化开发，方便快速构建和维护复杂的UI结构。 在实际项目中，可以利用现有的开源模板库，如Bootstrap、Element UI、Ant ...
HTML 功能开发中提醒静态页
06-16
HTML 功能开发中提醒静态页
WEB开发中的提示
Donny的专栏
03-05 166
1.当后台处理时间较长时，可在提交前显示一个层提示 ： &lt;script type='text/javascript' src='DivLayer.js'&gt;&lt;/script&gt; &lt;script type='text/javascript' &gt; function submitXform() { var params = {width:300...
在前端静态页面开发中常遇见的一些问题及解决办法
weixin_45268910的博客
07-19 800
1、如何使用HTML和CSS解决单行文本溢出显示省略号： ①为文字所在的盒子设置宽度 width：**px; ②让多行文字不换行显示 white-space:nowrap; ③设置溢出隐藏 overflow:hidden; ④文本多余部分显示省略号 text-overflow:ellipsis; 2、如何触发文档中的BFC（关于BFC是什么请看以前的投稿） ①浮动能够触发B...
前端开发（html）
qq_39892275的博客
07-07 1990
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
关于网站开发中的欢迎页面
最新发布
m0_68057725的博客
02-04 705
学习网站开发中分享的一些知识点，适合有基础的小伙伴学习
一步一步教你如何开发h5页面
chiqiao2265的博客
03-01 2700
我们现在要做一个简单的h5应用：包含登录、注册、修改密码、个人中心主页面、个人中心内页修改名称、个人中心修改手机号码。 第一步：工具安装，我选择了能够辅助我们快速开发的light开发工具 light依赖node环境，所以首先要安装node，https://document.li...
在前端开发中，页面渲染指什么
喜欢做一些demo，和分享遇到的 BUG
10-13 9599
从上面这个图中，我们可以看到那么几个事： 1）浏览器会解析三个东西： 一个是HTML/SVG/XHTML，事实上，Webkit有三个C++的类对应这三类文档。解析这三种文件会产生一个DOM Tree。 CSS，解析CSS会产生CSS规则树。 Javascript，脚本，主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree. 2）解析完成后，浏览器引擎会...
网站开发中web页面跳转几种方式详解
weixin_34008805的博客
11-05 2284
2019独角兽企业重金招聘Python工程师标准>>> ...
ThinkSNS模板开发指南
"Thinksns模板开发说明文档" Thinksns是一款知名的社交网络系统，它提供了丰富的功能和可自定义的模板设计，使得开发者和设计师能够根据需求构建个性化网站。这份开发说明文档主要针对Thinksns的模板开发，帮助...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值