韩曙亮
韩曙亮

【CSS】课程网站 Banner 制作 ② ( Banner 栏版心盒子测量 | Banner 版心盒子模型左侧导航栏代码示例 )

文章目录

  • 一、Banner 栏版心盒子测量
    • 1、测量版心元素尺寸
    • 2、课程表测量
  • 二、Banner 版心盒子模型左侧导航栏代码示例
    • 1、HTML 标签结构
    • 2、CSS 样式
    • 3、展示效果





一、Banner 栏版心盒子测量



1、测量版心元素尺寸


拉四条辅助线 , 将版心包起来 , 可以测量 Banner 条版心的尺寸为 1200 x 420 像素 ;

【CSS】课程网站 Banner 制作 ② ( Banner 栏版心盒子测量 | Banner 版心盒子模型左侧导航栏代码示例 )_第1张图片

【CSS】课程网站 Banner 制作 ② ( Banner 栏版心盒子测量 | Banner 版心盒子模型左侧导航栏代码示例 )_第2张图片

根据上一篇博客 【CSS】课程网站 Banner 制作 ① ( Banner 栏测量 | Banner 盒子模型代码 | 代码示例 ) 测量的尺寸 ,

  • 版心的尺寸为 1200 x 420 像素 ;
  • 版心左侧的 侧导航栏 尺寸为 190 x 420 像素 ;
  • 版心 右侧的 课程表 , 尺寸 228 x 300 像素 , 课程表 距离 Banner 顶部有 50 像素高度 , 距离底部 70 像素 ;

2、课程表测量


左侧的 文字 , 距离左侧有 20 像素的 左内边距 ;
【CSS】课程网站 Banner 制作 ② ( Banner 栏版心盒子测量 | Banner 版心盒子模型左侧导航栏代码示例 )_第3张图片
右侧的文字 , 距离测导航栏的右侧有 20 像素的右内边距 ;

【CSS】课程网站 Banner 制作 ② ( Banner 栏版心盒子测量 | Banner 版心盒子模型左侧导航栏代码示例 )_第4张图片

测量 测导航栏 文本间隔 , 也就是行高 , 从上一行开始到下一行开始位置 , 行高 44 像素 ;

【CSS】课程网站 Banner 制作 ② ( Banner 栏版心盒子测量 | Banner 版心盒子模型左侧导航栏代码示例 )_第5张图片

左侧的 侧导航栏 的 背景是 黑色半透明 背景 ;

使用吸管工具 , 吸取 鼠标移动到 侧导航栏 上的颜色值 为 #00b4ff ;

【CSS】课程网站 Banner 制作 ② ( Banner 栏版心盒子测量 | Banner 版心盒子模型左侧导航栏代码示例 )_第6张图片

侧导航栏中 , 默认状态下 , 文字默认颜色为白色 ;
【CSS】课程网站 Banner 制作 ② ( Banner 栏版心盒子测量 | Banner 版心盒子模型左侧导航栏代码示例 )_第7张图片





二、Banner 版心盒子模型左侧导航栏代码示例



1、HTML 标签结构


核心代码 :

	
	<div class="banner">
		
		<div class="w">
			
			<div class="subnav">
				
				<ul>
					<li><a href="#">前端开发 <span>>span>a>li>
					<li><a href="#">后端开发 <span>>span>a>li>
					<li><a href="#">移动开发 <span>>span>a>li>
					<li><a href="#">人工智能 <span>>span>a>li>
					<li><a href="#">商业预测 <span>>span>a>li>
					<li><a href="#">云计算&大数据 <span>>span>a>li>
					<li><a href="#">运维&从测试 <span>>span>a>li>
					<li><a href="#">UI设计 <span>>span>a>li>
					<li><a href="#">产品 <span>>span>a>li>
				ul>
			div>
		div>
	div>

完整代码 :

DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>课程网站title>
	<link rel="stylesheet" href="style.css">
head>
<body>
	
	<div class="header w">
	
		
		<div class="logo">
			
			<img src="images/logo.png" alt="">
		div>
		
		
		<div class="nav">
			<ul>
				<li><a href="#">首页a>li>
				<li><a href="#">课程a>li>
				<li><a href="#">职业规划a>li>
			ul>
		div>
		
		
		<div class="search">
			
			<input type="text" value="输入关键词">
			<button>button>
		div>
		
		
		<div class="user">
			<div class="user-img">
				<img src="images/head_icon.png" alt="">
			div>
			<div class="user-name">
				用户1
			div>
		div>
	div>
	
	
	
	<div class="banner">
		
		<div class="w">
			
			<div class="subnav">
				
				<ul>
					<li><a href="#">前端开发 <span>>span>a>li>
					<li><a href="#">后端开发 <span>>span>a>li>
					<li><a href="#">移动开发 <span>>span>a>li>
					<li><a href="#">人工智能 <span>>span>a>li>
					<li><a href="#">商业预测 <span>>span>a>li>
					<li><a href="#">云计算&大数据 <span>>span>a>li>
					<li><a href="#">运维&从测试 <span>>span>a>li>
					<li><a href="#">UI设计 <span>>span>a>li>
					<li><a href="#">产品 <span>>span>a>li>
				ul>
			div>
		div>
	div>
	
body>
html>

2、CSS 样式


/* 侧导航栏 样式 */
.subnav {
	/* 设置左浮动 */
	float: left;
	/* 左侧侧导航栏 190 x 420 , 左右两侧各 20 像素内边距 */
	width: 150px;
	/* 高度 420 像素 */
	height: 420px;
	/* 上下没有内边距 , 左右各 20 像素内边距 */
	padding: 0 20px;
	/* 背景半透明 黑色背景 0.3 透明度 */
	background: rgba(0, 0, 0, .3);
}

/* 测导航栏 中 无序列表 列表项 高度 45 像素 */
.subnav li {
	/* 高度 = 行高 , 垂直居中 */
	height: 45px;
	line-height: 45px;
}

/* 测导航栏 中 列表项 中的链接样式 */
.subnav li a {
	/* 默认情况下为白色 */
	color: #fff;
	/* 字体大小 14 像素 */
	font-size: 14px;
	/* 取消链接下方的下划线 */
	text-decoration: none;
}

/* 鼠标经过时 文字颜色变色 */
.subnav li a:hover {
	color: #00b4ff;
}

/* 链接内部的 span 标签 , 右浮动 */
.subnav  span {
	float: right;
}

完整代码 :

/* 清除标签默认的内外边距 */
* {
   padding: 0;     
   margin: 0;
}

/* 清除列表默认样式 ( 主要是前面的点 ) */
li {
	list-style: none;
}

/* 清除按钮默认样式 ( 主要是按钮自带的边框 ) */
button {
	border: none;
}

/* 设置总体背景 */
body {
	background-color: #f3f5f7;
}

/* 版心宽度 1200 像素 , 在浏览器中居中对齐 */
.w {
    width: 1200px;
    margin: auto;
}

/* 头部盒子样式 */
.header {
	/* 高度 42 像素 */
	height: 42px;
	/* 设置颜色 方便调试 */
	/*background-color: pink;*/
	/* 上下设置 20 像素外边距 , 左右自动居中 */
	margin: 30px auto;
}

.logo {
	/* 靠左侧浮动 */
	float: left;
	/* 设置与 导航栏盒子 的外边距 */
	margin-right: 60px;
}

/* 导航栏设置 左浮动 */
.nav {
	float: left;
}

/* 导航栏内部 的 无序列表 设置左浮动 */
.nav ul li {
	/* 设置 无序列表项 从左到右排列 */
	float: left;
}

/* 设置无序列表中的链接样式 */
.nav ul li a {
	/* 显示模式 块级元素 */
	display: block;
	/* 高度 40 像素 , 总高度 42 像素 , 有 2 像素的下边框 */
	height: 40px;
	/* 上下内边距 0 像素 , 左右内边距 10 像素 */
	padding: 0 10px;
	/* 右外边距 20 像素 */
	margin-right: 20px;
	/* 行高 = 内容高度 垂直居中 */
	line-height: 40px;
	/* 字体大小 */
	font-size: 18px;
	/* 字体颜色 */
	color: #050505;
	/* 取消链接下方的横线 */
	text-decoration: none;
	/* 调试时使用的背景 */
	/*background: skyblue;*/
}

/* 鼠标经过链接时的样式 */
.nav ul li a:hover {
	/* 鼠标经过导航栏链接 , 底部显示 2 像素的 #00a4ff 颜色实线 */
	border-bottom: 2px solid #00a4ff;
}

/* 搜索栏盒子模型 */
.search {
	/* 设置左浮动 排列在 导航栏后面 */
	float: left;
	/* 设置左外边距 65 像素 */
	margin-left: 65px;
}

/* 搜索栏 输入框 */
.search input {
	/* 设置左浮动 , 方便与右侧的按钮进行排列 */
	float: left;
	/* 宽度为 360 像素, 但是左侧有 20 像素内边距变为 340 像素 */
	width: 340px;
	/* 高度 38 像素 但是盒子大小 42 像素 , 设置 40 加上 2 像素边框正好充满 */
	height: 40px;
	/* 1 像素边框 */
	border: 1px solid #00a4ff;
	/* 没有右边框 */
	border-right: 0;
	/* 文本左侧有 20 像素内边距 */
	padding-left: 20px;
	/* 设置文本颜色 */
	color: #bfbfbf;
}

/* 搜索框按钮 */
.search button {
	/* 设置左浮动 使其与表单在同一行显示 */
	float: left;
	/* 按钮宽度 50 像素 */
	width: 50px;
	/* 按钮高度 40 像素 但是为了与父容器匹配 这里拉伸到 42 像素 */
	height: 42px;
	/* 使用图片背景方式设置按钮图片 */
	background: url(images/search_button.png);
}

/* 用户栏盒子 */
.user {
	float: left;
	/* 高度 = 行高 垂直居中 */
	height: 42px;
	line-height: 42px;
	/* 距离左侧 30 像素 左外边距 */
	margin-left: 30px;
	/* 文字大小 14 像素 */
	font-size: 14px;
	/* 字体颜色 #666666 */
	color: #666666;
}

/* 用户栏 头像样式 */
.user .user-img {
	float: left;
	/* 用户头像 30 像素 容器高 42  上下各 6 像素边距 图像垂直居中 */
	padding: 6px 0;
}

/* 用户栏 名字样式 */
.user .user-name {
	float: left;
	/* 名字与头像间隔 6 像素 */
	margin-left: 6px;
}

/* Banner 条样式 */
.banner {
	/* 宽度自动填充整个浏览器, 这里只设置高度 */
	height: 420px;
	/* 背景颜色 #1c036c , 背景图片水平居中对齐 */
	background: #1c036c url(images/banner_bg.png) no-repeat top center;
}

/* 侧导航栏 样式 */
.subnav {
	/* 设置左浮动 */
	float: left;
	/* 左侧侧导航栏 190 x 420 , 左右两侧各 20 像素内边距 */
	width: 150px;
	/* 高度 420 像素 */
	height: 420px;
	/* 上下没有内边距 , 左右各 20 像素内边距 */
	padding: 0 20px;
	/* 背景半透明 黑色背景 0.3 透明度 */
	background: rgba(0, 0, 0, .3);
}

/* 测导航栏 中 无序列表 列表项 高度 45 像素 */
.subnav li {
	/* 高度 = 行高 , 垂直居中 */
	height: 45px;
	line-height: 45px;
}

/* 测导航栏 中 列表项 中的链接样式 */
.subnav li a {
	/* 默认情况下为白色 */
	color: #fff;
	/* 字体大小 14 像素 */
	font-size: 14px;
	/* 取消链接下方的下划线 */
	text-decoration: none;
}

/* 鼠标经过时 文字颜色变色 */
.subnav li a:hover {
	color: #00b4ff;
}

/* 链接内部的 span 标签 , 右浮动 */
.subnav  span {
	float: right;
}

3、展示效果


【CSS】课程网站 Banner 制作 ② ( Banner 栏版心盒子测量 | Banner 版心盒子模型左侧导航栏代码示例 )_第8张图片

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

  • 突破网络壁垒：实现 Mac SSH 访问 Windows WSL Ubuntu 的最佳实践20250301 Narutolxy 技术干货分享网络macosssh
    突破网络壁垒：实现MacSSH访问WindowsWSLUbuntu的最佳实践背景与痛点在现代开发环境中，开发者通常会面临不同操作系统之间的协同工作。例如：主要开发环境位于Windows的WSLUbuntu子系统需要从局域网内的Mac设备进行远程访问和管理由于WSL默认采用NAT网络隔离（172.x.x.x网段），导致：无法直接从局域网设备（如192.168.x.x）访问WSL环境每次WSL重启时可
  • 【前端】小程序实现预览pdf并导出 @Dai 前端javascript学习前端小程序pdf
    小程序实现预览pdf并导出一、前言二、需要的wxapi三、完整代码一、前言小程序没办法直接导出pdf或一些文档，只能借助api先将文件下载下来并打开，再让用户手动去保存。之前做“小程序当前页面截图转pdf导出”功能的时候，小程序好像也无法实现。所以要打开文件，都让后端去做吧，要么给前端一个文件地址，要么返回二进制文件流，这样小程序就能打开文件了。二、需要的wxapidownloadFile（下载文
  • 常见的Python框架--matplotlib 我有颗小粒的痣 Pythonpythonmatplotlib
    matplotlib获取方法：https://matplotlib.org/users/installing.html#building-on-linuxsudoapt-getinstallpython-matplotlib#python2.sudoapt-getinstallpython3-matplotlib#python3.简介用于数据可视化#easyexampleimportmatplot
  • 阿里云ESC windws服务器部署springboot+vue前后端分离项目 溫冬＇＇123 项目部署springboot阿里云服务器
    window服务器部署springboot+vue项目前期准备：1、完整的项目源码我这里的项目前端是vue，后端是springboot+redis+mysql2、服务器我使用的是阿里云的ESC服务器（偷偷告诉你们，新手都可以白嫖一个月的服务器）服务器系统是windows至于我为什么不用linux，害别说了，新手还是先用window先吧。3、服务器环境搭建我们部署项目需要搭建项目的环境，其实仔细想想
  • 前端2025 家里有只小肥猫 前端
    2025前端面试总结：趋势、技巧与准备建议随着前端技术的飞速发展，2025年的前端面试不仅考察技术深度，更注重实践能力和对新技术的掌握。作为一名前端开发者，如何在激烈的竞争中脱颖而出，是每一位求职者都需要思考的问题。本文将结合2025年的前端技术趋势，分享面试总结、常见问题及准备建议，帮助大家更好地应对未来的面试挑战。一、2025年前端技术趋势总结WebComponents的广泛应用WebComp
  • 2025前端技能 家里有只小肥猫 前端
    前端开发是现代Web开发中非常重要的一部分，涉及众多技术和工具。以下是一些在前端开发工作中常见的需求和技术：1.技术基础HTML/CSS:构建页面结构和样式。JavaScript:实现交互逻辑和动态功能。ES6+:使用现代JavaScript语法和特性。DOM操作:操作网页元素和事件处理。浏览器兼容性:确保代码在不同浏览器中正常运行。跨设备适配:确保页面在不同设备（PC、手机、平板）上正常显示。2
  • 事件循环_经典面试题 还是鼠鼠 javascriptajax前端vscodehtml5
    目录代码分析代码解读执行顺序执行结果结论文件名：在JavaScript中，理解事件循环（EventLoop）是掌握异步编程的基础。事件循环决定了代码的执行顺序，包括宏任务（Macrotasks）和微任务（Microtasks）的调度。为了更好地理解事件循环，我们通过一个经典的面试题来展示JavaScript中的异步执行顺序。代码分析这是一个简单的HTML文件，包含了一段JavaScript代码，我
  • 零基础程序员如何快速学会python Java进阶营菌 程序员职场Pythonpython开发语言后端pycharm程序人生
    学会Python能做的事情也很多，常见的就有网络爬虫，数据分析，前端开发，机器学习，都能很好地提高工作效率，往任何一个领域发展，工作前景是非常不错的。接下来我从基本的软件安装开始，仔细的给大家分析新手入门应该怎样学习Python吧，如果有讲得不到位的地方也欢迎大家指正，我会及时进行修改。一、软件的安装和选择1、配置环境关系到实操，所以在选择资料的同时，你还需要安装好Python需要的软件，软件版本
  • spring mvc面试笔记 表面矿工 面试题springmvc面试
    简述SpringMVC工作原理?SpringMVC工作原理：1：用户发送请求至前端控制器DispatcherServlet。2：DispatcherServlet收到请求调用HandlerMapping处理器映射器。3：处理器映射器找到具体的处理器(可以根据xml配置、注解进行查找)，生成处理器对象及处理器拦截器(如果有则生成)一并返回给DispatcherServlet。4：Dispatcher
  • JavaScript 系列之：函数 程序员SKY JavaScriptjavascript
    函数的定义方式函数声明functionadd(a,b){returna+b;}函数声明的最重要的一个特征是函数声明提升，它允许你在函数声明之前调用该函数。add(1,2);functionadd(a,b){returna+b;}函数表达式//普通的函数表达式letadd=function(a,b){returna+b;}add(1,2)//函数表达式也可以有函数名，这个函数名不能在函数外面用，只能
  • 前端架构 —— 脚手架的开发流程 mask-li 前端
    一、脚手架开发流程详解开发流程创建npm项目创建脚手架入口文件，最上方添加：#!/usr/bin/envnode配置package.json，添加bin属性编写脚手架代码将脚手架发布到npm使用流程安装脚手架npminstall-gyour-own-cli使用脚手架your-own-cli二、脚手架开发难点解析分包：将复杂的系统拆分成若干个模块命令注册：vuecreatevueaddvueinvo
  • 前端架构设计 weixin_34266504 前端测试javascriptViewUI
    最近在拜读一本《前端架构设计》的书，该书讲到前端架构师的用户是开发人员。所选择的工具、编写的代码、创建的流程，都是为了让开发人员能够构建出最高效的、不出错的、可扩展的和可持续优化的系统。一、HTML1）标签规范化div乱炖是指嵌套多层div元素。为了保持简洁，语义化的标签是首选，应用样式所依靠的是HTML5元素名称和它们的层级关系，在标记中没有类名，往往写出层级的后代选择器。2）模块化方法前端开发
  • 深入理解 JSP：从基础知识到实战技巧的全面解析 CarlowZJ java开发语言
    JSP（JavaServerPages）是一种基于Java的服务器端技术，用于开发动态Web应用。它通过将Java代码嵌入到HTML页面中，简化了Web开发的复杂性。JSP是JavaWeb开发的重要组成部分，与Servlet、JavaBean等技术紧密集成，广泛应用于企业级Web应用开发。本文将从基础知识、核心特性、生命周期、与Servlet的关系、框架支持、最佳实践等方面对JSP进行详细解析，帮
  • React - 兄弟互传 - 消息订阅 - 发布机制 来一碗刘肉面 Reactreact.js前端javascript
    pubsub-js是一个轻量级的JavaScript库，用于实现发布-订阅（Pub/Sub）模式。该模式使得组件间的通信变得简单和高效，特别适用于React中的兄弟组件之间通信。通过pubsub-js，一个组件可以发布消息，其他组件可以订阅这些消息以获得更新。1.安装pubsub-jsnpminstallpubsub-js//或者yarnaddpubsub-js2.基本概念发布（Publish）:
  • HTML学习笔记 誓死守护发际线 html学习笔记
    文章目录(一)HTML简介一、网页1.什么是网页2.什么是HTML二、常用的浏览器1.常用的浏览器2.浏览器内核（渲染引擎）3.web标准(二)HTML标签一、HTML语法规范1.基本语法概述2.标签的关系二、HTML基本结构标签三、网页开发工具1.VSCode的使用：2.vsCode工具生成骨架标签新增代码1）标签2）lang语言3）charset字符集四、HTML常用标签1.语义化标签：2.标
  • XSL是指可扩展样式表语言 (EXtensible Stylesheet Language) 万事俱备，就差一个程序员了
    XSLXSL是指可扩展样式表语言(EXtensibleStylesheetLanguage)，是一种用于以可读格式呈现XML数据的语言。目录简介语法XSL是否与XML相同用途应用简介XSL之于XML,就像CSS之于HTML。它是指可扩展样式表语言(EXtensibleStylesheetLanguage)。这是一种用于以可读格式呈现XML数据的语言。xsl是一种标记语言，表示如何将xml文档的内容
  • 前端控制器模式 wjs2024 开发语言
    前端控制器模式引言在软件设计模式中，前端控制器模式（FrontControllerPattern）是一种行为型设计模式。它提供了一种集中处理请求的机制，将请求分发到相应的处理者，从而简化了请求的处理流程。本文将详细介绍前端控制器模式的概念、原理、实现方法以及在实际开发中的应用。概念前端控制器模式的核心思想是将所有请求统一由一个控制器处理，控制器根据请求类型将请求分发到相应的处理者。这种模式适用于以
  • HTML AI 编程助手 wjs2024 开发语言
    HTMLAI编程助手引言随着人工智能技术的飞速发展，编程领域也迎来了新的变革。HTML，作为网页制作的基础语言，与AI技术的结合，为开发者带来了前所未有的便利。本文将探讨HTMLAI编程助手的功能、应用场景以及如何利用它提高编程效率。HTMLAI编程助手概述HTMLAI编程助手是一种基于人工智能技术的辅助工具，旨在帮助开发者快速、高效地完成HTML代码编写。通过学习大量的HTML代码，AI编程助手
  • javaScript-系统知识点【 常见问题及其解决办法】 大麦大麦 2025前端面经javascript开发语言ecmascript前端面试
    会造成内存泄漏的情况（中级）setTimeout的第⼀个参数使⽤字符串⽽非函数的话，会引发内存泄漏。//setTimeout的错误使用setTimeout('666',100)//setTimeout的正确用法setTimeout(()=>{console.log('666')},1000)前端常见内存泄漏及解决方案如何捕获JS程序的异常？两种方式trycatchwindow.onerror//手
  • 2025前端最新面试题-网络篇 大麦大麦 前端网络面试网络安全网络协议
    1.现代浏览器为何要禁用第三方cookie为了用户的安全(安全和隐私是浏览器永恒的话题)第三方cookie会记录用户的行为和数据,方便做广告有些浏览器默认禁止,Chrome增加了SameSite(谷歌有广告)cookie可以实现不同域共享吗同一主域名下的子域名，cookie可以共享2.实现心跳检验-用于断线重连functionHeartbeaet(){lettimer=0functionfn(){
  • JavaScript 系列八：同步与异步 XHSRookies JavaScriptjavascript
    快来加入我们吧！"小和山的菜鸟们"，为前端开发者提供技术相关资讯以及系列基础文章。为更好的用户体验，请您移至我们官网小和山的菜鸟们(https://xhs-rookies.com/)进行学习，及时获取最新文章。"Codetailor"，如果您对我们文章感兴趣、或是想提一些建议，微信关注“小和山的菜鸟们”公众号，与我们取的联系，您也可以在微信上观看我们的文章。每一个建议或是赞同都是对我们极大的鼓励！
  • 第三百七十二节 JavaFX教程 - JavaFX HTMLEditor 程序猿小D java前端服务器
    JavaFX教程-JavaFXHTMLEditorHTMLEditor控件是一个富文本编辑器，具有以下功能。粗体斜体下划线删除线字体系列字体大小前景色背景颜色缩进项目符号列表编号列表对齐水平线复制文本片段粘贴文本片段HTMLEditor类返回HTML字符串中的编辑内容。创建HTML编辑器importjavafx.application.Application;importjavafx.scene.
  • 爬虫：一文掌握JavaScript hook的详细使用 数据知道 2025年爬虫和逆向教程爬虫javascript开发语言python数据采集前端
    文章目录一、什么是JavaScriptHook？二、JavaScriptHook的常见用途三、常见的JavaScriptHook技术3.1函数劫持（FunctionHooking）3.2代理对象（Proxy）3.3MutationObserver3.4EventListenerHook四、在爬虫中的应用4.1使用Puppeteer拦截AJAX请求4.2使用Playwright注入Hook4.3表单
  • 解析Spring:架构与组件 党和人民 技术理论spring
    DispatcherServletDispatcherServlet是SpringMVC的前端控制器，它负责接收所有的HTTP请求，并将请求分发到相应的处理器。它是整个SpringMVC框架的核心组件。初始化：DispatcherServlet在启动时会初始化一系列的组件，如HandlerMapping、HandlerAdapter、ViewResolver等。请求处理：接收到请求后，Dispat
  • LeetCode - #219 存在重复元素 II 网罗开发 Swiftvue.jsleetcode算法
    网罗开发（小红书、快手、视频号同名）  大家好，我是展菲，目前在上市企业从事人工智能项目研发管理工作，平时热衷于分享各种编程领域的软硬技能知识以及前沿技术，包括iOS、前端、HarmonyOS、Java、Python等方向。在移动端开发、鸿蒙开发、物联网、嵌入式、云原生、开源等领域有深厚造诣。图书作者：《ESP32-C3物联网工程开发实战》图书作者：《SwiftUI入门，进阶与实战》超级个体：CO
  • AI 驱动的智慧大脑：打造企业动态知识库，开启高效管理新时代 网罗开发 人工智能AI大模型深度学习人工智能
    网罗开发（小红书、快手、视频号同名）  大家好，我是展菲，目前在上市企业从事人工智能项目研发管理工作，平时热衷于分享各种编程领域的软硬技能知识以及前沿技术，包括iOS、前端、HarmonyOS、Java、Python等方向。在移动端开发、鸿蒙开发、物联网、嵌入式、云原生、开源等领域有深厚造诣。图书作者：《ESP32-C3物联网工程开发实战》图书作者：《SwiftUI入门，进阶与实战》超级个体：CO
  • 前后端分离项目的验证码实现（前端Vue，后端TP） 今天练肩感觉爆炸 vuethinkphp
    1.TP安装依赖composerrequiretopthink/think-captcha=2.0.*2.生成验证码返回给前端//生成验证码publicfunctiongetCaptcha(){$config=[//验证码字符集合'codeSet'=>'0123456789',//验证码字体大小'fontSize'=>30,//字体'fontttf'=>'5.ttf',//验证码位数'length
  • Node.js学习01-初识Node.js与内置模块 Meowmow nodejsnode.js学习javascript
    目录初识Node.js在Node.js环境执行js代码内置模块fs文件系统模块路径动态拼接问题path路径模块http模块request请求对象初识Node.jsNode.js是基于ChromeV8引擎的JavaScript运行环境，无法调用DOM和BOM等浏览器内置API。使用Node.js可以：基于Express框架快速搭建web应用基于Electron框架构建跨平台的桌面应用基于restif
  • html data-src和src的区别,img 的data-src 属性实现懒加载 薄辉 htmldata-src和src的区别
    一、什么是图片懒加载？当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次)，当图片出现在浏览器的可视区域内时，才设置图片真正的路径，让图片显示出来。这就是图片懒加载。通俗一点：1、就是创建一个自定义属性data-src存放真正需要显示的图片路径，而img自带的src放一张大小为1*1px的图片路径。2、当页面滚动直至此图片出现在可
  • 浅谈流媒体技术在无线网络中的应用 chenjie19891104 流媒体技术网络流媒体服务器服务器interneth.264路由器
    原文地址：http://info.broadcast.hc360.com/2009/10/100913135646.shtml流媒体即媒体内容通过数据网络传送到客户端的同时，在客户端播放的一种机制。流媒体技术首先出现在固定网络通信中，在网络上传送音视频等多媒体信息的方法主要采用下载和流式两种传送方式。对于下载方式而言，由于大文件往往需要大量的存储容量，同时受到网络带宽的限制，下载常常会花数分钟甚至
  • 关于旗正规则引擎下载页面需要弹窗保存到本地目录的问题 何必如此 jsp超链接文件下载窗口
    生成下载页面是需要选择“录入提交页面”，生成之后默认的下载页面<a>标签超链接为：<a href="<%=root_stimage%>stimage/image.jsp?filename=<%=strfile234%>&attachname=<%=java.net.URLEncoder.encode(file234filesourc
  • 【Spark九十八】Standalone Cluster Mode下的资源调度源代码分析 bit1129 cluster
    在分析源代码之前，首先对Standalone Cluster Mode的资源调度有一个基本的认识： 首先，运行一个Application需要Driver进程和一组Executor进程。在Standalone Cluster Mode下，Driver和Executor都是在Master的监护下给Worker发消息创建(Driver进程和Executor进程都需要分配内存和CPU，这就需要Maste
  • linux上独立安装部署spark daizj linux安装spark1.4部署
    下面讲一下linux上安装spark，以 Standalone Mode 安装   1）首先安装JDK   下载JDK：jdk-7u79-linux-x64.tar.gz  ，版本是1.7以上都行，解压 tar -zxvf jdk-7u79-linux-x64.tar.gz     然后配置 ~/.bashrc&nb
  • Java 字节码之解析一 周凡杨 java字节码javap
        一： Java 字节代码的组织形式   类文件 {     OxCAFEBABE ，小版本号，大版本号，常量池大小，常量池数组，访问控制标记，当前类信息，父类信息，实现的接口个数，实现的接口信息数组，域个数，域信息数组，方法个数，方法信息数组，属性个数，属性信息数组 } &nbs
  • java各种小工具代码 g21121 java
    1.数组转换成List import java.util.Arrays; Arrays.asList(Object[] obj); 2.判断一个String型是否有值 import org.springframework.util.StringUtils; if (StringUtils.hasText(str)) 3.判断一个List是否有值 import org.spring
  • 加快FineReport报表设计的几个心得体会 老A不折腾 finereport
    一、从远程服务器大批量取数进行表样设计时，最好按“列顺序”取一个“空的SQL语句”，这样可提高设计速度。否则每次设计时模板均要从远程读取数据，速度相当慢！！ 二、找一个富文本编辑软件（如NOTEPAD+）编辑SQL语句，这样会很好地检查语法。有时候带参数较多检查语法复杂时，结合FineReport中生成的日志，再找一个第三方数据库访问软件（如PL/SQL）进行数据检索，可以很快定位语法错误。
  • mysql linux启动与停止 墙头上一根草
    如何启动/停止/重启MySQL一、启动方式1、使用 service 启动：service mysqld start2、使用 mysqld 脚本启动：/etc/inint.d/mysqld start3、使用 safe_mysqld 启动：safe_mysqld&二、停止1、使用 service 启动：service mysqld stop2、使用 mysqld 脚本启动：/etc/inin
  • Spring中事务管理浅谈 aijuans spring事务管理
    Spring中事务管理浅谈 By Tony Jiang@2012-1-20 Spring中对事务的声明式管理 拿一个XML举例 [html]  view plain copy print ? <?xml version="1.0" encoding="UTF-8"?>&nb
  • php中隐形字符65279（utf-8的BOM头）问题 alxw4616
    php中隐形字符65279（utf-8的BOM头）问题 今天遇到一个问题. php输出JSON 前端在解析时发生问题:parsererror.   调试: 1.仔细对比字符串发现字符串拼写正确.怀疑是 非打印字符的问题. 2.逐一将字符串还原为unicode编码. 发现在字符串头的位置出现了一个 65279的非打印字符.        
  • 调用对象是否需要传递对象(初学者一定要注意这个问题) 百合不是茶 对象的传递与调用技巧
        类和对象的简单的复习,在做项目的过程中有时候不知道怎样来调用类创建的对象,简单的几个类可以看清楚,一般在项目中创建十几个类往往就不知道怎么来看   为了以后能够看清楚,现在来回顾一下类和对象的创建,对象的调用和传递(前面写过一篇)   类和对象的基础概念:   JAVA中万事万物都是类 类有字段(属性),方法,嵌套类和嵌套接
  • JDK1.5 AtomicLong实例 bijian1013 javathreadjava多线程AtomicLong
    JDK1.5 AtomicLong实例 类 AtomicLong 可以用原子方式更新的 long 值。有关原子变量属性的描述，请参阅 java.util.concurrent.atomic 包规范。AtomicLong 可用在应用程序中（如以原子方式增加的序列号），并且不能用于替换 Long。但是，此类确实扩展了 Number，允许那些处理基于数字类的工具和实用工具进行统一访问。  
  • 自定义的RPC的Java实现 bijian1013 javarpc
            网上看到纯java实现的RPC，很不错。         RPC的全名Remote Process Call，即远程过程调用。使用RPC，可以像使用本地的程序一样使用远程服务器上的程序。下面是一个简单的RPC 调用实例，从中可以看到RPC如何
  • 【RPC框架Hessian一】Hessian RPC Hello World bit1129 Hello world
    什么是Hessian The Hessian binary web service protocol makes web services usable without requiring a large framework, and without learning yet another alphabet soup of protocols. Because it is a binary p
  • 【Spark九十五】Spark Shell操作Spark SQL bit1129 shell
    在Spark Shell上，通过创建HiveContext可以直接进行Hive操作   1. 操作Hive中已存在的表   [hadoop@hadoop bin]$ ./spark-shell Spark assembly has been built with Hive, including Datanucleus jars on classpath Welcom
  • F5　往header加入客户端的ip ronin47
    when HTTP_RESPONSE {if {[HTTP::is_redirect]}{         HTTP::header replace Location [string map {:port/ /} [HTTP::header value Location]]HTTP::header replace Lo
  • java-61-在数组中，数字减去它右边(注意是右边)的数字得到一个数对之差. 求所有数对之差的最大值。例如在数组{2, 4, 1, 16, 7, 5, bylijinnan java
    思路来自： http://zhedahht.blog.163.com/blog/static/2541117420116135376632/ 写了个java版的 public class GreatestLeftRightDiff { /** * Q61.在数组中，数字减去它右边(注意是右边)的数字得到一个数对之差。 * 求所有数对之差的最大值。例如在数组
  • mongoDB 索引 开窍的石头 mongoDB索引
    在这一节中我们讲讲在mongo中如何创建索引       得到当前查询的索引信息      db.user.find(_id:12).explain();        cursor: basicCoursor 指的是没有索引  &
  • [硬件和系统]迎峰度夏 comsci 系统
      从这几天的气温来看，今年夏天的高温天气可能会维持在一个比较长的时间内    所以，从现在开始准备渡过炎热的夏天。。。。    每间房屋要有一个落地电风扇，一个空调(空调的功率和房间的面积有密切的关系)    坐的，躺的地方要有凉垫，床上要有凉席       电脑的机箱
  • 基于ThinkPHP开发的公司官网 cuiyadll 行业系统
    后端基于ThinkPHP，前端基于jQuery和BootstrapCo.MZ 企业系统 轻量级企业网站管理系统 运行环境:PHP5.3+, MySQL5.0 系统预览 系统下载：http://www.tecmz.com 预览地址：http://co.tecmz.com 各种设备自适应 响应式的网站设计能够对用户产生友好度，并且对于
  • Transaction and redelivery in JMS (JMS的事务和失败消息重发机制) darrenzhu jms事务承认MQacknowledge
    JMS Message Delivery Reliability and Acknowledgement Patterns http://wso2.com/library/articles/2013/01/jms-message-delivery-reliability-acknowledgement-patterns/ Transaction and redelivery in
  • Centos添加硬盘完全教程 dcj3sjt126com linuxcentoshardware
    Linux的硬盘识别: sda        表示第1块SCSI硬盘 hda       表示第1块IDE硬盘 scd0      表示第1个USB光驱 一般使用“fdisk -l”命
  • yii2 restful web服务路由 dcj3sjt126com PHPyii2
    路由 随着资源和控制器类准备，您可以使用URL如 http://localhost/index.php?r=user/create访问资源，类似于你可以用正常的Web应用程序做法。 在实践中，你通常要用美观的URL并采取有优势的HTTP动词。 例如，请求POST /users意味着访问user/create动作。 这可以很容易地通过配置urlManager应用程序组件来完成 如下所示
  • MongoDB查询(4)——游标和分页[八] eksliang mongodbMongoDB游标MongoDB深分页
    转载请出自出处：http://eksliang.iteye.com/blog/2177567 一、游标         数据库使用游标返回find的执行结果。客户端对游标的实现通常能够对最终结果进行有效控制，从shell中定义一个游标非常简单，就是将查询结果分配给一个变量（用var声明的变量就是局部变量），便创建了一个游标，如下所示： > var
  • Activity的四种启动模式和onNewIntent() gundumw100 android
    Android中Activity启动模式详解 　　在Android中每个界面都是一个Activity，切换界面操作其实是多个不同Activity之间的实例化操作。在Android中Activity的启动模式决定了Activity的启动运行方式。 　　Android总Activity的启动模式分为四种： Activity启动模式设置： <acti
  • 攻城狮送女友的CSS3生日蛋糕 ini htmlWebhtml5csscss3
    在线预览：http://keleyi.com/keleyi/phtml/html5/29.htm   代码如下：   <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>攻城狮送女友的CSS3生日蛋糕-柯乐义<
  • 读源码学Servlet（1）GenericServlet 源码分析 jzinfo tomcatWebservlet网络应用网络协议
    Servlet API的核心就是javax.servlet.Servlet接口，所有的Servlet 类（抽象的或者自己写的）都必须实现这个接口。在Servlet接口中定义了5个方法，其中有3个方法是由Servlet 容器在Servlet的生命周期的不同阶段来调用的特定方法。     先看javax.servlet.servlet接口源码：  package
  • JAVA进阶：VO(DTO)与PO(DAO)之间的转换 snoopy7713 javaVOHibernatepo
      PO即 Persistence Object　　VO即 Value Object 　VO和PO的主要区别在于：　　VO是独立的Java Object。　　PO是由Hibernate纳入其实体容器（Entity Map）的对象，它代表了与数据库中某条记录对应的Hibernate实体，PO的变化在事务提交时将反应到实际数据库中。 　实际上，这个VO被用作Data Transfer
  • mongodb group by date 聚合查询日期 统计每天数据（信息量） qiaolevip 每天进步一点点学习永无止境mongodb纵观千象
    /* 1 */ { "_id" : ObjectId("557ac1e2153c43c320393d9d"), "msgType" : "text", "sendTime" : ISODate("2015-06-12T11:26:26.000Z")
  • java之18天 常用的类(一) Luob. MathDateSystemRuntimeRundom
    System类 import java.util.Properties; /** * System: * out:标准输出,默认是控制台 * in:标准输入,默认是键盘 * * 描述系统的一些信息 * 获取系统的属性信息:Properties getProperties(); * * * */ public class Sy
  • maven wuai maven
    1、安装maven：解压缩、添加M2_HOME、添加环境变量path 2、创建maven_home文件夹，创建项目mvn_ch01,在其下面建立src、pom.xml，在src下面简历main、test、main下面建立java文件夹 3、编写类，在java文件夹下面依照类的包逐层创建文件夹，将此类放入最后一级文件夹 4、进入mvn_ch01 4.1、mvn compile ,执行后会在
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他