css
F-process
这个作者很懒,什么都没留下…
展开
-
CSS简介与选择器优先级
CSS的简介在样式表中,CSS的写法通常如下。<selector>{ <attr1>:<value1>; <attr2>:<value2>; <attr3>:<value3>; ...... <attrN>:<valueN>;}selector的中文名叫“选择器”,表示对哪个元素设置样式。大括号内部设置具体的样式,如字体等。设置样式的方法是通过多对:组合而成,中间用分号( ;原创 2017-08-01 13:47:20 · 260 阅读 · 0 评论 -
CSS,font-family,好看常用的中文字体
简介例1(小米米官网):font-family: “Arial”,”Microsoft YaHei”,”黑体”,”宋体”,sans-serif;例2(淘宝技术研发中心):font: 12px/1.5 Tahoma,Helvetica,Arial,’宋体’,sans-serif;例3(加网 ):font: 14px/1.5 ‘Microsoft YaHei’,arial,tahoma,\5b8b\4f原创 2017-11-30 14:35:41 · 2167 阅读 · 0 评论 -
实现一页展示网页的内部链接
原理给你想要到达的位置的块的A标签加上 name=”xx”属性代码 <a href="#brand" class="nav2Link">品牌活动<span>/</span></a> <a name="brand"></a>这样就会跳转到对应的块原创 2017-10-31 18:30:52 · 1026 阅读 · 0 评论 -
checkBox实现单选加样式
实现使checkBox实现单选功能,样式更加美观。 代码.join{ height: 540px; background-image: url("../../img/joinmember/join.png"); background-size:cover; background-repeat: no-repeat; background-position:原创 2017-10-27 17:53:15 · 540 阅读 · 0 评论 -
CSS3动画 Transitions, Transforms和Animation使用简介
Transitionstransition有下面些具体属性:transition-property :* //指定过渡的性质,比如transition-property:backgrond 就是指backgound参与这个过渡transition-duration:*//指定这个过渡的持续时间transition-delay:* //延迟过渡时间transition-timing-functi原创 2017-09-14 13:57:25 · 260 阅读 · 0 评论 -
Flexbox简介
Flex布局背后的主要思想是给容器控制项目(Flex项目)的宽度、高度的能力,使用Flex项目可以自动填满容器的可用空间(主要是适应所有类型的显示设备和屏幕大小)。Flex容器使用Flex项目可以自动放大与收缩,用来填补可用的空闲空间。Flex容器属性定义一个Flex容器,根据其取的值来决定是内联还是块。Flex容器会为其内容建立新的伸缩格式化上下文。 .container { displ原创 2017-09-26 12:01:32 · 218 阅读 · 0 评论 -
CSS3的calc()做响应模式布局
REM方法calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度。比如说,你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上,可原创 2017-09-06 14:06:03 · 293 阅读 · 0 评论 -
CSS-浮动&清除浮动
CSS-浮动浮动是因为使用了float:left或float:right或两者都是有了而产生的浮动。。浮动产生负作用1、背景不能显示 由于浮动产生,如果对父级设置了(CSS background背景)CSS背景颜色或CSS背景图片,而父级不能被撑开,所以导致CSS背景不能显示。 2、边框不能撑开 如上图中,如果父级设置了CSS边框属性(css border),由于子级里使用了float属性,产原创 2017-08-04 14:31:49 · 290 阅读 · 0 评论 -
CSS常见布局
单列布局水平居中下面各个实例中实现的是child元素的对齐操作,child元素的父容器是parent元素inline-block 和 text-align.parent{text-align: center;}.child{display: inline-block;}margin:0 auto.child{width: 200px; margin: 0 auto;}table.parent{po原创 2017-08-07 15:21:05 · 457 阅读 · 0 评论 -
CSS的三种定位
CSS的三种定位CSS的三种引用方式:相对定位(relative)、绝对定位(absolute)、固定定位(fixed)。相对定位(relative) 被看作普通流定位模型的一部分,定位元素的位置相对于它在普通流中的位置进行移动。使用相对定位的元素不管它是否进行移动,元素仍要占据它原来的位置。移动元素会导致它覆盖其他的框。<!DOCTYPE html><html lang="en"><head>原创 2017-08-02 12:40:35 · 486 阅读 · 0 评论 -
初试CSS-盒模型
CSS盒模型简介CSS盒模型就是一个元素的模型,因为模型原理看起来像生活中的盒子所以叫做盒模型,内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒模式通常具备这些属性。边框(border)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Doc原创 2017-07-31 13:24:00 · 235 阅读 · 0 评论 -
CSS的三种引用方式
CSS的三种引用方式CSS的三种引用方式:内联式css样式、嵌入式css样式、外部式css样式。内联式css样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head> <body> <span style="color:red">我是内嵌样式原创 2017-07-31 13:31:34 · 587 阅读 · 0 评论 -
CSS进阶-LESS(简介)
LESS简介LESS 为 Web 开发者带来了福音,它在 CSS 的语法基础之上,引入了变量,Mixin(混入),运算以及函数等功能,大大简化了 CSS 的编写,并且降低了 CSS 的维护成本,就像它的名称所说的那样,LESS 可以让我们用更少的代码做更多的事情。LESS安装(sublime)安装less2css插件: 方法:ctrl+shift+p>install Package>输入less原创 2017-12-21 14:21:34 · 887 阅读 · 0 评论