51dev.com IT技术开发者社区

51dev.com 技术开发者社区

angular学习笔记(九)-css类和样式3

angular学习笔记(九)-css类和样式3

再来看一个选择li列表的例子:点击li中的任意项,被点击的li高亮显示:<!DOCTYPEhtml><htmlng-app><head><title>6.3css类和样式</title><metacharset="utf-8">...

angular学习笔记(九)-css类和样式2

angular学习笔记(九)-css类和样式2

在上一个例子中,元素的类名使用拼接的方法,这样,类名中就不得不带有true或false,并且不易维护,所以,angular使用ng-class属性来控制元素的类名:我们来看一个小例子,点击error按钮,顶部提示错误框,点击warning按钮,顶部提示警告框.错误框的类名是.err,警告框的类名是....

angular学习笔记(九)-css类和样式1

angular学习笔记(九)-css类和样式1

本篇主要介绍通过数据绑定来给元素添加特定的类名,从而应用特定的样式从一个最基本的例子来看:<!DOCTYPEhtml><htmlng-app><head><title>6.1css类和样式</title><metacharset="u...

使用CSS里的user-select属性控制用户在页面上选中的内容

使用CSS里的user-select属性控制用户在页面上选中的内容

CSS里的user-select属性用来禁止用户用鼠标在页面上选中文字、图片等,也就是,让页面内容不可选。也可以只允许用户选中文字,或者全部都放开,用户可以同时选中文字、还包括文本里的图片、视频等其它东西。user-select属性的作用是元素级别的,它不仅可以作用整个页面,也可以只在指定的元素和其...

css 文本超出2行就隐藏并且显示省略号

css 文本超出2行就隐藏并且显示省略号

首先,要知道css的三条属性。overflow:hidden;//超出的文本隐藏text-overflow:ellipsis;//溢出用省略号显示white-space:nowrap;//溢出不换行这三个是css的基础属性,需要记得。但是第三条属性,只能显示一行,不能用在这里,那么如果显示多行呢?&...

Web--CSS控制页面(link与import方式区别)

Web--CSS控制页面(link与import方式区别)

先了解:【1】       “Table”和“DIV”这两个网页元素诞生的目的不同,首先Table诞生的目的是为了存储数据,而DIV诞生的目的就是为了架设页面结构 &nbs...

CSS的选择器

CSS的选择器

<divid="demo"><p><inputtype="checkbox"name=""id=""/></p>class选择器.inner{width:100px;}后代选择器pa{color:#f60;}属性选择器input[type=checkb...

css绝对定位下的垂直居中

css绝对定位下的垂直居中

  如图窗口左上角实现文字宽高不定的div中文字图片垂直居中主要问题是在div显示display:block的情况下,文字高度不定,没办法做到用像左边图片固定大小垂直居中的方法,top:50%来垂直居中一开始直接用display:flex来实现左右两部分的垂直居中,但是因为配合到...

css 不换行省略号

css 不换行省略号

.text-overflow{word-break:keep-all;/*不换行*/white-space:nowrap;/*不换行*/overflow:hidden;/*内容超出宽度时隐藏超出部分的内容*/text-overflow:ellipsis;/*当对象内文本溢出时显示省略标记(...);...

css ul li 左对齐,换行

css ul li 左对齐,换行

.info-warp{min-height:20rem;background:#ffffff;text-align:center;padding:1.4rem;}.jx_ul-info-list{margin:2remauto;text-align:left;display:inline-block...

css 图片flex布局最后一行居中

css 图片flex布局最后一行居中

.box-flex-warp{width:100%;display:flex;flex-flow:rowwrap;justify-content:center;/*align-content:flex-start;左对齐*/}.box-flex{box-sizing:border-box;flex:...

css 多行文字垂直居中

css 多行文字垂直居中

实现多行文字垂直,水平居中重点代码text-align:center;display:table-cell;vertical-align:middle;<divclass="sign_up"><p>报名</p><p>signup</p>&l...

css背景图片加上半透明背景颜色

css背景图片加上半透明背景颜色

背景图片加上半透明背景颜色background:rgba(0,0,0,.6)url(../../images/pro-bg.png)no-repeatcentercenter;  ...

基本css说明

基本css说明

/*-moz代表firefox浏览器私有属性2、-ms代表ie浏览器私有属性3、-webkit代表safari、chrome私有属性*/       body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,pre,f...

CSS3多列Multi-column布局

CSS3多列Multi-column布局

 Properties属性CSSVersion版本InheritFromParent继承性Description简介columnscss3无设置或检索对象的列数和每列的宽度。复合属性column-widthCSS3无设置或检索对象每列的宽度column-countCSS3无设置或检索对象的...