CSS使用心得小结

CSS心得最近对CSS的使用有一些小心得,在此写下来给大家分享分享 .最后附上选择器的实例代码. ------DanlV CSS是什么层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化. 百度百科 CSS三种使用方式 1.style属性如: <div style="width…

CSS选择器学习小结

关于CSS选择器的问题,在实际项目中,以及一般的前端面试中会经常遇到.下面对此做一小结,梳理和巩固相关方面知识.(如有不妥之处,还望大家及时批评指正,以免误导他人) 一.选择器种类 1.id选择器(#myid):2.类选择器(.myclass):3.标签选择器(div,ul,span):4.相邻兄弟选择器(h1+p):5.子选择器(div>span):6.后代选择器(div span,div.myclass):7.通配符选择器(*):8.属性选择器(input[type="text&quo…

vue—你必须知道的 js数据类型前端学习 CSS 居中事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结

vue—你必须知道的目录更多总结猛戳这里属性与方法语法计算属性特殊属性 vue 样式绑定 vue事件处理器表单控件绑定父子组件通信过渡效果 vue经验总结 javascript 经验总结更多总结猛戳这里属性与方法不要在实例属性或者回调函数中(例如,vm.$watch('a', newVal => this.myMethod())使用箭头函数.因为箭头函数会绑定父级上下文,所以 this 不会按照预期指向 Vue 实例,然后 this.myMethod 将是未定义.…

html与css命名规范小结

一.命名规则说明所有的命名最好都用小写使用英文命名给每一个表格和表单加上一个唯一的.结构标记id 给每个图片加上alt标签,优点在于图片发生错误时,alt可以体现给用户二.相对网页外层重要部分css样式命名 wrap——用于最外层 header——用于头部 main——用于主题内容(中部) main-left——左侧布局 main-right——右侧布局 nav——网页菜单导航条 content——用于网页中部主体 footer——用于底部 css命名其他说明 DIV+CSS命名小结:无…

CSS学习心得2

CSS样式链接 a:link - 普通的.未被访问的链接 a:visited - 用户已访问的链接 a:hover - 鼠标指针位于链接的上方 a:active - 链接被点击的时刻当为链接的不同状态设置样式时,请按照以下次序规则: a:hover 必须位于 a:link 和 a:visited 之后 a:active 必须位于 a:hover 之后背景元素名background 也是简写的属性 background-color 不能继承,其默认值是 transparent.transp…

CSS学习心得

CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一基础的语法: CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明高级语法: 1.选择器分组选择器分组,如下:被分组的选择器就可以分享相同的声明.用逗号将需要分组的选择器分开.在下面的例子中,我们…

CSS应用心得

单纯Html配合CSS网页下面用程序来实际总结一下首先,在写程序的应该具有一个良好的编程习惯. 第一:排版,拥有一个良好的排版,有助于我们能够快速的理解以及阅读程序: 第二:注释,就如以下程序,作为一个非本人编写的程序,如果没有有效的注释,那么程序阅读以及修改起来是及其困难的: 第三:模块化,模块化为了让我们程序员自己能够快速的看清结构布局,从而很好的去把握程序的每一步,以免在程序出现问题的时候不便于修改. <!DOCTYPE html><html><head lang=…

分享一下学习css,js心得

简化代码,使页面简洁! web前端开发——将界面更好呈现给用户! 要了解在不同浏览器上的兼容情况.渲染原理和存在的bug! 网站性能优化.SEO: 代码的可维护性.性能: 网站重构的本质:建立一个前端灵活的MVC框架,代码具有复用性: web标准:结构.样式和行为的分离:理想状态下,网页源代码由html文件.css文件和js文件组成! 高质量的代码:精简.重用.有序,符合web标准: js要有常用效果和功能的积累:js类库封装了跨浏览器兼容的特性并扩展了功能: 最基本要求是CSS能兼容IE6.I…

Html&CSS 今日心得

今天和秋秋一起review了一下我自己写的登录页面.她给我提了几个point,对我很有启发. css样式的代码和html代码分离. 我自己做的时候是在google console里面调好了样式以后就直接copy到了对应的tag里,而不是在css中通过selector来找到元素后设置样式. 这样的做法我感觉和java代码中同样的函数在个各类中反复出现有些类似.将html和css完全分离开来有几个好处: 逻辑上,看html代码的时候不用关心它对应的样式,而只用关心html的结构: 另外在以后修改的时…

css与div小结

前些时间学习css与div的课程什么是css呢 Css 级联样式表或层叠样式表(Cascading Style Sheet) 是能够真正做到网页表现与内容分离的一种样式设计语言.相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制那么它与Html有什么不同呢 Html 超文本标记语言, 是用于描述网页文档的一种标记语言. css与html是同一种语言的不同发展阶段那么css又有什么特点呢? 1样式解决了一个普遍的问题样式和文档内容分离 2提高了工作效…

css 性能优化小结

1.能用css不用js 1.鼠标悬浮展示 2.自定义radio.checkbox的样式 3.巧用css伪类当input获取焦点时候,把右边的按钮改变样式检测用户输入:如果用户输入不合法,将右边的按钮样式置透明度0.5 4.自定义title提示样式 5.伪元素 6.使用伪元素画一条分割线 7.After伪类设置清除浮动 8.After伪类禁用input框 9.Css计数器和after伪类 10.Css画一个三角形三角形的画法: 画一个有边缘的三角形…

css零碎知识点小结

1.单行文字溢出显示省略号: div{ width: 200px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } 2.对span设置text-indent期望缩进指定值,但是没有起作用,是因为text-indent只能给块级元素设置.所以改css为: span{ display:inline-block; } 不断积累完善中~~~…

div+css布局自适应小结

一.两栏布局(左定宽,右自动)1. float + margin即固定宽度元素设置float属性为left,自适应元素设置margin属性,margin-left应>=定宽元素宽度.举例: <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>两栏布局-左定宽,右自动</title> <style type="text/css&qu…

CSS与JavaScript小结

一.css 全称Cascading Style Sheets,层叠样式表,具体的作用是美化页面,让页面中显得更加美观. 1.使用方式在HTML页面中有三个地方可以使用,分别是标签内,头部标签中以及在HTML中声明,然后用src连接外部,注意在使用的时候三种方法可以同时使用,遵循就近原则,受那个近就受谁的控制. 2.具体操作 1)在具体的标签里面,比如p段落标签,直接写到p之中: <p style = "color:red"> </p> 2)在头部标签中,…

css布局方面小结

1 ####css选择器 1 .left-word.moreinfor{} 这样是找不到选择器的.中间需要一个空格但是div.moreinfor 是可以的. 2 max-width的作用: p元素只有width:300px时候.不管浏览器怎么改变他都不会变.哪怕被浏览器遮挡. 当设置 max-width:300px的时候:当浏览器小于300px,他会根据浏览器改变状态. 3 box-sizing:border-box的使用.:为了让border和padding不增加宽度或者在 *下面加上bo…

CSS选择器使用小结

==> .x-boundlist-floating[style$="px;"] .x-boundlist-item 元素中含有Style属性,并且属性值以"px;"结尾查找元素中的属性值不包含某些内容的一种变通方法 ==> div.x-boundlist:not([style*='display: none']) .x-boundlist-item 查找元素中的属性值不包含某些内容…

css 开发心得

1.一个 div内的行内元素如何水平对齐将内部的元素设为 float ,然后设置 margin-top 对齐,然后用伪类清楚浮动的影响…

css居中方法小结

水平居中行内元素如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的. 块状元素当被设置元素为块状元素时用 text-align:center 就不起作用了,这时也分两种情况:定宽块状元素和不定宽块状元素. 定宽块状元素:块状元素的宽度width为固定值. 满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的. 在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中,比如网页上的分页导…

菜鸟对APP界面设计的一些心得小结

1. 前言当我看着我以前做的一些app界面,我意识到我应该把我的界面设计能力水平再提升一个,因为实在是丑啊!贴一些以前的设计: 现在看来,是不能看的了.我主要是做需求设计,后面也有一些美工的工作,我觉得有必要总结一下关于UI设计方面的经验了. 另外一方面是,我看别人做界面都是直接拿现有的来用,没有自己做,感觉不好,这种就会出现"做的很好看但的确很别扭"的情况. 界面是整个app的脸面,不只是决定了用户使用这个app的第一印象,还伴随着用户每次的使用,其重要性不言而喻. 2. 一些经验…

CSS - position属性小结

Relative: 属于文档流,针对自身进行偏移: Absolute: 脱离文档流,针对最近的定位元素进行偏移,如果没有,则针对根元素,即body标签尽心偏移: Fixed: 和absolute基本一致,唯一不同是,fixed针对视口进行偏移: Sticky: 可以看作是相对定位和固定定位和混合体.这里有一个阀值的概念(使用top right bottom left)进行定义,超过阀值之前是相对定位,超过阀值之后是固定定位.…

HTML+CSS编写规范

在任何一个项目或者系统开发之前都需要定制一个开发约定和规则,这样有利于项目的整体风格统一.代码维护和扩展.由于Web项目开发的分散性.独立性.整合的交互性等,所以定制一套完整的约定和规则显得尤为重要. 第一节 CSS样式文件的命名建立样式表文件时,分类编写样式到下列样式表文件中,并统一放在[CSS]文件夹里: 主要 main.css 文字样式 font.css 表格 table.css 主题 themes.css 打印 print.css 补丁 mend.css 在项目初期,会把不同类别的样式…

CSS一些设置用法

今天就简单写点的知识点 1. CSS字体样式小结 1) text-indent :值实现段落首行缩进功能 (在起初我们编写段落时为了实现首行缩进两个字符时用的是HTML的标签元素&nbap; ) 2)文字下划线 text-decoration:underline ( 不用u标签) 3)文字删除线必须超市打折原价用一条线删除 text-decoration:line-through 2.CSS选择符的命名规范 1)驼峰命名法:除第一个单词首字母小写外,其他单词首字母都大写…

第五模块：WEB开发基础第1章·HTML&CSS基础

01-前端介绍 02-HTML介绍 03-HTML文档结构 04-head标签相关内容 05-常用标签一之h1~h6,p,a 06-常用标签一之ul.ol.div.img.span 07-常用标签二-table标签 08-常用标签二之form标签 09-常用标签二之表单控件 10-常用标签分类和嵌套规则 11-css的介绍和感知 12-css的三种引入方式 13-标签选择器 14-id选择器 15-类选择器 16-如何正确的使用类选择器及总结 17-高级选择器 18-属性选择器 19-伪类选择器…

CSS样式属性单词之Left

通常left单独在CSS中设置无效,需要在使用position属性下使用才能生效起作用.left左靠多少距离(距离左边多少)的作用. left 一.left认识与语法 left翻译:左边,左在CSS选择器代码中有时也需要设置left,设置对象盒子靠左距离多少,就需要position设置同时再设置left进行实现对象靠左需求. 1.使用说明如果单独对盒子对象设置left,是无效的,需要同时设置position:relative或者position:absolute 2.语法 left值可以为正…

CSS-各种cs样式之浏览器兼容处理方式汇总大全（更新中...）

页面模板 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="description" content="本网站的目的是....." /&…

<c ss高效开发实战>看完了，Bootstrap学习是关键

Bootstrap果真给我们带来了很多便利,学习CSS,必须要掌握很多框架和快速学习的方法. 这本书看完了,也写过几篇读书笔记,墙裂推荐.不上书封面了,只上书的导图. 这里说几点学习CSS的心得 1.基础语法都觉得很好入门,当然,也的确很好入门,但一些例子要动手,不要做伸手党. 2.一些框架要熟练应用,开发起来能事半功倍. 3.一些关键的技术,如less,sass等,要有所了解,这个我觉得还是有一定难度的,看完了,我没有很具体的实践. 4.看这些书,学学别人的实践方法,站在巨人的肩膀上,我想我们…