韩曙亮
韩曙亮

【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)

  • 什么是 HTML 实体和转义 西门吹雪在编程 前端开发html前端
    在网页前端的源代码中，你可能会看到"这种字符串。这种字符串实际上是HTML实体之一，用于表示双引号字符（"）。HTML实体是一种用于在HTML文档中表示某些特殊字符的方法，因为这些字符在HTML中有特定的用途或可能会与HTML标签语法冲突。HTML实体的背景和用途在HTML中，一些字符有特定的意义。例如，用于标记HTML标签的开始和结束。如果你想在网页中显示这些字符而不是把它们解释为HT
  • HTML中的零宽字符 Jinuss 前端html前端
    概述零宽字符是一组在文本中没有可见宽度的字符，它们通常用于处理文本的布局、分隔和合成。下面是一些常见的零宽字符及其详细介绍：详细介绍零宽空格(ZeroWidthSpace,ZWSP)Unicode码位:U+200BHTML实体:或用途:用于防止文字自动换行。用于在文本中插入不可见的间隔，以控制排版或进行文本分析。零宽非连字符(ZeroWidthNon-Joiner,ZWNJ)Unicode码位:U
  • 用Babel操作AST实现JavaScript代码的自动化生成与转换
    目录目录环境搭建代码：修改AST的逻辑重命名函数名重命名变量并修改变量值函数调用替换控制流扁平化还原删除未使用的变量对象属性简化条件表达式优化表达式还原环境搭建安装环境npminstall@babel/parser@babel/traverse@babel/generator@babel/typesast转换的代码框架constfs=require('fs');constvm=require('n
  • html实体字符 Qhumaing HTML学习html前端
    HTML实体字符HTML实体字符（HTMLEntities）是在HTML中用来表示那些在HTML文档中直接使用可能会引起问题的特殊字符的一种方法。这些特殊字符包括但不限于尖括号、与号、引号等，它们在HTML中有特定的用途（如标签界定符、属性值分隔符等），如果直接使用，浏览器可能会误解它们。以下是常见的HTML实体字符及其用途：<-小于号（）&-与号（&）"-双引号（"）&a
  • 如何在 HTML 中创建一个有序列表和无序列表，它们的语义有何不同？ 前端大白话 大白话前端八股前端html
    大白话如何在HTML中创建一个有序列表和无序列表，它们的语义有何不同？1.HTML中有序列表和无序列表的基本概念在HTML里，列表是一种用来组织信息的方式。有序列表就是带有编号的列表，它可以让内容按照一定的顺序呈现；无序列表则是用符号（像圆点、方块等）来标记每一项内容，重点在于展示并列的信息，不强调顺序。2.创建无序列表无序列表使用标签来创建，每一项内容用标签包裹。下面是具体的代码示例，代码里有详
  • 怎样修改下面HTML中存在的错误？ 2301_79698214 htmljavascript前端
    functiongetTime(){vardate=newDate();vartime=date.toLocaleDateString();vartime1=date.toLocaleTimeString();vartime2=time+''+time1span.innerHTML=time2;}window.setInterval("getTime()",1000)window.alert("这
  • linux自律 第 40 天 嵌入式大大白 数据库
    在学习了sqlite3数据库的增删改查之后，我开始做了一个基于web服务端的商品查询系统，将商品的图片，名称，id，详细描述和关键词等都放入了该数据库中，利用该数据库和html构建的网页来完成该项目。该项目首先需要设计出登录系统，登录需要密码和账号，所以需要注册，我打算在注册的时候使用数据库，将注册的信息放在数据库中。然后使用账号密码登录的时候，输入的账号密码在请求报文中，以post的形式发出来，
  • k8s往secret里导入证书_Kubernetes K8S之存储Secret详解 weixin_39604598 k8s往secret里导入证书
    K8S之存储Secret概述与类型说明，并详解经常使用Secret示例html主机配置规划服务器名称(hostname)系统版本配置内网IP外网IP(模拟)k8s-masterCentOS7.72C/4G/20G172.16.1.11010.0.0.110k8s-node01CentOS7.72C/4G/20G172.16.1.11110.0.0.111k8s-node02CentOS7.72C/
  • 【lua】面向对象 岚花落_ lua
    建议提前学习https://www.runoob.com/lua/lua-metatables.html面向对象特征1）封装：指能够把一个实体的信息、功能、响应都装入一个单独的对象中的特性。2）继承：继承的方法允许在不改动原程序的基础上对其进行扩充，这样使得原功能得以保存，而新功能也得以扩展。这有利于减少重复编码，提高软件的开发效率。3）多态：同一操作作用于不同的对象，可以有不同的解释，产生不同的
  • 【sass】学会这个技巧，少写很多css 蒜香拿铁 csssass前端
    sass的高级用法我发现，大多数人使用sass预处理器最多的就是嵌套和变量这两种用法。现在我在列举一些常用的高级用法，希望让大家少敲两行代码。@extend意思是将某个选择器下的所有样式继承过来.error{border:1px#f00;background-color:#fdd;}.seriousError{@extend.error;border-width:3px;}@mixin样式混入，搭
  • Python异步编程 - asyncio库 孤寒者 Python全栈系列教程python异步编程asyncioyield协程
    目录：每篇前言：异步IOPython中的异步编程实现方式：协程Python传统协程示例：实现生产者-消费者模型消费者：生产者：运行流程：整体流程：传统协程——>现代协程：asyncio库async/await每篇前言：作者介绍：【孤寒者】—CSDN全栈领域优质创作者、HDZ核心组成员、华为云享专家Python全栈领域博主、CSDN原力计划作者本文已收录于爬虫必备前端技术栈专栏：《爬虫必备前端技术栈
  • Docker 存储 Psycho_MrZhang Dockerdockerjava容器
    目录挂载在执行run时设置参数-v即可实现目录映射,实现原理会在宿主机器创建一个空文件夹#挂载宿主机的/data目录到容器的/app目录dockerrun-d-v/data:/app--namemy-appmy-image#挂载docker内的/usr/share/nginx/html目录到本地机的/app/nghtmldockerrun-d-v/app/nghtml:/usr/share/ngi
  • 3.1css选择器优先级和常用文本属性 chxii go语言#前端css前端
    在CSS（层叠样式表）中，选择器的优先级决定了当多个选择器应用于同一个元素时，哪个样式的规则会被应用。选择器的优先级是通过特定的规则来计算的，这些规则决定了样式声明的权重。以下是CSS选择器优先级的基本规则：重要性（!important）如果某个样式声明使用了!important，那么它将覆盖没有使用!important的任何规则。例如：p{color:red!important;}在这种情况下，
  • C语言：setjmp和longjmp函数使用详解 houxiaoni01 C语言setjmplongjmp
    转载自：https://www.runoob.com/cprogramming/c-standard-library-setjmp-h.htmlhttps://blog.csdn.net/chenyiming_1990/article/details/86834131、C标准库-简介setjmp.h头文件定义了宏setjmp()、函数longjmp()和变量类型jmp_buf，该变量类型会绕过正常
  • python中的类方法，静态方法，对象方法 a174817529
    原文地址：http://blog.chinaunix.net/uid-26602509-id-3087296.htmlclassA:count=100def__init__(self,instancedata):self.instancedata=instancedata@staticmethod#静态方法不能访问类参数和实例参数defsm():print"sm"@classmethod#类方法不
  • Node.js 格式化时间的两种方法：原生 Date 与 npm 包 moment 详解 还是鼠鼠 node.jsnode.jsnpm前端javascriptvscode
    目录Node.js格式化时间的两种做法：内置方法与npm包1.使用JavaScript内置方法格式化时间示例：使用Date对象格式化时间运行程序示例输出原理解析2.使用npm包moment进行时间格式化安装moment示例：使用moment格式化时间运行程序示例输出原理解析3.两种方法的对比4.结论在Node.js开发中，格式化时间是一个常见的需求。例如，将时间格式化为YYYY-MM-DDHH:m
  • Claude 3.7 Sonnet 根据UI设计稿生成前端html页面 徐同保 前端uihtml
    UI设计稿：提示词：你是一个前端代码工程师，根据UI设计稿，编写对应html页面，样式写在标签里，类名都以"m-"开头AI回答的结果：根据提供的UI设计稿，我将编写对应的HTML页面，所有类名都以"m-"开头，样式写在标签里。```html账单明细/*重置样式*/*{margin:0;padding:0;box-sizing:border-box;}body{font-family:-apple-
  • 前端解决跨域的几种方案 爱分享的程序员 前端前端
    以下是前端解决跨域问题的7种主流方案，根据应用场景和实现难度排序，附详细实现示例：一、开发环境解决方案1.WebpackDevServer代理（推荐）//vue.config.js/webpack.config.jsmodule.exports={devServer:{proxy:{'/api':{target:'http://backend-domain.com',//后端地址changeOri
  • 如何使用webpack预加载 CSS 中定义的资源和预加载 CSS 文件 混血哲谈 webpackcss前端
    在Webpack中预加载CSS文件及其内部定义的资源（如图片、字体等），可以通过资源预加载（Preloading）技术优化关键资源的加载优先级。以下是具体的实现方法和步骤：一、预加载CSS文件1.使用@vue/preload-webpack-plugin或手动注入Webpack默认不直接支持CSS文件的预加载，但可以通过插件或手动添加实现。方法一：通过@vue/preload-webpack-pl
  • webpack的SplitChunksPlugin和在路由或组件级别进行拆分 混血哲谈 webpack前端node.js
    请问下面内容中提到的SplitChunksPlugin和“在路由或组件级别进行拆分是一种更简单的方法，可用于延迟加载应用的不同部分”在前端项目中如何应用？“”“在大型应用中，延迟加载第三方依赖项并不是常见的模式。通常，第三方依赖项会拆分为单独的供应商软件包，因为它们的更新频率较低，因此可以缓存。您可以详细了解SplitChunksPlugin如何帮助您实现这一点。使用客户端框架时，在路由或组件级别
  • 【typescript进阶篇】(第四章) webpack编译ts及第三方库声明文件 蒜香拿铁 typescript系列typescriptwebpackjavascript
    使用webpack打包TS文件安装依赖安装webpack环境npmiwebpackwebpack-cliwebpack-dev-server-D安装TypeScriptnpminstalltypescript-D编译TSnpminstallts-loader-D热更新服务npminstallwebpack-dev-server-DHTML模板npminstallhtml-webpack-plugi
  • JavaScript 中的性能优化：从基础到高级技巧 lina_mua 深入javascript性能优化开发语言
    1.引言1.1性能优化的重要性在现代前端开发中，性能优化是提升用户体验的关键。无论是页面加载速度、交互响应时间，还是内存占用，性能优化都能显著提升应用的流畅度和用户满意度。1.2本文的目标本文旨在深入探讨JavaScript中的性能优化，从基础到高级技巧，帮助开发者理解性能优化的核心概念，并掌握其在实际开发中的应用。2.性能优化的基础2.1什么是性能优化？性能优化是指通过改进代码、减少资源消耗、优
  • Webpack4从入门到精通以及和webpack5对比_webpack现在用的是哪个版本 2501_90253044 webpack前端node.js
    'css-loader',//less-loader：将less文件编译成css文件，需要下载less-loader和less'less-loader'],},{test:/\.css$/,//使用多个loader用use,使用一个loader用loaderuse:['style-loader','css-loader'],},{//url-loader：处理图片资源，问题：默认处理不了html中
  • 论云原生架构及其应用 桃花键神 云原生架构
    摘要：2021年7月，我所在的公司承担了广东省某医院的网上预约挂号项目的开发工作，我有幸作为系统架构师参与整个系统的开发过程，并负责了系统架构设计工作。该系统以预约挂号为主线，其中包括管理平台审核、确认挂号、订单支付、更新预约状态等业务模块。本文以网上预约挂号项目为例，详细论述了云原生架构在该项目中的具体应用。系统以SpringCloud微服务框架开发，分为前端Web服务、平台保障服务、业务服务三
  • Pollinations AI文生图html源码 酷爱码 htmlHTML
    源码介绍用deepseek辅助制作了一个电脑端文生图小程序，html语言的，接口使用的是Pollinations，上传服务器访问首页即可一次生成4张，提示词最好用英文，点击小图可以预览大图，也可以点击下载按钮直接下载截图预览源码免费获取PollinationsAI文生图html源码
  • springboot整合Thymeleaf详解 weiha666 springboot
    Thymeleaf介绍简单说，Thymeleaf是一个跟Velocity、FreeMarker类似的模板引擎，它可以完全替代JSP。相较与其他的模板引擎，它有如下三个极吸引人的特点：Thymeleaf在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持html原型，然后在html标签里增加额外的属性来达到模板+数
  • JavaScript 模块化语法 import、export详解 qq39138814 javascript开发语言ecmascript
    JavaScript模块化语法import、export详解1.为什么需要模块化？在JavaScript早期，所有代码都是写在一个全局作用域中，这样做的问题是：变量污染：所有变量、函数都是全局的，容易互相干扰。文件依赖管理困难：多个JS文件之间的依赖关系混乱，难以维护。代码复用困难：无法方便地拆分和复用代码。为了解决这些问题，模块化方案应运而生。2.JavaScript模块化的发展2.1早期的模块
  • useSyncExternalStore 的应用 前端
    我们是袋鼠云数栈UED团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。本文作者：修能学而不思则罔，思而不学则殆。---《论语·为政》WhatuseSyncExternalStoreisaReactHookthatletsyousubscribetoanexternalstore.useSyncExternalStore是一个支持让用户订阅外部
  • 从 0 到 1 搭建一个 Web 应用项目：详细步骤与踩坑记录 算法探索者 前端
    一、引言在当今数字化时代，Web应用无处不在。对于开发者而言，掌握从0到1搭建Web应用项目的技能至关重要。本指南将带你逐步完成一个简单Web应用项目的搭建，分享技术选型思路以及在过程中遇到的问题和解决方案，助力你开启Web开发之旅。二、技术选型（一）前端框架：选择React.js。它具有高效的虚拟DOM机制，能够快速更新页面，提升用户体验。同时，React生态系统丰富，有大量现成的组件库和工具可
  • 浏览器 DOM 深度解析：从节点类型到遍历操作的全攻略 码农的时光故事 javascript开发语言ecmascript
    一、DOM核心概念与节点类型DOM（文档对象模型）是浏览器提供的核心API之一，用于将HTML文档转换为可操作的对象树结构。其核心设计遵循树形结构，每个节点都继承自Node接口，主要分为以下类型：1.基础节点类型Element：对应HTML标签，包含属性和子节点（）Text：文本内容节点Comment：注释节点Document：文档根节点，通过document全局对象访问（）2.特殊节点类型Doc
  • 关于旗正规则引擎下载页面需要弹窗保存到本地目录的问题 何必如此 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其他