),可以通过vertical-align属性来控制其子元素的垂直位置,使子元素居中;
. outer{
display: table- cell;
width: 400 px;
height: 400 px;
background- color: yellowgreen;
vertical- align: middle;
}
. inner{
width: 200 px;
height: 200 px;
background- color: black;
margin: 0 auto;
}
5 表单
5.1 注意事项
如果向后台提交数据,需要给元素指定name属性;
5.2 button和input
< button type= "button" > 登录< / button>
< button type= "submit" > 提交< / button>
< button type= "reset" > 重置< / button>
button和input的效果相同,但是由于input使自闭合元素,所以相对来说button操作空间更大;
5.3 相关属性
< ! -- 禁用:数据无法提交到后台 -- >
< input type= "text" name= "" id= "" disabled>
< ! -- 只读 -- >
< input type= "text" name= "" id= "" readonly>
< ! -- 自动获取焦点 -- >
< input type= "text" name= "" id= "" autofocus>
二、css
1. 编写的位置
1.1 内联样式
缺点:一个样式只能作用于一个元素,不可复用;如需修改,维护困难;
1.2 内部样式表
在head 中的style标签中编写样式。 优点:可以为多个标签设置一个样式,且维护方便; 缺点:其它html页面使用当前页面的样式时不方便;
1.3 外部样式表
将样式编写在css文件中,然后在html中引入外部样式
; 优点:多个html页面可以复用同一个css文件,方便维护;可以利用浏览器的缓存机制,加快了页面的加载速度,提高用户体验;
2.css选择器
2.1 元素选择器
2.2 类选择器
2.3 id选择器
2.4 通配选择器
选中页面中的所有元素
* {
}
2.5 交集选择器
作用:选中同时符合多个条件的元素 格式:选择器1选择器2选择器3…选择器n{} 注意:如果有元素选择器,元素选择器一定要放到最前边
p. p1{
color: blue;
}
. a. b. c{ }
2.6 并集选择器
格式:选择器1,选择器2,…,选择器n{}
2.6 子元素选择器
格式:父元素 > 子元素{}
2.6 后代选择器
格式:祖先 后代{}
2.6 兄弟选择器
选择紧挨着的下一个兄弟元素前一个 + 后一个{}
选择后边的所有兄弟元素 兄 ~ 弟{}
2.7 属性选择器
[属性名]{} 选择包含指定属性的元素 [属性名=属性值]{} 选择包含指定属性和属性值的元素 [属性名^=属性值]{} 选择属性值以指定值开头的元素 [属性名$=属性值]{} 选择属性值以指定值结尾的元素 [属性名*=属性值]{} 选择属性值包含指定值的元素
2.8 伪类选择器伪类
伪类:不存在的类,特殊的类,用来描述一个元素 的特殊状态,比如第一个元素,被点击的元素; 伪类一般都是使用:开头;
:first-child
第一个子元素
:last-child
最后一个子元素
:nth-child(a)
第a个子元素,从0开始,a等于n时全选,a等于2n或者even时选择偶数位的子元素,a等于2n+1或者odd时选择奇数位子元素 以上伪类是根据所有的子元素进行排序的
:first-of-type
第一个子元素
:last-of-type
最后一个子元素
:nth-of-type(a)
第a个子元素,从1开始,a等于n时全选,a等于2n或者even时选择偶数位的子 以上伪类是根据同类型的子元素进行排序的
例:
< div>
< p> 123123 < / p>
< span> 0 < / span>
< span> 1 < / span>
< span> 2 < / span>
< / div>
div span: first- child{
color: brown
}
div span: first- of - type{
color: brown
}
2.9 超链接的伪类
:link 表示没有访问过的链接;
:visited 表示访问过的链接(由于隐私的原因,只能修改元素的颜色);
:hover 表示鼠标放上去时的状态;
:active 表示鼠标点击时的状态;
2.10 伪元素选择器
伪元素:表示页面中一些特殊的并不真实存在的元素(操作元素中的特殊位置),用::开头;
::first-letter{} 第一个字母
::first-line{} 第一行
::selection{} 鼠标选中的内容
::before{} 元素的开始(必须配合content属性使用)
::after{} 元素的最后(必须配合content属性使用)
p: : before{
content: "abc" ;
color: red
}
3 样式的继承
并不是所有的样式都会被继承,可以去w3school中查看;
4 选择器的优先级
5 像素和百分比/em和rem
5.1 像素
屏幕是由一个个小点点组成,每个小点就是一个像素;像素点越小,屏幕显示得就越清晰;
像素分为css像素和物理像素。物理像素是固定的,由屏幕决定;而css像素则是编写网页时所用的像素;
浏览器会将css像素转换成物理像素,所以一个css像素对应物理像素的个数由浏览器决定,默认一个css像素对应一个物理像素;
视口就是屏幕中用来显示网页的区域,可以通过缩放来调整css像素和物理像素的比例;
5.2 百分比 em和rem
将元素属性值设置为相对于其父元素属性的百分比,这样其大小会随着父元素的变化而变化;
em是根据元素自身的字体大小来计算的,1em=1font-size;
rem是根据根元素的字体大小来计算的;
6 RGB值/hsl
color: hsl ( 250 , 10 % , 50 % )
7 文档流
7.1 概念
网页是一个多层结构,一层摞着一层,我们看到的是最顶层,而文档流是最底层,是网页的基础,我们创建的元素默认都是在文档流中进行排列的;对我们来说,元素主要有两种状态:在文档流中和不在文档流中;
7.2 元素特点
块元素:独占一行,默认高度是被内容撑开的高度,默认宽度是父元素的宽度;
行内元素:不独占一行,默认高度是被内容撑开的高度,默认宽度是其中内容的宽度;
7.3 盒子的大小
8 盒子模型
一个盒子的可见大小由内容区、内边距、边框共同决定,计算盒子大小时需将三者加起来
8.1 内容区
所有子元素和文本内容都在内容区中排列;
内容区的大小是由width和height两个属性决定的;
8.2 边框
边框属于盒子的边缘,边框里面就是盒子内部,出了边框就是盒子的外部;
边框的大小会影响整个盒子的大小;
边框有三个属性:宽度border-width、颜色border-color、样式border-style;
border简写,通过border可以同时设置边框的三个属性,并且没有顺序要求 ;border:10px red solid;
除了border外,还有border-xxx(xxx可以是top,left,right,bottom);
8.3 边框宽度
边框的默认宽度是3px;
border-width: 上 右 下 左(顺时针);border-width:上 左右 下; border-width: 上下 左右;border-width:上下左右;
单独设置各边的宽度:border-xx-width:10px(xx可以是top,left,right,bottom);
8.4 边框颜色
border-color可以省略不写,默认是color的颜色;
各边颜色的设置和border-width相同;
8.5 边框样式
border-style如果不写,则其默认值是none,此时没有边框;
border-style有solid,double,dashed,dotted四个属性值;
各边样式的设置和border-width相同;
8.6 内边距
内边距的设置会影响到盒子的大小,背景颜色会延伸到内边距;
padding简写,可同时指定上下左右的内边距;
8.7 外边距
外边距不会影响盒子可见区域的大小,但会影响盒子的位置;
margin-top和margin-left会使盒子自身移动,而margin-bottom和margin-right会使其它元素移动;
margin-top可以设置负值来向上移动;
8.8 水平方向的布局
元素在水平方向的布局由margin-left,border-left,padding-left,width,padding-right,border-right,margin-right共同决定;
一个元素在其父元素中的水平布局必须满足margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 父元素width;
如果等式不成立,则会自动调整。没有属性等于auto时,则会调整margin-right的值;如果某个值是auto,则会调整auto;
margin:0 auto;
会使元素居中是因为设置width后如果左右外边距都是auto,则两个外边距相同,那么元素自然就处于居中的位置;
8.9 垂直方向布局
overflow的几个属性;
8.10 外边距的折叠
8.11 轮廓、阴影和圆角
outline用来设置元素的轮廓,用法和border一样;区别在于outline不会增加元素的可见大小,不会影响页面布局;
box-shadow用来设置元素的阴影,阴影不会影响页面的布局;box-shadow:10px 10px 50px rgba(0, 0 , 0, .3);
四个参数分别是水平偏移量(正值向右偏移)、垂直偏移量(正值向下偏移)、阴影的模糊半径、阴影颜色;
border-radius
9 行内元素的盒模型
9.1 display
display可以将行内元素转化成块元素,也可以将块元素转换成行内元素;
inline-block行内块:既可以设置高度和宽度,又不会独占一行;
10 浏览器的默认样式
通常情况下浏览器会为一些元素设置默认样式,默认样式的存在会影响浏览器的布局,所有要去除默认样式;
一般方法:
* {
margin: 0 ;
padding: 0 ;
}
进阶方法,引入外部css文件
11 练习
11.1 网易新闻
将h2设置为inline-block,既可以设置高度和宽度,又不会独占一行;
父子元素的边框想要重叠,可以将子元素的margin-top设置为负值;
12 浮动
12.1 特点
文字不会被浮动元素所覆盖,因为浮动最初设计的目的就是为了实现文字环绕效果的 ;
设置浮动之后,块元素和行内元素都会具有行内块 的特点;
12.2 导航条练习
使a标签充满整个li标签,可以将a标签的display设置为block;
12.3 高度塌陷和BFC
高度塌陷的原因是什么? 父元素的高度是由子元素撑起来的,当子元素浮动后,其会脱离文档流,将无法撑起父元素的高度,导致父元素的高度丢失;
高度塌陷&外边距重叠的解决方法 方法一: 设置父元素的高度 我们可以将父元素的高度写死,以避免塌陷的问题出现,但是一旦高度写死,父元素的高度将不能自动适应子元素的高度,所以这种方案是不推荐使用的。 方法二: BFC 根据W3C的标准,在页面中元素都一个隐含的属性叫做Block Formatting Context(块状格式化环境 ) 简称BFC,该属性可以设置打开或者关闭,默认是关闭的。 当开启元素的BFC以后,元素将会具有如下的特性: 1.父元素的垂直外边距不会和子元素重叠 2.开启BFC的元素不会被浮动元素所覆盖 3.开启BFC的元素可以包含浮动的子元素 如何开启(父)元素的BFC 1.设置(父)元素浮动 使用这种方式开启,虽然可以撑开父元素,但是会导致父元素的宽度丢失 而且使用这种方式也会导致下边的元素上移,不能解决问题 2.设置(父)元素绝对定位 3.设置(父)元素为inline-block 可以解决问题,但是会导致宽度丢失,不推荐使用这种方式 4.将(父)元素的overflow设置为一个非visible的值 推荐方式:将overflow设置为hidden是副作用最小的开启BFC的方式 方法三: 可以直接在高度塌陷的父元素的最后,添加一个空白的div,由于这个div并没有浮动,所以他是可以撑开父元素的高度的,然后在对其进行清除浮动,这样可以通过这个空白的div来撑开父元素的高度 ,基本没有副作用 使用这种方式虽然可以解决问题,但是会在页面中添加多余的结构。 方法四: 通过after伪元素(方法三的升级版) 通过after伪元素向父元素中添加一个空白的块元素,然后使用clear清除浮动元素的影响,这样做的效果与方法三相同,而且不会再页面中添加多余的结构。
. clearfix: : after{
content: "" ;
display: block;
clear: both;
}
12.4 clear
使用clear属性来清除浮动元素对当前元素的影响; 原理:就是给当前元素添加了一个上外边距;
12.5 clearfix类
clearfix可以同时解决高度塌陷和外边距重叠的问题,只需要将clearfix添加到对应元素的class属性中即可;
13 定位
开启定位后就可以设置偏移量
13.1 相对定位
将元素的position属性设置为relative,即可开启相对定位;
开启相对定位后不设置偏移量,元素不会发生任何变化 (重要特性,子孙元素需要绝对定位时可以设置此属性)
相对定位是参照于元素在文档流中的位置进行定位的(就是以元素当前位置的左上角为原点进行偏移 )
相对定位会提高元素的层级,但是不会使元素脱离文档流;
相对定位不会改变元素的性质,块元素依然是块元素,行内元素依然是行内元素;
相对定位相当于灵魂脱壳,之前的位置依然被其占用;
开启相对定位的元素,其设置偏移量的效果和调整margin的效果相同;
13.2 绝对定位
将元素的position属性设置为absolute,即可开启绝对定位;
开启绝对定位后,元素的位置 不会发生变化,但是会脱离文档流,提高一个层级;
绝对定位会使元素具有行内块 的性质;
绝对定位相对于最近的开启定位的祖先元素 进行的定位;
会盖住文字;
13.3 包含块
13.4 固定定位
13.5 粘滞定位
可以用来实现导航栏的吸顶效果;
13.6 绝对定位元素的位置
如何让元素居中 设置以下这些属性即可,即可让元素在其包含块中居中
position: absolute;
margin: auto;
left: 0 ;
right: 0 ;
top: 0 ;
bottom: 0 ;
13.7 元素的层级
13.8 轮播图练习
给包含块开启相对定位且不设置偏移量,既可以使子孙元素进行绝对定位,又不会影响页面的布局;
14 字体
14.1 字体族
@font-face{}写在style中;
font-family: '楷体', Courier, monospace;
最后一个属性值monospace指的是一类字体,如果前两个都没有,则去这类字体中找一个;
14.2 图标字体font awesome
可以通过font-size和color来调整字体的颜色和大小;
图标字体的类名可以去官网查看;
类名中的fas或fab是必须要加的;
14.3 通过伪元素来使用图标字体
li: : before{
content: '\f1b0' ;
font- family: 'Font Awesome 5 Free' ;
font- weight: 900 ;
color: blue
}
首先要找到图标的代号;
然后在all.css文件中查找其font-family,因为只有 .fab { font-family: 'Font Awesome 5 Brands'; font-weight: 400; }
和.fas { font-family: 'Font Awesome 5 Free'; font-weight: 900; }
是免费的,所以只用从这两种中找即可; 3.可以通过color和font-size来调整颜色和大小;
14.4 通过实体来使用图标字体
< i class = "fa" > & #xf0f3; < / i>
是固定的,f0f3和14.3中的代码是一样的;
14.5 iconfont
登录iconfont,将自己想要使用的图标添加到购物车中,一般选择纯色的图标字体,便于操作;
在购物车中点击添加至项目;
点击我的项目页面中的在线链接–预览字体查看使用方法;
15 行高
行高指的是单行文字的高度;
16 字体简写
font: 加粗 斜体 大小/行高 字体族;
17 文本样式
17.1 水平对齐text-align
left,right,center,justify
17.2 垂直对齐vertical-align
baseline 默认值 基线对齐
top 顶部对齐
bottom 底部对齐
middle 居中对齐
对于图片不能紧贴父元素的情况,可以将图片的vertical-align值设为top或者bottom;
17.3 设置网页处理空白 white-space
normal 默认值
nowrap 不换行
pre 保留空白
设置文字过多省略号效果
white- space: nowrap;
overflow: hidden;
text- overflow: ellipsis;
18 京东导航条
不需要超链接用span;
分割符可以用li标签,设置宽度和高度即可;
使用hover伪类就可以实现下拉框出现隐藏的功能;
父元素: hover 子元素{
display: block;
}
下拉框:
首先结构上要和上边的元素处于同一级别(兄弟元素),设置好宽高,然后开启绝对定位(子绝父相),通过调整属性right可以控制下拉框的朝向;
去除上下两个div接触部分的边框:设置上方div的padding-bottom值,设置下方div的top值,这两部的目的是让上方的div盖住下方div的边框,由于下方div开启定位后,层级变高,此时需要提高上方div的层级,先开启上方div的相对定位,然后设置其z-index使其大于下方div的层级,这样就完成了两个部分的无缝链接;
19 背景
20 雪碧图
因为左上角是坐标原点,所有偏移量都是负的;
三、 综合练习
1 顶部导航栏
1.1 命名
在这里插入代码片
1.2 body
body{
font: 14 px/ 1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB , Heiti SC , WenQuanYi Micro Hei, sans- serif;
color: #333 ;
min- width: 1226 px;
}
min-width是页面内容区的宽度,防止body过小的时候,容器溢出;
1.3 width
. w{
width: 1226 px;
margin: 0 auto;
}
设置一个w类,所有的内容区容器可以通用;
1.4 ul和li浮动
ul根据其位置设置向左向右浮动,li一般都设置为向左浮动;
1.5 a标签
a{
text- decoration: none;
color: #b0b0b0;
display: block;
}
1.6 分割线sep
方法一 :直接使用“|”来当分割线,然后设置其字体大小,颜色即可;
结构
< li class = "sep" > | < / li>
样式
` ` `javascript
. sep{
font- size: 12 px;
margin: 0 .3 em;
color: #424242 ;
}
`` 方法二 :直接设置li标签的宽度高度颜色;
结构
< li class = "spacer" > < / li>
样式
. spacer{
width: 1 px;
height: 10 px;
background- color: #ccc;
margin: 11 px 5 px 0 ;
padding: 0 ;
}
1.7 shopcar下拉框
为了保证在鼠标在下拉框时hover效果不消失,所以要把hover绑定在外层元素上面;
通过调整下拉框的right值,可以设置下拉框的位置;
. shopcar- bar{
width: 300 px;
height: 100 px;
position: absolute;
right: 0 ;
background- color: white;
display: none;
}
整体结构 a自身是行内元素,但是上边的样式将a设置成block了;
< li class = "shopcar" >
< a href= "#" class = "" > < i class = "iconfont icon-gouwuche" > < / i> < span> 购物车(0 )< / span> < / a>
< div class = "shopcar-bar" > < / div>
< / li>
1.8 下载app下拉框
因为下拉框也在超链接的范围内,所以把下拉框放到a标签中;
文字放到外部div中(与img同级),当div的宽度设置后,文字将被挤到二维码的下面,通过设定text-align:center让文本居中;
结构
< li class = "load-app" >
< a href= "#" > 下载app
< div class = "QR-code" >
< img src= "img/download.png" alt= "" >
小米商城App
< / div>
< / a>
< / li>
样式
. QR - code{
width: 124 px;
height: 148 px;
position: absolute;
right: - 50 px;
display: none;
}
. QR - code img{
width: 90 px;
height: 90 px;
margin: 17 px;
margin- bottom: 10 px;
}
. load- app: hover . QR - code{
box- shadow: 0 2 px 10 px rgb ( 0 0 0 / 15 % ) ;
line- height: 1 ;
text- align: center;
color: #333 ;
font- size: 14 px;
display: block;
}
小三角:利用div来实现;
. load- app: hover a: : after{
content: "" ;
border: 6 px solid transparent;
width: 0 ;
height: 0 ;
border- top: none;
border- bottom- color: #fff;
position: absolute;
bottom: 0 ;
left: 0 ;
right: 0 ;
margin: auto;
}
1.9 过渡效果
height: 0 ;
只要高度发生变化,需要0.3 s的时间去切换
transition:height 0.3 s;
先将需要隐藏的元素高度设置为0,然后通过hover将其元素设为原值;这样不用设置display来隐藏元素,而且可以设置过渡效果;
2 头部
2.1 logo
logo放在h1标签中,在h1中加入“小米官网",有利于被搜索引擎收录; 将“小米官网"的font-size设置为0或者将text-indent设为-9999 即可隐藏文字;
结构
< h1 class = "logo" title= "小米官网" >
小米官网
< a href= "#" > < / a>
< / h1>
样式
. header . logo a{
background: url ( img/ logo- mi2. png) no- repeat;
display: block;
background- size: 56 px 56 px;
height: 56 px;
}
2.2 logo的切换效果(视频中有,新版页面没有)
2.3 中间导航栏
隐藏元素并且占位置visibility:hidden;
2.4 下拉框
根据下拉框的宽度,确定其定位父元素(子绝父相);
hover的时候,要注意使用什么选择器;
2.5 搜索框
两个input标签之间存在空隙,是因为input标签换行了,让两个input标签紧挨着 或者让两者都浮动起来 ;
input中默认存在border和padding,可以手动调整;
button中存在默认属性box-size:border-box,边框内边距也会算在width和height中;
2.6 轮播图
图片放在div中,图片底部和div会有缝隙,此时需要设置图片的vertical-align为left或者right;
箭头位置
结构:两个箭头写在一个div中就可以
< div class = "jiantou" >
< a href= "javascript:;" class = "iconfont icon-xiangzuojiantou prev" > < / a>
< a href= "javascript:;" class = "iconfont icon-jiantou next" > < / a>
< / div>
样式
. jiantou a{
width: 41 px;
height: 69 px;
line- height: 69 px;
position: absolute;
top: 0 ;
bottom: 0 ;
margin: auto;
}
分别设置两个箭头的水平位置
. prev{
left: 234 px;
}
. next{
right: 0 ;
}
3 侧边导航栏
**目的:**让侧边框固定在视口的某个位置,并随着视口宽度的变化而自动调整; 实现原理: left + margin-left +border-left + padding-left + width + padding-right + +border-right + margin-right + right = 视口的宽度
其中left和right在默认情况下为auto,其余属性默认值都是0;利用left和right的默认值为auto的特性,将其中一个属性(right)设为视口宽度的百分比,此时另一个属性(left)为auto,通过调整margin-right的值来调整left的值,从而将其置于固定的位置; 注意事项: left和margin-left同时调整的时候元素的位置不会改变,因为两者都是以左边界为基准,一个增加一个减少,二者会抵消;
. back- top{
width: 26 px;
height: 206 px;
background- color: orange;
position: fixed;
bottom: 60 px;
right: 50 % ;
margin- right: - 639 px;
}
4 广告区
4.1 左侧6宫格
图标字体单独占用一行,所以display设置为block;因为此时是两行,所以垂直方向不能通过设置line-height来居中了,可以设置margin或者padding来居中;
关于内部的小边框,是通过伪元素来实现的;
ul{
list- style: none;
margin: 0 ;
padding: 0 ;
padding- top: 2 px;
padding- left: 6 px;
overflow: hidden;
}
ul li{
float: left;
position: relative;
}
ul li: : after{
content: "" ;
height: 1 px;
width: 67 px;
background- color: red;
position: absolute;
left: 0 ;
right: 0 ;
margin: 0 auto;
top: 0 ;
}
ul li: : before{
content: "" ;
height: 60 px;
width: 1 px;
background- color: red;
position: absolute;
left: 0 ;
top: 0 ;
bottom: 0 ;
margin: auto 0 ;
}
5 标题栏图标
在网站的根目录后加favicon.ico,即可访问网站的标题栏图标;https://www.mi.com/favicon.ico
通过link设置自己网页的标题栏图标即可;
6 代码压缩视频
目的:缩小代码体积,增快访问速度,提高用户体验; 原理:去除文件中的注释、空格、换行;
四、css高级
1 过渡
四个属性,延时时间要在持续时间之后,其余参数位置任意;
不同属性值之间以空格分隔;transition:margin-left 2s 2s;
2 动画
div{
width: 136 px;
height: 180 px;
margin: 0 auto;
border: 1 px solid red;
background- image: url ( img/ 2. jfif) ;
animation: test 1 s steps ( 4 ) infinite;
}
@keyframes test{
from {
background- position: 0 0 ;
}
to{
background- position: - 487 px 0 ;
}
}
3 变形平移(可用于设置居中)
3.1 xy轴平移
1. 指定宽高时使用绝对定位的特性来设置元素居中
div{
width: 100 px;
height: 100 px;
background- color: aqua;
position: absolute;
left: 0 ;
right: 0 ;
top: 0 ;
bottom: 0 ;
margin: auto;
}
2. 未指定宽高时使用平移来实现定位
div{
background- color: aqua;
position: absolute;
left: 50 % ;
top: 50 % ;
transform: translateX ( - 50 % ) translateY ( - 50 % )
}
3.2 元素浮动效果
transform设置元素平移并不会影响页面的布局
body{
background- color: #f5f5f5;
}
div{
width: 234 px;
height: 300 px;
background- color: #fff;
margin: 50 px auto;
transition: all .3 s;
}
div: hover{
box- shadow: 0 5 px 10 px rgba ( 0 , 0 , 0 , .5 ) ;
transform: translateY ( - 5 px) ;
}
3.3 z轴平移
3.4 旋转
3.5 时针案例
结构
< div class = "clock" >
< ! -- 外边的div进行旋转,而里面的指针随div一起旋转 -- >
< ! -- 秒针 -- >
< div class = "second-wrapper" >
< div class = "second" > < / div>
< / div>
< ! -- 分针 -- >
< div class = "minute-wrapper" >
< div class = "minute" > < / div>
< / div>
< ! -- 时针 -- >
< div class = "hour-wrapper" >
< div class = "hour" > < / div>
< / div>
< / div>
样式
< style>
. clock{
width: 150 px;
height: 150 px;
border: 5 px solid black;
border- radius: 50 % ;
margin: 150 px auto;
position: relative;
}
. clock> div{
position: absolute;
left: 0 ;
right: 0 ;
top: 0 ;
bottom: 0 ;
margin: auto;
}
. second- wrapper{
width: 140 px;
height: 140 px;
animation: run 10 s steps ( 60 ) infinite ;
}
. second{
height: 70 px;
width: 3 px;
background- color: black;
margin: 0 auto;
}
. minute- wrapper{
width: 120 px;
height: 120 px;
animation: run 600 s steps ( 60 ) infinite;
}
. minute{
height: 60 px;
width: 5 px;
background- color: black;
margin: 0 auto;
}
. hour- wrapper{
width: 100 px;
height: 100 px;
animation: run 7200 s linear delay infinite;
}
. hour{
height: 50 px;
width: 5 px;
background- color: red;
margin: 0 auto;
}
@keyframes run{
from {
transform: rotateZ ( 0 deg) ;
}
to{
transform: rotateZ ( 360 deg) ;
}
}
< / style>
3.6 缩放
鼠标键入图片放大效果
结构
< div>
< img src= "img/mi1.jpg" alt= "" >
< / div>
样式
< style>
div{
width: 400 px;
border: 1 px solid red;
overflow: hidden;
}
img{
width: 100 % ;
vertical- align: top;
transition: .3 s;
}
img: hover{
transform: scale ( 1.2 ) ;
}
< / style>
3.7 变形的原点
五、less(css增强版)
1 简介
安装easy-less插件后,创建less文件会自动编译成css文件;
less文件中单行注释//,其内容在对应的css文件中不会显示;也可以有css中的多行注释,会显示在css文件中;
2 变量
@a: white;
@b: box1;
@c: 200 px;
. box2{
background- color: @a;
width: @c;
}
. @{ b} {
width: @c;
background- image: url ( "@{b}/1.png" ) ;
}
. box3: extend ( . box2) {
height: @a;
& : hover{
border: 1 px solid red;
}
. box1 ( )
}
3 css到less的映射
六、弹性盒
1 弹性容器的样式
1.1 flex-direction
作用:指定容器中弹性元素的排列方式; 属性值:row 默认值 弹性元素在容器中自左向右 水平排列(相当于float:left) row-reverse 弹性元素在容器中自右向左 水平排列(相当于float:right) column 弹性元素在容器中自上向下 垂直排列 column-reverse 弹性元素在容器中自下向上 垂直排列
1.2 主轴/侧轴
主轴:弹性元素的排列方向; 侧轴:与主轴垂直的方向;
1.3 flex-wrap
1.4 flex-flow
可以同时设置flex-direction和flex-wrap,位置任意
1.5 justify-content
1.6 align-items
1.7 align-content
辅轴空白空间的分布,取值和justify-content相同;
1.8 设置容器中的弹性元素居中
display: flex;
justify- content: center;
align- items: center;
2 弹性元素的样式
2.1 flex-grow
作用:弹性元素的伸展系数 弹性容器有剩余空间时,弹性元素会按照比例进行伸展;
flex- grow: 1 ;
2.2 flex-shrink
作用:弹性元素的收缩系数 弹性容器不足以容纳弹性元素的时候,按比例进行收缩; 缩减多少是根据元素的大小和缩减系数共同决定的;
2.3 align-self
用来覆盖当前元素上的align-items
2.4 flex-basis
2.5 flex
可以同时设置三个属性:伸长 缩短 基础;
2.6 order
决定弹性元素的排列顺序
七、移动端布局
1 手机像素
一般情况下,移动端将视口的宽度设置为980px,如果pc端网页超出了这个宽度,那么移动端会将整个网页进行缩放从而将整个页面全部显示出来;
2 视口
视口是屏幕中用来显示网页内容的区域;
可以通过调节视口的大小,来调整css像素和物理像素的像素比;
将像素比设置为最佳像素比的视口大小称为完美视口,为了在移动端完美显示pc端网页,需要设置完美视口;
通过meta标签来设置视口
,device-width将页面的宽度设置为跟随设备屏幕的宽度,initial-scale设置页面的初始缩放比例;
3 vw
100vw=视口宽度;
八、响应式布局
1 定义
响应式布局是指网页根据不同的设备或者窗口大小呈现不同的状态;
2 媒体查询
2.1 定义
媒体查询为不同的设备或者不同的状态来分别设置样式,响应式布局的关键在于媒体查询;
2.2 类型
all 全部设备
print 打印设备(一般不用)
screen 带屏幕的设备
speech 屏幕阅读器(一般不用)
2.3 格式
可以写多个类型,用逗号隔开即可;
@media screen, print {
div{
width: 100 px;
height: 100 px;
background- color: black;
}
}
only关键字用于解决浏览器的兼容问题,有的浏览器不支持媒体查询但是认识screen,为了避免出现错误,在screen之前加上only,浏览器就不会识别出screen了;
@media only screen {
div{
width: 100 px;
height: 100 px;
background- color: black;
}
}
2.4 特性
and表示与,逗号表示或;
min-width和max-width设置断点,断点是样式切换的分界点;
@media only screen and ( min- width: 600 px) and ( max- width: 1000 px ) {
body{
background- color: black;
}
}
3 练习
3.1 logo图片
所给的图片是二倍图,所以需要将其大小减半;width和height减半的同时,也要将背景图片大小background-size减半;
logo要使用h1标签,a标签中要写上title并隐藏;
你可能感兴趣的:(前端技术,css,html5,html)
android 自定义曲线图,Android自定义View——贝赛尔曲线
weixin_39767513
android 自定义曲线图
个人博客:haichenyi.com。感谢关注本文针对有一定自定义View的童鞋,最好对贝赛尔曲线有辣么一丢丢了解,不了解也没关系。花5分钟看一下GcsSloop的安卓自定义View进阶-Path之贝塞尔曲线。本文的最终效果图:最终效果图.gif思路首先他是一个只有上半部分的正弦形状的水波纹,很规则。其次,他这个正弦图左右在移动。然后,就是它这个自定义View,上下也在移动,是慢慢增加的最后,优化
uni-app实现 步骤条
夏夏的码农
uni-app
实现如图样式html部分代码如下投资期限与收益0?'active':'default'">募集开始1?'active':'default'">募集结束2?'active':'default'">产品成立3?'active':'default'">产品到期0?'active-step1':'step1'">1?'active-st
大前端-postcss安装使用指南
黑夜照亮前行的路
postcss
PostCSS是一款强大的CSS处理工具,可以用来自动添加浏览器前缀、代码合并、代码压缩等,提升代码的可读性,并支持使用最新的CSS语法。以下是一份简化的PostCSS安装使用指南:一、安装PostCSS在你的项目目录中,通过npm(NodePackageManager)来安装PostCSS。打开命令行窗口,输入以下命令:bash复制代码npminstallpostcss--save-dev这将把
python转码
Desamond
python 开发语言
转码在许多场景中都有应用,以下是一些常见的场景:网页开发:当用户在网页上输入文本时,可能需要将特殊字符(如空格、引号、特殊符号等)进行转码,以防止这些字符对URL或HTML代码产生干扰。文件名处理:在处理文件名时,可能需要将特殊字符进行转码,以避免文件名被错误地解析或显示。数据传输:在数据传输过程中,为了确保数据的完整性和正确性,可能需要将数据中的特殊字符进行转码。数据存储:在数据库或数据存储中,
UNDERSTANDING HTML WITH LARGE LANGUAGE MODELS
liferecords
LLM 语言模型 人工智能 自然语言处理
UNDERSTANDINGHTMLWITHLARGELANGUAGEMODELS相关链接:arXiv关键字:大型语言模型、HTML理解、Web自动化、自然语言处理、机器学习摘要大型语言模型(LLMs)在各种自然语言任务上表现出色。然而,它们在HTML理解方面的能力——即解析网页的原始HTML,对于自动化基于Web的任务、爬取和浏览器辅助检索等应用——尚未被充分探索。我们为HTML理解模型(经过微调
Web前端Html的表单
任家伟
前端 html
表单的关键字:form标签表示一个表单区域action=“后端地址”method=“提交数据方式:get/post”input单行输入框type=“text”文本name=“定义名称名字自定义”向后端提交的键readonly=“readonly”只读,不可修改,但是可以提交disabled=“disabled”禁用组件不可修改,不能提交type=“password”密码框type=“radio”单
react native 总结
一切顺势而行
react native react.js javascript
reactapp.js相当与vueapp.vueimportReactfrom'react';import'./App.css';importReactRoutefrom'./router'import{HashRouterasRouter,Link}from'react-router-dom'classAppextendsReact.Component{constructor(props){su
程序员开发技术整理
laizhixue
学习 前端框架
前端技术:vue-前端框架element-前端框架bootstrap-前端框架echarts-图标组件C#后端技术:webservice:soap架构:简单的通信协议,用于服务通信ORM框架:对象关系映射,如EF:对象实体模型,是ado.net中的应用技术soap服务通讯:xml通讯ado.net:OAuth2:登录授权认证:Token认证:JWT:jsonwebtokenJava后端技术:便捷工
html版本号 webpack_html-webpack-plugin详解
weixin_39994949
html版本号 webpack
引言最近在react项目中初次用到了html-webapck-plugin插件,用到该插件的两个主要作用:为html文件中引入的外部资源如script、link动态添加每次compile后的hash,防止引用缓存的外部文件问题可以生成创建html入口文件,比如单页面可以生成一个html文件入口,配置N个html-webpack-plugin可以生成N个页面入口有了这种插件,那么在项目中遇到类似上面
HTML语言剖析
混沌破晓
HTML语言剖析Html简介-目录全写:HyperTextMark-upLanguage译名:超文本标识语言简释:一种为普通文件中某些字句加上标示的语言,其目的在于运用标签(tag)使文件达到预期的显示效果。由文字(字母,数字、标点符号)及标签组合而成。任何文字编辑器都可以,这里推荐用:Dreamweaver。1.Html特点:►描述性语言,结构语言,用于决定网页内容以什么样的形式显示;►通过标签
CDH 启停使用HiveServer2
金刚_30bf
翻译:https://www.cloudera.com/documentation/enterprise/latest/topics/cdh_ig_hiveserver2_start_stop.html版本:5.14.2HiveServer2是HiveServer的改进版本,支持Kerberos身份验证和多客户端并发访问。您可以使用Beeline客户端访问HiveServer2。警告:如果以远程模
HTML背景带视频的个人炫酷引导页源码
erthre
源码 php
正文:一款简洁大气得个人团队引导HTML单页,非常不错,LOGO支持自行更改替换,可以拿来做为团队官网也可以个人,只是单页没有后台。程序:wwhtxs.lanzouq.com/if6oE0i26ohi图片:
vue生命周期
涡看你就不是好人呐
vue.js javascript 前端
1.computed是在HTMLDOM加载后马上执行的,如赋值;2.methods则必须要有一定的触发条件才能执行,如点击事件;3.watch呢?它用于观察Vue实例上的数据变动。对应一个对象,键是观察表达式,值是对应回调。值也可以是方法名,或者是对象,包含选项。所以他们的执行顺序为:默认加载的时候先computed再watch,不执行methods;等触发某一事件后,则是:先methods再wa
C#使用ASP.NET Core Razor Pages构建网站(二)
林祖师
C# c# asp.net 开发语言
上一篇文章讲了HTTP协议的基本概念、客户端Web开发技术以及ASP.NETCore框架的关键特点和创建项目方法链接:C#使用ASP.NETCoreRazorPages构建网站(一)接下来继续了解ASP.NETCoreRazorPages构建网站的后续内容了解RazorPagesRazorPages允许开发人员轻松地将HTML标记和C#代码混合在一起,这是使用.cshtml扩展名的原因。默认情况下
webpack快速基础
风漫漫雨歇歇
webpack webpack 前端 前端框架
文章目录webpack快速基础1.概念1.1入口1.2输出(output)1.3loader1.4插件(plugin)2.建立项目,用于测试功能2.1安装webpack,2.2创建webpack配置文件,2.3配置package.json,运行项目3.配置mode开发环境4.配置entry编译入口5.配置output编译出口6.配置加载csswebpack快速基础1.概念webpack是现代Jav
vue-pdf 预览pdf (数据流)
reembarkation
vue.js pdf javascript
页面有个要预览pdf的需求,数据是从后台传递过来的数据流:1.安装插件:npminstallvue-pdf2.在页面引用:importpdffrom'vue-pdf'...components:{pdf},3.html中添加:4.通过接口获取数据:downloadFile({id:this.id}).then((res)=>{if((!res&&res.status!=200)||(res.dat
CSS color-mix() 函数
蚂蚁上的大象
前端的那些事 CSS css 前端
CSScolor-mix()函数是近年来CSS色彩模块新增的一项强大功能,允许开发者在样式表中直接混合两种或多种颜色。这一特性为设计师和开发者带来了更多创作空间,让网页的颜色设计变得更加生动和丰富。本文将带你了解color-mix()函数的使用方法及其在实际项目中的应用。什么是CSScolor-mix()函数?color-mix()是一个即将推出的CSS颜色函数,它能够根据指定的颜色模型(如RGB
DIV + CSS 布局:盒子内容超出宽度时,不换行,以滚动条形式水平滑动
01空间
常见场景解决方案 css html
滚动条水平滚动展示溢出内容htmlcss(less)思路html11112222333344445555666677778888css(less).outer{background-color:#39a9ed;overflow-x:auto;&::-webkit-scrollbar{display:none;}white-space:nowrap;.item{display:inline-bloc
【Docker】【nginx】docker安装nginx并映射宿主机配置文件地址
小丛的知识窝
nginx docker 运维
dockerrun-d-p80:80-v/root/docker/docker-nginx/nginx.conf:/etc/nginx/nginx.conf-v/root/docker/docker-nginx/html:/usr/share/nginx/html-v/root/docker/docker-nginx/logs:/var/log/nginx--namenginxnginx
Reviewing a fastq_mergepairs report to check for problems 信息搬运
代号北极能
信息来源https://www.drive5.com/usearch/manual/merge_report.htmlBelowisanexamplereportproducedbythe-reportoptionoffastq_mergepairs.Thisinformationisalsoshownontheterminal(standarderroroutputstream).Theopti
html5 websocket 手机,websocket在h5上正常,编译到手机上就连不上
猫研所
html5 websocket 手机
对接的网易云信微信IMSDK,在h5上能建立起连接,在手机端不行,截图是h5的链接,下面是app的日志:20:10:34.247连接websocket参数"wss://wlnimsc0.netease.im/socket.io/1/websocket/378166b5-af18-4372-a0a5-05aee5a1d882"atuni-app:///sdk/yunxin-wx/vendors/NI
JavaScript和HTML/CSS之间有什么区别?它们之间的关系是什么?
智伴科技
javascript html css
下面是一个简单的代码示例,展示了HTML、CSS和JavaScript是如何一起工作的:HTML,CSS,JavaScriptExample/*在HTML文档内使用内联CSS*/.greeting{color:blue;font-size:24px;}Hello,素材8网,www.sucai8.cnChangeText//在HTML文档内使用内联JavaScriptdocument.addEven
随笔:一件尴尬的小事
Doubt_Fact
今天下午,朋友找我帮忙,想让我帮忙写一个随机点名的程序,我满口答应了下来,不过我不怎么会写窗口应用,就问他可不可以以网页代替,他同意了。我便写了一个html文件,除了中间遇到一个小插曲,一个缺少的英文“,”被漏掉了,到最后一直无法正常显示……在完成后,我到网页上看到了一种把网页制作成程序的方法,只需利用程序nativefier来操作,这个程序最后基于Node.js。我又很快在我的windows机器
【大咖力荐 新手必备】软件开发入门,这300篇文章就够了!
高校俱乐部
软件开发 新手必备 数据编码 IP
小编在这里根据知识图谱整理了CSDN站内的优质文章300篇,帮助见习工程提升技术能力、实现系统化学习!基础IT技术文章300篇大合集包含:【信息/编码】进制转换25篇、数据编码25篇;【IP/组网】网关与网段25篇、IP协议26篇、主机与DNS23篇、访问控制37篇;【程序逻辑】JavaScript29篇、常用算法37篇;【Web基础】HTML31篇、CSS32篇、DOM与BOM23篇扫码添加小助
python flask 表单_python中flask应用(表单处理)
weixin_39771260
python flask 表单
本篇文章给大家带来的内容是关于python中flask应用(表单处理),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。1、为什么使用Flask-WTF?request对象公开了所有客户端发送的请求信息。特别是request.form可以访问POST请求提交的表单数据。尽管Flask的request对象提供的支持足以处理web表单,但依然有许多任务会变得单调且重复。表单的HTML代码
Java基础知识总结(下)
Yonagi833
Java 面经and八股 java 开发语言 职场和发展 程序人生 spring
本文部分内容节选自JavaGuide,地址:https://javaguide.cn/java/basis/java-basic-questions-03.html基础(上)→基础(中)→基础(下)异常Java异常类层次图概览Exception和Error有什么区别?在Java中,所有的异常都有一个共同的祖先java.lang包中的Throwable类.Throwable类有两个重要的子类:Exc
项目里面引入字体包react
前端小灰灰
项目里面引入字体包:①字体包放在public目录下,②新建一个font.css文件,//font.css@font-face{font-family:AlibabaSans;src:url('./font/AlibabaSans-Black.otf');}③在HTML文件全局引入④然后在less里面就能使用了:例:font-family:AlibabaSans;
CSS-DAY2
i330.
前端 css 前端
CSS-DAY22024/2/4Emmet语法快速生成HTML结构语法如果想要生成多个相同标签加上*就可以了比如div*3就可以快速生成3个div如果有父子级关系的标签,可以用>比如ul>li就可以了如果有兄弟关系的标签,用+就可以了比如div+p如果生成带有类名或者id名字的,直接写.demo或者#twotab键就可以了(默认是div,如需修改其他标签只需在.之前加上标签名即可,如p.color
问了一下 GPT--当前基于 React + TypeScript 的生态中 一名前端工程师需要具备哪些能力?
zoe_ya
前端 gpt react.js
在当前基于React+TypeScript的生态中,你需要掌握一系列的技能和知识,以构建现代化、高效能且可维护的前端应用程序。以下是一些关键领域的知识和技能点:基础知识HTML/CSS/JavaScript:理解语义化的HTML、CSS布局和定位技术以及现代JavaScript(ES6+)的特性。TypeScript:掌握TypeScript的基本语法、类型系统以及如何在React项目中使用Typ
react 和vue区别
小王学前端️
vue3 react.js vue.js 前端
React和Vue是两个非常流行的前端JavaScript框架,它们有许多相似之处,但也有一些关键的区别:设计理念:React更倾向于函数式编程,推崇组件的纯粹性和可预测性,而Vue则更倾向于易用性和灵活性,提供了更多的内置特性和语法糖。模板vsJSX:Vue使用基于HTML的模板语法,这使得开发者可以快速上手。而React使用JSX,它是JavaScript的语法扩展,允许在JavaScript
Spring的注解积累
yijiesuifeng
spring 注解
用注解来向Spring容器注册Bean。
需要在applicationContext.xml中注册:
<context:component-scan base-package=”pagkage1[,pagkage2,…,pagkageN]”/>。
如:在base-package指明一个包
<context:component-sc
传感器
百合不是茶
android 传感器
android传感器的作用主要就是来获取数据,根据得到的数据来触发某种事件
下面就以重力传感器为例;
1,在onCreate中获得传感器服务
private SensorManager sm;// 获得系统的服务
private Sensor sensor;// 创建传感器实例
@Override
protected void
[光磁与探测]金吕玉衣的意义
comsci
这是一个古代人的秘密:现在告诉大家
信不信由你们:
穿上金律玉衣的人,如果处于灵魂出窍的状态,可以飞到宇宙中去看星星
这就是为什么古代
精简的反序打印某个数
沐刃青蛟
打印
以前看到一些让求反序打印某个数的程序。
比如:输入123,输出321。
记得以前是告诉你是几位数的,当时就抓耳挠腮,完全没有思路。
似乎最后是用到%和/方法解决的。
而今突然想到一个简短的方法,就可以实现任意位数的反序打印(但是如果是首位数或者尾位数为0时就没有打印出来了)
代码如下:
long num, num1=0;
PHP:6种方法获取文件的扩展名
IT独行者
PHP 扩展名
PHP:6种方法获取文件的扩展名
1、字符串查找和截取的方法
1
$extension
=
substr
(
strrchr
(
$file
,
'.'
), 1);
2、字符串查找和截取的方法二
1
$extension
=
substr
面试111
文强chu
面试
1事务隔离级别有那些 ,事务特性是什么(问到一次)
2 spring aop 如何管理事务的,如何实现的。动态代理如何实现,jdk怎么实现动态代理的,ioc是怎么实现的,spring是单例还是多例,有那些初始化bean的方式,各有什么区别(经常问)
3 struts默认提供了那些拦截器 (一次)
4 过滤器和拦截器的区别 (频率也挺高)
5 final,finally final
XML的四种解析方式
小桔子
dom jdom dom4j sax
在平时工作中,难免会遇到把 XML 作为数据存储格式。面对目前种类繁多的解决方案,哪个最适合我们呢?在这篇文章中,我对这四种主流方案做一个不完全评测,仅仅针对遍历 XML 这块来测试,因为遍历 XML 是工作中使用最多的(至少我认为)。 预 备 测试环境: AMD 毒龙1.4G OC 1.5G、256M DDR333、Windows2000 Server
wordpress中常见的操作
aichenglong
中文注册 wordpress 移除菜单
1 wordpress中使用中文名注册解决办法
1)使用插件
2)修改wp源代码
进入到wp-include/formatting.php文件中找到
function sanitize_user( $username, $strict = false
小飞飞学管理-1
alafqq
管理
项目管理的下午题,其实就在提出问题(挑刺),分析问题,解决问题。
今天我随意看下10年上半年的第一题。主要就是项目经理的提拨和培养。
结合我自己经历写下心得
对于公司选拔和培养项目经理的制度有什么毛病呢?
1,公司考察,选拔项目经理,只关注技术能力,而很少或没有关注管理方面的经验,能力。
2,公司对项目经理缺乏必要的项目管理知识和技能方面的培训。
3,公司对项目经理的工作缺乏进行指
IO输入输出部分探讨
百合不是茶
IO
//文件处理 在处理文件输入输出时要引入java.IO这个包;
/*
1,运用File类对文件目录和属性进行操作
2,理解流,理解输入输出流的概念
3,使用字节/符流对文件进行读/写操作
4,了解标准的I/O
5,了解对象序列化
*/
//1,运用File类对文件目录和属性进行操作
//在工程中线创建一个text.txt
getElementById的用法
bijian1013
element
getElementById是通过Id来设置/返回HTML标签的属性及调用其事件与方法。用这个方法基本上可以控制页面所有标签,条件很简单,就是给每个标签分配一个ID号。
返回具有指定ID属性值的第一个对象的一个引用。
语法:
&n
励志经典语录
bijian1013
励志 人生
经典语录1:
哈佛有一个著名的理论:人的差别在于业余时间,而一个人的命运决定于晚上8点到10点之间。每晚抽出2个小时的时间用来阅读、进修、思考或参加有意的演讲、讨论,你会发现,你的人生正在发生改变,坚持数年之后,成功会向你招手。不要每天抱着QQ/MSN/游戏/电影/肥皂剧……奋斗到12点都舍不得休息,看就看一些励志的影视或者文章,不要当作消遣;学会思考人生,学会感悟人生
[MongoDB学习笔记三]MongoDB分片
bit1129
mongodb
MongoDB的副本集(Replica Set)一方面解决了数据的备份和数据的可靠性问题,另一方面也提升了数据的读写性能。MongoDB分片(Sharding)则解决了数据的扩容问题,MongoDB作为云计算时代的分布式数据库,大容量数据存储,高效并发的数据存取,自动容错等是MongoDB的关键指标。
本篇介绍MongoDB的切片(Sharding)
1.何时需要分片
&nbs
【Spark八十三】BlockManager在Spark中的使用场景
bit1129
manager
1. Broadcast变量的存储,在HttpBroadcast类中可以知道
2. RDD通过CacheManager存储RDD中的数据,CacheManager也是通过BlockManager进行存储的
3. ShuffleMapTask得到的结果数据,是通过FileShuffleBlockManager进行管理的,而FileShuffleBlockManager最终也是使用BlockMan
yum方式部署zabbix
ronin47
yum方式部署zabbix
安装网络yum库#rpm -ivh http://repo.zabbix.com/zabbix/2.4/rhel/6/x86_64/zabbix-release-2.4-1.el6.noarch.rpm 通过yum装mysql和zabbix调用的插件还有agent代理#yum install zabbix-server-mysql zabbix-web-mysql mysql-
Hibernate4和MySQL5.5自动创建表失败问题解决方法
byalias
J2EE Hibernate4
今天初学Hibernate4,了解了使用Hibernate的过程。大体分为4个步骤:
①创建hibernate.cfg.xml文件
②创建持久化对象
③创建*.hbm.xml映射文件
④编写hibernate相应代码
在第四步中,进行了单元测试,测试预期结果是hibernate自动帮助在数据库中创建数据表,结果JUnit单元测试没有问题,在控制台打印了创建数据表的SQL语句,但在数据库中
Netty源码学习-FrameDecoder
bylijinnan
java netty
Netty 3.x的user guide里FrameDecoder的例子,有几个疑问:
1.文档说:FrameDecoder calls decode method with an internally maintained cumulative buffer whenever new data is received.
为什么每次有新数据到达时,都会调用decode方法?
2.Dec
SQL行列转换方法
chicony
行列转换
create table tb(终端名称 varchar(10) , CEI分值 varchar(10) , 终端数量 int)
insert into tb values('三星' , '0-5' , 74)
insert into tb values('三星' , '10-15' , 83)
insert into tb values('苹果' , '0-5' , 93)
中文编码测试
ctrain
编码
循环打印转换编码
String[] codes = {
"iso-8859-1",
"utf-8",
"gbk",
"unicode"
};
for (int i = 0; i < codes.length; i++) {
for (int j
hive 客户端查询报堆内存溢出解决方法
daizj
hive 堆内存溢出
hive> select * from t_test where ds=20150323 limit 2;
OK
Exception in thread "main" java.lang.OutOfMemoryError: Java heap space
问题原因: hive堆内存默认为256M
这个问题的解决方法为:
修改/us
人有多大懒,才有多大闲 (评论『卓有成效的程序员』)
dcj3sjt126com
程序员
卓有成效的程序员给我的震撼很大,程序员作为特殊的群体,有的人可以这么懒, 懒到事情都交给机器去做 ,而有的人又可以那么勤奋,每天都孜孜不倦得做着重复单调的工作。
在看这本书之前,我属于勤奋的人,而看完这本书以后,我要努力变成懒惰的人。
不要在去庞大的开始菜单里面一项一项搜索自己的应用程序,也不要在自己的桌面上放置眼花缭乱的快捷图标
Eclipse简单有用的配置
dcj3sjt126com
eclipse
1、显示行号 Window -- Prefences -- General -- Editors -- Text Editors -- show line numbers
2、代码提示字符 Window ->Perferences,并依次展开 Java -> Editor -> Content Assist,最下面一栏 auto-Activation
在tomcat上面安装solr4.8.0全过程
eksliang
Solr solr4.0后的版本安装 solr4.8.0安装
转载请出自出处:
http://eksliang.iteye.com/blog/2096478
首先solr是一个基于java的web的应用,所以安装solr之前必须先安装JDK和tomcat,我这里就先省略安装tomcat和jdk了
第一步:当然是下载去官网上下载最新的solr版本,下载地址
Android APP通用型拒绝服务、漏洞分析报告
gg163
漏洞 android APP 分析
点评:记得曾经有段时间很多SRC平台被刷了大量APP本地拒绝服务漏洞,移动安全团队爱内测(ineice.com)发现了一个安卓客户端的通用型拒绝服务漏洞,来看看他们的详细分析吧。
0xr0ot和Xbalien交流所有可能导致应用拒绝服务的异常类型时,发现了一处通用的本地拒绝服务漏洞。该通用型本地拒绝服务可以造成大面积的app拒绝服务。
针对序列化对象而出现的拒绝服务主要
HoverTree项目已经实现分层
hvt
编程 .net Web C# ASP.ENT
HoverTree项目已经初步实现分层,源代码已经上传到 http://hovertree.codeplex.com请到SOURCE CODE查看。在本地用SQL Server 2008 数据库测试成功。数据库和表请参考:http://keleyi.com/a/bjae/ue6stb42.htmHoverTree是一个ASP.NET 开源项目,希望对你学习ASP.NET或者C#语言有帮助,如果你对
Google Maps API v3: Remove Markers 移除标记
天梯梦
google maps api
Simply do the following:
I. Declare a global variable:
var markersArray = [];
II. Define a function:
function clearOverlays() {
for (var i = 0; i < markersArray.length; i++ )
jQuery选择器总结
lq38366
jquery 选择器
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
基础数据结构和算法六:Quick sort
sunwinner
Algorithm Quicksort
Quick sort is probably used more widely than any other. It is popular because it is not difficult to implement, works well for a variety of different kinds of input data, and is substantially faster t
如何让Flash不遮挡HTML div元素的技巧_HTML/Xhtml_网页制作
刘星宇
html Web
今天在写一个flash广告代码的时候,因为flash自带的链接,容易被当成弹出广告,所以做了一个div层放到flash上面,这样链接都是a触发的不会被拦截,但发现flash一直处于div层上面,原来flash需要加个参数才可以。
让flash置于DIV层之下的方法,让flash不挡住飘浮层或下拉菜单,让Flash不档住浮动对象或层的关键参数:wmode=opaque。
方法如下:
Mybatis实用Mapper SQL汇总示例
wdmcygah
sql mysql mybatis 实用
Mybatis作为一个非常好用的持久层框架,相关资料真的是少得可怜,所幸的是官方文档还算详细。本博文主要列举一些个人感觉比较常用的场景及相应的Mapper SQL写法,希望能够对大家有所帮助。
不少持久层框架对动态SQL的支持不足,在SQL需要动态拼接时非常苦恼,而Mybatis很好地解决了这个问题,算是框架的一大亮点。对于常见的场景,例如:批量插入/更新/删除,模糊查询,多条件查询,联表查询,