建设网站需要展示什么,c#网站开发网易云课堂百度云下载,网站做好了怎样推广,wordpress主题销售阿里巴巴矢量图标库的使用
阿里巴巴网址矢量图标库网址
https://www.iconfont.cn/
如何使用
选择需要的icon图标加入购物车下载代码 在将解压后的文件夹复制到项目中进入demo_index.html中打开就可以看到示例的三种用法 三种引入方法
Unicode 引用 Unicode 是字体在网页端…阿里巴巴矢量图标库的使用
阿里巴巴网址矢量图标库网址
https://www.iconfont.cn/
如何使用
选择需要的icon图标加入购物车下载代码 在将解压后的文件夹复制到项目中进入demo_index.html中打开就可以看到示例的三种用法 三种引入方法
Unicode 引用 Unicode 是字体在网页端最原始的应用方式特点是
支持按字体的方式去动态调整图标大小颜色等等。默认情况下不支持多色直接添加多色图标会自动去色。 注意新版 iconfont 支持两种方式引用多色图标SVG symbol 引用方式和彩色字体图标模式。使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。 Unicode 使用步骤如下
第一步拷贝项目下面生成的 font-face
font-face {font-family: iconfont;src: url(iconfont.ttf?t1705403407065) format(truetype);
}第二步定义使用 iconfont 的样式
.iconfont {font-family: iconfont !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}第三步挑选相应图标并获取字体编码应用于页面
span classiconfont#x33;/span“iconfont” 是你项目下的 font-family。可以通过编辑项目查看默认是 “iconfont”。 font-class 引用 font-class 是 Unicode 使用方式的一种变种主要是解决 Unicode 书写不直观语意不明确的问题。
与 Unicode 使用方式相比具有如下特点
相比于 Unicode 语意明确书写更直观。可以很容易分辨这个 icon 是什么。因为使用 class 来定义图标所以当要替换图标时只需要修改 class 里面的 Unicode 引用。
使用步骤如下
第一步引入项目下面生成的 fontclass 代码
link relstylesheet href./iconfont.css第二步挑选相应图标并获取类名应用于页面
span classiconfont icon-xxx/spaniconfont 是你项目下的 font-family。可以通过编辑项目查看默认是 “iconfont”。 Symbol 引用 这是一种全新的使用方式应该说这才是未来的主流也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合与另外两种相比具有如下特点
支持多色图标了不再受单色限制。通过一些技巧支持像字体那样通过 font-size, color 来调整样式。兼容性较差支持 IE9及现代浏览器。浏览器渲染 SVG 的性能一般还不如 png。
使用步骤如下
第一步引入项目下面生成的 symbol 代码
script src./iconfont.js/script第二步加入通用 CSS 代码引入一次就行
style
.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;
}
/style第三步挑选相应图标并获取类名应用于页面
svg classicon aria-hiddentrueuse xlink:href#icon-xxx/use
/svg案例-1-滚动的车轮
示例 代码
!DOCTYPE html
htmlheadmeta charsetutf-8title车轮/titlescript src../static/font_qugpaj0k5r8/iconfont.js/scriptstyle typetext/css.max {width: 100px;height: 100px;border: 10px solid yellow;}.icon {width: 20em;height: 20em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;transition: all 4s;}hr {margin: 0px;height: 30px;background-color: #00FFFF;transform: translateY(-10px);}svg:hover {transform: translateX(1000px) rotate(3600deg);}/style
/headbodysvg classicon aria-hiddentrueuse xlink:href#icon-chelun/use/svghr /
/body/html注意
引入的图标素材代码的路径一定要正确
position定位
CSS position 属性用于指定一个元素在文档中的定位方式。toprightbottom 和 left 属性则决定了该元素的最终位置。
示例 定位类型
定位元素positioned element是其计算后位置属性为 relative, absolute, fixed 或 sticky 的一个元素换句话说除static以外的任何东西。相对定位元素relatively positioned element是计算后位置属性为 relative的元素。绝对定位元素absolutely positioned element是计算后位置属性为 absolute 或 fixed 的元素。粘性定位元素stickily positioned element是计算后位置属性为 sticky 的元素。
大多数情况下height和width 被设定为 auto 的绝对定位元素按其内容大小调整尺寸。但是被绝对定位的元素可以通过指定top和bottom 保留height未指定即auto来填充可用的垂直空间。它们同样可以通过指定left 和 right并将width 指定为auto来填充可用的水平空间。
除了刚刚描述的情况绝对定位元素填充可用空间
如果 top 和 bottom 都被指定严格来说这里指定的值不能为 auto top 优先。如果指定了 left 和 right 当 direction设置为 ltr水平书写的中文、英语时 left 优先当direction设置为 rtl阿拉伯语、希伯来语、波斯语由右向左书写时 right 优先。
相对定位Relative Positioning 相对定位相对于自身位置 元素在文档流中仍然占据原本的位置但是可以通过相对定位属性来相对于其正常位置进行移动。 使用方法 使用CSS中的 position: relative; 属性。 示例 .parent {position: relative;
}.child {position: relative; /* 或者可以省略因为相对定位是默认值 */top: 20px;left: 10px;
}绝对定位Absolute Positioning 绝对定位相对于最近的已定位的祖先元素如果没有已定位的祖先元素则相对于最初的包含块通常是 html 元素。 使用方法 使用CSS中的 position: absolute; 属性。 示例 .parent {position: relative; /* 或者其他已定位的值 */
}.child {position: absolute;top: 50px;left: 30px;
}总结
相对定位是相对于元素自身正常位置进行移动。绝对定位是相对于最近的已定位祖先元素如果有或者最初的包含块进行移动。
在使用这两种定位方式时可以通过 top、right、bottom、left 属性来调整元素的位置。
语法
position 属性被指定为从下面的值列表中选择的单个关键字。
案例-2-定位
示例 代码
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlestyle typetext/css* {padding: 0px;margin: 0px;}.max {width: 234px;height: 420px;padding: 20px 0px;background-color: rgba(105, 101, 101, .6);margin: 0px auto;}li {list-style: none;padding-left: 30px;height: 42px;line-height: 42px;position: relative;}li:hover {background-color: #ff6700;}.list {width: 230px;height: 300px;background-color: skyblue;display: none;}li:hover .list {display: flex;position: absolute;top: 0;left: 234px;}/style
/headbodyul classmaxli1div classlist手机/div/lili2div classlist电脑/div/lili3div classlist智能家居/div/lili4/lili5/lili6/lili7/lili8/lili9/lili10/li/ul
/body/htmlCSS背景
background
background 是一种 CSS 简写属性用于一次性集中定义各种背景属性包括 color, image, origin 与 size, repeat 方式等等。
示例 此属性是一个 简写属性可以在一次声明中定义一个或多个属性background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size和 background-attachment。
对于所有简写属性任何没有被指定的值都会被设定为它们的 初始值。
语法
CSS
/* 使用 background-color */
background: green;/* 使用 bg-image 和 repeat-style */
background: url(test.jpg) repeat-y;/* 使用 box 和 background-color */
background: border-box red;/* 将背景设为一张居中放大的图片 */
background: no-repeat center/80% url(../img/image.png);background 属性被指定多个背景层时使用逗号分隔每个背景层。
background-clip
background-clip 设置元素的背景背景图片或颜色是否延伸到边框、内边距盒子、内容盒子下面。 如果没有设置背景图片background-image或背景颜色background-color那么这个属性只有在边框 border被设置为非固实soild、透明或半透明时才能看到视觉效果与 border-style 或 border-image 有关否则本属性产生的样式变化会被边框覆盖。
语法
CSS
/* Keyword values */
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;/* Global values */
background-clip: inherit;
background-clip: initial;
background-clip: unset;background-color
概览
CSS属性中的 background-color 会设置元素的背景色属性的值为颜色值或关键字transparent二者选其一。
语法
CSS
/* 关键词颜色值 */
background-color: red;/* 十六进制值 */
background-color: #bbff00;/* RGB value */
background-color: rgb(255, 255, 128);/* HSLA value */
background-color: hsla(50, 33%, 25%, 0.75);/* Special keyword values */
background-color: currentColor;
background-color: transparent;/* 全局设置 */
background-color: inherit;
background-color: initial;
background-color: unset;background-color 属性只能使用 color 值。
取值 color 一个描述背景统一颜色的 CSS color 值。即使一个或几个的 background-image 被定义如果图像是不透明的通过透明度该颜色也能影响到渲染。在 CSS 中transparent 是一种颜色。
background-image
CSS background-image 属性用于为一个元素设置一个或者多个背景图像。
示例 在绘制时图像以 z 方向堆叠的方式进行。先指定的图像会在之后指定的图像上面绘制。因此指定的第一个图像“最接近用户”。
然后元素的边框 border 会在它们之上被绘制而 background-color 会在它们之下绘制。图像的绘制与盒子以及盒子的边框的关系需要在 CSS 属性background-clip 和 background-origin 中定义。
如果一个指定的图像无法被绘制 (比如被指定的 URI 所表示的文件无法被加载)浏览器会将此情况等同于其值被设为 none。
案例-3-背景
示例-默认平铺 代码
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlestyle typetext/css.max{width: 800px;height: 800px;background-color: skyblue;/* background-image表示背景图片 *//* 背景图片默认采用平铺的方式 */background-image: url(../static/avatar/0003.jpg);}/style/headbodydiv classmax/div/body
/html
示例-取消平铺 代码
.max{width: 800px;height: 800px;background-color: skyblue;/* background-image表示背景图片 *//* 背景图片默认采用平铺的方式 */background-image: url(../static/avatar/0003.jpg);/* 设置背景图片的平铺方式-不平铺 */background-repeat: no-repeat;}示例-X轴平铺 代码
.max{width: 800px;height: 800px;background-color: skyblue;/* background-image表示背景图片 *//* 背景图片默认采用平铺的方式 */background-image: url(../static/avatar/0003.jpg);/* 设置背景图片的平铺方式 */background-repeat: repeat-x;}示例-居中平铺 .max{width: 800px;height: 800px;background-color: skyblue;/* background-image表示背景图片 *//* 背景图片默认采用平铺的方式 */background-image: url(../static/avatar/0003.jpg);/* 设置背景图片的平铺方式 */background-position: center center;}示例-图片缩放平铺 .max{width: 800px;height: 800px;background-color: skyblue;/* background-image表示背景图片 *//* 背景图片默认采用平铺的方式 */background-image: url(../static/avatar/0003.jpg);/* 第一个值表示背景图片的宽度 第二个值表示背景图片的高度 */background-size: 20% 20%;}display
示例 CSS display 属性设置元素是否被视为块或者内联元素以及用于子元素的布局例如流式布局、网格布局或弹性布局。
形式上display 属性设置元素的内部和外部的显示类型。外部类型设置元素参与流式布局内部类型设置子元素的布局。一些 display 值在它们自己的单独规范中完整定义例如在 CSS 弹性盒模型的规范中定义了声明 display: flex 时会发生的细节。
常用属性 block块级元素 元素会生成一个块级框独占一行。宽度默认是容器的100%。可以设置宽度、高度、内外边距。 display: block;inline行内元素 元素会生成一个行内框不会独占一行相邻的行内元素会在同一行显示。宽度和高度只取决于内容。不能设置宽度、高度、上下边距。 display: inline;inline-block行内块级元素 元素生成一个行内框但可以设置宽度、高度、内外边距。相邻的行内块级元素会在同一行显示。 display: inline-block;flex弹性盒子 元素成为弹性容器其子元素成为弹性项目。可以使用弹性布局来实现灵活的盒子模型。 display: flex;grid网格布局 元素成为网格容器可以使用网格布局来定义行和列。提供了更灵活的布局方式。 display: grid;none隐藏元素 元素在页面上不显示不占据空间。与 visibility: hidden; 不同display: none; 不占据布局空间。 display: none;float
示例 float CSS 属性指定一个元素应沿其容器的左侧或右侧放置允许文本和内联元素环绕它。该元素从网页的正常流动文档流中移除但是仍然保持部分的流动性与绝对定位相反。
语法
CSS
/* Keyword values */
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;/* Global values */
float: inherit;
float: initial;
float: revert;
float: unset;z-index
CSS z-index 属性设置定位元素及其后代元素或 flex 项目的 Z 轴顺序。z-index 较大的重叠元素会覆盖较小的元素。
示例 对于定位盒子即 position 属性值非 static 的盒子z-index 属性会指定
盒子在当前层叠上下文中的层叠等级。盒子是否会创建局部层叠上下文。
语法
CSS
/* 关键字值 */
z-index: auto;/* 整数值 */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /* 使用负值降低优先级 *//* 全局值 */
z-index: inherit;
z-index: initial;
z-index: unset;z-index 属性可以被设置为关键字 auto 或 integer。
