CSS3选择器
CSS3选择器
属性选择器
在CSS3中,增加了三个属性选择器:[att*=val]
、[att^=val]
和[att$=val]
。
[att*=val]属性选择器
[att*=val]
属性选择器的含义是:如果元素用att
表示的属性之属性值中包含用val
指定的字符的话,则主元素使用这个样式。
示例文本1
示例文本1-1
示例文本1-2
示例文本2
示例文本2-1
示例文本2-2
示例代码中,如果使用[att*=val]
属性选择器,则页面中id
为section1
、subsection1-1
、subsection1-2
的div
元素的背景色都变为黄色,因为这些元素的id
属性中都包含section1
字符。
[id*=section1]{
background-color: yellow;
}
[att^=val]属性选择器
[att^=val]
属性选择器的含义是:如果元素用att
表示的属性之属性值的开头字符为用val
指定的字符的话,则该元素使用这个样式。 示例代码中,如果使用[att^=val]
属性选择器,并且将val
指定为section
,则页面中id
为section1
、section2
的div
元素的背景色都变为黄色,因为这些元素的id
属性的开头字符都为section
字符。
[id^=section1]{
background-color: yellow;
}
[att$=val]属性选择器
[att$=val]
属性选择器的含义是:如果元素用att
表示的属性之属性值的结尾字符为用val
指定的字符的话,则该元素使用这个样式。 示例代码中,如果使用[att$=val]
属性选择器,并且将val
指定为-1,则页面中id
为subsection1-1
、subsection2-1
的div
元素的背景色都变为黄色,因为这些元素的id
属性的结尾字符都为-1字符。另外注意该属性选择器中必须在指定匹配字符前加上\
这个转义字符。
[id$=\-1]{
background-color: yellow;
}
结构性伪类选择器
CSS 中的类选择器及伪元素
什么是伪类选择器
在CSS中,可以使用类选择器把相同的元素定义成不同的样式, 譬如针对一个p
元素,我们可以做如下所示的定义。
p.right{text-align:right}
p.center{text-align:right}
然后在页面上对p
元素使用class
属性,来把定义好的样式指定给具体的p
元素。
测试文字
测试文字
除了上面所述的类选择器之外,还有一种伪类选择器,这种伪类选择器与类选择器的区别是,类选择器可以随便起名,但是伪类选择器是css中已经定义好的选择器,不能随便起名。
//a元素上的几种伪类选择器
a:link{color:#FFOOOO;text-decoration:none}
a:visited{color:#OOFFOO;text-decoration:none}
a:hover{color:#FFOOFF;text-decoration:underline}
a :active{color:#OOOOFF; text-decorationlunderline}
什么是伪元素选择器
所谓伪元素选择器,是指并不是针对真正的元素使用的选择器,而是针对css中已经定义好的伪元素使用的选择器。
选择器:伪元素{属性:值}
选择器 类名:伪元素{属性:值}
主要有如下四个伪元素选择器。
first-line
伪元素选择器,用于为某个元素中的第一行文字使用样式。
first-letter
伪元素选择器,用于为某个元素中的文字的首字母或第一个字使用样式。
before
伪元素选择器,用于在某个元素之前插入一些内容。
//可以插入一段文字
<元素> :before{
content:插入文字
}
//也可以插入其他内容
<元素>:before{
content:url(test.wav)
}
after
伪元素选择器,用于在某个元素之后插入一些内容。用法与before
用法一样。
//first-line
p:first-line{color:#0000FF}
段落中的第一行。 段落中的第二行
//first-letter
p:first-letter{color:#0000FF}
This is an english text。
这是一段中文文字。
//before
li:before{content: ●}
列表项目1
列表项目2
列表项目3
列表项目4
列表项目5
//after
li:after{
content: "(仅用于测试,请勿用于商业用途。)";
font-size:12px;
color:red;
}
电影清单
选择器root、not、empty和target
root选择器
root
选择器将样式绑定到页面的根元素中。所谓根元素, 是指位于文档树中最顶层结构的元素,在HTML页面中就是指
部分。
:root{
background-color: yellow;
}
body{
background-color: limegreen;
}
选择器概述
选择器是CSS3中一个重要的内容。首先需要说明的是,使用选择
器的目的是为了提高开发人员书写或修改样式表时的工作效率,因为在样式表中,一般会书写大量
的代码,在大型网站中,样式表中的代码可能会达到几千行。
not选择器
如果想对某个结构元素使用样式,但是想排除这个结构元素下面的子结构元素,让它不使用这个样式时,可以使用not
选择器。
body *:not(h1){
background-color: yellow;
}
empty选择器
使用empty
选择器来指定当元素内容为空白时使用的样式。
:empty{
background-color: yellow;
}
target选择器
使用target
选择器来对页面中某个target
元素(该元素的id
被当做页面中的超链撞来使用)指定样式,该样式只在用户点击了页面中的起链接,并且跳转到target
元素后起作用。
:target{
background-color: yellow;
}
选择器:first-child 、last-child、nth-child和nth-Iast-child
单独指定第一个子元素、最后一个子元素的样式
要选中父元素中的第一个子元素、最后一个子元素,可以使用first-child
和last-child
。
li:first-child{
background-color: yellow;
}
li:last-child{
background-color: skyblue;
}
列表A
列表项目1
列表项目2
列表项目3
列表项目4
列表项目5
对指定序号的子元素使用样式
如果使用nth-child
选择器与nth-Iast-child
选择器,不仅可以指定某个父元素中第一个子元素以及最后一个子元素的样式,还可以针对父元素中某个指定序号的子元素来指定样式。
li:nth-child(2){
background-color: yellow;
}
li:nth-last-child(2){
background-color: skyblue;
}
列表A
列表项目1
列表项目2
列表项目3
列表项目4
列表项目5
对所有第奇数个子元素或第偶数个子元素使用样式
除了对指定序号的子元素使用样式以外,nth-child
选择器与nth-Iast-child
选择器还可以用来对某个父元素中所有第奇数个子元素或第偶数个子元素使用样式。
//所有正数下来的第奇数个子元素
nth-child (odd) {
//指定样式
}
//所有正数下来的第偶数个子元素
<子元素>:nth-child(even){
//指定样式
}
//所有倒数上去的第奇数个子元索
<子元素>:nth-last-child(odd){
//指定样式
}
//所有倒数上去的第偶数个子元素
<子元素>:nth-last-child(even){
//指定样式
}
这两个选择器用于某些元素时,会产生一些问题。
h2:nth-child(odd){
background-color: yellow;
}
h2:nth-child(even){
background-color: skyblue;
}
文章标题A
文章正文。
文章标题B
文章正文。
文章标题C
文章正文。
文章标题D
文章正文。
nth-child
选择器在计算子元素是第奇数个元素还是第偶数个元素的时候,是连同父元素中的所有子元素一起计算的。 换句话说,h2:nth-child(odd)
这句话的含义,并不是指"针对div
元素中第奇数个h2
子元素来使用",而是指当div
元素中的第奇数个子元素如果是h2
子元素的时候使用"。
选择器: nth-of-type和nth-Iast-of-type
使用这两个选择器的时候, CSS3在计算子元素是第奇数个子元素还是第偶数个子元素的时候,就只针对同类型的子元素进行计算了。
h2:nth-of-type(odd){
background-color: yellow;
}
h2:nth-of-type(even){
background-color: skyblue;
}
循环使用样式
nth-child(xn+y)
,x
表示每次循环中共包括几种样式,y
表示指定的样式在循环中所处的位置。
//4种背景色作为一组循环
li:nth-child(4n+1) {
background-color: yellow;
}
li:nth-child(4n+2) {
background-color: limegreen;
}
li:nth-child(4n+3) {
background-color: red;
}
li:nth-child(4n+4) {
background-color: white;
}
only-child选择器
only-child
选择器指定当某个父元素中只有一个子元素时才使用的样式。 与only-child
选择器作用相同的用法还有:
<子元素>:nth-child(1):nth-last-child(1){}
<子元素>:nth-of-type(1):nth-last-of-type(1){}
UI元素状态伪类选择器
这些选择器的共同特征是:指定的样式只有当元素处于某种状态下时才起作用,在默认状态下不起作用。 在CSS3中,共有11种UI元素状态伪类选择器,分别是E:hover、E:active、E:focus、E:enabled、E:disabled、E:read-only、E:read-write、E:checked、E:default、E:indeterminate
及E::selection
。
选择器:E:hover、E:active和E:focus
E:hover
选择器用来指定当鼠标指针移动到元素上面时元素所使用的样式。 E:active
选择器用来指定元素被激活(鼠标在元素上按下还没有松开)时使用的样式。 E:focus
选择器用来指定元素寂得先标焦点时使用的样式,主要是在文本框控件获得焦点并进行文字输入的时候使用。
input[type="text"]:hover{
background-color: greenyellow;
}
input[type="text"]:focus{
background-color: skyblue;
}
input[type="text"]:active{
background-color: yellow;
}
E:enabled伪类选择器与E:disabled伪类选择器
E:enabled
伪类选锋器用来指定当元素处于可用状态时的样式。 E:disabled
伪类选择器用来指定当元素处于不可用状态时的样式。
E:read-only伪类选择器与E:read-write伪类选择器
E:read-only
伪类选择器用来指定当元素处于只读状态时的样式。 E:read-write
伪类选择器用来指定当元素处于非只读状态时的样式。
伪类选择器:E:checked 、E:default和E: indeterminate
E:checked
伪类选择器用来指定当表单中的radio
单选框或checkbox
复选框处于选取状态时的样式。
E:default
选择器用来指定当页面打开时默认处于选取状态的单选框或复选框控件的样式。需要注意的是,即使用户将该单选框或复选框控件的选取状态设定为非选取状态,E:default
选择器中指定的样式仍然有效。
E:indeterminate
伪类选择器用来指定当页面打开时,如果一组单选框中任何一个单选框都没有被设定为选取状态时整组单选框的样式,如果用户选取了其中任何一个单选框,则该样式被取消指定。
E::selection伪类选择器
E::selection
伪类选择器用来指定当元素处于选中状态时的样式。
这是一段测试文字。
通用兄弟元素选择器
通用兄弟元素选择器用来指定位于同一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式。
<子元素>~<子元素之后的同级兄弟元素> {
//指定样式
}
这里的同级是指子元素和兄弟元素的父元素是同一个元素。
p元素为div元素的子元素
p元素为div元素的子元素
p元素为div元素的兄弟元素
p元素为div元素的兄弟元素
p元素为div元素的兄弟元素
p元素为div元素的子元素
p元素为div元素的兄弟元素
使用选择器在页面中插入内容
使用选择器
在CSS2中,使用before
选择器在元素前面插入内容,使用after
选择器在元素后面插入内容,在选择器的content
属性中定义要插入的内容。 为了让插入的文字具有美观效果,可以在选择器中加入文字的颜色、背景色、文字的字体等各种样式。
h2:before {
content: 'test';
color: white;
background-color: orange;
padding: 1px 5px;
margin-right: 10px;
}
标题文字
指定个别元素不进行插入
将content
的属性值设置为none
,指定为不插入内容。还可以将content
的属性值设置为normal
,其作用和使用方法与none
相同。
插入图像
h2.new:before {
content: url(mark.png)
}
如果在content
属性中通过attr(属性名)
这种形式来指定attr
属性值,可以将某个属性的属性值显示出来。
img:after {
content: attr(alt);
text-align: center;
margin-top: 5px;
}
你可能感兴趣的:(CSS3选择器)
关于城市旅游的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:做与用户的交互行为文章目录前端学习路线
Python精选200Tips:121-125
AnFany
Python200+Tips python 开发语言
Spendyourtimeonself-improvement121Requests-简化的HTTP请求处理发送GET请求发送POST请求发送PUT请求发送DELETE请求会话管理处理超时文件上传122BeautifulSoup-网页解析和抓取解析HTML和XML文档查找单个标签查找多个标签使用CSS选择器查找标签提取文本修改文档内容删除标签处理XML文档123Scrapy-强大的网络爬虫框架示例
爬虫技术抓取网站数据
Bearjumpingcandy
爬虫
爬虫技术是一种自动化获取网站数据的技术,它可以模拟人类浏览器的行为,访问网页并提取所需的信息。以下是爬虫技术抓取网站数据的一般步骤:发起HTTP请求:爬虫首先会发送HTTP请求到目标网站,获取网页的内容。解析HTML:获取到网页内容后,爬虫会使用HTML解析器解析HTML代码,提取出需要的数据。数据提取:通过使用XPath、CSS选择器或正则表达式等工具,爬虫可以从HTML中提取出所需的数据,如文
CSS中如何实现鼠标悬停效果?
神明木佑
css 前端
在CSS中,您可以使用:hover伪类来实现鼠标悬停效果。:hover伪类会在用户将鼠标悬停在选择器所匹配的元素上时应用指定的样式。下面是一个简单的例子,展示了如何在鼠标悬停时改变文本颜色和背景颜色:MouseHoverExample.hover-effect{color:black;background-color:white;padding:10px;text-align:center;}.h
Prometheus运维六 PromQL查询语言详解及操作
安顾里
Prometheus 监控类 大数据 kubernetes 运维 linux
海阔凭鱼跃,天高任鸟飞Prometheus官网:https://prometheus.io/文章目录1.什么是PromQL?2.PromQL的基本使用2.1时间序列选择器2.1.1瞬时向量选择器2.2区间向量选择器2.2.1范围向量选择器2.2.2时间位移操作2.2.3使用聚合操作2.3标量和字符串3.PromQL操作符4.内置常用函数5.HTTPAPI操作PromQL6.使用建议1.什么是Pro
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:
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属性是盒子
vue3 内置组件<Teleport>
fishmemory7sec
vue3 vue.js 前端
官方文档:Teleport内置组件将一个组件的模板内容渲染到指定的DOM节点位置,而不是在组件自身的挂载点。组件的参数说明:to:必填项。指定目标容器。可以是选择器或实际元素。类型:string|HTMLElement作用:指定要将内容传送(teleport)到的目标位置。可以是一个CSS选择器字符串,用于选择一个现存的DOM元素,也可以是一个实际的DOM元素对象引用。示例:disabled:可选
css3溢出隐藏的方法
DDOS防御
网络技术 css3 前端 css
CSS3提供了几种方法来处理元素内容的溢出问题,以下是一些常见的方法:1.**使用`overflow`属性**:-`overflow:hidden;`:隐藏溢出的内容。-`overflow:scroll;`:如果内容溢出,将显示滚动条。-`overflow:auto;`:如果内容溢出,将显示滚动条,但滚动条只在需要时显示。2.**使用`text-overflow`和`white-space`属性*
CSS 元素超出部分滚动, 并隐藏滚动条(2种方法)
就像风1样
css CSS样式专栏 css 溢出滚动 隐藏滚动条
方法一,利用css3的新特性-webkit-scrollbar,但是这种方式不兼容火狐和IE超出部分隐藏滚动条#box{width:500px;height:300px;overflow-x:hidden;overflow-y:scroll;line-height:30px;text-align:center;}#box::-webkit-scrollbar{display:none;}你好你好你
前端学习之三种css样式写法
MissPSTime
选择器/*内嵌式样式书写*/-->,不使用-->后代选择器标签选择器标签选择器标签选择器
2019年面试遇到的笔试题
程序猿阿峰
前端面试,肯定是少不了笔试题,果然,今天去面试就遇到的笔试题,慌了一批。回来赶紧整理了一下一、css3的常用的新特性?flex布局和传统布局有什么区别?css3的新特性那就多啦,简单的列举了几个:过渡transition:CSS属性,花费时间,效果曲线(默认ease),延迟时间(默认0)动画animation:动画名称,一个周期花费时间,运动曲线(默认ease),动画延迟(默认0),播放次数(默认
web前端达到什么水平,才能找到工作?
cj瑾瑜
前端 html javascript css css3
一、前端是什么?前端即网站前台部分,也叫前端开发,运行在PC端,移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展,HTML5,CSS3,前端框架的应用,跨平台响应式网页设计能够适应各种屏幕分辨率,完美的动效设计,给用户带来极高的用户体验。(核心技术:HTML、CSS、JavaScript)核心技术是前端开发中最基本也是最必须的三个技能。前端的开发中,在页面的布局时,HTML将元素进行定义
制作炫酷个人网页:用 HTML 和 CSS3 展现你的风格
Passion不晚
前端 html css3 前端
–你是否觉得自己的网站应该看起来更炫酷?今天我将教你如何使用HTML和CSS3制作一个拥有炫酷动画和现代设计风格的个人网页,让它在任何设备上看起来都无敌酷炫!哈哈哈哈哈哈哈哈,我感觉自己有点中二哈哈哈哈~目录炫酷设计理念构建HTML结构CSS3炫酷美化炫酷效果预览1.炫酷设计理念在炫酷网页中,我们将使用:全屏背景渐变:让页面背景充满动感的色彩变化。文字动画:为标题和内容添加动态效果,让它们“飞”入
angular的viewChild和viewChildren
yang295242361
angular.js javascript 前端
属性选择器,用来从模板视图上获取匹配的元素。可以在ngAfterViewInit中获取到查询的元素。格式:ViewChild(selector:string|Function|Type,opts?:{read?:any;static?:boolean}):any1:元数据属性selector:用于查询指令类型或名字。read:告诉viewChild返回什么类型的数据,取值可以是ElementRef
CSS3新特性
FL1623863121
css3 前端 css
CSS3新特性CSS3是最新的CSS标准,旨在扩展CSS2.1。圆角通过border-radius属性可以给任何元素制作圆角。border-radius:所有四个边角border-*-*-radius属性的缩写。border-top-left-radius:定义了左上角的弧度。border-top-right-radius:定义了右上角的弧度。border-bottom-right-radius:
如何将dom转化为pdf
Olivia小饼干
javascript html dom
1.先局部打印方法一:通过id选择器来替换内容打印2.这样打印转化成PDF是调用浏览器默认的功能存在的问题就是echarts生成的canvas显示不出来这样就要到以下方法:3.htmljs打印图片不显示canvas将canvas转化成base64用img标签显示出来4.浏览器默认的打印可以转化成PDF,选中就行了
CSS思维导图
weixin_45544617
html 前端 css
一、概念css——cascadingstylesheet(层叠样式表)作用:规定html元素如何在网页中显示特点:实现了结构与表现相分离(可维护性更高)二、css语法选择器{属性:属性值;}eg:h1{color:red;}三、样式表的创建1.行内样式(内联样式)eg:hello2.内部样式(嵌入式样式)eg:h1{color:red;}注:建议将style标签放在head部分3.外部样式表首先创
vue2快速入门
m0_66357705
vue.js 前端 javascript
vue2创建HTML界面,引用Vue.js文件 编写视图 {{message}} {{type}}:插值表达式变量三元运算符函数调用算数运算在JS代码区域,创建Vue核心对象,定义数据模型 --> //创建一个新的Vue实例 newVue({ //指定Vue实例挂载到的DOM元素,使用'#app'选择器找到id为app的元素 el:"#app", //
VUE3学习路线
蜡笔小新星
Vue 学习 vue 经验分享
以下是一份详细的Vue3学习路线,涵盖从基础到进阶的各个方面,以帮助你系统掌握Vue3开发。第一阶段:基础知识理解前端基础HTML:了解文档结构,常用标签,语义化HTML。CSS:学习选择器、布局、Flexbox和Grid,基本的样式应用。JavaScript:理解基本语法、DOM操作、事件处理、异步编程(Promises,async/await),以及ES6+特性(如箭头函数、解构赋值、模块化)
479.迪斯尼公主动漫主题网页 大学生期末大作业 Web前端网页制作 html+css+js
仙女网页制作
Web网页设计实例 动漫 前端 课程设计 html
目录一、网页概述二、网页文件三、网页效果四、代码展示1.html2.CSS3.JS五、总结1.简洁实用2.使用方便3.整体性好4.形象突出5.交互式强六、更多推荐欢迎光临仙女的网页世界!这里有各行各业的Web前端网页制作的案例,样式齐全新颖,并持续更新!感谢CSDN,提供了这么好的知识学习、技术交流的平台,让我们在这里相遇,小伙伴们,来吧,让我们一起开启Web前端网页制作的奇妙之旅!说起Web前端
CSS学习14[重点]--定位、边偏移、定位模式
乌鸦不像写字台
css学习 css 学习 前端
定位前言一、定位二、定位模式1.静态定位static2.相对定位relative3.绝对定位absolute4.子绝父相5.绝对定位的盒子水平居中6.固定定位(fixed)7.叠放次序(z)三、四种定位总结四、定位模式转换前言为什么学习定位?应用场景:图片上移动的物体、突出的部分、导航栏…一、定位边偏移top:100px;bottom:;left:;right:;定位模式选择器{position:
CSS基本语法结构
nice66660
css 前端 开发语言 java idea 算法 数据结构
1.CSS基本语法结构文章目录1.CSS基本语法结构2.HTML中引入CSS样式2.1行内样式2.2内部样式表2.3外部样式表2.3.1链接式2.3.2导入式2.4CSS基本选择器2.4.1标签选择器2.4.2类选择器2.4.3ID选择器3.CSS的高级选择器3.1层次选择器3.1.1后代选择器3.1.2子代选择器3.1.3相邻兄弟选择器3.1.4通用兄弟选择器3.2结构伪类选择器3.3属性选择器
jQuery选择器
VaporGas
前端 jquery 前端 javascript 学习
jQuery选择器jQuery选择器类似于CSS选择器,用来选取网页中的元素$("h3").css("background","#09F");代码分析:获取并设置网页中所有元素的背景“h3”为选择器语法,必须放在$()中$(“h3”)返回jQuery对象.css()是为jQuery对象设置样式的方法jQuery选择器分类jQuery选择器功能强大,种类也很多,分类如下:类CSS选择器基本选择器层次
html animation 属性,css3学习--css3动画详解一(animation属性)
蜗牛老湿
html animation 属性
***介绍的属性并不完全,写的都是我认为容易混淆的难点属性,所以属性会在最后综合案例展示~Keyframes介绍:Keyframes被称为关键帧,其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{…}”,括号中就是一些不同时间段样式规则。@keyframeschangecolor{0%{background:red;}100%{b
css3动画延迟运行 animation-delay
努力,加油,奋斗
笔记
1.语法animation:namedurationtiming-functiondelayiteration-countdirectionfill-modeplay-state;2.说明name指定要绑定到选择器的关键帧的名称duration动画指定需要多少秒或毫秒完成timing-function设置动画将如何完成一个周期delay设置动画在启动前的延迟间隔。iteration-count定义
CSS前端经典面试题及解析——小白入门必备
2301_82243710
程序员 前端 css
12.如何实现一个使用非标准字体的网页设计?使用@font-face并为不同的font-weight定义font-family。13.解释浏览器如何确定哪些元素与CSS选择器匹配。这部分与上面关于编写高效的CSS有关。浏览器从最右边的选择器(关键选择器)根据关键选择器,浏览器从DOM中筛选出元素,然后向上遍历被选元素的父元素,判断是否匹配。选择器匹配语句链越短,浏览器的匹配速度越快。例如,对于形如
前端基础面试题·第二篇——CSS(其二)
DT——
前端面试 前端 css
1.CSS选择器的优先性:!important-强制生效样式-有即生效行内样式-有即生效权重:1000id选择器权重:100类选择器,伪类,属性选择器权重:10元素选择器,伪元素选择器,权重:1通配符,兄弟,后代,子代,权重:02.CSS继承性1.继承属性:1.字体系列属性font,font-family,font-weight,font-size,font-style,font-variant等
多线程编程之存钱与取钱
周凡杨
java thread 多线程 存钱 取钱
生活费问题是这样的:学生每月都需要生活费,家长一次预存一段时间的生活费,家长和学生使用统一的一个帐号,在学生每次取帐号中一部分钱,直到帐号中没钱时 通知家长存钱,而家长看到帐户还有钱则不存钱,直到帐户没钱时才存钱。
问题分析:首先问题中有三个实体,学生、家长、银行账户,所以设计程序时就要设计三个类。其中银行账户只有一个,学生和家长操作的是同一个银行账户,学生的行为是
java中数组与List相互转换的方法
征客丶
JavaScript java jsonp
1.List转换成为数组。(这里的List是实体是ArrayList)
调用ArrayList的toArray方法。
toArray
public T[] toArray(T[] a)返回一个按照正确的顺序包含此列表中所有元素的数组;返回数组的运行时类型就是指定数组的运行时类型。如果列表能放入指定的数组,则返回放入此列表元素的数组。否则,将根据指定数组的运行时类型和此列表的大小分
Shell 流程控制
daizj
流程控制 if else while case shell
Shell 流程控制
和Java、PHP等语言不一样,sh的流程控制不可为空,如(以下为PHP流程控制写法):
<?php
if(isset($_GET["q"])){
search(q);}else{// 不做任何事情}
在sh/bash里可不能这么写,如果else分支没有语句执行,就不要写这个else,就像这样 if else if
if 语句语
Linux服务器新手操作之二
周凡杨
Linux 简单 操作
1.利用关键字搜寻Man Pages man -k keyword 其中-k 是选项,keyword是要搜寻的关键字 如果现在想使用whoami命令,但是只记住了前3个字符who,就可以使用 man -k who来搜寻关键字who的man命令 [haself@HA5-DZ26 ~]$ man -k
socket聊天室之服务器搭建
朱辉辉33
socket
因为我们做的是聊天室,所以会有多个客户端,每个客户端我们用一个线程去实现,通过搭建一个服务器来实现从每个客户端来读取信息和发送信息。
我们先写客户端的线程。
public class ChatSocket extends Thread{
Socket socket;
public ChatSocket(Socket socket){
this.sock
利用finereport建设保险公司决策分析系统的思路和方法
老A不折腾
finereport 金融保险 分析系统 报表系统 项目开发
决策分析系统呈现的是数据页面,也就是俗称的报表,报表与报表间、数据与数据间都按照一定的逻辑设定,是业务人员查看、分析数据的平台,更是辅助领导们运营决策的平台。底层数据决定上层分析,所以建设决策分析系统一般包括数据层处理(数据仓库建设)。
项目背景介绍
通常,保险公司信息化程度很高,基本上都有业务处理系统(像集团业务处理系统、老业务处理系统、个人代理人系统等)、数据服务系统(通过
始终要页面在ifream的最顶层
林鹤霄
index.jsp中有ifream,但是session消失后要让login.jsp始终显示到ifream的最顶层。。。始终没搞定,后来反复琢磨之后,得到了解决办法,在这儿给大家分享下。。
index.jsp--->主要是加了颜色的那一句
<html>
<iframe name="top" ></iframe>
<ifram
MySQL binlog恢复数据
aigo
mysql
1,先确保my.ini已经配置了binlog:
# binlog
log_bin = D:/mysql-5.6.21-winx64/log/binlog/mysql-bin.log
log_bin_index = D:/mysql-5.6.21-winx64/log/binlog/mysql-bin.index
log_error = D:/mysql-5.6.21-win
OCX打成CBA包并实现自动安装与自动升级
alxw4616
ocx cab
近来手上有个项目,需要使用ocx控件
(ocx是什么?
http://baike.baidu.com/view/393671.htm)
在生产过程中我遇到了如下问题.
1. 如何让 ocx 自动安装?
a) 如何签名?
b) 如何打包?
c) 如何安装到指定目录?
2.
Hashmap队列和PriorityQueue队列的应用
百合不是茶
Hashmap队列 PriorityQueue队列
HashMap队列已经是学过了的,但是最近在用的时候不是很熟悉,刚刚重新看以一次,
HashMap是K,v键 ,值
put()添加元素
//下面试HashMap去掉重复的
package com.hashMapandPriorityQueue;
import java.util.H
JDK1.5 returnvalue实例
bijian1013
java thread java多线程 returnvalue
Callable接口:
返回结果并且可能抛出异常的任务。实现者定义了一个不带任何参数的叫做 call 的方法。
Callable 接口类似于 Runnable,两者都是为那些其实例可能被另一个线程执行的类设计的。但是 Runnable 不会返回结果,并且无法抛出经过检查的异常。
ExecutorService接口方
angularjs指令中动态编译的方法(适用于有异步请求的情况) 内嵌指令无效
bijian1013
JavaScript AngularJS
在directive的link中有一个$http请求,当请求完成后根据返回的值动态做element.append('......');这个操作,能显示没问题,可问题是我动态组的HTML里面有ng-click,发现显示出来的内容根本不执行ng-click绑定的方法!
 
【Java范型二】Java范型详解之extend限定范型参数的类型
bit1129
extend
在第一篇中,定义范型类时,使用如下的方式:
public class Generics<M, S, N> {
//M,S,N是范型参数
}
这种方式定义的范型类有两个基本的问题:
1. 范型参数定义的实例字段,如private M m = null;由于M的类型在运行时才能确定,那么我们在类的方法中,无法使用m,这跟定义pri
【HBase十三】HBase知识点总结
bit1129
hbase
1. 数据从MemStore flush到磁盘的触发条件有哪些?
a.显式调用flush,比如flush 'mytable'
b.MemStore中的数据容量超过flush的指定容量,hbase.hregion.memstore.flush.size,默认值是64M 2. Region的构成是怎么样?
1个Region由若干个Store组成
服务器被DDOS攻击防御的SHELL脚本
ronin47
mkdir /root/bin
vi /root/bin/dropip.sh
#!/bin/bash/bin/netstat -na|grep ESTABLISHED|awk ‘{print $5}’|awk -F:‘{print $1}’|sort|uniq -c|sort -rn|head -10|grep -v -E ’192.168|127.0′|awk ‘{if($2!=null&a
java程序员生存手册-craps 游戏-一个简单的游戏
bylijinnan
java
import java.util.Random;
public class CrapsGame {
/**
*
*一个简单的赌*博游戏,游戏规则如下:
*玩家掷两个骰子,点数为1到6,如果第一次点数和为7或11,则玩家胜,
*如果点数和为2、3或12,则玩家输,
*如果和为其它点数,则记录第一次的点数和,然后继续掷骰,直至点数和等于第一次掷出的点
TOMCAT启动提示NB: JAVA_HOME should point to a JDK not a JRE解决
开窍的石头
JAVA_HOME
当tomcat是解压的时候,用eclipse启动正常,点击startup.bat的时候启动报错;
报错如下:
The JAVA_HOME environment variable is not defined correctly
This environment variable is needed to run this program
NB: JAVA_HOME shou
[操作系统内核]操作系统与互联网
comsci
操作系统
我首先申明:我这里所说的问题并不是针对哪个厂商的,仅仅是描述我对操作系统技术的一些看法
操作系统是一种与硬件层关系非常密切的系统软件,按理说,这种系统软件应该是由设计CPU和硬件板卡的厂商开发的,和软件公司没有直接的关系,也就是说,操作系统应该由做硬件的厂商来设计和开发
富文本框ckeditor_4.4.7 文本框的简单使用 支持IE11
cuityang
富文本框
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>知识库内容编辑</tit
Property null not found
darrenzhu
datagrid Flex Advanced propery null
When you got error message like "Property null not found ***", try to fix it by the following way:
1)if you are using AdvancedDatagrid, make sure you only update the data in the data prov
MySQl数据库字符串替换函数使用
dcj3sjt126com
mysql 函数 替换
需求:需要将数据表中一个字段的值里面的所有的 . 替换成 _
原来的数据是 site.title site.keywords ....
替换后要为 site_title site_keywords
使用的SQL语句如下:
updat
mac上终端起动MySQL的方法
dcj3sjt126com
mysql mac
首先去官网下载: http://www.mysql.com/downloads/
我下载了5.6.11的dmg然后安装,安装完成之后..如果要用终端去玩SQL.那么一开始要输入很长的:/usr/local/mysql/bin/mysql
这不方便啊,好想像windows下的cmd里面一样输入mysql -uroot -p1这样...上网查了下..可以实现滴.
打开终端,输入:
1
Gson使用一(Gson)
eksliang
json gson
转载请出自出处:http://eksliang.iteye.com/blog/2175401 一.概述
从结构上看Json,所有的数据(data)最终都可以分解成三种类型:
第一种类型是标量(scalar),也就是一个单独的字符串(string)或数字(numbers),比如"ickes"这个字符串。
第二种类型是序列(sequence),又叫做数组(array)
android点滴4
gundumw100
android
Android 47个小知识
http://www.open-open.com/lib/view/open1422676091314.html
Android实用代码七段(一)
http://www.cnblogs.com/over140/archive/2012/09/26/2611999.html
http://www.cnblogs.com/over140/arch
JavaWeb之JSP基本语法
ihuning
javaweb
目录
JSP模版元素
JSP表达式
JSP脚本片断
EL表达式
JSP注释
特殊字符序列的转义处理
如何查找JSP页面中的错误
JSP模版元素
JSP页面中的静态HTML内容称之为JSP模版元素,在静态的HTML内容之中可以嵌套JSP
App Extension编程指南(iOS8/OS X v10.10)中文版
啸笑天
ext
当iOS 8.0和OS X v10.10发布后,一个全新的概念出现在我们眼前,那就是应用扩展。顾名思义,应用扩展允许开发者扩展应用的自定义功能和内容,能够让用户在使用其他app时使用该项功能。你可以开发一个应用扩展来执行某些特定的任务,用户使用该扩展后就可以在多个上下文环境中执行该任务。比如说,你提供了一个能让用户把内容分
SQLServer实现无限级树结构
macroli
oracle sql SQL Server
表结构如下:
数据库id path titlesort 排序 1 0 首页 0 2 0,1 新闻 1 3 0,2 JAVA 2 4 0,3 JSP 3 5 0,2,3 业界动态 2 6 0,2,3 国内新闻 1
创建一个存储过程来实现,如果要在页面上使用可以设置一个返回变量将至传过去
create procedure test
as
begin
decla
Css居中div,Css居中img,Css居中文本,Css垂直居中div
qiaolevip
众观千象 学习永无止境 每天进步一点点 css
/**********Css居中Div**********/
div.center {
width: 100px;
margin: 0 auto;
}
/**********Css居中img**********/
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
Oracle 常用操作(实用)
吃猫的鱼
oracle
SQL>select text from all_source where owner=user and name=upper('&plsql_name');
SQL>select * from user_ind_columns where index_name=upper('&index_name'); 将表记录恢复到指定时间段以前
iOS中使用RSA对数据进行加密解密
witcheryne
ios rsa iPhone objective c
RSA算法是一种非对称加密算法,常被用于加密数据传输.如果配合上数字摘要算法, 也可以用于文件签名.
本文将讨论如何在iOS中使用RSA传输加密数据. 本文环境
mac os
openssl-1.0.1j, openssl需要使用1.x版本, 推荐使用[homebrew](http://brew.sh/)安装.
Java 8
RSA基本原理
RS