
CSS3
Camille-Fan
Good Good Study,Day Day Up.
展开
-
快速了解移动端和响应式
文章目录移动端viewport视窗的设置响应端注意移动端viewport视窗的设置此声明仅适用于移动端viewport 视窗的设置content="width=device-width, //宽度等于设备的宽度,浏览器宽度分辨率等于系统分辨率 initial-scale=1, //初始化比例是1 minimum-scale=1, //最小的缩小比例1 maximum-scale=1, //最大的放大比例 user-scalable=no" //用户不允原创 2020-12-02 16:29:33 · 174 阅读 · 0 评论 -
CSS: 弹性布局display:flex
文章目录弹性布局dislay:flex主轴的方向flex-direction主轴的内容分布justify-content侧轴的内容分布align-items换行flex-wrap弹性布局综合案例弹性布局dislay:flex弹性容器:设置了display:flex;这个元素为弹性容器,里面的子元素会按照弹性布局的方式进行布局。弹性子元素:设置了dispay:flex;的弹性容器的直接子元素,即为弹性子元素。主轴的方向flex-direction设置主轴的方向:row:从左到右(默认)co原创 2020-11-11 13:01:48 · 579 阅读 · 0 评论 -
字体图标
文章目录一、使用字体图标的好处二、阿里巴巴矢量图标库的三种使用方法1、unicode2、Font class3、Symbol一、使用字体图标的好处图片比较占带宽,放大可能会产生失真效果,且图片不便于修改样式优点:占用带宽小,不会失真,可以随意调节字体大小的和颜色二、阿里巴巴矢量图标库的三种使用方法1、unicode使用步骤第一步:拷贝项目下面生成的 @font-face这么多字体文件仅仅是因为不同的浏览器兼容的字体文件是不一样的。@font-face { font-famil原创 2020-11-11 11:54:04 · 276 阅读 · 0 评论 -
CSS:transform应用之立体魔方案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>立方体动画</title> <style type="text/css"> body{ /*设置透视点*/ perspective: 1000px; } .lifang{ width: 200px; height: 200px; margi原创 2020-11-06 14:29:00 · 244 阅读 · 0 评论 -
CSS基础
一、CSS样式表1、内联样式表<!doctype html><html><head><meta charset="utf-8"><title>CSS内联样式表</title></head><body> <!--设置了3号标题颜色为红色--> <h3 style="...原创 2020-01-10 00:33:12 · 1865 阅读 · 0 评论