9.14学习笔记

线性渐变(linear-gradient)

tips:注意渐变是以背景图的形式存在的,不能用background-color

兼容情况：IE10+

background:linear-gradient(red,blue);/*从上到下*/

background:linear-gradient(to left,red,blue);/*从右到左*/

background:linear-gradient(to left top,red,blue);/*右下到左上*/

background:linear-gradient(red 50%,blue 80%);

/*0%-50%是红色,50%-80%是红到蓝的渐变,80%-100%是纯蓝色*/

background: repeating-linear-gradient(red,blue 50%);/*重复2次*/

代码和效果图：

 

 

 

径向渐变(radial-gradient)

tips:注意渐变是以背景图的形式存在的,不能用background-color

兼容情况：IE10+

background:radial-gradient(red,blue);/*从内到外*/

background:radial-gradient(at 30% 30%,red,blue);/*调整圆心到左上角*/

background:radial-gradient(at center center,red,blue);/*圆心在中间*/

background:radial-gradient(40px 50px,red,blue);/*圆的宽40px,高50px*/

background:radial-gradient( ellipse|circle,red,blue)

/* ellipse:椭圆(前提是 当前元素是长方形的); circle:正圆*/

background: repeating-gradient(red,blue 50%);/*重复2次=2圈*/

 

代码和效果图:

  

 

 

 

CSS全称

Cascading Style Sheets

 

单行文本溢出用...   （一般三个一起写）

overflow: hidden; /*文本溢出,溢出的部分隐藏*/

white-space: nowrap; /*内容不换行*/

text-overflow:ellipsis; /*文本溢出的时候采用...代表被修剪的文本*/

 

word-wrap:break-word与word-break:break-all的区别??

后者会将非亚洲文本断开来实现换行,所以不会出现大片空白

@font-face(自定义字体)

1.下载字体文件(不用安装)

2.编写一段css代码:

@font-face{

font-family:“xx体”;

src:url(xxx.ttf);

}

body{

font-family:“xx体”;

}

 

图形字体库(iconfont,awesome)

iconfont:

1.www.iconfont.cn(新浪微博,github)

2.选择图标,然后点击PNG下载

3.选择图标,加入购物车,在我的购物车中“下载代码”

4. <link rel="stylesheet" href="iconfont.css">

<i class="iconfont icon-xiaomi"> </i>

awesome:

1.下载Awesome压缩包

2.找到里面的css和fonts文件夹

3. <link rel="stylesheet" href="awesome.css">

<i class="fa fa-apple"> </i>

 

PPI(像素密度,每英寸所拥有的像素(Pixels)数目,越高越清晰)

计算公式：

DPI与PPI的区别：

“素”（D）PI:只存在于计算机显示领域

“点”（P）PI：只出现于打印或印刷领域

 

一般屏幕大小：

@media all and (min-width:1200px){
body{background: xx颜色;}
}
@media all and (max-width:1199px) and (min-width:992px){
body{background: xx;}
}
@media all and (max-width:991px) and (min-width:768px){
body{background: xx;}
}
@media all and (max-width:767px) and (min-width:576px){
body{background: xx;}
}
@media all and (max-width:575px){
body{background: xx;}
}

 

 

 

 

引入css文件横竖屏显示

<link rel="stylesheet" href="../css/landscape.css" media="screen and (orientation:landscape)"><!--横屏-->
<link rel="stylesheet" href="../css/portrait.css" media="screen and (orientation:portrait)"><!--竖屏-->

 

 

适配手机端常用的几个标签

<!-- 用来设置web页面适应移动设备的屏幕大小 -->

<meta name=" viewport" content=" width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

<!-- 确保IE浏览器采用最新的渲染模式 -->

<meta http-equiv="X-UA-compatible" content="IE=edge">

<!-- 用谷歌webkit内核 : 360 浏览器 6.5+ -->

<meta name="renderer" content="webkit">

 

转载于:https://www.cnblogs.com/xieyankeai/p/9648476.html