CSS相关概念
1. CSS的定义
Cascading Style Sheets 层叠样式表(级联样式表)
2. CSS的作用
定义网页外观,如字体、背景、颜色等
3. CSS特点
① 精确的定位 准确的控制页面的任何元素
② 精细的控制 可以做到像素级别的调整
③ 样式与内容的分离 便于维护,便于重用
4. 发展历程
① CSS1 CSS1发布于 1996年12月17号
② CSS2 CSS2发布于 1999年1月11日。CSS2添加了对媒介(打印机和听觉设备)和可下载字体的支持。
③ CSS3 CSS3 计划将 CSS 划分为更小的模块。2001年至今 HTML5+CSS3
CSS的使用方式
1. 内联样式(行内样式)
在标签里面添加style属性,属性值 写css 代码
2. 内部样式(通常定义在head头中)
把css代码写在style标签中
注意:style标签可以写在文件内部的任何一个地方,但是建议都放在head头内
3. 外部样式(使用link标签引入单独的css文件)
link标签
@import @import "css文件地址"; 注意:要写在css代码的前面
★:当样式的定义有冲突的时候,行内样式的优先级最高;其他两种看代码出现的顺序,后面的会覆盖前面的;
CSS的基本语法
1. CSS语法
选择器:是你需要改变样式的 HTML 元素
声明:
声明都被包含在{}中;
每条声明由一个属性和值组成,中间用冒号隔开;
定义多条声明的时候,用分号隔开;
实例:
h1{color:red; background:blue;}
2. CSS注释
/* 注释内容 */
3. 单位
3.1 长度单位
px 像素(推荐),屏幕上显示的最小单位;(字体大小默认16px)
em 倍数 字体大小相对于默认的16px来翻倍
% 百分比 字体大小相对于默认的16px来取百分比
========以上3个都是相对单位===========
in 英寸
pt 磅 (1 pt 等于 1/72 英寸),标准长度单位,通常用于印刷业
mm/cm 毫米/厘米
3.2 颜色单位
1.颜色单词
red green blue yellow pink purple lightblue...
2.以16进制表示, 取值范围0~f
#121212
提示:如果表示三原色的数值相同,可以简写
#00 00 00 = #000
3.rgb
数字: color:rbg(0~255, 0~255, 0~255)
百分比: color:rbg(0~100%, 0~100%, 0~100%)
注意:不能混用!
CSS的选择器
通配符选择器
*{margin:0px}
HTML标签选择器
p{color:red}
CLASS类选择器
.class名{color:red}
ID选择器
#ID名{color:red}
========= 注意:以上4种是基本选择器;请保持ID名的唯一性;class和ID选择器区分大小写,标签不区分
后代选择器
爹 后代{color:red}
空格分隔,相当于找ul的后代中左右的a标签
组合选择器
a, h1, p{color:red}
伪元素选择器(不能在行内样式使用)
选择器:link 设置没访问前的样式
选择器:visited 设置访问过后的样式
选择器:hover 设置鼠标放上来的时候的样式(最常用)
选择器:active 设置鼠标点击还没放开的时候的样式
选择器的优先级
ID选择器 > CLASS选择器 > 标签选择器
CSS中常见的属性和值
1、字体属性
font 设置字体所有属性
font: [粗细] [斜体] 30px '楷体';
font-size 字体大小(常用的)
font-family 用哪一种字体
font-weight 字体粗细
值:100-900的整百数!600以上为粗体,其他为正常大小
font-style 字体样式
italic 设置为斜体
2、颜色属性
color 值参考基本语法中的颜色单位
3、背景属性
background 任意组合各种子属性(用起来很爽)
background-color 背景颜色
background-color:#ccc;
background-image 背景图片
background-image:url('../html03/img/f.gif');
background-repeat 背景图片的平铺方式
值:repeat(默认) no-repeat(不平铺) repeat-x repeat-y
background-repeat:no-repeat;
background-position 背景图片的位置(九宫格或者像素)
值:left center right top bottom 像素
background-position:10px 100px;
background-attachment 背景图片相对于谁滚
值:fixed(相对于窗口滚) scroll(相对于元素滚) local(默认,跟着内容滚)
4、文本属性
letter-spacing 设置字间距 (值:长度单位)
word-spacing 设置词间距 (值:长度单位;空格区分一个词)
### text-indent 设置首行缩进 (值:长度单位;通常为2em,缩进两个汉字)
text-transform 大小写转换
值:capitalize(每个单词的首字母大写) uppercase(全大写) lowercase(全小写)
### text-decoration 设置线
值:none(没有) underline(下划线) overline(上划线) line-through(删除线)
### text-align 水平对齐方式
值:left center right
### vertical-align 行级元素基于本行的垂直对齐方式
值:
baseline 默认
middle 默认与下标位置之间
sub 下标位置
super 上标位置
top 会找到最上面的哥们对齐
bottom 会找到最下面的哥们对齐
100px 直接设置长度单位
### line-height 设置行高,通常用于文本垂直居中
word-wrap break-word:设置超长变态的单词自动换行
5、边框属性
border 必须记住,设置元素的边框
border:1px solid red; //顺序无所谓
border-width 设置边框的宽度
border-color 设置边框的颜色
border-style 设置边框的样式:solid|dashed|dotted...(见:./border-style.html)
#可以单独设置上下左右某一条边框,知道就行,有兴趣的可以测试一下
border-top
border-top-width
border-top-color
border-top-style
border-bottom
border-bottom-width
border-bottom-color
border-bottom-style
border-left
border-left-width
border-left-color
border-left-style
border-right
border-right-width
border-right-color
border-right-style
6、鼠标指针样式属性
cursor 设置鼠标指针样式
值:pointer|move|not-allowed|wait|progress... (见:./cursor.html)
7、列表属性
list-style 通常是去掉前面的点:list-style:none;
list-style-type 设置图标类型:circle|square... (见:list-style-type.html)
list-style-image 设置图标图片
list-style-position 设置图标位置:inside|outside
8、表格属性
table-layout: 设置表格为固定布局:auto|fixed
border-collapse: 设置td的边框相邻合并;默认为独立的
值:separate(默认独立) collapse(相邻合并)
网页布局(DIV + CSS)
HTML网页:标准文档流(从左往右,从上往下)由标签构成
浏览器把每一个标签都看做是一个盒子!(烟盒)
布局相关概念:
1.盒子模型
1.1 定义: 任何一个元素都可以抽象一个盒子模型, 盒子里面可以嵌套盒子
1.2 组成: 元素内容(有宽高)、内边距(补白)、边框、外边距(补白)
1.3 相关属性:
width height 盒子的宽高
border 盒子的边框
padding 盒子的边框距离盒子的内容的距离
margin 盒子的边框距离上一个盒子或父元素的距离,可以为负值
1.4 盒子模型的宽高
盒子的宽 = 内容的宽 + 左右内补白 + 左右边框
2.标签分为块级元素和行级元素
块级元素(标签)
一般用来搭建网站架构、布局、承载内容……像这些大体力活都属于块级元素的
如:div|ul|li|dl|dt|p。。。
特点:
1、从左到右撑满页面,独占一行。
2、如果没有设置宽度,默认是它容器宽度的100%
3、块级元素可以包含其他块级元素或者行级元素(P标签除外)
部分标签:h1~h6、p、dt。。。(html语法检测的编辑器会报错,只有p标签会影响结构)
、、、,它们的子一层必须是指定元素
行级元素(标签)
一般用在网站内容之中的某些细节或部位,用以“强调、区分样式、上标、下标、锚点”等等,如:span|a|b|i|strong|img|input。。。
特点:
1、从左到右在同一行显示,触碰到页面边缘时会自动换行
2、设置的宽、高、行高属性没用(部分标签例外),在容器允许的范围内,实际的宽高度是由内容决定的!padding有效;margin左右有效,上下没用!
部分标签:img|input|select|textarea|button|label
3、行级元素只能包含其他行级元素或者文本内容,不能包含块级元素!
3.无意义的块级元素(div)和行级元素(span)
3.1、布局标签
没有任何内涵和样式,常用于布局!
3.2、行级元素和块级元素的转换(display)
display inline|block|inline-block|none
扩充:IE7不支持inline-block,解决方法:首先将其变成行内元素,使其具有行内元素的特性,然后触发haslayout,使其具有块级元素的特性,如此就可以模拟出inline-block的效果
div{
display:inline-block;
*display:inline;
*zoom:1;
}
4.盒子的浮动
浮动的盒子可以脱离文档流;脱离了文档流后,其他的块级元素会无视这个盒子的存在
需要注意的是:元素中的文本依然会为它让出位置,环绕在它周围
float属性,值有right|left|none
5.盒子的定位
相对定位
相对于自己原先的位置定位,配合left|right|top|bottom使用,不会脱离文档流,不影响其他元素的布局;可以与其他元素重叠,但它原本所占的空间不会改变
绝对定位
相对于离自己最近的已定位父元素,如果没有找到,那么它的位置相对于浏览器的可视窗口;脱离了文档流,其他元素(包括元素中的文本)会无视它
固定定位
固定定位,固定在浏览器的某个位置,不随滚动条的滚动而滚动
6.margin的特性
1、两个盒子的水平外边距margin值会相加(正常理解),累加显示
2、两个盒子的垂直外边距margin值会重叠,以最大的为显示标准
3、父元素的第一个子元素的[上边距](只有上边距)margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己“领导”(父元素,祖先元素)的麻烦。将自己的margin应用到“领导”的身上;
解决:
1、给父元素加有效的border或者padding(不能为0)
2、或者设置父元素的overflow:hidden
7.盒子的嵌套
1、如果子元素的宽高超出了父元素,可以通过overflow来控制超出部分
auto 自动 | hidden 隐藏 | scroll 滚动条
2、当子元素浮动后,父元素的高度不会被撑开了!就像橡皮筋一样
解决:
1、让父元素也浮动起来
2、给父元素加上overflow属性
8.居中
水平居中
text-align 可以让文本和行级元素水平居中,设置在要居中元素的父级元素上
margin:0 auto 可以让块级元素水平居中,设置在要居中的元素本身上
垂直居中
line-height 和父元素的height相等,可以让文本和行级元素垂直居中,设置在要居中元素的父级元素上(只能有1行文本)
块级元素垂直居中:(画图中心点演示)
position:absolute;
top:50%;
margin-top:当前元素高度的一半
9.隐藏元素
visibility:hidden 隐藏元素,但保留其物理空间
display:none 隐藏元素,不保留空间
布局相关的属性
1、尺寸
width 设置内容的宽
height 设置内容的高
2、内边距
padding
padding:四边
padding:上下 左右
padding:上 左右 下
padding:上 右 下 左
padding-top 上
padding-right 右
padding-bottom 下
padding-left 左
3、外边距
margin
margin:四边
margin:上下 左右
margin:上 左右 下
margin:上 右 下 左
margin-top 上外边距
margin-right 右外边距
margin-bottom 下外边距
margin-left 左外边距
4、布局
display 设置元素的显示方式
值:
none 隐藏元素,很彻底的隐藏,不保留物理空间(化尸粉,毁尸灭迹)
block 显示为块级元素
inline 显示为行级元素
inline-block 显示为行内块级元素(类似于img、input标签,可以设置宽高)
float 设置元素浮动方式
值:
left 往左浮动
right 往右浮动
none 不浮动(默认)
clear 清除浮动。一般用于被浮动所影响的(块状)元素上
值:
both 清除两边的浮动(常用)
left 清除左浮动
right 清除右浮动
overflow
值:
auto 溢出就显示滚动条,没超出就算了
hidden 溢出隐藏
scroll 溢出滚动(有没有超出都有滚动条的位置)
overflow-x 设置水平方向的溢出方式,值和overflow一样
overflow-y 设置垂直方向的溢出方式,值和overflow一样
visibility 设置元素的可见性
值:
hidden 隐藏可见元素
visible 显示元素(默认)
5、定位
position 设置元素的定位方式
值:
relative 相对定位
absolute 绝对定位
fixed 固定定位,固定在浏览器的某个位置,不随滚动条的滚动而滚动
z-index 设置元素的堆叠层级
值为一个整数,越大优先级越高;可以有负值
注意:必须设置了postion的属性才有效!如果值相同,写在后面的会覆盖前面的
布局
1.取消标签的默认样式
body、h1~h6、p、ul 的margin值
img的border值(IE默认有边框)
a标签的text-decoration:none
2.子元素继承父元素的属性设置
字体、颜色、文本相关的属性,子元素会继承父元素的
比如:在body中设置了字体样式,所有元素都会生效
跟布局相关的属性,不会被继承;
比如:边框、内边距、外边距、宽高、背景。。。
/********************* CSS3 **********************/
选择器
元素选择器
通配符 *
标签选择器 li|div|a|b
ID选择器
类选择器
关系选择器
后代选择器 ul li{...}
ul的后代li
儿子选择器 ul > li{...}
ul的儿子li(不包括孙子)
相邻选择器 ul + div{...}
ul后面紧挨着的div
相邻选择器 ul ~ div{...}
ul后面所有的div
属性选择器
E[attr]
包含attr属性的E元素
E[attr="val"]
attr属性等于某个值的E元素
E[attr^="val"]
包含attr属性,并且值是以val开始的E元素
E[attr$="val"]
包含attr属性,并且值是以val结尾的E元素
E[attr*="val"]
包含attr属性,并且值里面包含val的E元素
E[attr~="val"]
包含attr属性,并且值用空格分割后还包含val的E元素
E[attr|="val"]
包含attr属性,并且值用|分割后还包含val的E元素
伪类选择器
E:link
E:visited
E:hover
E:active
E:first-child
E:last-child
E:nth-child(n)
E:only-child
E:not(选择器)
E:empty
E:focus
E:checked
...
颜色
设置元素的透明度:rgba(0~255, 0~255, 0~255, 0~1(透明度));
transparent 设置为全透明
属性
边框圆角
border-radius
border-left-top-radius
border-left-right-radius
border-bottom-top-radius
border-bottom-right-radius
盒子阴影
box-shadow
文字阴影
text-shadow:5px 5px 10px yellow;
-webkit-text-stroke:1px red;
兼容写法:
-webkit- 表示chrome谷歌浏览器
-moz- 表示firefox火狐浏览器
-o- 表示opera欧朋浏览器
-ms- 表示IE浏览器
/****************** 以下均为扩充知识 ******************/
css hack
由于各大浏览器对CSS的解析认识不完全一样,所以可以用css hack使你的CSS代码兼容不同的浏览器。当然,我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。
比如:
比如 IE6能识别下划线"_"和星号" * ",IE7能识别星号" * ",但不能识别下划线"_",而firefox两个都不认识
/*以下代码在IE7是蓝色,标准浏览器是红色*/
p{
color:red;
*color:blue;
}
比如判断浏览器
lt <
gt >
lte <=
gte >=
关于inline-block后的换行符产生空格问题:
» block水平的元素inline-block化后,IE6/7没有换行符间隙问题,其他浏览器均有;
» inline水平的元素inline-block后,所有主流浏览器都有换行符/空格间隙问题;
» font-size:0,去除换行符间隙,在IE6/7下残留1像素间隙,Chrome浏览器无效,其他浏览器都完美去除;
» letter-spacing负值可以去除所有浏览器的换行符间隙,但是,Opera浏览器下极限是间隙1像素,0像素会反弹,换行符间隙还原。
CSS的浮动
float 用于设置css的浮动
之所以会出现浮动,是为了实现文字的环绕效果,并不是为了高大上的布局
浮动的特性:
1. 包裹
一般有3中表现形式:
1. 收缩
没设置宽高的情况下,宽高会收缩到和内容差不多
2. 隔绝
里面发生的事情,与外部无关
具有包裹的其他属性:
display:inline-block|table-cell
position:absolute|fixed
overflow:hidden|scroll //待定
2. 破坏
一般表现为父元素高度塌陷,主要目的是为了实现文字环绕效果
具有破坏性的其他属性:
display:none
position:absolute|fixed
减轻浮动破坏性的两大方法
1. 在浮动元素底部插入clear:both 清除浮动
插入一个block块状元素,并加属性clear:both
如:
可以延伸出追加伪元素清除浮动的写法:
.fix::after{content:'';display:table;clear:both;}
.fix{zoom:1;/*兼容IE6/IE7*/}
2. 让父元素BFC(Block Formatting Context)
能够让父元素BFC的属性:
1. float:left|right
2. position:absolute|fixed
3. overflow:hidden|scroll (常用)
4. display:inline-block|table-cell(IE8+)
5. zoom:1 (IE6/IE7)
浮动后的元素有两种情况,变得像砖块一样,所以被很多人用来布局砌墙:
1. 会将元素块状化
按钮
button标签,默认为inline-block,浮动后变成了block
2. 去空格化
position的absolute绝对定位
1. 跟随性:元素设置了absolute后会留在原来的位置
经常用于无依赖的绝对定位,脱离relative的掌控
2. 包裹性
3. 破坏性
转载于:https://www.cnblogs.com/hoewang/p/10257256.html
你可能感兴趣的:(CSS样式总结)
Java | 多线程经典问题 - 售票
Ada54
一、售票需求1)同一个票池2)多个窗口卖票,不能出售同一张票二、售票问题代码实现(线程与进程小总结,请戳:Java|线程和进程,创建线程)step1:定义SaleWindow类实现Runnable接口,覆盖run方法step2:实例化SaleWindow对象,创建Thread对象,将SaleWindow作为参数传给Thread类的构造函数,然后通过Thread.start()方法启动线程step3
最新阿里四面面试真题46道:面试技巧+核心问题+面试心得
风平浪静如码
前言做技术的有一种资历,叫做通过了阿里的面试。这些阿里Java相关问题,都是之前通过不断优秀人才的铺垫总结的,先自己弄懂了再去阿里面试,不然就是去丢脸,被虐。希望对大家帮助,祝面试成功,有个更好的职业规划。一,阿里常见技术面1、微信红包怎么实现。2、海量数据分析。3、测试职位问的线程安全和非线程安全。4、HTTP2.0、thrift。5、面试电话沟通可能先让自我介绍。6、分布式事务一致性。7、ni
读张萌萌姐《从受欢迎到被需要》第一章读书总结
韩静_Han
我是@张萌-萌姐#从受欢迎到被需要#读书会10班的书记官韩静我们的领读者是@郝美-菱这是今天的读书总结通过第一章的阅读,对高情商和自我介绍有了新的认知。思考题复盘:“我是谁,我需要什么,我能提供什么”【我是谁】我叫韩静,在房地产行业工作5年,现担任行政经理一职,是一位个子小却很坚强很拼的女生。【我能提供什么】️用自己减重26斤的经验帮助需要的人健康减肥️能提供房地产购房等方面的知识和问题️早起陪伴
盘点长期可做的副业兼职有哪些?分享7个长期可做的靠谱副业兼职!
古楼
副业兼职做什么好呢?适合上班族的6个副业?不少上班族薪资不高,加薪无望,就希望搞副业多挣点钱,不仅能打消下班的空闲时间,还能丰富自己的生活,还能赚点钱补贴家用。那么有什么适合上班族的副业,既不占用上班的时间,又不会消耗太多的精力影响第二天上班。这里我总结了6个适合上班族的副业,提供给大家,希望有所帮助。第一款优惠劵导购平台,零投资,安全可靠高省APP,是2022年推出的平台,0投资,0风险、高省A
Android GreenDao介绍和Generator生成表对象代码
目录(?)[-]介绍创建工程转载请注明:http://blog.csdn.net/sinat_30276961/article/details/50052109最近无意中发现了GreenDao,然后查看了一些资料后,发现这个数据库框架很适合用,于是乎,查看了官网的api,并自己写了一个小应用总结一下它的使用方法。介绍按照国际惯例,在开篇,总要先介绍一下什么是GreenDao吧。首先需要说明的是Gr
AI 生成虚拟宠物:24 小时陪你聊天解闷
大力出奇迹985
人工智能 宠物
本文围绕AI生成虚拟宠物展开,介绍这类依托人工智能技术诞生的虚拟伙伴,能实现24小时不间断陪伴聊天,为人们解闷。文中详细阐述其技术基础,包括自然语言处理、机器学习等;分析多样功能,如个性化互动、情绪回应等;探讨在独居人群、压力大者等不同群体中的应用场景,最后总结其为人们生活带来的积极影响及未来发展潜力,展现AI虚拟宠物在陪伴领域的独特价值。一、AI生成虚拟宠物的诞生背景与技术基石在快节奏的现代社会
用代码生成艺术字:设计个性化海报的秘密
本文围绕“用代码生成艺术字:设计个性化海报的秘密”展开,先概述代码生成艺术字在海报设计中的独特价值,接着介绍常用的代码工具(如HTML、CSS、JavaScript等),详细阐述从构思到实现的完整流程,包括字体样式设计、动态效果添加等,还分享了提升艺术字质感的技巧及实际案例。最后总结代码生成艺术字的优势,为设计师提供打造个性化海报的实用指南,助力提升海报设计的独特性与吸引力,符合搜索引擎SEO标准
selenium 特殊场景处理
文章目录前言一、windows的弹窗二、内嵌网页frame三、页签切换四、截图五、弹窗六、JS执行总结前言selenium处理web操作师,有很多特殊的情况需要处理,例如弹窗、内嵌网页,页签切换,js执行等,下面介绍一些可能会遇到的特殊场景一、windows的弹窗importwin32com.client'''创建了一个WScript.ShellCOM(ComponentObjectModel)对
k8s常用基础命令总结
Tony666688888
kubernetes docker 容器 k8s
----------------------k8s常用基础命令---------------------------------获取Pod信息#1.获取k8s的命名空间kubectlgetnamespaces1)获取Pod列表及简要信息:kubectlgetpods2)以YAML格式获取Pod详细信息:kubectlgetpod-oyaml3)获取特定命名空间中的Pod列表kubectlgetpo
全局修改GitLab14默认语言为中文
GitLab安装成功后默认语言是英语,只有登录后才能手动指定为中文,且这个配置只对自己生效,经查阅资料后,总结全局修改GitLab14默认语言为中文方法如下:0.进入容器如果你用Docker部署的GitLab,那么需要使用命令sudodockerexec-itgitlab/bin/bash进入容器1.修改rails配置文件打开/opt/gitlab/embedded/service/gitlab-
08.学习闭环三部曲:预习、实时学习、复习
0058b195f4dc
人生就是一本效率手册,你怎样对待时间,时间就会给你同比例的回馈。单点突破法。预习,实时学习,复习。1、预习:凡事提前【计划】(1)前一晚设置三个当日目标。每周起始于每周日。(2)提前学习。预习法进行思考。预不预习效果相差20%,预习法学会提问。(3)《学会提问》。听电子书。2.实时学习(1)(10%)相应场景,思维导图,快速笔记。灵感笔记。(2)大纲,基本记录,总结篇。3.复习法则,(70%),最
C语言结构体详解
初学者,亦行者
C语言学习 算法 数据结构 c语言
目录C语言结构体1、声明结构体类型2、定义结构体变量3、成员的赋值与引用4、结构体数组5、结构体指针6、总结C语言结构体1、声明结构体类型前面学习了数组是一组相同类型数据的集合。但在实际应用中,我们往往会遇到不同类型的数据。而结构体就是用来存放不同数据的。#includeintmain(){structStu{intnum;//学号为整型charname[20];//姓名为字符串charsex;/
100天蜕变41
羽佳成长故事
今天12月11日,晴又瞎忙了一天,干哩点啥呢?01.参加社群运营学院的组织策划活动,第一在线上主持人,第一次当小助手,第一次坚定表达自己的意见。群里两派意见,一个是想非比赛模式,另一个比赛模式,意见僵持不下。02.走路一个多小时03.听罗胖60秒十几遍04.下午文章完成打卡05.写打卡文06.写总结启示不干不知道,做一次才能理解别人。老觉得主持人反应慢,实际上是看许多事,忙不过来。
.net平台的跨平台桌面应用开发的技术方案总结对比
yuanpan
.net
目前,.NET平台提供了多种跨平台桌面应用开发的技术方案,主要包括.NETMAUI、AvaloniaUI、UnoPlatform、Eto.Forms等。以下是它们的核心特点及优缺点对比:1..NETMAUI(.NETMulti-platformAppUI)支持平台:Windows、macOS、iOS、Android核心特点:微软官方维护,继承自Xamarin.Forms,支持XAML和C#开发。提
现代化强国建设离不开人才支撑
d8d97f0a8566
2022年10月16日中国共产党第二十次全国代表大会在北京召开。大会对过去五年的工作和新时代十年的伟大变革进行总结并对未来国家发展指明方向。习总书记在大会指出:从现在起,中国共产党的中心任务就是团结带领全国各族人民全面建成社会主义现代化强国、实现第二个百年奋斗目标,以中国式现代化全面推进中华民族伟大复兴。现代化强国建设离不开人才支撑,要充分发挥教育、科技、人才在全面建设社会主义现代化国家的基础性、
在Ubuntu24.04搭建VLLM, SGLang 和 LangChain环境
小熊冲!冲!冲!
AI ubuntu langchain ai 毕业设计
在Ubuntu24.04搭建VLLM,SGLang和LangChain环境[!NOTE]概述整片文章是笔者的回忆(白天忙碌了一天,晚上进行的总结),所以有些地方的描述可能有误差,本文更多的是大体方向问题,细节步骤不是本文的重点,见谅!!!如何安装Ubuntu24.04制作启动U盘,作者使用的是rufus.exe工具下载Ubuntu24.04的ISO镜像使用rufus.exe工具刷入Ubuntu22
001 Configuration结构体构造
盖世灬英雄z
DramSys c++ 人工智能
目录DramSys代码分析1Configuration结构体构造1.1`from_path`函数详解1.2构造过程总结这种设计的好处2Simulator例化过程2.1instantiateInitiatorDramSys代码分析1Configuration结构体构造好的,我们来详细解释一下DRAMSysConfiguration.cpp文件中from_path函数的配置构造过程。这个文件是DRAM
一个开源AI牛马神器 | AiPy,平替Manus,装完直接上手写Python!
Agent加载失败
人工智能 python 开源 算法 AI编程
还记得三个月前那个在闲鱼被炒到万元邀请码的Manus吗?现在你点官网,直接提示「所在地区不可用」了它走了,但更香的国产开源项目出现了:AiPy(爱派)。主打一个极致简化的AIAgent理念:别搞什么插件市场、Agent路由,直接给AI一个Python解释器,让它用自然语言写代码干活。听起来狠活?实际体验更狠:•完全本地化,界面傻瓜式操作,支持自然语言生成&执行Python任务;•数据清洗、文档总结
2018年投资总结
小迷糊Lyla
新年的第三天,终于有空把所有的账户状况做个统计了,所有账户总体收益率为-14%左右,没错是负的啦,但是这样的结果我已经很满意了。毕竟上证综指、沪深300、中小板指、创业板指全年分别为-24.59%、-25.31%、-37.75%和-28.65%,我从2018年年初入市,年末能跑赢大盘,已经对自己满意啦。当然这期间多亏遇见了E大,可以说对我的投资学习过程中给了莫大的帮助,让我明白市场虽然是不能预测的
2023年3月总结
卡卡悠悠
春风先发苑中梅,樱杏桃李次第开。荠花榆荚深村里,亦道春风为我来。万物在生长,希望也在生长,看看我的3月总结吧。01春“锋”送暖,与爱同行-女儿学校开展爱心义卖活动3月5日学雷锋日前夕,女儿所在的学校号召全体师生学习雷锋精神,并组织了以春"锋“送暖与爱同行为主题的爱心义卖活动,全校师生都积极参加了这次活动。这次爱心义卖活动是学校社会实践部自寒假起即着手筹办的一次活动,听女儿介绍说为了这次活动,同学们
10月|11月时间日志复盘
90000Tank
转眼已经进入了今年的最后一个月,今天回顾整理了一下10月和11月的时间记录,发现这2个月的问题着实不少,也有些感慨自己真是有些“计划一套但另做一套”……不过,自黑伤感之余,每月总结还是要做,下面就来分析下这两个月的问题所在。问题暴露10、11月时间饼状图对比,这两月都有点不妙…月份按天聚合事件时长柱状图对比从上面的月份事件时长占比饼状图,以及月份按天聚合事件时长柱状图,可以看出如下问题:刻意学习时
常见的接⼝测试⾯试题
lifewange
接口测试-功能+自动化 单元测试
根据⽹络资料,总结了以下⼀些常见的接⼝测试⾯试题:1.为什么要做接⼝测试?在讨论为什么要做接⼝测试之前,我们先稍微了解下接⼝是什么?接⼝可以很不准确的理解成是与资源打交道,这个资源可能是本系统的,也可能是其他系统的。举个例⼦,假如我们在开发1个bug管理系统,该系统需要拿到公司的所有开发和测试⼈员的信息,这样开发和测试⼈员不⽤注册都可以登录进去了,这应该很好理解。那么这些⼈员的信息储存在哪⾥呢?⼀
假期过半,总结一下最近的自己
逍遥洪七公
今天是10月3号了,假期已经过半。这几天哪里也没有去,就是在家里原地过节。每天都有一点琐碎的事情,都足以影响我的心绪。心绪不平,心乱如麻,就做不好事情。更别提外出旅游了。我就是在闲杂的事情里,度过每一天的。回头一看,也没有做什么,时间也走完了。原来想着利用假期,读一读书。听一听课。我在老师的指导下,一步一步地,写出了一篇文章。老师批改了作业,但是评语十分简单,没有修改我写的任何一个句子。只是在结尾
改变的催化剂
恋枫林
总结一下,警告、批评、说教,只能引发人们的抵触心理。想让一个人加速改变,你得让对方看到真相,了解真相。很多时候,我们不是不能改变,而是没有清晰地知道改变的好处,和不改变的坏处。找到方法,改变自己。用好将来时间。
Navicat练习与实操(第九节课内容总结见下篇)
咩?
android 前端 sql
MySQL练习练习题目现在有以下四张表Student学生ID学生名字学生生日学生性别s_ids_names_births_sexCourse课程ID课程名字教师IDc_idc_namet_idTeacher教师ID教师名字t_idt_nameScore学生ID课程ID学生分数s_idc_ids_score1.对以上表格分别建表(要求:id为各个表的主键、其他字段非空设置默认值为、给表以及表中字段设
0415 爆文拆解练习
Ccrystal爱生活
❤️选题|健康❤️标题|“啥也不想干”,是身体给你最好的信号标题结构|“一句话”+是...信号;❤️开篇|悬念开头+阐述具体表现+案例+观点❤️结构|01案例+过渡+案例+结尾反问02引用一句话+解析+阐述看法原因+案例+引用名人名言+解析总结03提出疑问+引用心理学家一个观点+解析+案例+案例总结+代入现实+阐述【行动】具体表现+结论+【不行动】行为阐述+总结❤️结尾04提出疑问+给出答案+具体
ubuntu的redis反弹shell总结
chanra
萌新随笔 ubuntu redis linux
ubuntu的redis反弹shell总结ubuntu要执行有三点:1、ubuntu的默认执行命令的为/bin/dash,我们使用bash-i肯定是弹不了的。2、ubuntu计划任务运行有语法要求,redis写入的文件存在缓存数据,导致语法错误无法运行计划任务。3、文件需要是600rw权限,权限不对也不能运行,不过我直接写入貌似就是600rw。参考链接:http://www.vkxss.top/2
Redis反弹Shell
波吉爱睡觉
web安全 #未授权访问漏洞 #SSRF redis 网络安全 web安全
这里我来总结几种Redis反弹Shell的方法一、利用Redis写WebShell前提条件开了web服务器,并且知道路径,还需要有文件读写增删改查的权限条件比较苛刻,但是满足条件上传就会简单一点,我们直接将文件写入www目录下,完了使用工具连接即可。语句:redis:6379>configsetdir/var/www/html/redis:6379>configsetdbfilenameshell
复盘:视听说3、4单元,精读4单元
任贤芳
Part11,从本单元中我学到的最重要的理念(精读和视听说分别总结)视听说3:休闲时间去做自己想做的事情,度过一个让自己开心而又快乐的时光,比如健美操、烧烤、野餐、瑜伽、更刺激的还有蹦极、攀岩、卡丁车……虽然疫情封闭,但我们仍旧可以在校园中寻找快乐,比如去拍照,一起野餐,玩游戏,封闭的校园封不住我们的快乐与激情,封不住我们的青春快乐。视听说4:聚光灯下生活一般是指名人或者明星以及对社会有较大影响的
26. 什么是雪碧图,作用和原理了解吗
yqcoder
前端面试-CSS css 前端 html
总结小图合成一张,使用background来使用,减少资源请求一、什么是雪碧图?雪碧图(CSSSprite)是一种前端优化技术,指的是将多个小图标合并成一张大图,通过CSS控制显示其中的某一部分。它常用于网站中图标、按钮等小图较多的场景。二、雪碧图的作用作用说明✅减少HTTP请求次数合并多个图片为一张图,减少请求资源数✅提升页面加载速度尤其在图片较多时效果明显✅避免图片加载闪烁鼠标悬停切换图片时不
mongodb3.03开启认证
21jhf
mongodb
下载了最新mongodb3.03版本,当使用--auth 参数命令行开启mongodb用户认证时遇到很多问题,现总结如下:
(百度上搜到的基本都是老版本的,看到db.addUser的就是,请忽略)
Windows下我做了一个bat文件,用来启动mongodb,命令行如下:
mongod --dbpath db\data --port 27017 --directoryperdb --logp
【Spark103】Task not serializable
bit1129
Serializable
Task not serializable是Spark开发过程最令人头疼的问题之一,这里记录下出现这个问题的两个实例,一个是自己遇到的,另一个是stackoverflow上看到。等有时间了再仔细探究出现Task not serialiazable的各种原因以及出现问题后如何快速定位问题的所在,至少目前阶段碰到此类问题,没有什么章法
1.
package spark.exampl
你所熟知的 LRU(最近最少使用)
dalan_123
java
关于LRU这个名词在很多地方或听说,或使用,接下来看下lru缓存回收的实现
1、大体的想法
a、查询出最近最晚使用的项
b、给最近的使用的项做标记
通过使用链表就可以完成这两个操作,关于最近最少使用的项只需要返回链表的尾部;标记最近使用的项,只需要将该项移除并放置到头部,那么难点就出现 你如何能够快速在链表定位对应的该项?
这时候多
Javascript 跨域
周凡杨
JavaScript jsonp 跨域 cross-domain
 
linux下安装apache服务器
g21121
apache
安装apache
下载windows版本apache,下载地址:http://httpd.apache.org/download.cgi
1.windows下安装apache
Windows下安装apache比较简单,注意选择路径和端口即可,这里就不再赘述了。 2.linux下安装apache:
下载之后上传到linux的相关目录,这里指定为/home/apach
FineReport的JS编辑框和URL地址栏语法简介
老A不折腾
finereport web报表 报表软件 语法总结
JS编辑框:
1.FineReport的js。
作为一款BS产品,browser端的JavaScript是必不可少的。
FineReport中的js是已经调用了finereport.js的。
大家知道,预览报表时,报表servlet会将cpt模板转为html,在这个html的head头部中会引入FineReport的js,这个finereport.js中包含了许多内置的fun
根据STATUS信息对MySQL进行优化
墙头上一根草
status
mysql 查看当前正在执行的操作,即正在执行的sql语句的方法为:
show processlist 命令
mysql> show global status;可以列出MySQL服务器运行各种状态值,我个人较喜欢的用法是show status like '查询值%';一、慢查询mysql> show variab
我的spring学习笔记7-Spring的Bean配置文件给Bean定义别名
aijuans
Spring 3
本文介绍如何给Spring的Bean配置文件的Bean定义别名?
原始的
<bean id="business" class="onlyfun.caterpillar.device.Business">
<property name="writer">
<ref b
高性能mysql 之 性能剖析
annan211
性能 mysql mysql 性能剖析 剖析
1 定义性能优化
mysql服务器性能,此处定义为 响应时间。
在解释性能优化之前,先来消除一个误解,很多人认为,性能优化就是降低cpu的利用率或者减少对资源的使用。
这是一个陷阱。
资源时用来消耗并用来工作的,所以有时候消耗更多的资源能够加快查询速度,保持cpu忙绿,这是必要的。很多时候发现
编译进了新版本的InnoDB之后,cpu利用率上升的很厉害,这并不
主外键和索引唯一性约束
百合不是茶
索引 唯一性约束 主外键约束 联机删除
目标;第一步;创建两张表 用户表和文章表
第二步;发表文章
1,建表;
---用户表 BlogUsers
--userID唯一的
--userName
--pwd
--sex
create
线程的调度
bijian1013
java 多线程 thread 线程的调度 java多线程
1. Java提供一个线程调度程序来监控程序中启动后进入可运行状态的所有线程。线程调度程序按照线程的优先级决定应调度哪些线程来执行。
2. 多数线程的调度是抢占式的(即我想中断程序运行就中断,不需要和将被中断的程序协商)
a) 
查看日志常用命令
bijian1013
linux 命令 unix
一.日志查找方法,可以用通配符查某台主机上的所有服务器grep "关键字" /wls/applogs/custom-*/error.log
二.查看日志常用命令1.grep '关键字' error.log:在error.log中搜索'关键字'2.grep -C10 '关键字' error.log:显示关键字前后10行记录3.grep '关键字' error.l
【持久化框架MyBatis3一】MyBatis版HelloWorld
bit1129
helloworld
MyBatis这个系列的文章,主要参考《Java Persistence with MyBatis 3》。
样例数据
本文以MySQL数据库为例,建立一个STUDENTS表,插入两条数据,然后进行单表的增删改查
CREATE TABLE STUDENTS
(
stud_id int(11) NOT NULL AUTO_INCREMENT,
【Hadoop十五】Hadoop Counter
bit1129
hadoop
1. 只有Map任务的Map Reduce Job
File System Counters
FILE: Number of bytes read=3629530
FILE: Number of bytes written=98312
FILE: Number of read operations=0
FILE: Number of lar
解决Tomcat数据连接池无法释放
ronin47
tomcat 连接池 优化
近段时间,公司的检测中心报表系统(SMC)的开发人员时不时找到我,说用户老是出现无法登录的情况。前些日子因为手头上 有Jboss集群的测试工作,发现用户不能登录时,都是在Tomcat中将这个项目Reload一下就好了,不过只是治标而已,因为大概几个小时之后又会 再次出现无法登录的情况。
今天上午,开发人员小毛又找到我,要我协助将这个问题根治一下,拖太久用户难保不投诉。
简单分析了一
java-75-二叉树两结点的最低共同父结点
bylijinnan
java
import java.util.LinkedList;
import java.util.List;
import ljn.help.*;
public class BTreeLowestParentOfTwoNodes {
public static void main(String[] args) {
/*
* node data is stored in
行业垂直搜索引擎网页抓取项目
carlwu
Lucene Nutch Heritrix Solr
公司有一个搜索引擎项目,希望各路高人有空来帮忙指导,谢谢!
这是详细需求:
(1) 通过提供的网站地址(大概100-200个网站),网页抓取程序能不断抓取网页和其它类型的文件(如Excel、PDF、Word、ppt及zip类型),并且程序能够根据事先提供的规则,过滤掉不相干的下载内容。
(2) 程序能够搜索这些抓取的内容,并能对这些抓取文件按照油田名进行分类,然后放到服务器不同的目录中。
[通讯与服务]在总带宽资源没有大幅增加之前,不适宜大幅度降低资费
comsci
资源
降低通讯服务资费,就意味着有更多的用户进入,就意味着通讯服务提供商要接待和服务更多的用户,在总体运维成本没有由于技术升级而大幅下降的情况下,这种降低资费的行为将导致每个用户的平均带宽不断下降,而享受到的服务质量也在下降,这对用户和服务商都是不利的。。。。。。。。
&nbs
Java时区转换及时间格式
Cwind
java
本文介绍Java API 中 Date, Calendar, TimeZone和DateFormat的使用,以及不同时区时间相互转化的方法和原理。
问题描述:
向处于不同时区的服务器发请求时需要考虑时区转换的问题。譬如,服务器位于东八区(北京时间,GMT+8:00),而身处东四区的用户想要查询当天的销售记录。则需把东四区的“今天”这个时间范围转换为服务器所在时区的时间范围。
readonly,只读,不可用
dashuaifu
js jsp disable readOnly readOnly
readOnly 和 readonly 不同,在做js开发时一定要注意函数大小写和jsp黄线的警告!!!我就经历过这么一件事:
使用readOnly在某些浏览器或同一浏览器不同版本有的可以实现“只读”功能,有的就不行,而且函数readOnly有黄线警告!!!就这样被折磨了不短时间!!!(期间使用过disable函数,但是发现disable函数之后后台接收不到前台的的数据!!!)
LABjs、RequireJS、SeaJS 介绍
dcj3sjt126com
js Web
LABjs 的核心是 LAB(Loading and Blocking):Loading 指异步并行加载,Blocking 是指同步等待执行。LABjs 通过优雅的语法(script 和 wait)实现了这两大特性,核心价值是性能优化。LABjs 是一个文件加载器。RequireJS 和 SeaJS 则是模块加载器,倡导的是一种模块化开发理念,核心价值是让 JavaScript 的模块化开发变得更
[应用结构]入口脚本
dcj3sjt126com
PHP yii2
入口脚本
入口脚本是应用启动流程中的第一环,一个应用(不管是网页应用还是控制台应用)只有一个入口脚本。终端用户的请求通过入口脚本实例化应用并将将请求转发到应用。
Web 应用的入口脚本必须放在终端用户能够访问的目录下,通常命名为 index.php,也可以使用 Web 服务器能定位到的其他名称。
控制台应用的入口脚本一般在应用根目录下命名为 yii(后缀为.php),该文
haoop shell命令
eksliang
hadoop hadoop shell
cat
chgrp
chmod
chown
copyFromLocal
copyToLocal
cp
du
dus
expunge
get
getmerge
ls
lsr
mkdir
movefromLocal
mv
put
rm
rmr
setrep
stat
tail
test
text
MultiStateView不同的状态下显示不同的界面
gundumw100
android
只要将指定的view放在该控件里面,可以该view在不同的状态下显示不同的界面,这对ListView很有用,比如加载界面,空白界面,错误界面。而且这些见面由你指定布局,非常灵活。
PS:ListView虽然可以设置一个EmptyView,但使用起来不方便,不灵活,有点累赘。
<com.kennyc.view.MultiStateView xmlns:android=&qu
jQuery实现页面内锚点平滑跳转
ini
JavaScript html jquery html5 css
平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有“小尾巴”,就像#keleyi,今天我就介绍一款 jquery 做的滚动的特效,既可以设置滚动速度,又可以在 url 链接上没有“小尾巴”。
效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/37.htmHTML文件代码:
&
kafka offset迁移
kane_xie
kafka
在早前的kafka版本中(0.8.0),offset是被存储在zookeeper中的。
到当前版本(0.8.2)为止,kafka同时支持offset存储在zookeeper和offset manager(broker)中。
从官方的说明来看,未来offset的zookeeper存储将会被弃用。因此现有的基于kafka的项目如果今后计划保持更新的话,可以考虑在合适
android > 搭建 cordova 环境
mft8899
android
1 , 安装 node.js
http://nodejs.org
node -v 查看版本
2, 安装 npm
可以先从 https://github.com/isaacs/npm/tags 下载 源码 解压到
java封装的比较器,比较是否全相同,获取不同字段名字
qifeifei
非常实用的java比较器,贴上代码:
import java.util.HashSet;
import java.util.List;
import java.util.Set;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import net.sf.json.JsonConfig;
i
记录一些函数用法
.Aky.
位运算 PHP 数据库 函数 IP
高手们照旧忽略。
想弄个全天朝IP段数据库,找了个今天最新更新的国内所有运营商IP段,copy到文件,用文件函数,字符串函数把玩下。分割出startIp和endIp这样格式写入.txt文件,直接用phpmyadmin导入.csv文件的形式导入。(生命在于折腾,也许你们觉得我傻X,直接下载人家弄好的导入不就可以,做自己的菜鸟,让别人去说吧)
当然用到了ip2long()函数把字符串转为整型数
sublime text 3 rust
wudixiaotie
Sublime Text
1.sublime text 3 => install package => Rust
2.cd ~/.config/sublime-text-3/Packages
3.mkdir rust
4.git clone https://github.com/sp0/rust-style
5.cd rust-style
6.cargo build --release
7.ctrl