记一次前端页面制作

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

记一次前端页面制作

<!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>Bootstrap 101 Template</title>

		<!-- Bootstrap -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
		<script src="js/jquery-3.4.1.min.js"></script>
		<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
		<script src="js/bootstrap.min.js"></script>
		<!-- 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">
			.nav-pills>li.active,
			.nav-pills>li.active>a,
			.nav-pills>li.active:focus,
			.nav-pills>li.active:hover {
				color: #fff;
				background-color: #4370ec
			}

			.nav-pills>li.active>a,
			.nav-pills>li.active>a:focus,
			.nav-pills>li.active>a:hover {
				background-color: #4370ec
			}

			.nav>li>a {
				color: #333;
				font-size: 18px;
				font-weight: 800;
			}

			.nav>li>p {
				font-size: 15px;
				padding: 10px 15px;
			}

			.nav>li>a>label {
				float: right;
				font-size: 25px;
				font-weight: 100;
			}

			.thumbnail {
				background-color: #f3f3f3;
				width: 100%;
			}

			.thumbnail:focus,
			.thumbnail:hover {
				background-color: #fff;
			}

			.botton_block {
				display: block;
			}

			.botton_none {
				display: none;
			}

			.line-limit-length {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;

			}

			.icon {
				display: inline-block;
				width: 40px;
				height: 40px;
				background-color: #eee;
			}
			
		</style>
		<script type="text/javascript">
			$(function($) {

				/**
				 * 替換文本和按鈕
				 */
				$(".thumbnail").on("mouseenter", botton_change);
				$(".thumbnail").on("mouseleave", botton_change);

				/**
				 * 切換顯示標籤
				 */
				$(".target").on("click", function() {
					$(".active").removeClass("active");
					$(this).addClass("active");
				});

			});

			/**
			 * 光標懸停/離開時切換顯示
			 */
			function botton_change() {
				var none = $(this).find(".botton_none");
				var block = $(this).find(".botton_block");
				$(none).addClass("botton_block");
				$(none).removeClass("botton_none");
				$(block).addClass("botton_none");
				$(block).removeClass("botton_block");
			}
		</script>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col-md-3">
					<div class="row">
						<div class="span2">
							<ul class="nav nav-pills nav-stacked">
								<li class="active target"><a href="#">生產應用類<label>></label></a>
									<p class="line-limit-length">請輸入文本請輸入文本請輸入文本請輸入文本請輸入文本請輸入文本</p>
								</li>
								<li class="target"><a href="#">生產服務類<label>></label></a>
									<p class="line-limit-length">請輸入文本</p>
								</li>
								<li class="target"><a href="#">生產報表類<label>></label></a>
									<p class="line-limit-length">請輸入文本</p>
								</li>
								<li class="target"><a href="#">自動化系統<label>></label></a>
									<p class="line-limit-length">請輸入文本</p>
								</li>
								<li class="target"><a href="#">工业手机App<label>></label></a>
									<p class="line-limit-length">請輸入文本</p>
								</li>
								<li class="target"><a href="#">IOT各系统<label>></label></a>
									<p class="line-limit-length">請輸入文本</p>
								</li>
								<li class="target"><a href="#">内部管理类<label>></label></a>
									<p class="line-limit-length">請輸入文本</p>
								</li>
								<li class="target"><a href="#">查看全部系統</a>
							</ul>
						</div>
					</div>
				</div>
				<div class="col-md-9">
					<div class="col-md-4">
						<div class="thumbnail" align="center">
							<img src="./imgs/baidu.png" style="max-width:100%;" />
							<div class="caption">
								<h3>缩略图标签</h3>
								<div class="botton_block" style="height: 40px;">
									<p class="line-limit-length">一些示例文本。一些示例文本。</p>
								</div>
								<div class="botton_none" style="height: 40px;">
									<a href="#" class="btn btn-primary btn-none" role="button">
										按钮
									</a>
									<a href="#" class="btn btn-default" role="button">
										按钮
									</a>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-4">
						<div class="thumbnail" align="center">
							<img src="./imgs/baidu.png" style="max-width:100%;" />
							<div class="caption">
								<h3>缩略图标签</h3>
								<div class="botton_block" style="height: 40px;">
									<p class="line-limit-length">一些示例文本。一些示例文本。</p>
								</div>
								<div class="botton_none" style="height: 40px;">
									<a href="#" class="btn btn-primary btn-none" role="button">
										按钮
									</a>
									<a href="#" class="btn btn-default" role="button">
										按钮
									</a>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-4">
						<div class="thumbnail" align="center">
							<img src="./imgs/baidu.png" style="max-width:100%;" />
							<div class="caption">
								<h3>缩略图标签</h3>
								<div class="botton_block" style="height: 40px;">
									<p class="line-limit-length">一些示例文本。一些示例文本。</p>
								</div>
								<div class="botton_none" style="height: 40px;">
									<a href="#" class="btn btn-primary btn-none" role="button">
										按钮
									</a>
									<a href="#" class="btn btn-default" role="button">
										按钮
									</a>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-4">
						<div class="thumbnail" align="center">
							<img src="./imgs/baidu.png" style="max-width:100%;" />
							<div class="caption">
								<h3>缩略图标签</h3>
								<div class="botton_block" style="height: 40px;">
									<p class="line-limit-length"> 一些示例文本。一些示例文本。</p> </div> <div class="botton_none" style="height: 40px;">
										<a href="#" class="btn btn-primary btn-none" role="button">
											按钮
										</a>
										<a href="#" class="btn btn-default" role="button">
											按钮
										</a>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-4">
						<div class="thumbnail" align="center">
							<img src="./imgs/baidu.png" style="max-width:100%;" />
							<div class="caption">
								<h3>缩略图标签</h3>
								<div class="botton_block" style="height: 40px;">
									<p class="line-limit-length">一些示例文本。一些示例文本。</p>
								</div>
								<div class="botton_none" style="height: 40px;">
									<a href="#" class="btn btn-primary btn-none" role="button">
										按钮
									</a>
									<a href="#" class="btn btn-default" role="button">
										按钮
									</a>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-4">
						<div class="thumbnail" align="center">
							<img src="./imgs/baidu.png" style="max-width:100%;" />
							<div class="caption">
								<h3>缩略图标签</h3>
								<div class="botton_block" style="height: 40px;">
									<p class="line-limit-length">一些示例文本。一些示例文本。</p>
								</div>
								<div class="botton_none" style="height: 40px;">
									<a href="#" class="btn btn-primary btn-none" role="button">
										按钮
									</a>
									<a href="#" class="btn btn-default" role="button">
										按钮
									</a>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-4">
						<div class="thumbnail" align="center">
							<img src="./imgs/baidu.png" style="max-width:100%;" />
							<div class="caption">
								<h3>缩略图标签</h3>
								<div class="botton_block" style="height: 40px;">
									<p class="line-limit-length">一些示例文本。一些示例文本。</p>
								</div>
								<div class="botton_none" style="height: 40px;">
									<a href="#" class="btn btn-primary btn-none" role="button">
										按钮
									</a>
									<a href="#" class="btn btn-default" role="button">
										按钮
									</a>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-4">
						<div class="thumbnail" align="center">
							<img src="./imgs/baidu.png" style="max-width:100%;" />
							<div class="caption">
								<h3>缩略图标签</h3>
								<div class="botton_block" style="height: 40px;">
									<p class="line-limit-length">一些示例文本。一些示例文本。</p>
								</div>
								<div class="botton_none" style="height: 40px;">
									<a href="#" class="btn btn-primary btn-none" role="button">
										按钮
									</a>
									<a href="#" class="btn btn-default" role="button">
										按钮
									</a>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-4">
						<div class="thumbnail" align="center">
							<img src="./imgs/baidu.png" style="max-width:100%;" />
							<div class="caption">
								<h3>缩略图标签</h3>
								<div class="botton_block" style="height: 40px;">
									<p class="line-limit-length">一些示例文本。一些示例文本。</p>
								</div>
								<div class="botton_none" style="height: 40px;">
									<a href="#" class="btn btn-primary btn-none" role="button">
										按钮
									</a>
									<a href="#" class="btn btn-default" role="button">
										按钮
									</a>
								</div>
							</div>
						</div>
					</div>
					<div align="center" class="col-md-3">
						<a href="#" class="btn btn-info btn-lg">
							<span class="glyphicon glyphicon-chevron-left"></span>
						</a>
					</div>
					<div align="center" class="col-md-6">
					</div>
					<div align="center" class="col-md-3">
						<a href="#" class="btn btn-info btn-lg">
							<span class="glyphicon glyphicon-chevron-right"></span>
						</a>
					</div>
				</div>
			</div>
	</body>
</html>
ws1300699361
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端技术搭建俄罗斯方块（内含源码）
官方推荐
06-05 2万+
通过前端基础HTML、CSS、JS来搭建一个俄罗斯方块小游戏，内附源码直接拷贝即可运行！
前端开发入门到实战：计算一个页面内每个模块的曝光时间（停留时间）
软件开发-前端开发-IT
07-29 1055
产品希望看到投放出去的活动页，用户对其页面内的什么信息比较感兴趣，对什么信息完全不感兴趣。=> 计算页面内每模块的停留时间 第一次听到这个需求，我的大脑开始疯狂运转，然后想到了plan 1, plan 2, plan3…中间还有很多失败想法我已经忘记了，这里方案三是我最终采用的方法。 方案一：根据页面dom将页面分模块 var bodyChildrenLists = $('body')....
网页制作学习笔记
eleven_77_的博客
04-15 1418
前言 1.HTML语言的全称是：”Hyper Text Markup Language“，可以翻译为”超文本标记语言“，这个文字直观的告诉我们 它是一种标记语言，而不是一种编程语言，而且它是用标记标签来描述网页。 现行的HTML语言被称为“HTML5”，简称”H5“。它是“万维网的核心语言、标准通过标记语言下的一个应用超文本标记语言（HTML） 的第五次重大修改”。经过接近八年的努力，万维网联盟于...
从0到1，编写一个简单的前端页面
持续学习中
04-30 1333
作者：谭东 从0到1，编写一个简单的前端页面。 ...即将完善
第一篇网页制作
ws12100376的专栏
10-24 182
比较粗糙:
[前端基础]websocket协议
weixin_62697030的博客
05-09 3706
websocket(简写为ws),是一种轻量化的协议,经过最开始的握手阶段以后,前后端之间允许自由地发送信息不受限制(建议发送json字符串).虽然理论上这个东西是属于协议内容,但是已经被疯狂封装得像框架一样了.websocket协议具有天然的优势处理前端多线程并发,并且只需要一个后端就能完成服务.在各大视频网站上经常能见到使用ws技术构建的简单聊天室项目.难能可贵的是,java,javascript都引入了相关的内容.分别代表:某个用户开启服务,某个用户关闭服务,某一端接收信息,某一端发生错误。
前端实现WebSocket即时通讯
dreamingbaobei的博客
07-19 9106
要实现客户端与服务器端的通信，最常接触的是http（https）协议，http通信只能是客户端发起请求，服务器响应。服务器不能主动向客户端传递消息。 HTTP 协议无法做到服务器主动向客户端推送信息，2008年诞生的WebSocket 协议可以实现客户端与服务器端的双向对话，即：服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息。 WebSocket 协议的底层协议也是TCP协议 WebSocket 协议的标识符为ws,加密后为wss WebSocket 协议没有同源限制，即WebSocke
一个基于React整套技术栈+Node.js的前端页面制作工具
baidu_29983639的博客
02-19 2109
pagemaker是一个前端页面制作工具，方便产品，运营和视觉的同学迅速开发简单的前端页面，从而可以解放前端同学的工作量。此项目创意来自网易乐得内部项目nfop中的pagemaker项目。原来项目的前端是采用jquery和模板ejs做的，每次组件的更新都会重绘整个dom，性能不是很好。因为当时react特别火，加上项目本身的适合，最后决定采用react来试试水。因为原来整个项目是包含很多子项目一起...
制作html页面时 页面布局技术主要是,ACAA前端工程师试题参考.pdf
weixin_33065899的博客
06-04 2343
ACAA前端工程师试题参考ACAA 前端工程师试题参考：选择题部分:HTML+CSS 基础知识1、在html 中，样式表按照应用方式可以分为三种类型，其中不包括(d)。a.内嵌样式表b.行内样式表 c.外部样式表文件 d.类样式表2、在制作HTML 页面时，页面的布局技术主要是(d)。a.框架布局 b.表格布局 c.DIV 层布局 d.以上全部选项3、如果在catalog.htm 中包含如下...
前端html制作的乒乓球游戏.zip
02-27
这个API在浏览器下一次重绘之前调用指定的回调函数，用于创建连续的动画效果。乒乓球的运动和球拍的移动都是通过这个API实现的。 6. 响应式设计：为了让游戏在不同设备和屏幕尺寸上都能正常运行，开发者可能采用了...
Web Service笔记（一）：WS简介与CXF初步
gaolianli98的专栏
01-17 394
一、Web Service优缺点 （一）、优点 1、数据交换：跨平台，跨语言、跨工程。 Web Service使数据交换更加方便，实现跨防火墙的通信。以一种最简单的方式实现异构系统之间的互通信和数据交换，且跨平台。通过Web Service把应用程序的逻辑和数据“暴露”出来，还可以让其它平台上的客户重用这些应用程序。 2、数据封装。 SOAP 是 Web Service 的基本通
前端入门第一弹 | 开发工具与配置
weixin_57650627的博客
04-27 1765
一、序言 首先，我们来聊聊市面上比较流行的前端开发工具，主要是WebStorm（简称ws）和Visual Studio Code（简称vsc或vscode），我比较喜欢用vscode，主要是它是一个轻量级的开发工具，并且开源，而且兼容的语音比较多，最最最重要的是它免费啊！但是呢它主攻的是前端开发，所以其它对语言不够专业，有时候会出问题，所以你要拿它来开发Python、C++什么的还是老老实实的用专业的开发工具吧。 二、安装 好了，进入正题，我们先来安装我们的编辑器，下载链接都放下面...
一文图解前端WebSocket 实时通信
在写作的路上持续输出。
03-20 6799
一键了解 前端WebSocket ，结合vue案例 助你航行。一🚀
【前端】【html/css】前端学习之路（十四）（制作京东项目心得）（完）
SuiKaSan的自学室
07-25 2171
1.事前准备 （1）工具使用的是 Webstrom的最新版 和  Fireworks 8 作为切图的辅助工具。 （2）准备CSS Reset类库（normalize.css），为跨浏览器兼容做准备（也可以直接使用京东网站的初始化）  normalize.css   只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，No...
一个有趣的前端小项目----新手练手小游戏
热门推荐
qq_42181069的博客
05-24 2万+
    对于学前端的小伙伴们来说，最难的应该就是Javascript的理解与运用了，很重要，很有用，也很难真的掌握，但是对于这种难啃的骨头，多去啃一啃的话还是很有意思的~~不好意思，一不小心暴露了我吃货的本质，今天给大家分享的是一个小游戏，之前有在github上看见有大神做过一个类似的游戏，然后自己就花了一天的时间写了这个小游戏，废话不多说，先给大家看一下这个游戏的效果图：1、大家看到的实在点击开...
java+websocket实现网页聊天室
信徒博客
04-18 6047
核心技术websocket 前提 1、tocmat7.02版本以上 2、浏览器支持websocket通讯 3、这个是html5的功能 客户端和服务器建立连接 jsp/html页面 1、浏览器和后台服务器要通信，首先是url 通俗易懂的格式如下 "ws://localhost:8080/项目名/请求名" 如果要携带参数的话， "ws://localhost:8080/...
简单网页设计前端（入门）
wyy
04-10 7758
简单网页设计前端（入门） 按照下面的成品设计网页： 其中包括：  文本框 密码框 提示文字 单选按钮 复选按钮 上传文件 上传图片 等。。。 无标题文档 #name,#psd{ background-color:#09F; background:#FC9; } fieldset{ width:180px;} 账 号:
websocket---前端的实现(一)
after_you的博客
08-09 1万+
1.使用websocket可以方便的实现服务器端主动的向客户端推送消息，而不用在使用轮询和定时器的方式获取数据 2.websocket协议特点： 1）建立在TCP协议之上 2）与HTTP协议有着很好的兼容性，默认端口也是80和443，并且握手阶段采用HTTP协议，因此握手时不容易屏蔽，能通过各种HTTP代理服务器 3）数据格式比较轻量，性能开销小，通信高效 4）可以发送文本，也可以发送二
前端学习第五弹：制作一个简单的网页
想不出一个好的标题，就用这个吧
10-30 4003
有一段时间没有接触前端了，从现在重新开始吧，一点点地前进。 今晚有点感冒，脑子不大灵光，一个很简单的页面出现了各种错误，都是很低级的，比如在CSS中定义body的样式，竟然写成{XXXX}，然后琢磨了很久都没看出来，不可饶恕啊。。 上代码吧： body { margin:0 auto; width:100%; fo
网易音乐人前端页面制作
最新发布
06-03
网易音乐人前端页面制作，需要具备以下技能和知识： 1. HTML、CSS、JavaScript基础知识 2. 前端框架，如React、Angular、Vue等 3. 前端构建工具，如Webpack、Gulp等 4. 熟悉Web标准和协议，如HTTP、HTTPS、TCP/IP等 5. 掌握响应式布局、移动端适配等技术 6. 掌握跨浏览器兼容性处理方法 7. 掌握前端性能优化方法 8. 熟悉前后端数据交互方式和RESTful API设计 在实际制作过程中，需要结合网易音乐人页面的设计稿，按照设计要求进行页面布局、样式设计、交互效果实现等。同时，需要测试和优化页面性能，确保页面加载速度和用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值