zoukankan      html  css  js  c++  java
  • H5 C3中的概念

    阿里web字体的使用

    (1)进入官网  点击webfont

    (2)输入对应的文字 然后选择添加字体

    (3)可以直接引用线上地址或者本地下载,引用线上地址需要添加http,(在服务器环境下可以不用),如果是本地下载需要解压,打开demo.html复制代码即可

    (4)注意修改路径,并且给文字添加上对应的类

    阿里Iconfont的使用 (重点,没有兼容)

    (1)进入官网 http://www.iconfont.cn/ 选择图标库 ---- 所有图标库

    (2)右上角搜索想要的图标,并且添加到购物车里面 

    (3)选择完毕之后点击右上角的购物车图标,点击下载代码

    (4)解压之后根据demo页面上的提示选择合适的一种方式去引用即可 (注意路径的修改)

    (4) 圆角

    broder-radius:值 

    值说明:

    (1)一个值设置的是盒子的四个角的水平和垂直半径

    (2)每个角都可以单独进行设置 其取值顺序是左上 右上 右下 左下顺时针设置

    (3)可以简写  简写的逻辑跟padding和margin一样

    (4)单位支持像素,和百分比(参照的是宽度和高度)

    (5)可以用 水平半径/垂直半径 去单独控制半径 并且每一个半径都可以单独控制

    (5) 阴影

    语法:box-shadow:值

    值说明:

    (1)第一个值 :Npx  阴影向水平方向偏移N个像素  正数往右 负数往左

    (2)第二个值 :Npx  阴影向垂直方向偏移N个像素  正数往下 负数往上

    (3)第三个值 :羽化大小 (模糊的大小)

    (4)第四个值 :阴影尺寸

    (5)第五个值 :颜色 默认值是黑色

    (6)第六个参数: 内外阴影 默认是外阴影 内阴影是inset

    (7)阴影可以写多个,中间用逗号隔开

    (8)阴影可以简写,但是需要注意有一些值需要补0

    文字阴影

    语法: text-shadow:水平偏移 垂直偏移 羽化大小 颜色

    巧妙运用可以制作文字凹凸效果

    (6)边框图片 (了解)

    语法:border-image:值

    遵从的是九宫格式切图,上下左右分别来一刀

    值说明:

    (1)border-image-source:url('border.png'); 图片路径

    (2)border-image-slice:26;图片切割,不要带单位,遵从九宫格式切图法(上下左右各来一刀)

    (3)border-image-repeat:round或者stretch或者repeat; round没有瑕疵,stretch默认拉伸,repeat 平铺(可能有瑕疵)

    (4)简写:border-image:url('border.png') 26 round;

    总结:是以九宫格式的方式切图

    (7) 背景系列

     (7.1)背景图片的基准点

    语法:background-origin:值

    值说明:

    (1)border-box  :忽略边框 直接从边框的起始 0 ,0点平铺

    (2)padding-box: 默认值,忽略padding 直接从padding的起始 0 ,0点平铺

    (3)content-box :从内容部分开始平铺 跟padding有关系

          (7.2)多重背景

    说明:背景图片之间用逗号隔开,可以写多组,最先渲染的图片有可能会遮住后面渲染的图片

          (7.3)控制背景图片的大小 (重要)

    语法:background-size:值

     值说明:

    (1)当只有一个值的情况下,宽度实现拉伸,并且高度会保持等比例,可以支持px,也可以支持百分比,百分比参照的是这个盒子本身的宽度

    (2)当有两个值的情况下,宽度和高度会分别拉伸到对应的值,可能会变形,可以支持px,也可以支持百分比,百分比参照的是这个盒子本身的宽度

    (3)contain 当图片的宽度或者是高度在缩放的时候有一个“碰到”了盒子的边缘,则停止变化,(宽度或高度满足一个即可)

    (4)在contain的基础上保证不留白,这就是cover的效果(宽度和高度都需要满足)

    (8)盒子内减 --- (重点)

    如果你的公司只需要兼容IE9 及其以上可以使用 移动端随意

    之前我们的盒子的实际宽度是 实际宽度 = width + padding + border,而内减属性会自动帮我们 padding 和 border值 ,所以 用了内减的盒子实际宽度就等于width,至于padding和border的值会自动被width内减掉

    在实际工作中,内减配合百分比布局是实现移动端布局的方式之一

    (9)渐变

    (9.1)线性渐变

    background:-webkit-linear-gradient(起始位置,颜色一 位置,颜色二 位置 ,颜色三 位置);

    (9.2)径向渐变

    background:-webkit-radial-gradient(起始位置,颜色一 位置,颜色二 位置 ,颜色三 位置);

    总结:

    (1)两种渐变的参数都是一样的 ,起始位置都接受方位名词

    (2)线性渐变的起始位置还能接受deg 角度 径向渐变不能接受deg但是接受px

    (3)需要添加私有前缀

    (4)颜色位置的取值遵守递增的关系

    (9.3)私有前缀

     作用:兼容低版本的一些高级浏览器,或者一些特定的css3属性需要添加私有前缀才起作用

    每一条css3属性合理来说都需要添加对应浏览器的前缀,以保证其兼容性

    谷歌 苹果:-webkit-

    火狐:-moz-

    IE:-ms-

    o:-o-

    小细节:在手机端,一般来说只需要写一个-webkit-(针对国内的绝大部分手机端)

    添加的位置:大部分都是直接添加到最前面,css2没有的属性都是添加在最前面的,有一些是css2就有的属性是添加在后面的(background:-webkit-linear-gradient())

    转自https://my.oschina.net/u/2996786/blog/782343

  • 相关阅读:
    Django部署到服务器
    springboot使用Redis缓存
    ubuntu下pip更换国内源
    ubuntu环境变量文件
    python open找不到路径
    centos 8 安装nginx
    centos8 mysql8的远程访问
    centos 8 安装mysql-server 8
    今日收获
    今日收获
  • 原文地址:https://www.cnblogs.com/guoyong-feng/p/6111724.html
Copyright © 2011-2022 走看看