淡若如初
淡若如初

CSS实现进度条和订单进度条---竖向

之前做了一个横向订单进度条，手机访问显示很难兼容样式，下面做一个竖向的，再结合情况微调一下，方便去兼容手机。

1.直接放页面

CSS实现进度条和订单进度条---竖向_第1张图片

代码如下（示例）：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.js"></script>
<head>
<style type="text/css">
/*--- ul li 横向展示 --------*/
.uls li {
	margin-left: 5px;
	margin-bottom: 10px;
	list-style: none;
}

.goodsInfo {
	float: left;
}

#index_text {
	font-size: 16px;
	margin-top: -70px;
}
/*---- 订单进度 ----*/
.steps-container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	display: flex;
}

.step {
	position: relative;
	width: 100%;
	padding-bottom: 20px;
	padding-left: 70px; /* 圆点左侧的间距 */
}

.step.active .step-circle {
	background-color: teal;
	color: #fff;
}

.step-line1 {
	position: absolute;
	top: 10px;
	left: 30px; /* 线条左侧的位置 */
	width: 2px;
	height: 100%;
	background-color: #9D9D9D;
	z-index: -1; /* 线条位于圆点下方 */
}

.step-line2 {
	position: absolute;
	top: 10px;
	left: 30px; /* 线条左侧的位置 */
	width: 2px;
	height: 100%;
	background-color: #9D9D9D;
	z-index: -1; /* 线条位于圆点下方 */
}

.step-line3 {
	position: absolute;
	top: 10px;
	left: 30px; /* 线条左侧的位置 */
	width: 2px;
	height: 100%;
	background-color: #9D9D9D;
	z-index: -1; /* 线条位于圆点下方 */
}

.step-line4 {
	position: absolute;
	top: 10px;
	left: 30px; /* 线条左侧的位置 */
	width: 2px;
	height: 100%;
	background-color: #9D9D9D;
	z-index: -1; /* 线条位于圆点下方 */
}

.step:last-child .step-line {
	display: none; /* 最后一个步骤不需要线条 */
}

.step-circle1 {
	position: absolute;
	left: 20px;
	top: 20px;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	line-height: 20px;
	border-radius: 50%;
	background-color: #9D9D9D;
	text-align: center;
	font-size: 10px;
	color: #fff;
}

.step-circle2 {
	position: absolute;
	left: 20px;
	top: 20px;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	line-height: 20px;
	border-radius: 50%;
	background-color: #9D9D9D;
	text-align: center;
	font-size: 10px;
	color: #fff;
}

.step-circle3 {
	position: absolute;
	left: 20px;
	top: 20px;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	line-height: 20px;
	border-radius: 50%;
	background-color: #9D9D9D;
	text-align: center;
	font-size: 10px;
	color: #fff;
}

.step-circle4 {
	position: absolute;
	left: 20px;
	top: 20px;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	line-height: 20px;
	border-radius: 50%;
	background-color: #9D9D9D;
	text-align: center;
	font-size: 10px;
	color: #fff;
}

.step-circle5 {
	position: absolute;
	left: 20px;
	top: 20px;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	line-height: 20px;
	border-radius: 50%;
	background-color: #9D9D9D;
	text-align: center;
	font-size: 10px;
	color: #fff;
}

.step.active .step-circle {
	background-color: teal;
	color: #fff;
}

.time {
	height: 50px;
}

.time span {
	width: 100px;
	font-size: 14px;
}
</style>
</head>
<body>
	<header class="header home"> </header>
	<div class="table_page">
		<ul class="uls">
			<li>
				<h5>商品列表</h5>
			</li>
			<li style="border-top: 1px solid #eeeeee;">
				<h5 style="height: 50px;">快递信息</h5>
				<div class="steps-container">
					<div class="step">
						<div class="step-line1"></div>
						<div class="step-circle1"></div>
						<div class="time">
							<span>下单</span>
							&nbsp;&nbsp;&nbsp;
							<span id="createTime">2023-05-12  成功下单啦</span>
						</div>
					</div>
					<div class="step">
						<div class="step-line2"></div>
						<div class="step-circle2"></div>
						<div class="time">
							<span>付款</span>
							&nbsp;&nbsp;&nbsp;
							<span id="payTime">2023-05-13 通过支付宝付款</span>
						</div>
					</div>
					<div class="step">
						<div class="step-line3"></div>
						<div class="step-circle3"></div>
						<div class="time">
							<span>配货</span>
							&nbsp;&nbsp;&nbsp;
							<span id="prepareTime">2023-05-14 商家已经在备货啦</span>
						</div>
					</div>
					<div class="step">
						<div class="step-line4"></div>
						<div class="step-circle4"></div>
						<div class="time">
							<span>出库</span>
							&nbsp;&nbsp;&nbsp;
							<span id="deliverTime">2023-05-15 您的快递已经发出啦，等着接收吧</span>
						</div>
					</div>
					<div class="step">
						<div class="step-line5"></div>
						<div class="step-circle5"></div>
						<div class="time">
							<span>收货</span>
							&nbsp;&nbsp;&nbsp;
							<span id="tradeTime">2023-05-16 客户已收货</span>
						</div>
					</div>
				</div>
			</li>
		</ul>
	</div>
	<script type="text/javascript">
		var createTime = document.getElementById("createTime").innerText;
		var payTime = document.getElementById("payTime").innerText;
		var prepareTime = document.getElementById("prepareTime").innerText;
		var deliverTime = document.getElementById("deliverTime").innerText;
		var tradeTime = document.getElementById("tradeTime").innerText;

		if (createTime != null && createTime != '') {
			$(".step-line1").css("background-color", "#84C1FF");
			$(".step-circle1").css("background-color", "#84C1FF");
		}
		if (payTime != null && payTime != '') {
			$(".step-line2").css("background-color", "#84C1FF");
			$(".step-circle2").css("background-color", "#84C1FF");
		}
		if (prepareTime != null && prepareTime != '') {
			$(".step-line3").css("background-color", "#84C1FF");
			$(".step-circle3").css("background-color", "#84C1FF");
		}
		if (deliverTime != null && deliverTime != '') {
			$(".step-line4").css("background-color", "#84C1FF");
			$(".step-circle4").css("background-color", "#84C1FF");
		}
		if (tradeTime != null && tradeTime != '') {
			$(".step-line5").css("background-color", "#84C1FF");
			$(".step-circle5").css("background-color", "#84C1FF");
		}
	</script>
</body>
</html>

说明：根据后台获取的时间判断是否给按钮、线条上色，有值上色即可。

你可能感兴趣的:(Html,css,前端,javascript)

  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • swagger访问路径 igotyback swagger
    Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
  • html 中如何使用 uniapp 的部分方法 某公司摸鱼前端 htmluni-app前端
    示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
  • 四章-32-点要素的聚合 彩云飘过
    本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链
    加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • webpack图片等资源的处理 dmengmeng
    需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言
    这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
  • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
    在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
  • 博客网站制作教程 2401_85194651 javamaven
    首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
  • 00. 这里整理了最全的爬虫框架（Java + Python） 有一只柴犬 爬虫系列爬虫javapython
    目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2
  • 详解：如何设计出健壮的秒杀系统？ 夜空_2cd3
    作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*
  • JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
    在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
  • 最简单将静态网页挂载到服务器上(不用nginx) 全能全知者 服务器nginx运维前端html笔记
    最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
  • 补充元象二面 Redstone Monstrosity 前端面试
    1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
  • 微信小程序开发注意事项 jun778895 微信小程序小程序
    微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
  • 切换淘宝最新npm镜像源是 hai40587 npm前端node.js
    切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
  • 字节二面 Redstone Monstrosity 前端面试
    1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
  • 斟一小组鸡血视频 和自己一起成长
    http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa
  • 前端代码上传文件 余生逆风飞翔 前端javascript开发语言
    点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
  • Dockerfile命令详解之 FROM 清风怎不知意 容器化java前端javascript
    许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用
  • 《HTML 与 CSS—— 响应式设计》 陈在天box htmlcss前端
    一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
  • 【C语言】- 自定义类型：结构体、枚举、联合 Cavalier_01 C语言
    【C语言】：操作符（https://mp.csdn.net/editor/html/115218055）数据类型（https://mp.csdn.net/editor/html/115219664）自定义类型：结构体、枚举、联合（https://mp.csdn.net/editor/html/115373785）变量、常量（https://mp.csdn.net/editor/html/11523
  • uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
    第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
  • 高性能javascript--算法和流程控制 海淀萌狗
    -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
  • html+css网页设计 旅游网站首页1个页面 html+css+js网页设计 htmlcss旅游
    html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
  • spring mvc @RequestBody String类型参数 zoyation spring-mvcspringmvc
    通过如下配置：text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时，默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ
  • JVM StackMapTable 属性的作用及理解 lijingyao8206 jvm字节码Class文件StackMapTable
            在Java 6版本之后JVM引入了栈图(Stack Map Table)概念。为了提高验证过程的效率，在字节码规范中添加了Stack Map Table属性，以下简称栈图，其方法的code属性中存储了局部变量和操作数的类型验证以及字节码的偏移量。也就是一个method需要且仅对应一个Stack Map Table。在Java 7版
  • 回调函数调用方法 百合不是茶 java
    最近在看大神写的代码时,.发现其中使用了很多的回调 ,以前只是在学习的时候经常用到 ,现在写个笔记 记录一下   代码很简单:           MainDemo  :调用方法  得到方法的返回结果        
  • [时间机器]制造时间机器需要一些材料 comsci 制造
          根据我的计算和推测,要完全实现制造一台时间机器,需要某些我们这个世界不存在的物质     和材料...       甚至可以这样说,这种材料和物质,我们在反应堆中也无法获得......      
  • 开口埋怨不如闭口做事 邓集海 邓集海 做人 做事 工作
    “开口埋怨，不如闭口做事。”不是名人名言，而是一个普通父亲对儿子的训导。但是，因为这句训导，这位普通父亲却造就了一个名人儿子。这位普通父亲造就的名人儿子，叫张明正。 　　 　　张明正出身贫寒，读书时成绩差，常挨老师批评。高中毕业，张明正连普通大学的分数线都没上。高考成绩出来后，平时开口怨这怨那的张明正，不从自身找原因，而是不停地埋怨自己家庭条件不好、埋怨父母没有给他创造良好的学习环境。 　　 　　
  • jQuery插件开发全解析，类级别与对象级别开发 IT独行者 jquery开发插件　函数
    jQuery插件的开发包括两种： 一种是类级别的插件开发，即给 jQuery添加新的全局函数，相当于给 jQuery类本身添加方法。 jQuery的全局函数就是属于 jQuery命名空间的函数，另一种是对象级别的插件开发，即给 jQuery对象添加方法。下面就两种函数的开发做详细的说明。   1 、类级别的插件开发 类级别的插件开发最直接的理解就是给jQuer
  • Rome解析Rss 413277409 Rome解析Rss
    import java.net.URL;  import java.util.List;    import org.junit.Test;    import com.sun.syndication.feed.synd.SyndCategory;  import com.sun.syndication.feed.synd.S
  • RSA加密解密 无量 加密解密rsa
    RSA加密解密代码 代码有待整理 package com.tongbanjie.commons.util; import java.security.Key; import java.security.KeyFactory; import java.security.KeyPair; import java.security.KeyPairGenerat
  • linux 软件安装遇到的问题 aichenglong linux遇到的问题ftp
    1 ftp配置中遇到的问题    500 OOPS: cannot change directory   出现该问题的原因:是SELinux安装机制的问题.只要disable SELinux就可以了   修改方法:1 修改/etc/selinux/config 中SELINUX=disabled    2 source /etc
  • 面试心得 alafqq 面试
    最近面试了好几家公司。记录下； 支付宝，面试我的人胖胖的，看着人挺好的；博彦外包的职位，面试失败； 阿里金融，面试官人也挺和善，只不过我让他吐血了。。。 由于印象比较深，记录下； 1，自我介绍 2，说下八种基本类型；（算上string。楼主才答了3种，哈哈，string其实不是基本类型，是引用类型） 3，什么是包装类，包装类的优点； 4，平时看过什么书？NND，什么书都没看过。。照样
  • java的多态性探讨 百合不是茶 java
    java的多态性是指main方法在调用属性的时候类可以对这一属性做出反应的情况 //package 1; class A{ public void test(){ System.out.println("A"); } } class D extends A{ public void test(){ S
  • 网络编程基础篇之JavaScript-学习笔记 bijian1013 JavaScript
    1.documentWrite <html> <head> <script language="JavaScript"> document.write("这是电脑网络学校"); document.close(); </script> </h
  • 探索JUnit4扩展：深入Rule bijian1013 JUnitRule单元测试
            本文将进一步探究Rule的应用，展示如何使用Rule来替代@BeforeClass，@AfterClass，@Before和@After的功能。         在上一篇中提到，可以使用Rule替代现有的大部分Runner扩展，而且也不提倡对Runner中的withBefores()，withAfte
  • [CSS]CSS浮动十五条规则 bit1129 css
    这些浮动规则，主要是参考CSS权威指南关于浮动规则的总结，然后添加一些简单的例子以验证和理解这些规则。   1. 所有的页面元素都可以浮动 2. 一个元素浮动后，会成为块级元素，比如<span>,a, strong等都会变成块级元素 3.一个元素左浮动，会向最近的块级父元素的左上角移动，直到浮动元素的左外边界碰到块级父元素的左内边界；如果这个块级父元素已经有浮动元素停靠了
  • 【Kafka六】Kafka Producer和Consumer多Broker、多Partition场景 bit1129 partition
    0.Kafka服务器配置 3个broker 1个topic，6个partition，副本因子是2 2个consumer，每个consumer三个线程并发读取   1. Producer package kafka.examples.multibrokers.producers; import java.util.Properties; import java.util.
  • zabbix_agentd.conf配置文件详解 ronin47 zabbix 配置文件
    Aliaskey的别名，例如 Alias=ttlsa.userid:vfs.file.regexp[/etc/passwd,^ttlsa:.:([0-9]+),,,,\1]， 或者ttlsa的用户ID。你可以使用key：vfs.file.regexp[/etc/passwd,^ttlsa:.: ([0-9]+),,,,\1]，也可以使用ttlsa.userid。备注: 别名不能重复，但是可以有多个
  • java--19.用矩阵求Fibonacci数列的第N项 bylijinnan fibonacci
    参考了网上的思路，写了个Java版的： public class Fibonacci { final static int[] A={1,1,1,0}; public static void main(String[] args) { int n=7; for(int i=0;i<=n;i++){ int f=fibonac
  • Netty源码学习-LengthFieldBasedFrameDecoder bylijinnan javanetty
    先看看LengthFieldBasedFrameDecoder的官方API http://docs.jboss.org/netty/3.1/api/org/jboss/netty/handler/codec/frame/LengthFieldBasedFrameDecoder.html API举例说明了LengthFieldBasedFrameDecoder的解析机制，如下： 实
  • AES加密解密 chicony 加密解密
    AES加解密算法，使用Base64做转码以及辅助加密： package com.wintv.common; import javax.crypto.Cipher; import javax.crypto.spec.IvParameterSpec; import javax.crypto.spec.SecretKeySpec; import sun.misc.BASE64Decod
  • 文件编码格式转换 ctrain 编码格式
    package com.test; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.io.OutputStream;
  • mysql 在linux客户端插入数据中文乱码 daizj mysql中文乱码
    1、查看系统客户端，数据库，连接层的编码  查看方法： http://daizj.iteye.com/blog/2174993 进入mysql，通过如下命令查看数据库编码方式： mysql>  show variables like 'character_set_%'; +--------------------------+------
  • 好代码是廉价的代码 dcj3sjt126com 程序员读书
      长久以来我一直主张：好代码是廉价的代码。 当我跟做开发的同事说出这话时，他们的第一反应是一种惊愕，然后是将近一个星期的嘲笑，把它当作一个笑话来讲。 当他们走近看我的表情、知道我是认真的时，才收敛一点。 当最初的惊愕消退后，他们会用一些这样的话来反驳： “好代码不廉价，好代码是采用经过数十年计算机科学研究和积累得出的最佳实践设计模式和方法论建立起来的精心制作的程序代码。” 我只
  • Android网络请求库——android-async-http dcj3sjt126com android
    在iOS开发中有大名鼎鼎的ASIHttpRequest库，用来处理网络请求操作，今天要介绍的是一个在Android上同样强大的网络请求库android-async-http，目前非常火的应用Instagram和Pinterest的Android版就是用的这个网络请求库。这个网络请求库是基于Apache HttpClient库之上的一个异步网络请求处理库，网络处理均基于Android的非UI线程，通
  • ORACLE 复习笔记之SQL语句的优化 eksliang SQL优化Oracle sql语句优化SQL语句的优化
    转载请出自出处：http://eksliang.iteye.com/blog/2097999   SQL语句的优化总结如下   sql语句的优化可以按照如下六个步骤进行： 合理使用索引 避免或者简化排序 消除对大表的扫描 避免复杂的通配符匹配 调整子查询的性能 EXISTS和IN运算符 下面我就按照上面这六个步骤分别进行总结：
  • 浅析：Android 嵌套滑动机制（NestedScrolling） gg163 android移动开发滑动机制嵌套
    谷歌在发布安卓 Lollipop版本之后，为了更好的用户体验，Google为Android的滑动机制提供了NestedScrolling特性 NestedScrolling的特性可以体现在哪里呢？<!--[if !supportLineBreakNewLine]--><!--[endif]--> 比如你使用了Toolbar，下面一个ScrollView，向上滚
  • 使用hovertree菜单作为后台导航 hvt JavaScriptjquery.nethovertreeasp.net
      hovertree是一个jquery菜单插件，官方网址：http://keleyi.com/jq/hovertree/ ，可以登录该网址体验效果。 0.1.3版本：http://keleyi.com/jq/hovertree/demo/demo.0.1.3.htm hovertree插件包含文件： http://keleyi.com/jq/hovertree/css
  • SVG 教程 （二）矩形 天梯梦 svg
    SVG <rect> SVG Shapes SVG有一些预定义的形状元素，可被开发者使用和操作： 矩形 <rect> 圆形 <circle> 椭圆 <ellipse> 线 <line> 折线 <polyline> 多边形 <polygon> 路径 <path>
  • 一个简单的队列 luyulong java数据结构队列
    public class MyQueue { private long[] arr; private int front; private int end; // 有效数据的大小 private int elements; public MyQueue() { arr = new long[10]; elements = 0; front
  • 基础数据结构和算法九：Binary Search Tree sunwinner Algorithm
      A binary search tree (BST) is a binary tree where each node has a Comparable key (and an associated value) and satisfies the restriction that the key in any node is larger than the keys in all
  • 项目出现的一些问题和体会 Steven-Walker DAOWebservlet
         第一篇博客不知道要写点什么，就先来点近阶段的感悟吧。     这几天学了servlet和数据库等知识，就参照老方的视频写了一个简单的增删改查的，完成了最简单的一些功能，使用了三层架构。 dao层完成的是对数据库具体的功能实现，service层调用了dao层的实现方法，具体对servlet提供支持。  &
  • 高手问答：Java老A带你全面提升Java单兵作战能力！ ITeye管理员 java
    本期特邀《Java特种兵》作者：谢宇，CSDN论坛ID: xieyuooo 针对JAVA问题给予大家解答，欢迎网友积极提问，与专家一起讨论! 作者简介： 淘宝网资深Java工程师，CSDN超人气博主，人称“胖哥”。 CSDN博客地址： http://blog.csdn.net/xieyuooo 作者在进入大学前是一个不折不扣的计算机白痴，曾经被人笑话过不懂鼠标是什么，
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他