css样式 | 易学教程

css滚动条

阅读更多关于 css滚动条

某厂面试归来，发现自己落伍了！>>> .test-5::-webkit-scrollbar { /*滚动条整体样式*/ width : 10px ; /*高宽分别对应横竖滚动条的尺寸*/ height : 1px ; } .test-5::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius : 10px ; background-color : skyblue ; background-image : -webkit-linear-gradient ( 45deg , rgba ( 255 , 255 , 255 , 0.2 ) 25% , transparent 25% , transparent 50% , rgba ( 255 , 255 , 255 , 0.2 ) 50% , rgba ( 255 , 255 , 255 , 0.2 ) 75% , transparent 75% , transparent ) ; } .test-5::-webkit-scrollbar-track { /*滚动条里面轨道*/ box-shadow : inset 0 0 5px rgba ( 0 , 0 , 0 , 0.2 ) ; background : #ededed ; border-radius : 10px ; } 来源：

css实现垂直手风琴效果

阅读更多关于 css实现垂直手风琴效果

1 <html lang="en"> 2 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>垂直手风琴</title> 8 <style> 9 * { 10 margin: 0; 11 padding: 0; 12 } 13 14 .listbox { 15 width: 500px; 16 height: 400px; 17 margin: 50px auto; 18 } 19 20 .list { 21 position: relative; 22 } 23 24 .list a { 25 display: block; 26 height: 35px; 27 background: linear-gradient(#eeeeee, #8f8f8f); 28 text-decoration: none; 29 padding-left: 12px; 30 border-radius: 5px; 31 text-decoration: none; 32 color: #424242; 33

用CSS画小猪佩奇，你就是下一个社会人！

阅读更多关于用CSS画小猪佩奇，你就是下一个社会人！

欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~ 作者：江志耿 | 腾讯TEG网络工程师我是佩奇，哼，这是我的弟弟乔治，呱呱，这是我的妈妈，嚯，这是我的爸爸，嚯~ 背景小猪佩奇已经火了好一阵了，其实一开始我是不屑的。纵观小朋友的历届动画，无论喜洋洋、熊出没还是小兔兵兵、小熊维尼，火过一阵便迅速陨落，回想起来也没多少沉淀的东西。所以一开始让我看小猪佩奇的时候我是拒绝的，因为你不能让我看，我就马上去看，第一我要试一下。深入了解之后发现，卧槽，世间竟有如此出尘绝艳的动画片！正如某个浙江人说过：你不喜欢小猪佩奇那是因为你不了解。魔性的猪叫声，任性的踩泥坑。这不是一只简单的猪，从此路转粉。我在淘宝买了小猪佩奇贴纸贴上了社会人纹身、电脑桌面壁纸换上了佩奇全家福、买了小猪佩奇公仔。但真正给我工作上带来积极作用的是我偶然发掘出来的小猪佩奇调试法。小猪佩奇调试法：在程序的调试、除错或测试过程中，操作人耐心地向小猪佩奇解释每一行程序的作用，以此来激发灵感与发现矛盾。 “喜欢一个事情，而这个事情又正好能与工作结合，这是非常幸运的事情。小猪佩奇调试法给我带来了工作效率的提升，也带来了全天的好心情。” —— Cristiano Bottlejiang 很多人号称自己是社会人是佩奇粉，其实大部分都是路人粉。路人粉就是说路过认识成为了粉丝，就比如我回家看到小孩子在看小猪佩奇而知道了这个事

jQuery 基础DOM和CSS操作

阅读更多关于 jQuery 基础DOM和CSS操作

一、设置元素及内容 html() 获取元素中的HTML内容 html(value) 设置元素中的HTML内容 text()　　　获取元素中的文本内容 text(value) 设置元素中的文本内容 val() 　　　获取表单中的文本内容 val(value) 设置表单中的文本内容注意：当使用html()和text()设置元素的内容时，会清空原来的数据。如果希望追加信息，需要先获取原来的数据。 $('#box').html($('#box').html + 'extra html'); 如果想设置多个选定状态，比如下拉列表、单选复选框等，可以通过数组传递操作。 $("input").val(["check1","check2","radio1"]); //value值是这些的将被选定二、元素属性操作 attr(key)　　　　　　　　　　　　获取某个元素key属性的属性值 attr(key,value)　　　　　　　　设置某个元素key属性的属性值 attr({key1:value1,key2:value2...}) 设置某个元素多个key属性的属性值 atrr(key,function(index,value){}) 设置某个元素key通过函数来设置注意：attr()方法里面的function() {}可以不传参数。可以只传一个参数index，表示当前元素的索引（从0

移动端性能优化（CSS性能优化）

阅读更多关于移动端性能优化（CSS性能优化）

CSS性能优化 CSS选择器优化如果可以直接选中元素，不需要加一些多余的修饰 /*不要使用类选择器和ID选择器修饰元素标签，这样多此一举，还会降低效率。*/ div#slider.slider { } 一般来说，class用于样式，id用于js，因为id定义的样式不利于复用保证不会误选的情况下，尽量保持简单避免冲突可以在命名时区分好 /*保持简单，不要使用嵌套过多过于复杂的选择器*/ /*浏览器从右向左解析CSS*/ /*.slider .slider-item-container .slider-item .slider-link .slider-img { width: 100%; }*/ .alex-slider-img { /*嵌套少*/ /*权重低便于使用的时候覆盖*/ width: 100%; } 尽量少用通配符选择器，可以单独写出来，罗列出来 /*避免通配选择器*/ * { } ul, li, dl, dt, dd, p { padding: 0; margin: 0; } 不必要的样式和没有用到的样式直接删除即可 /*移除无匹配的样式*/ .slider { /*width: 100%;*/ } 高级选择器少用（类似正则的），还有属性选择器，性能并不高但是必须的情况下可少量使用 /*避免类正则的属性选择器*/ [class*="slider

第2章 HTML与CSS网页开发基础

阅读更多关于第2章 HTML与CSS网页开发基础

第 2章 HTML与CSS网页开发基础知识点：（1）掌握 HTML 文档的基本结构（2）运用 HTML 的各种常用标记（3）了解 HTML 5 新增部分的内容（4）使用 CSS 样式表控制页面（5）了解 CSS 3 的新特征本章概述： HTML 是一种在互联网上常见的网页制作标记性语言。严格地说， HTML 并不能算作是一种程序设计语言，因为它缺少了程序设计语言所应有的特征。 HTML 是通过浏览器的翻译，将网页中的内容呈现给用户的。对于网站设计人员来说，只使用 HTML 是不够的，还需要在页面中引入 CSS （层叠样式表（ Cascading Style Sheets ））样式。 HTML 与 CSS 的关系是“内容”与“形式”的关系，由 HTML 来确定网页的内容，由 CSS 来实现页面的表现形式。 HTML 与 CSS 的完美搭配，可使页面更加美观、大方，且容易维护。 2.1 HTML 标记语言相信所有读者都有上网冲浪的习惯。在浏览器的地址栏中输入一个网址，就会查阅到相应的网页内容。在网页中包含很多内容，如文字、图片、动画，以及声音和视频等。网页的最终目的是为访问者提供有价值的信息。提到网页设计，不得不提到 HTML标记语言，HTML的全称是Hypertext( 超文本（含有指向其它文本文件链接的文本） ) Markup Language

CSS属性

阅读更多关于 CSS属性

CSS 属性 CSS 属性组：动画背景边框和轮廓盒（框）颜色内容分页媒体定位可伸缩框字体生成内容网格超链接行框列表外边距 Marquee 多列内边距分页媒体定位打印 Ruby 语音表格文本 2D/3D 转换过渡用户界面 CSS3 动画属性（Animation）属性描述 CSS @keyframes 规定动画。 3 animation 所有动画属性的简写属性，除了 animation-play-state 属性。 3 animation-name 规定 @keyframes 动画的名称。 3 animation-duration 规定动画完成一个周期所花费的秒或毫秒。 3 animation-timing-function 规定动画的速度曲线。 3 animation-delay 规定动画何时开始。 3 animation-iteration-count 规定动画被播放的次数。 3 animation-direction 规定动画是否在下一周期逆向地播放。 3 animation-play-state 规定动画是否正在运行或暂停。 3 animation-fill-mode 规定对象动画时间之外的状态。 3 CSS 背景属性（Background）属性描述 CSS background 在一个声明中设置所有的背景属性。 1

css常用代码大全

阅读更多关于 css常用代码大全

一.文本设置 1、font-size: 字号参数 2、font-style: 字体格式 3、font-weight: 字体粗细 4、颜色属性 color: 参数注意使用网页安全色二、超链接设置 text-decoration: 参数主要用途是改变浏览器显示文字链接时的下划线。参数取值范围： underline：为文字加下划线 overline：为文字加上划线 line-through：为文字加删除线 blink：使文字闪烁 none：不显示上述任何效果三、背景 1、背景颜色 background-color: 参数 2、背景图片 background-image: url(URL) URL就是背景图片的存放路径，none表示无。 3、背景图片重复 background-repeat: 参数参数取值范围： no-repeat：不重复平铺背景图片 repeat-x：使图片只在水平方向上平铺 repeat-y：使图片只在垂直方向上平铺如果不指定背景图片重复属性，浏览器默认的是背景图片向水平、垂直两个方向上平铺。 4、背景图片固定背景图片固定控制背景图片是否随网页的滚动而滚动。如果不设置背景图片固定属性，浏览器默认背景图片随网页的滚动而滚动。为了避免过于花哨的背景图片在滚动时转移浏览者的注意力，一般都设为固定 background-attachment: 参数

CSS样式和表单提交学习

阅读更多关于 CSS样式和表单提交学习

一周一回顾，分享一周中学习到的新知识点和难题解决方案 1.一些好用但是之前不知道的CSS样式（1）修改input标签的placeholder样式 <input type="text" placeholder="请输入内容..."> input::-webkit-input-placeholder { color: cornflowerblue; font-weight: bold; opacity: .5; } （2）禁止网页中的文字被选中 <p> 许多的美丽总是在不经意间从我的指缝中滑落，依稀耳边响起的总是聆听不断的丁零。没法在花开花落时不伤感难过。偶尔轻轻走来的依然婆娑婀娜，难得感觉“那等在季节里的容?，如莲花般开落”的凄惨，总有伤感于那句“我不是归人，是个过客”的颓废。<br> 风住尘香花已尽，物是人非频回首。 </p> body { user-select: none; } （3）文字超出部分显示为… <div> 许多的美丽总是在不经意间从我的指缝中滑落，依稀耳边响起的总是聆听不断的丁零。没法在花开花落时不伤感难过，偶尔轻轻走来的依然婆娑婀娜，难得感觉“那等在季节里的容? </div> <div> 许多的美丽总是在不经意间从我的指缝中滑落，依稀耳边响起的总是聆听不断的丁零。没法在花开花落时不伤感难过，偶尔轻轻走来的依然婆娑婀娜，难得感觉“那等在季节里的容? </div>

订阅 css样式