CSS简介
css的主要使用场景:美化网页、布局页面。
css是层叠样式表的简称,也称为CSS样式表或级联式样式表
CSS主要用于设置HTML页面中的文本内容 (字体、大小、对齐方式等)、图片的外形 (宽高、边框样式、边距等)以及版面的布局和外观显示样式 。
注意:
CSS最大价值:由HTML专注去做结构呈现,样式交给CSS,即结构(HTML)与样式(CSS)相分离。
cascading style sheet 层叠样式表
主流浏览器及其内核:
浏览器
内核
IE
trident
Firefox
Gecko
Google chrome
Webkit/blink
Safari
Webkit
Opera
presto
css权重
!important
Infinity
行间样式
1000
id
100
class | 属性 | 伪类
10
标签 | 伪元素
1
通配符
0
这些是256进制
优先级: !important > id选择器 > class选择器 | 属性 > 标签选择器 > 通配符选择器 class选择器和属性选择器是并级的
优先级是根据css权重来的
CSS语法规范
CSS规则由两个主要的部分构成:选择器以及一条或多条声明。
注意:
1.选择器是用于指定CSS样式的HTML标签,花括号内是对该对象设置的具体样式
2.属性与属性值以“键值对”的形式出现
3.属性是对指定的对象设置的样式属性,例如字体大小,文本颜色等
4.属性与属性值之间用英文":"分开
5.多个“键值对”之间用英文";"进行区分
CSS代码风格
样式格式书写
1.紧凑格式
h3{color:deeppink;font-size:20px;}
2.展开格式
h3{
color:deeppink;
font-size:20px;
}
推荐使用展开格式
样式大小写
采用小写
空格规范
h3 {
color: pink;
}
1.属性值前面,冒号后面,保留一个空格;
2.选择器(标签)和大括号中间保留空格;
CSS基础选择器
CSS选择器的作用
选择器就是选择标签用的。
h1 {
color: red;
font-size: 12px;
}
以上CSS做了两件事:
1.找到所有的h1标签。选择器(选对人) 。
2.设置这些标签的样式,比如颜色为红色**(做对事)。**
选择器的分类
标签选择器
标签选择器(元素选择器)是指用HTML标签名称 作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。
语法:
标签名 {
属性名1: 属性值1;
属性名2: 属性值2;
属性名3: 属性值3;
}
作用:
标签选择器可以把某一类标签全部选择出来,比如所有的
标签和所有的 标签。
优点
能快速为页面中同类型的标签统一设置样式。
缺点
不能设计差异化样式,只能选择全部的当前标签。
类选择器
类选择器可以单独选择一个或者某几个标签
语法:
.类名 {
属性1: 属性值1;
...
}
例如:将所有拥有red类的HTML元素均为红色
.red {
color: red;
}
结构需要用class属性来调用class类的意思
< div class = ' red' >
变红色
div >
注意:
1.类选择器使用"."(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的)。
2.可以理解为给这个标签起了一个名字,来表示。
3.长名称或词组可以使用中横线来为选择器命名。
4.不要使用纯数字、中文等命名,尽量使用英文字母来表示。
5.命名要有意义,尽量使别人一眼就知道这个类名的目的。
6.命名规范:Web前段开发规范手册
类选择器-多类名
1.多类名的使用方式
< div class = " red font20" >
亚瑟
div >
(1)在标签class属性中写多个类名。
(2)多个类名中间必须用空格分开。
2.多类名开发中使用场景
(1)可以把一些标签元素相同的样式(共同的部分)放到一个类里面。
(2)这些标签都可以调用这个公共的类,然后再调用自己独有的类。
(3)从而节省CSS代码,统一修改非常方便。
id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS中id选择器以“#”来定义。
语法:
#id名 {
属性1:属性值1;
}
例如,将id为nav元素的内容设置为红色
#nav {
color: red;
}
id选择器的口诀:样式是#定义,结构是id调用,只能调用一次,别人切勿使用
id选择器和类选择器的区别
1.类选择器(class)好比人的名字,一个人可以有多个名字,同时一个名字也可以被多个人使用。
2.id选择器好比人的身份证号码,全国是唯一的,不得重复。
3.id选择器和类选择器最大的不同在于使用次数上。
4.类选择器在修改样式中用的最多,id选择器一般用于页面唯一性的元素上经常和JavaScript搭配使用。
通配符选择器
在CSS中,通配符选择器使用"*"定义,它表示选取页面中所有元素(标签)。
语法:
* {
属性1: 属性值1;
...
}
通配符选择器不需要调用,自动就给所有的元素使用样式
基础选择器总结
基础选择器
作用
特点
使用情况
用法
标签选择器
可以选出所有相同的标签,比如p
不能差异化选择
较多
p{color: red;}
类选择器
可以选出1个或者多个标签
可以根据需求选择
非常多
.nav {color: red;}
id选择器
一次只能选择1个标签
ID属性只能在每个HTML文档中出现一次
一般和js搭配
#nav {color: red;}
通配符选择器
选择所有的标签
选择的太多,有部分不需要
特殊情况使用
* {color: red;}
CSS字体属性
字体系列
CSS使用font-family属性定义文本的字体系列
p {font-family: "微软雅黑";}
div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}
注意:
1.各种字体之间必须使用英文状态下的逗号隔开;
2.一般情况下,如果有空格隔开的多个单词组成的字体,加引号。
3.尽量使用的浏览器中都能正确显示。
4.最常见的几个字体:body{font-family:“Microsoft YaHei”,tahoma,arial,“Hiragino Sans GB”;}
字体大小
CSS使用font-size属性定义字体大小
p {
font-size: 20px;
}
注意:
1.px(像素)大小使我们网页最常用的单位。
2.谷歌浏览器默认的文字大小为16px;
3.不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值,不要默认大小。
4.可以给body指定整个页面文字的大小。
字体粗细
CSS使用font-weight属性设置字体的粗细
p {
font-weight bold;
}
属性值
描述
normal
默认值(不加粗)
bold
定义加粗(加粗的)
100-900
400等同于normal,700等同于bold, 注意这个数字后面不跟单位
文字样式
CAA使用font-style属性设置文本的风格
p {
font-style: normal;
}
属性值
作用
normal
默认值,浏览器会显示标准的字体样式font-style: normal;
italic
浏览器会显示斜体的字体样式
注意:平时我们很少给文字加斜体,反而要给斜体文字(em,i)改为不倾斜字体。
复合属性
字体属性可以把以上文字样式综合来写,这样可以更节约代码。
body {
font: font-style font-weight font=size/line-height font-family;
}
1.使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,并且各个属性以空格隔开。
2.不需要设置的属性可以省略(其默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。
字体属性总结
属性
表示
注意点
font-size
字号
我们通常用的单位是px,一定要跟上单位
font-family
字体
实际工作中按照团队约定来写字体
font-weight
字体粗细
记住加粗是700或bold,不加粗是400或normal,记住数字不要跟单位。
font-style
字体样式
记住倾斜是italic 不倾斜是normal 工作中我们最常用normal
font
字体连写
1.字体连写是有顺序的,不能随意换位置。2.其中字号和字体必须同时出现。
文本属性
文本颜色
color属性用于定义文本的颜色
表示
属性值
预定义的颜色值
red,green,blue,pink等
十六进制
#FF0000,#FF6600,#29D794
RGB代码
rgb(255.0.0)或rgb(100%,0%,0%)
使用最多的是十六进制
对齐文本
text-align 属性用于设置元素内文本内容的水平对齐方式
语法:
div {
text-align: center;
}
属性值
解释
left
左对齐(默认值)
right
右对齐
center
居中对齐
装饰文本
text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线 等。
语法:
div {
text-decoration: underline;
}
属性值
描述
none
默认。没有修饰线(最常用)
underline
下划线。链接a自带下划线(常用)
overline
上划线。(几乎不用)
line-through
删除线。(不常用)
重点记住添加下划线和删除下划线
文本缩进
text-indent 属性用来指定文本的第一行的缩进,通常是将段落的首行缩进 。
语法:
div {
text-indent: 10px;
}
通常设置该属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。
p {
text-indnet: 2em;
}
em是一个相对单位,就是当前元素(font-size)1个文字的大小,如果当前元素没有设置大小,则会按照父元素的1个文字大小。
行间距
line-height 属性用于设置行间的距离(行高),可以控制文字行与行之间的距离 。
语法:
p {
line-height: 26px;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9xLQ0TGD-1615891158002)(C:\Users\王佳节\AppData\Roaming\Typora\typora-user-images\image-20201106151957225.png)]
文本属性总结
属性
表示
注意点
color
文本颜色
我们通常用 十六进制 比如 #fff
text-align
文本对齐
可以设定文字水平的对齐方式
text-indent
文本缩进
通常用于段落首行缩进2个字的距离 text-indent: 2em;
text-decoration
文本修饰
记住 添加下划线 underline 取消下划线 none
line-height
行高
控制行与行之间的距离
CSS引入方式
内部样式表
内部样式表(内嵌样式表)是写到html页面内部,是将所有的CSS代码抽取出来,单独放到一个
语法:
< style>
div {
color : red;
font-size : 16px;
}
style >
举例:
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> CSS引入方式title >
< style>
div {
color : pink;
font-size : 15px;
}
style >
head >
< body>
< h2> =========内部样式表========h2 >
< div> 所谓内部样式表,就是在html页面内部写样式,但是是单独写到style标签内部。div >
body >
html >
行内样式表
行内样式表(内联样式表)是在元素标签内部的style属性中设定CSS样式。适合于修改简单样式。
语法:
< div style =" color : red; font-size : 12px; " > 青春不常在,抓紧谈恋爱div >
注意:
1.style 其实就是标签的属性。
2.在双引号中间,写法要符合CSS规范。
3.可以控制当前的标签设置样式。
4.由于书写繁琐,没有体现出结构与样式相分离的思想,所有不推荐大量使用,只有对当前元素添加简单样式时,可以考虑使用。
5.使用行内样式表设定CSS,通常也被称为行内式引入。
外部样式表
实际开发都是使用外部样式表。适合于样式比较的的情况。
核心是:样式单独写到CSS文件中,之后把CSS文件引入到HTML页面中使用。
引入外部样式表分为两步:
1.新建一个后缀名为.css的样式文件,把所有CSS代码都放入此文件中。
2.在HTML页面中,使用标签引入这个文件。
属性
作用
rel
定义当前文档与链接文档之间的关系,在这里需要指定为"stylesheet",表示被链接的文档是一个样式表文件。
href
定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。
**使用外部样式表设定CSS,通常也被称为外链式或链接式引入。**这种方式是开发中常用的方式。
引入方式总结
样式表
优点
缺点
使用情况
控制范围
行内样式表
书写方便,权重高
结构样式混写
较少
控制一个标签
内部样式表
部分结构和样式相分离
没有彻底分离
较多
控制一个页面
外部样式表
完全实现结构和样式相分离
需要引入
最多
控制多个页面
Chrome 调试工具
1.打开Chrome浏览器,**按下F12键或者右击页面空白处–>检查。**
2.使用调试工具
(1)Ctrl+滚轮可以放大开发中工具代码大小。
(2)左边是HTML元素结构,右边是CSS样式
(3)右边CSS样式可以改动数值(左右箭头或者直接输入)和查看颜色。
(4)Ctrl+0复原浏览器大小。
(5)如果点击元素大小,发现右侧没有样式引入,极有可能是类名或者样式引入错误。
(6)如果有样式,但是样式前面有黄色感叹号提示,则是样式属性书写错误。
Emmet语法
Emment语法的前身是Zenconding,他使用缩写,来提高html/css的编写速度,VScode内部已经集成该语法
快速生成HTML语法结构
1.生成标签 直接输入标签名 按tab键即可,比如 div 然后tab键,就可以生成
。
2.如果想要生成多个相同标签,加上*就可以了 比如 div*3就可以快速生成3个div
3.如果有父子级关系的标签 可以用> 比如 ul>li就可以了。
4.如果有兄弟关系的标签,用+就可以了 比如 div+p。
5.如果生成带有类名或者id名字的,直接写.demo或者#two tab键就可以了
6.如果生成的div类名是有顺序的,可以用自增符合$
7.如果想要生成的标签内部写内容,可以用 { } 表示。
快速生成CSS样式语法
CSS基本采取简写形式即可:
1.比如w200 按tab 可以生成 width : 200px;
2.比如lh26 按tab 可以生成 line-height : 26px;
快速格式化代码
Shift+Alt+F
**设置保持页面是自动格式化代码:**
(1)文件--------->【首选项】------------>【设置】
(2)搜索emmet.include;
(3)在settings.json下的【用户】中添加以下语句:
"editor.formatOnType" : true,
"editor.formatOnSave" : true
只需要设置一次即可,以后都可以自动保存格式化代码。
CSS的复合选择器
什么是复合选择器
在CSS中,**可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。**
· 复合选择器可以更准确、更高效的选择目标元素( 标签) 。
· 复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的。
· 常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等。
后代选择器(重要)
后代选择器又称为包含选择器 ,可以选择父元素里面带的子元素。其写法就是把外层标签写在前面,内存标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。
语法:
元素1 元素2{样式声明}
上述语法表示选择元素1里面的所有元素2 (后代元素)
例如:
ul li{样式声明} /*选择ul里面所有的li标签元素*/
注意:
1.元素1和元素2中间用 空格隔开 。
2.元素1是父级,元素2是子级,最终选择的是元素2.
3.元素2可以是儿子,也可以是孙子等,只要是元素1的后代即可。
4.元素1和元素2可以是任意的基础选择器。
子选择器(重要)
子元素选择器(子选择器)只能选择作为某元素的最近一级子元素,简单理解就是选亲儿子元素
语法:
元素1>元素2{样式声明}
上述语法表示 选择元素1里面的所有直接后代(子元素)元素2.
例如:
div > p{样式声明}/*选择div里面所有最近一级p标签元素*/
注意:
1.元素1和元素2中间用 大于号隔开
2.元素1是父级, 元素2是子级, 最终选择的是元素2.
3.元素2必须是亲儿子 ,其孙子、重孙之类都不归他管。
并集选择器(重要)
并集选择器可以选择多组标签,同时为他们定义相同的样式 通常用于集体声明。
并集选择器是各选择器通过英文逗号(,) 连接而成 任何形式的选择器都可以作为并集选择器的一部分。
语法:
元素1,元素2{样式声明}
表示选择元素1和元素2
例如:
ul,div {样式声明}/* 选择ul和div标签元素 */
注意:
1.元素1和元素2 中间用逗号隔开
2.逗号可以理解为 和 的意思。
3.并集选择器通常用于集体声明。
伪类选择器
伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或者选择第一个,第n个元素。
伪类选择器最大的特点是 用冒号(:)表示 比如: :hover :first-child
链接伪类选择器
a:link /* 选择所有未被访问的链接 */
a:visited /*选择所有已被访问的链接 */
a:hover /* 选择鼠标指针位于其上的链接 */
a:active /*选择活动链接(鼠标按下未弹起的链接) */
注意事项:
1.为了确保生效,请按照LVHA的顺序声明:link–>:visited–>:hover–>:active
2:记忆法:lv包包hao
3.因为a链接在浏览器中具有默认样式,所以我们实际工作中都需要给链接单独指定样式。
实际开发中的写法:
/* a 是标签选择器 所以的链接 */
a {
color: gray;
}
/* :hover 是链接伪类选择器 鼠标经过 */
a:hover {
color: red;/* 鼠标经过的时候,由原来的 灰色 变成了 红色 */
}
focus伪类选择器
focus伪类选择器用于选取获得焦点的表单元素
焦点就是光标,一般情况类表单元素才能获取,因此这个选择器也主要针对表单元素 来说
input:focus {
background-color: yellow;
}
复合选择器总结
选择器
作用
特征
使用情况
隔开符号及用法
后代选择器
用来选择后代元素
可以是子孙后代
较多
符合是 空格 .nav a
子代选择器
选择最近一级元素
只选亲儿子
较少
符合是 大于 .nav>p
并集选择器
选择某些相同样式的元素
可以用于集体声明
较多
符合是 逗号 .nav,.header
链接伪类选择器
选择不同状态的链接
跟链接相关
较多
重点记住a{}和a:hover实际开发的写法
:focus选择器
选择获得光标的表单
跟表单相关
较少
input:focus记住这个写法
CSS的元素显示模式
块元素
常见块元素有-、 、
、
、、等,**其中,标签是最典型的块元素。**
**块元素的特点:**
1.比较霸道,自己独占一行。
2.高度、宽度、外边距以及内边距都可以控制。
3.宽度默认是容器
( 父级宽度
) 的100%
4.是一个容器及盒子,里面可有放行内或者块级元素。
**注意:**
· 文字类的元素内不能使用块级元素
·
标签主要用于存放文字,因此
里面不能放块级元素,特别不能放
· 同理,
-等都是文字类块级标签,里面也不能放其他块级元素。
行内元素
常见的行内元素有、、、、,,,,,等,其中标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
**行内元素的特点:**
1.相邻行内元素在一行上,一行可以显示多个。
2.高、宽直接设置是无线的。
3.默认宽度就是它本身内容的宽度
4.行内元素只能容纳文本或者其他行内元素。
**注意:**
· 链接里面不能再放链接。
· 特殊情况链接里面可有放块级元素,但是给 转换一下块级模式最安全。
行内块元素
同时具有块元素和行内元素的特点叫做行内快元素。
如: , ,
**行内块元素的特点:**
1.和相邻行内元素( 行内块) 在一行上,但是他们之间会有空白缝隙,一行可以显示多个( 行内元素特点) 。
2.默认宽度就是它本身内容的宽度( 行内元素特点)
3.高度,行高,外边距以及内边距都可以控制( 块级元素特点。)
元素显示模式的转换
转换为块级元素 display: block;
转换为行内元素 display: inline;
转换为行内块元素 display: inline-block;
截图工具snipaste
常用快捷方式:
1.F1可以截图,同时测量大小,设置箭头,书写文字等
2.F3在桌面置顶显示
3.点击图片,alt可以取色(按下shift可以切换取色模式)
4.按下esc取消图片显示。
你可能感兴趣的:(web前端,css)
DIV+CSS+JavaScript技术制作网页(旅游主题网页设计与制作)云南大理
STU学生网页设计
网页设计 期末网页作业 html静态网页 html5期末大作业 网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业:【HTML5网页期末作业(1000套)】程序员有趣的告白方式:【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript
二挡起步
web前端期末大作业 javascript html css 旅游 风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材,DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业,Web大学生网页HTML:结构CSS:样式在操作方面上运用了html5和css3,采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业(div+css) 云南我的家乡旅游景点 带文字滚动
二挡起步
web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
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
《HTML 与 CSS—— 响应式设计》
陈在天box
html css 前端
一、引言在当今数字化时代,人们使用各种不同的设备访问互联网,包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验,响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术,在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性(一)概念响应式设计是一种网页设计方法,旨在
html+css网页设计 旅游网站首页1个页面
html+css+js网页设计
html css 旅游
html+css网页设计旅游网站首页1个页面网页作品代码简单,可使用任意HTML辑软件(如:Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作)。获取源码1,访问该网站https://download.csdn.net/download/qq_42431718/897527112,点击
css设置当字数超过限制后以省略号(...)显示
周bro
css 前端 vue css3 html 经验分享
1、文字超出一行,省略超出部分,显示’…’用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin
360前端星计划-动画可以这么玩
马小蜗
动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点:灵活度、可控性、性能
css2中的透明
琪33
.out{width:400px;height:400px;background-color:blue;margin:100pxauto;border:1pxsolid#000;opacity:0.6;}.in{width:200px;height:200px;background-color:red;margin:100pxauto;}
Nginx从入门到实践(三)
听你讲故事啊
动静分离动静分离是将网站静态资源(JavaScript,CSS,img等文件)与后台应用分开部署,提高用户访问静态代码的速度,降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上,后台项目部署到应用服务器上,根据一定规则静态资源的请求全部请求nginx服务器,达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写,Ngin
Nginx的使用场景:构建高效、可扩展的Web架构
张某布响丸辣
nginx 前端 架构
Nginx,作为当今最流行的Web服务器和反向代理软件之一,凭借其高性能、稳定性和灵活性,在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站,还是大型企业级应用,Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景,帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件(如HTML、CSS、JavaScript、图片等)的网站,Ngin
Python精选200Tips:121-125
AnFany
Python200+Tips python 开发语言
Spendyourtimeonself-improvement121Requests-简化的HTTP请求处理发送GET请求发送POST请求发送PUT请求发送DELETE请求会话管理处理超时文件上传122BeautifulSoup-网页解析和抓取解析HTML和XML文档查找单个标签查找多个标签使用CSS选择器查找标签提取文本修改文档内容删除标签处理XML文档123Scrapy-强大的网络爬虫框架示例
前端CSS面试常见题
剑亦未配妥
前端面试 前端 css 面试
边界塌陷盒模型有两种:W3C盒模型和IE盒模型,区别在于宽度是否包含边框定义:同时给兄弟/父子盒模型设置上下边距,理论上边距值是两者之和,实际上不是注意:浮动和定位不会产生边界塌陷;只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负:取绝对值大的值一正一负:求和父子元素边界塌陷解决父元素可以通过调整padding处理;设置overflowhidden,触发BFC子
爬虫技术抓取网站数据
Bearjumpingcandy
爬虫
爬虫技术是一种自动化获取网站数据的技术,它可以模拟人类浏览器的行为,访问网页并提取所需的信息。以下是爬虫技术抓取网站数据的一般步骤:发起HTTP请求:爬虫首先会发送HTTP请求到目标网站,获取网页的内容。解析HTML:获取到网页内容后,爬虫会使用HTML解析器解析HTML代码,提取出需要的数据。数据提取:通过使用XPath、CSS选择器或正则表达式等工具,爬虫可以从HTML中提取出所需的数据,如文
创建一个完整的购物商城系统是一个复杂的项目,涉及前端(用户界面)、后端(服务器逻辑)、数据库等多个部分。由于篇幅限制,我无法在这里提供一个完整的系统代码,但我可以分别给出一些关键部分的示例代码,涵盖几
uthRaman
前端 ui 服务器
前端(HTML/CSS/JavaScript)grsyzp.cnHTML页面结构(index.html)html购物商城欢迎来到购物商城JavaScript(Ajax请求商品数据,app.js)javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
HTML中"bgcolor"与"background-color"的区别
Sardar_
html
bgcolor只是标签属性,而backgroud更多作为css的样式属性。它们俩大多数情况下效果完全相同。但在标签下效果不同。不支持bgcolor属性,只能用style标签添加CSS样式。作为table的属性而言:HelloWorld!和HelloWorld!效果完全相同。作为body属性而言:效果完全相同。不过个人推荐统一用CSS样式进行控制,把style统一放到.css文件中。backgrou
2019-05-29 vue-router的两种模式的区别
Kason晨
1、大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容优点:良好的交互体验,用户不需要刷新页面,页面显示流畅,良好的前后端工作分离模式,减轻服务器压力,缺点:不利于SEO,初次加载耗时比较多2、hash模式vue-router默认的是hash
清除 Conda 缓存
Dmatteratall
conda 缓存
清除Conda缓存:cssCopycodecondaclean--allcondaclean--all命令将会清除Conda缓存和临时文件,而不会删除已经安装的软件包和环境。它主要用于清理不必要的缓存和临时文件以释放磁盘空间。
electron多标签页模式更像客户端
diygwcom
electron javascript 前端
Electron多标签页模式是指在Electron框架中实现的类似Web浏览器的多标签页功能。Electron是一个使用Web技术(HTML、CSS和JavaScript)来创建跨平台桌面应用程序的框架。在Electron中实现多标签页模式,通常需要借助一些特定的库或组件,如BrowserView或electron-tabs,或者通过自定义实现。实现方式1.使用BrowserViewBrowser
前端HTML+CSS+JS的入门学习
俊昭喜喜里
前端 html css
一.HTMLHTML(HyperTextMarkupLanguage)即超文本标记语言,是用于创建网页和网页应用程序的标准标记语言。它不是一种编程语言,而是一种标记语言,通过一系列的元素(elements)来告诉浏览器如何显示网页上的内容,如文本、图片、链接、表格、列表等。HTML文档由一系列的标签(tags)组成,这些标签告诉浏览器如何显示内容。标签通常成对出现,例如和,其中是开始标签,表示一个
10/24 每周学习总结5
木木ainiks
1024程序员节
1RecordingtheMoolympicsS#include#includeusingnamespacestd;typedeflonglongint_1;intn;structnode{int_1begin_b;int_1end_e;}a[300];boolcmp(nodea,nodeb){if(a.end_e==b.end_e)returna.begin_b>b.begin_b;return
HTML5概述
WFIT~SKY
Web前端 html5 前端 html
1.HTML概述1.1HTML定义HTML超文本标记语言,其中超文本是链接,标记也叫标签(即带尖括号的文本)。1.2HTML基本骨架HTML基本骨架是网页模板。网页的标题网页的内容html:整个网页head:网页头部,存放给浏览器看的代码,例如CSSbody:网页主体,存放给用户看的代码,例如文字、图片title:网页标题1.3HTML关系父子关系(嵌套)兄弟关系(并列)2.HTML开发环境2.1
CSS中如何实现鼠标悬停效果?
神明木佑
css 前端
在CSS中,您可以使用:hover伪类来实现鼠标悬停效果。:hover伪类会在用户将鼠标悬停在选择器所匹配的元素上时应用指定的样式。下面是一个简单的例子,展示了如何在鼠标悬停时改变文本颜色和背景颜色:MouseHoverExample.hover-effect{color:black;background-color:white;padding:10px;text-align:center;}.h
js的书写位置和css的书写位置的区别?为什么要这样写?
李是啥也不会
javascript css 开发语言
JavaScript和CSS的书写位置有以下区别:CSS通常写在标签中,或者在外部样式表文件中()。CSS主要用于控制页面的视觉样式和布局,通常在HTML文件的部分引入,以确保在页面渲染时样式已经加载完毕,从而避免样式闪烁。JavaScript通常写在标签中,或者在外部脚本文件中()。JavaScript用于添加页面的动态行为和交互。一般建议将JavaScript放在HTML文件的末尾(标签之前)
【H2O2|全栈】关于CSS(3)CSS基础(三)
过期的H2O2
【H2O2】CSS入门 css 前端
目录CSS基础知识前言准备工作盒模型概念内容的宽高displaypaddingborderborder-widthborder-styleborder-colormargin预告和回顾后话CSS基础知识前言本系列博客将分享层叠样式表(CSS)有关的知识点。作为本系列的第三篇,本博客将分享盒模型以及页面布局有关的知识点。不是专业的科普博主,主打一个分享知识,写的不好,多多包涵(哈哈)。准备工作软件:
css鼠标移上去向上移动,css3鼠标移动图片上移效果
yo xiba
css鼠标移上去向上移动
css3的功能真是很强大,学无止境,不多说,直接上代码css部分:*{margin:;padding:;}.text-center{text-align:center}.col_cont{width:300px;height:300px;margin:auto}.thumbnail{cursor:pointer;text-decoration:none;display:block;padding:
【VSCode扩展】通义灵码运行提示“此应用无法在你的电脑上运行”
coderYYY
VSCode bug解决方案 前端 vue.js 编辑器 visual studio vscode
作者:coderYYY个人简介:前端程序媛,目前主攻web前端,后端辅助,其他技术知识也会偶尔分享欢迎和我一起交流!(评论和私信一般会回!!)个人专栏推荐:《前端项目教程以及代码》自从半月前,通义灵码一运行就会报这个错尝试了以下方法,都无法解决:阿里云官方方法:删除c盘的.lingma卸载重新安装通义灵码以管理员身份运行VSCode防火墙设置准入安装之前的版本最后是在扩展设置里面解决的路径不填也可
微信小程序生成小程序转发链接,携带参数跳转到另外一个页面
coderYYY
前端项目教程以及代码 小程序 微信小程序 前端 javascript 微信
作者:coderYYY个人简介:前端程序媛,目前主攻web前端,后端辅助,其他技术知识也会偶尔分享欢迎和我一起交流!(评论和私信一般会回!!)个人专栏推荐:《前端项目教程以及代码》✨一、前言需求:在页面A生成分享链接(携带参数),分享到微信聊天后,好友点击链接可跳转到页面B,页面B可获取到参数二、具体实现pageA(生成链接页面):通过给button组件设置属性
css3实现鼠标放到图标上自动切换图标
黄丫丫07
css css3 html
作业div{font-family:'icomoon';width:1217px;height:1217px;background:url(images/1.jpg)no-repeat00;transition:all.2s;}div:hover{background:url(images/1.jpg)no-repeat-1200px0;}
CSS实现鼠标移动到购物车显示详情
AsiaFT.
css css3 html
需求:鼠标滑动到购物车时,购物车下面显示购物车详情信息解析:清除所有默认样式:{margin:0;padding:0;}2.CSS3新增属性:box-sizing:border-box;这个属性基本盒子都增加该属性;代码:鼠标划过显示购物车详情/*清除所有默认样式*/*{margin:0;padding:0;}.shoppingcart{/*css3新增属性,控制WIDTH和HEIGHT属性是盒子
Java实现的基于模板的网页结构化信息精准抽取组件:HtmlExtractor
yangshangchuan
信息抽取 HtmlExtractor 精准抽取 信息采集
HtmlExtractor是一个Java实现的基于模板的网页结构化信息精准抽取组件,本身并不包含爬虫功能,但可被爬虫或其他程序调用以便更精准地对网页结构化信息进行抽取。
HtmlExtractor是为大规模分布式环境设计的,采用主从架构,主节点负责维护抽取规则,从节点向主节点请求抽取规则,当抽取规则发生变化,主节点主动通知从节点,从而能实现抽取规则变化之后的实时动态生效。
如
java编程思想 -- 多态
百合不是茶
java 多态详解
一: 向上转型和向下转型
面向对象中的转型只会发生在有继承关系的子类和父类中(接口的实现也包括在这里)。父类:人 子类:男人向上转型: Person p = new Man() ; //向上转型不需要强制类型转化向下转型: Man man =
[自动数据处理]稳扎稳打,逐步形成自有ADP系统体系
comsci
dp
对于国内的IT行业来讲,虽然我们已经有了"两弹一星",在局部领域形成了自己独有的技术特征,并初步摆脱了国外的控制...但是前面的路还很长....
首先是我们的自动数据处理系统还无法处理很多高级工程...中等规模的拓扑分析系统也没有完成,更加复杂的
storm 自定义 日志文件
商人shang
storm cluster logback
Storm中的日志级级别默认为INFO,并且,日志文件是根据worker号来进行区分的,这样,同一个log文件中的信息不一定是一个业务的,这样就会有以下两个需求出现:
1. 想要进行一些调试信息的输出
2. 调试信息或者业务日志信息想要输出到一些固定的文件中
不要怕,不要烦恼,其实Storm已经提供了这样的支持,可以通过自定义logback 下的 cluster.xml 来输
Extjs3 SpringMVC使用 @RequestBody 标签问题记录
21jhf
springMVC使用 @RequestBody(required = false) UserVO userInfo
传递json对象数据,往往会出现http 415,400,500等错误,总结一下需要使用ajax提交json数据才行,ajax提交使用proxy,参数为jsonData,不能为params;另外,需要设置Content-type属性为json,代码如下:
(由于使用了父类aaa
一些排错方法
文强chu
方法
1、java.lang.IllegalStateException: Class invariant violation
at org.apache.log4j.LogManager.getLoggerRepository(LogManager.java:199)at org.apache.log4j.LogManager.getLogger(LogManager.java:228)
at o
Swing中文件恢复我觉得很难
小桔子
swing
我那个草了!老大怎么回事,怎么做项目评估的?只会说相信你可以做的,试一下,有的是时间!
用java开发一个图文处理工具,类似word,任意位置插入、拖动、删除图片以及文本等。文本框、流程图等,数据保存数据库,其余可保存pdf格式。ok,姐姐千辛万苦,
php 文件操作
aichenglong
PHP 读取文件 写入文件
1 写入文件
@$fp=fopen("$DOCUMENT_ROOT/order.txt", "ab");
if(!$fp){
echo "open file error" ;
exit;
}
$outputstring="date:"." \t tire:".$tire."
MySQL的btree索引和hash索引的区别
AILIKES
数据结构 mysql 算法
Hash 索引结构的特殊性,其 检索效率非常高,索引的检索可以一次定位,不像B-Tree 索引需要从根节点到枝节点,最后才能访问到页节点这样多次的IO访问,所以 Hash 索引的查询效率要远高于 B-Tree 索引。
可能很多人又有疑问了,既然 Hash 索引的效率要比 B-Tree 高很多,为什么大家不都用 Hash 索引而还要使用 B-Tree 索引呢
JAVA的抽象--- 接口 --实现
百合不是茶
抽象 接口 实现接口
//抽象 类 ,方法
//定义一个公共抽象的类 ,并在类中定义一个抽象的方法体
抽象的定义使用abstract
abstract class A 定义一个抽象类 例如:
//定义一个基类
public abstract class A{
//抽象类不能用来实例化,只能用来继承
//
JS变量作用域实例
bijian1013
作用域
<script>
var scope='hello';
function a(){
console.log(scope); //undefined
var scope='world';
console.log(scope); //world
console.log(b);
TDD实践(二)
bijian1013
java TDD
实践题目:分解质因数
Step1:
单元测试:
package com.bijian.study.factor.test;
import java.util.Arrays;
import junit.framework.Assert;
import org.junit.Before;
import org.junit.Test;
import com.bijian.
[MongoDB学习笔记一]MongoDB主从复制
bit1129
mongodb
MongoDB称为分布式数据库,主要原因是1.基于副本集的数据备份, 2.基于切片的数据扩容。副本集解决数据的读写性能问题,切片解决了MongoDB的数据扩容问题。
事实上,MongoDB提供了主从复制和副本复制两种备份方式,在MongoDB的主从复制和副本复制集群环境中,只有一台作为主服务器,另外一台或者多台服务器作为从服务器。 本文介绍MongoDB的主从复制模式,需要指明
【HBase五】Java API操作HBase
bit1129
hbase
import java.io.IOException;
import org.apache.hadoop.conf.Configuration;
import org.apache.hadoop.hbase.HBaseConfiguration;
import org.apache.hadoop.hbase.HColumnDescriptor;
import org.apache.ha
python调用zabbix api接口实时展示数据
ronin47
zabbix api接口来进行展示。经过思考之后,计划获取如下内容: 1、 获得认证密钥 2、 获取zabbix所有的主机组 3、 获取单个组下的所有主机 4、 获取某个主机下的所有监控项  
jsp取得绝对路径
byalias
绝对路径
在JavaWeb开发中,常使用绝对路径的方式来引入JavaScript和CSS文件,这样可以避免因为目录变动导致引入文件找不到的情况,常用的做法如下:
一、使用${pageContext.request.contextPath}
代码” ${pageContext.request.contextPath}”的作用是取出部署的应用程序名,这样不管如何部署,所用路径都是正确的。
Java定时任务调度:用ExecutorService取代Timer
bylijinnan
java
《Java并发编程实战》一书提到的用ExecutorService取代Java Timer有几个理由,我认为其中最重要的理由是:
如果TimerTask抛出未检查的异常,Timer将会产生无法预料的行为。Timer线程并不捕获异常,所以 TimerTask抛出的未检查的异常会终止timer线程。这种情况下,Timer也不会再重新恢复线程的执行了;它错误的认为整个Timer都被取消了。此时,已经被
SQL 优化原则
chicony
sql
一、问题的提出
在应用系统开发初期,由于开发数据库数据比较少,对于查询SQL语句,复杂视图的的编写等体会不出SQL语句各种写法的性能优劣,但是如果将应用系统提交实际应用后,随着数据库中数据的增加,系统的响应速度就成为目前系统需要解决的最主要的问题之一。系统优化中一个很重要的方面就是SQL语句的优化。对于海量数据,劣质SQL语句和优质SQL语句之间的速度差别可以达到上百倍,可见对于一个系统
java 线程弹球小游戏
CrazyMizzz
java 游戏
最近java学到线程,于是做了一个线程弹球的小游戏,不过还没完善
这里是提纲
1.线程弹球游戏实现
1.实现界面需要使用哪些API类
JFrame
JPanel
JButton
FlowLayout
Graphics2D
Thread
Color
ActionListener
ActionEvent
MouseListener
Mouse
hadoop jps出现process information unavailable提示解决办法
daizj
hadoop jps
hadoop jps出现process information unavailable提示解决办法
jps时出现如下信息:
3019 -- process information unavailable3053 -- process information unavailable2985 -- process information unavailable2917 --
PHP图片水印缩放类实现
dcj3sjt126com
PHP
<?php
class Image{
private $path;
function __construct($path='./'){
$this->path=rtrim($path,'/').'/';
}
//水印函数,参数:背景图,水印图,位置,前缀,TMD透明度
public function water($b,$l,$pos
IOS控件学习:UILabel常用属性与用法
dcj3sjt126com
ios UILabel
参考网站:
http://shijue.me/show_text/521c396a8ddf876566000007
http://www.tuicool.com/articles/zquENb
http://blog.csdn.net/a451493485/article/details/9454695
http://wiki.eoe.cn/page/iOS_pptl_artile_281
完全手动建立maven骨架
eksliang
java eclipse Web
建一个 JAVA 项目 :
mvn archetype:create
-DgroupId=com.demo
-DartifactId=App
[-Dversion=0.0.1-SNAPSHOT]
[-Dpackaging=jar]
建一个 web 项目 :
mvn archetype:create
-DgroupId=com.demo
-DartifactId=web-a
配置清单
gengzg
配置
1、修改grub启动的内核版本
vi /boot/grub/grub.conf
将default 0改为1
拷贝mt7601Usta.ko到/lib文件夹
拷贝RT2870STA.dat到 /etc/Wireless/RT2870STA/文件夹
拷贝wifiscan到bin文件夹,chmod 775 /bin/wifiscan
拷贝wifiget.sh到bin文件夹,chm
Windows端口被占用处理方法
huqiji
windows
以下文章主要以80端口号为例,如果想知道其他的端口号也可以使用该方法..........................1、在windows下如何查看80端口占用情况?是被哪个进程占用?如何终止等. 这里主要是用到windows下的DOS工具,点击"开始"--"运行",输入&
开源ckplayer 网页播放器, 跨平台(html5, mobile),flv, f4v, mp4, rtmp协议. webm, ogg, m3u8 !
天梯梦
mobile
CKplayer,其全称为超酷flv播放器,它是一款用于网页上播放视频的软件,支持的格式有:http协议上的flv,f4v,mp4格式,同时支持rtmp视频流格 式播放,此播放器的特点在于用户可以自己定义播放器的风格,诸如播放/暂停按钮,静音按钮,全屏按钮都是以外部图片接口形式调用,用户根据自己的需要制作 出播放器风格所需要使用的各个按钮图片然后替换掉原始风格里相应的图片就可以制作出自己的风格了,
简单工厂设计模式
hm4123660
java 工厂设计模式 简单工厂模式
简单工厂模式(Simple Factory Pattern)属于类的创新型模式,又叫静态工厂方法模式。是通过专门定义一个类来负责创建其他类的实例,被创建的实例通常都具有共同的父类。简单工厂模式是由一个工厂对象决定创建出哪一种产品类的实例。简单工厂模式是工厂模式家族中最简单实用的模式,可以理解为是不同工厂模式的一个特殊实现。
maven笔记
zhb8015
maven
跳过测试阶段:
mvn package -DskipTests
临时性跳过测试代码的编译:
mvn package -Dmaven.test.skip=true
maven.test.skip同时控制maven-compiler-plugin和maven-surefire-plugin两个插件的行为,即跳过编译,又跳过测试。
指定测试类
mvn test
非mapreduce生成Hfile,然后导入hbase当中
Stark_Summer
map hbase reduce Hfile path实例
最近一个群友的boss让研究hbase,让hbase的入库速度达到5w+/s,这可愁死了,4台个人电脑组成的集群,多线程入库调了好久,速度也才1w左右,都没有达到理想的那种速度,然后就想到了这种方式,但是网上多是用mapreduce来实现入库,而现在的需求是实时入库,不生成文件了,所以就只能自己用代码实现了,但是网上查了很多资料都没有查到,最后在一个网友的指引下,看了源码,最后找到了生成Hfile
jsp web tomcat 编码问题
王新春
tomcat jsp pageEncode
今天配置jsp项目在tomcat上,windows上正常,而linux上显示乱码,最后定位原因为tomcat 的server.xml 文件的配置,添加 URIEncoding 属性:
<Connector port="8080" protocol="HTTP/1.1"
connectionTi