如何改变垂直滚动轴系统默认的灰色?

wanghesir 2004-03-22 12:05:40
如题!望赐教,谢谢!
...全文
33 5 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
UPCCPU 2004-03-23
  • 打赏
  • 举报
回复
等待具体解决办法
banxian 2004-03-23
  • 打赏
  • 举报
回复
将其子类化,禁止滚动消息;
然后自画
快乐鹦鹉 2004-03-22
  • 打赏
  • 举报
回复
好像也不行吧。反正贼难。关注。我也总想改掉它》
flyelf 2004-03-22
  • 打赏
  • 举报
回复
WM_CTLCOLOR消息中设置
clife 2004-03-22
  • 打赏
  • 举报
回复
自画滚动条
1.css的概述 1.问题 HTML属性修饰有一定局限,是不太便捷 2.css的语法规范 1.使用css样式方式 1.内联样式 行内样式 特点:将css样式定义在HTML标记中 语法:中先增加一对<style></style>,在<style>标记写样式规则 样式规则:由选择器和样式声明组成 3.外部样式 独立于任何网页位置处,声明一个样式文件(.css为后缀),在文件中声明样式,在使用的网页中引入.css文件。 使用步骤: 1.创建样式表文件(.css) 2.在样式文件中编写样式规则 3.在网页中对样式文件进行引入 <link rel="stylesheet" href="URL../.css"> 3.CSS样式特征 1.继承性 必须是父子(有层叠嵌套的关系)结构 大部分的css效果是可以 2.优先级 1.浏览器默认样式 2.内部样式和外部样式(就近原则) 3.内联样式 4.!important; 绝对优先使用() 格式 p{ color:red !important; } 2.css选择器 1.选择器的作用 规范页面中那些元素能够使用定义好的样式。 2.选择器详解 1.通用选择器 *{样式} 2.元素选择器 p{样式} 3.类选择器 1. 声明 .class名{样式} 2.引用可以引用多个类名用空格隔开 4.id选择器 #id名{样式} 3.特殊选择器 1.群组选择器 #id ,.class{样式} 1.子选择器 #id>.class{样式} 1.分类选择器 div .class{样式} 4.伪类选择器 作用:匹配元素不同状态的选择器 语法:所有的伪类都是以 : 作为开始 选择器:伪类选择器{样式} 伪类分类 1.伪类链接 :link 匹配尚未访问的超级链接状态 :visited 匹配访问过的元素的状态 2.动态伪类 :hover 匹配鼠标悬停在元素上时的状态 :active匹配鼠标激活时元素的状态 超链接、文本框、 密码框点击的时候,就是active。 :focus匹配元素获取焦点时的状态 文本框 和密码框 5.尺寸与边框 1.单位 1.尺寸单位 1.px 像素 1024*768 2.in 英寸 1in=2.54cm 3.pt 磅 (1pt=1/72in) 4.cm 厘米 5.mm 毫米 6.em 相对父元素乘以倍数 7.rem 相对于根元素(html,body)乘以倍数 8.% 相对单位 2.颜色单位(取值) 1.颜色英文单词 blue,red,green,yellow.... 2.rgb(r,g,b) r:red; g:green; b:blue; r,g,b:0-255 rgb(0-255,0-255,0-255) 3.rgb(r%,g%,b%) 4.rgba(r,g,b,aplha) aplha:透明度,0-1之间的小数,值越大,不透明度越高 5.#rgb 16位数字 :0-9和a-f 2.尺寸属性 1.作用 改变元素的宽度和高度 2.语法 width:宽度 取值:px % min-width:最小宽度 max-width:最大宽度 height:高度 取值:px % min-height:最小高度 max-height:最大高度 3.页面中允许修改尺寸的元素 1.所有的块元素允许修改尺寸 ex:div,h1-h6,p,ul,li,ol,dl,dt,dd 2.行内元素允许修改尺寸 表单控件元素 3.本身具备width和height属性的元素 ex:img,table 注意:大部分行内元素不能修改 span,a,i,u,b,s 3.溢出处理 当内容多,元素区域小的时候,会产生溢出的效果,默认都是纵向溢出 属性:overflow,overflow-x,overflow-y 取值: 1.visible 可见的,默认值,溢出可见 2.hidden 隐藏的,溢出的内容全部隐藏,不可见溢出 3.scroll 显示滚动条,溢出时可用 4.auto 自动,溢出时自动显示滚动条并且可用 ============================== 9.29 1、边框线 属性:border: 取值: 2、边框倒角 属性:border-radius: 取值: px % 3、边框阴影 属性:box-shadow: 取值: inset h-shadow v-shadow blur spread color; 1、 h-shadow:阴影的水平偏移距离 px 正值为右偏移 负值为做偏移 2、v-shadow:阴影的垂直偏移方向 px 正值为下偏移 负值为上偏移 3、blur :模糊距离,取值越大模糊距离越远 越模糊 4、spread:阴影的大小,指定要在基础阴影上扩充出来的大小距离,取值以px为单位的数值 5、color:阴影颜色 6、inset:将默认外阴影转为内阴影 在第一位 4、轮廓 轮廓指的是边框的边框,绘制于边框外的线条。 属性:outline:width style color; width:宽度 style:线条样式 color:线条颜色 outline:none/0; 取消轮廓 5、框模型 保持设置的宽高 box-sizing:border-box; 1、内边距 padding 取值:left左 right右 top上 bottom下 px (%)少用 取值:auto 则内容居中 2、外边距margin 6、背景颜色 1.背景色 属性:background: 取值:颜色 2.背景图片 属性:background-image:url(); 取值:url() 3.背景图像平铺 属性:background-repeat 取值: 1.repeat 默认值,横向和纵向同时平铺 2..repeat-x 纵向平铺 4.背景图像尺寸 属性:background-size: 取值: 1.width hegiht 2.width% height% 3.cover 将背景图等比放大,直到背景图完全覆盖到元素的所有区域为止 4.contain 将背景图等比放大;直到背景图片碰到某个边缘位置 5.背景图片固定 作用:将普片固定在网页在某个位置,一直在可视区域内,不会随着 background-attachment: 取值: 1.scroll 默认滚动 2.fixed 固定 6.背景图片定位 作用:改变背景图片的位置 属性:background-position: 取值: 1.x y x: 背景图片水平偏移距离 取正向下右 取负向左 y: 背景图片垂直偏移距离 取值为正向下 取负为上 2.% 0%为起始 50%为中间 ============================================ 9.30 1、渐变 1、什么是渐变 多种颜色平缓变化的一种显示效果 2、渐变的主要因素 色标:一种颜色及其出现的位置 一个渐变由多个色标组成(至少两个) 3、渐变分类 1.线性渐变 一直显得方向来填充渐变色 2。径向渐变 以圆形的方式实现填充的效果 3.重复渐变 将线性渐变或径向渐变重复几次实现效果 4、线性渐变 属性:background-image: 取值: liner-gradient(angle,color-point 1.....); 1.angle 1.关键字 to top:从下向上填充 to right:从左向右填充 to bottom:从上向下填充 to left:从右向左填充 2.角度值 0deg :从下向上填充 90deg:从左向右填充 180deg:从上向下填充 270deg:从右向左填充 2.color-point 色标:颜色及其位置 取值:颜色以及位置的组合,中间用空格分开 ex: red 0% 在填充方向的开始位置用红色 5、径向渐变 background-image:radial-gradient(100px at center center,red,yellow,blue); 6、重复渐变 1.重复线性渐变 background-image:repeating-linear-gradient(angle,color-point 1,color-point 2...); 2.重复径向渐变 background-image:radial-gradient() 2、文本格式化属性 1、指定字体 属性:font-family 取值:用逗号隔开字体名称列表 ex font-fmily:"微软雅黑","Arial","黑体"; 2、字体大小 属性:font-size 取值:以px或pt为单位的数值 3、字体加粗 属性:font-weight 取值: bold:加粗(b,h1~h6) normal:正常 value:400-900整百的数字 4、字体样式 属性:font-style 取值: italic:斜体(i) nromal:正常 5、小型大写字母 将小写字符 变称答谢,但大小与小写字符一致 属性:font-variant 取值: mormal 正常 small-caps 小型大写字符 -------------------------------------------------------------- 10.10日 1、定位 1、堆叠顺序 1、属性 属性:Z-index 取值:无单位的数字,数字越大越靠前(数字越大在上面 ) 2、注意 1、只要已定位元素才能修改堆叠顺序 2、默认堆叠顺序是后来者居上 3、父级元素无法修改堆叠顺序,子级永远在父级之上 2、固定定位 1、语法 position:fixed; 配合着 偏移属性 实现元素的位置初始化 2、注意 1、固定定位元素会变成块级 2、固定定位元素永远都是相对于body实现位置初始化的 3、固定定位元素也会脱离文档流 ==================== CSS3 Core (css3 核心) 1、复杂选择器 1、兄弟选择器 兄弟元素:具备相同父元素的平级的元素称之为兄弟元素 兄弟选择器,只能向后找,不能向前找 1、相邻兄弟选择器 作用:获取紧紧挨在某元素后的兄弟元素 语法:选择器1+选择器2{} 2、通用兄弟选择器 作用:获取某元素后所有满足条件的兄弟元素 语法:选择1~选择器2{} 2、属性选择器 1、 elem[attr] elem:表示任意元素 attr:表示任意属性 作用:匹配页面中所有附带attr属性的elem元素 2、p[class]{} 3、p[id]{} 4、[attr=value] 作用:匹配attr属性值为 value的元素 3、伪类选择器 以学过的伪类: 动态伪类:焦点 :hover,点击 :active,:focus, 链接伪类::link,:visited 1、目标伪类 作用:突出显示活动的HTML锚点元素。匹配被激活的锚点 语法: selector:target{} div:target{} div作为锚点被激活是的样式 2、结构伪类 作用:通过元素的结构关系匹配元素 1、:first-child 匹配的元素是属于其父元素中的第一个子元素 p:first-child{} 2、:last-child 匹配的元素是属于其父元素中的最后一个子元素 3、 :nth-child(n){} 匹配的元素是属于其父元素中第n个子元素 table tr:nth-child(n); 4、:empty 匹配没有子元素的元素 5、 :only-child 匹配的元素是属于父元素中唯一的子元素 3、否定伪类 将满足指定选择器的元素给排除出去 语法: :ont(selector){} table tr:not(:first-child){ font-size:48px; //除第一行以外所有行的文字大小为48px } 4、伪元素选择器 1、 :first-letter 或 ::first-letter 作用:匹配某个元素的首字符 2、 :first-line 或 ::first-line 作用:匹配某个元素的首行 3、 ::selection 作用:匹配被用户选取的内容 注意:只能修改文本颜色 和 背景颜色 2、内容生成 1、什么是内容生产 使用css动态的向某个元素中插入一段能容 2、伪元素选择器 1、:before 或 ::before 作用:匹配到某元素的内容区域之前 (:before)内容 2、:after 或 ::after 作用:匹配到某元素的内容区域之后 内容(:after) 3、属性 属性:content 作用:相匹配到的位置处增加内容 取值: 1、用 "" 引起来的普通文本 2、 url():生成一副图像 4、解决问题 1、浮动元素父元素高度问题 .clear:after{ content:""; display:block; clear:both; } 2、子元素的外边距溢出问题 1、#d1的最后一个子元素位置处 : :after 2、增加一个 "空"元素 3、必须是一个 块级 或 table 的元素 #d2:before{ content:""; /*解决上外边距溢出属性值加 table*/ display:table; clear:both; } 3、弹性布局(Flexible Layout) 1、什么是弹性布局 弹性布局(Flexible Layout),是一种布局方式, 只要是解决某元素中 "子元素" 的布局方式。为 布局提供最大的灵活性 2、弹性布局的相关概念 1、弹性布局的容器 简称为 "容器",子元素的父元素,称为“容器” 2、弹性布局的项目 简称为“项目”,要实现布局效果的元素,称为“项目” 3、主(main axis) 项目们排列方向的一根,就称之为 主 如果项目们按x排列(横向排列),那么x就是主 如果项目们按y排列(纵向排列),那么y就是主 4、交叉(cross axis) 与主交叉的一根就是交叉 如果主是X,那么y就是交叉 如果主是y,那么x就是交叉 3、语法 1、flex的容器 将元素变为flex容器后,那么所有的子元素都浆变为flex项目, 都允许按照弹性布局的方式排列如何将元素变为flex容器?? 属性:display 取值: 1、flex将块级元素变为容器 2、inline-flex :将行内元素变为容器 注意: 1、元素设置为flex容器之后,子元素的 float,clear,vertical-align将失效 2、元素设置为flex 容器之后,子元素的尺寸允许被修改 3、容器的text-align 属性失效 2、容器的属性 1、flex-direction 作用:指定容器的主及其排列方向 取值: 1、row 默认值,即主为x,起点在左端 2、row-reverse 主为x,起点在右端 3、column 主为y,起点在顶端 4、column-reverse 主为y,起点在底端 2、flex-wrap 作用:当主排列不下所有项目时如何换行 取值: 1、nowrap 默认值,即空间不够时,也不换换行,项目会自动缩小 2、wrap 换行 3、wrap-reverse 反换行 3、flex-flow 作用:是flex-direction 和 flex-wrap的缩写形式 取值: 1、row nowrap;(默认值) 2、direction wrap; 4、justify-content 作用:定义项目在主上的对齐方式 取值: 1、flex-start 在主的起点对齐 2、flex-end 在主的终点对齐 3、center 在主上居中对齐 4、space-between 两端对齐 5、space-around 项目两边的外边距相同,但是中间的元素外边距叠加 5、align-items 作用:项目在交叉上的对齐方式 取值: 1、flex-start 交叉起点对齐 2、flex-end 交叉的终点对齐 3、center 交叉的居中对齐 4、baseline 交叉 5、stretch 3、项目属性 该组属性只能设置在某一项目元素上,只控制一个项目, 是不影响容器以及其他项目的效果 1、order 作用:定义项目的排列顺序,值越小,越靠近起点,默认为0 取值:整数数字,无单位 2、flex-grow 作用:定义项目的放大比例,如果容器有足够的剩余空间, 项目将如何放大 取值: 整数数字,无单位 数字越大,占据的剩余空间越多 3、flex-shrink 作用:定义项目的缩写比例,即容器空间不足时,项目该如何缩小 取值: 默认值为1,空间不足时,则等比缩小 取值为0,则不缩小 4、align-self 作用:定义当前项目在交叉的对齐方式 取值: 1、flex-start 2、flex-end 3、center 4、baseline 5、stretch 6、auto 继承自父元素的align-items属性 ===================================== 10.13 1、css Hack 1、解决问题 解决 IE 浏览器的兼容性问题 针对不同的浏览器编写不同的css代码 2、CSSHack 的原理 使用css样式的优先级来解决兼容性问题的 3、CSSHack 的实现方式 1、css类内部 Hack 在样式属性名称前或属性后增加前后缀, 以识别不同的浏览器 + : IE6,7 的前缀 - :IE6 的前缀 两者都出现时+号支持IE7,-号支持IE6 2、css选择器Hack 在选择器的前面增加前缀以便识别不同的浏览器 *:识别IE6 *+:识别IE7 *div{IE6的显示效果} *+div{IE7的显示效果} 3、HTML头部引用Hack 使用IE条件注释来判断IE浏览器的版本, 从而执行不同的代码 语法: <!--[if 条件 IE 版本号]> 满足条件要执行的HTML代码 改段代码只在IE6以上的浏览器中执行 1:放大 <1: 缩小 负数:物极必反 2、scale(x,y) x:横向缩放比例 y:纵向缩放比例 3、单向缩放scale(x) scale(y); 3、旋转 /*背向的元素隐藏*/ backface-visibility:hidden; 1、什么是旋转 改变元素在页面上的角度 2、语法 属性:transform 取值:rotate(ndeg) n取值为正,顺时针旋转 n取值为负,逆时针旋转 注意: 1、转换原点会影响最终的转换效果 2、元素旋转时是连同坐标一起旋转, 会影响后续的位移 4、倾斜 1、什么是倾斜 改变元素在页面中的形状 2、语法 属性:transform 取值: 1、skewX(xdeg); 让元素向着x的方向产生倾斜效果, 实际上是改变y的倾斜角度值 x 取值为正,y逆时针倾斜 x 取值为正,y顺时针倾斜 2、skewY(ydeg) 让元素向着y的方向产生倾斜效果, 实际上是改变x的倾斜角度值 y取值为正,x顺时针倾斜 y取值为负,x逆时针倾斜 4、3D转换 /*背向的元素隐藏*/ backface-visibility:hidden; 1、透视距离 模拟人的眼睛到3D转换元素之间的距离 属性:perspective 注意:该属性要加在3D转换元素的父元素上 2、3D的旋转 属性:transform 取值: 1、rotateX(xdeg) 以x为中心,旋转元素的角度 2、rotateY(xdeg) 以Y为中心,旋转元素的角度 3、rotateZ(xdeg) 以Z为中心,旋转元素的角度 4、rotate3D(x,y,z,ndeg) x,y,z取值为大于0的数字时,表示该要 参与旋转,取值为0则不参与旋转 rotate3d(1,0,0,45deg); 3、过渡 1、什么是过渡 使得css的属性值,在一段时间内平缓变化的效果 2、过渡的语法 - 4个属性 1、指定过渡属性 作用:指定那个属性值在变化的时候需要使用 过渡的效果来体现 属性:transition-property 取值: 1、all (所有) 能使用过渡的属性,一律用过渡 2、具体属性名 ex: 1.transition-property:background;背景颜色变化时用过渡 2.transition-property:border-radius;边框倒角变化时用过渡 3.transition-property:all;所有可以过渡的元素都用过渡 允许设置过渡效果的属性 1.颜色属性 2.取值的数字属性 3.转换属性 - transform 4.阴影属性 5.渐变属性 6.visibility属性,可见属性 2、过渡的时长 作用:指定在多长时间曲线函数 属性:transition-duration 取值:以 s 或 ms 为单位的数值 1000ms = 1s 3、指定过渡速度时间曲线函数 属性:transition-timing-function 取值: 1。ease 默认值,慢速开始,快速变快,慢速结束 2.linear 匀速 3.ease-in 慢速开始,加速结束 4.ease-out 快速开始,慢速结束 5.ease-in-out 慢速开始和结束,中间先加速后减速 4、指定过渡延迟时间 属性:transition-delay 取值:以 s 或 ms 为单位的数值 3、过渡属性编写位置 1、将过渡声明在元素声明的样式中 即管去,又管会 2、将过渡声明在触发的操作中(hover) 只管去,不管回 4、过渡的缩写 transition:property duration timing-function delay; transition:background 2s linear,border-raidus 2s; transition:all 2s; 4、动画 1、什么是动画 使元素从一种样式逐渐变化为另一种样式 即将多个过渡效果放在一起 动画是通过 “关键帧”,来控制动画的每一步 关键帧: 1、动画执行的时间点 2、在该时间点上的样式是什么 2、动画的使用步骤 1、声明动画 为动画起名 定义关键帧 2、为元素调用动画 指定元素调用的动画名称以及各个参数属性 3、声明动画 @keyframes 动画名称{ /*定义该动画的所有的关键帧 */ 0%{ /*动画开始时元素的样式*/ } 25%{ /*动画执行到1/4时元素的样式*/ } 50%{ /*动画执行到1/2时元素的样式*/ } 100%{ /*动画结束时的样式*/ } } 兼容问题 -webk- -o- -ms- @-webk-keyframes 动画名称{ /*定义该动画的所有的关键帧 */ 0%{ /*动画开始时元素的样式*/ } 25%{ /*动画执行到1/4时元素的样式*/ } 50%{ /*动画执行到1/2时元素的样式*/ } 100%{ /*动画结束时的样式*/ } } 4、动画属性(调用动画) 1、animation-name 作用:指定调用动画的名称 2、animation-duration 作用:指定动画执行一个周期的时长 取值:以 s 和 ms 3、animation-timing-function 作用:指定动画的速度时间曲线函数 取值: :ease,linear,ease-in,ease-out,ease-out 4、animation-delay 指定动画的延迟时间 5、animation-iteration-count 作用:指定动画的播放次数 取值: 1、具体数值 2、infinite 6、animation-direction 作用:指定动画的播放方向 1、normal 默认值,正常播放 0%~100% 2、reverse 逆向播放 100%~0% 3、alternate 轮流播放 奇数次数播放时,正向播放 偶数次数播放时,逆向播放 7、动画的简写方法 animation:name duration timing-function delay iteration-count animation-direction; 8、animation-fill-mode 作用:规定动画在播放前或播放后的状态 取值: 1.none :默认值 2.forwards 动画播放完成停留在最后 3.backwards 动画播放器,延迟时间内,动画保存在第一个帧状态 4.both forwards和backwards的结合 9、animation-play-state 作用:指定动画是处与什么状态 取值: 1.paused 暂停 2、running :播放 CSS3 Filter(滤镜)属性提供了提供模糊和改变元素颜色的功能。CSS3 Fitler 常用于调整图像的渲染、背景或边框显示效果。 -webkit-filter是css3的一个属性,Webkit率先支持了这几个功能,感觉效果很不错。下面咱们就学习一下filter这个属性吧。 现在规范中支持的效果有: grayscale 灰度 值为0-1之间的小数 sepia 褐色       值为0-1之间的小数 saturate 饱和度     值为num hue-rotate 色相旋转  值为angle invert 反色       值为0-1之间的小数 opacity 透明度     值为0-1之间的小数 brightness 亮度     值为0-1之间的小数 contrast 对比度     值为num blur 模糊       值为length drop-shadow 阴影 例子 1.灰色 -webkit-filter: grayscale(1); filter: grayscale(1); 2.饱和度 -webkit-filter: saturate(3.6); filter: saturate(3.6); 3.

15,980

社区成员

发帖
与我相关
我的任务
社区描述
VC/MFC 界面
社区管理员
  • 界面
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧