HTML+CSS-02

最新推荐文章于 2024-10-11 17:41:10 发布
最新推荐文章于 2024-10-11 17:41:10 发布
阅读量381 收藏 4
点赞数 8
分类专栏： JavaWeb 文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59621600/article/details/135635663
版权

阿里巴巴矢量图标库的使用

阿里巴巴网址矢量图标库网址

https://www.iconfont.cn/

如何使用

  • 选择需要的icon图标
  • 加入购物车
  • 下载代码

案例-010

  • 在将解压后的文件夹复制到项目中
  • 进入demo_index.html中打开就可以看到示例的三种用法

案例-011

三种引入方法

Unicode 引用

Unicode 是字体在网页端最原始的应用方式，特点是：

  • 支持按字体的方式去动态调整图标大小，颜色等等。
  • 默认情况下不支持多色，直接添加多色图标会自动去色。

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

Unicode 使用步骤如下：

第一步：拷贝项目下面生成的 @font-face

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.ttf?t=1705403407065') format('truetype');
}

第二步：定义使用 iconfont 的样式

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

第三步：挑选相应图标并获取字体编码，应用于页面

<span class="iconfont">&#x33;</span>

“iconfont” 是你项目下的 font-family。可以通过编辑项目查看，默认是 “iconfont”。

font-class 引用

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

与 Unicode 使用方式相比，具有如下特点：

  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。

使用步骤如下：

第一步：引入项目下面生成的 fontclass 代码：

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

第二步：挑选相应图标并获取类名，应用于页面：

<span class="iconfont icon-xxx"></span>

" iconfont" 是你项目下的 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 class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>

案例-1-滚动的车轮

示例

案例-012

代码

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>车轮</title>
	<script src="../static/font_qugpaj0k5r8/iconfont.js"></script>
	<style type="text/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>
</head>

<body>

	<svg class="icon" aria-hidden="true">
		<use xlink:href="#icon-chelun"></use>
	</svg>
	<hr />
</body>

</html>

注意：

引入的图标素材代码的路径一定要正确

position定位

CSS position 属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。

示例

案例-014

定位类型

  • 定位元素（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）：

  1. 相对定位相对于自身位置： 元素在文档流中仍然占据原本的位置，但是可以通过相对定位属性来相对于其正常位置进行移动。

  2. 使用方法： 使用CSS中的 position: relative; 属性。

  3. 示例：

    .parent {
    position: relative;
}

.child {
    position: relative; /* 或者可以省略，因为相对定位是默认值 */
    top: 20px;
    left: 10px;
}

绝对定位（Absolute Positioning）：

  1. 绝对定位相对于最近的已定位的祖先元素，如果没有已定位的祖先元素，则相对于最初的包含块（通常是 <html> 元素）。

  2. 使用方法： 使用CSS中的 position: absolute; 属性。

  3. 示例：

    .parent {
    position: relative; /* 或者其他已定位的值 */
}

.child {
    position: absolute;
    top: 50px;
    left: 30px;
}

总结：

  • 相对定位是相对于元素自身正常位置进行移动。
  • 绝对定位是相对于最近的已定位祖先元素（如果有）或者最初的包含块进行移动。

在使用这两种定位方式时，可以通过 top、right、bottom、left 属性来调整元素的位置。

语法

position 属性被指定为从下面的值列表中选择的单个关键字。

案例-2-定位

示例

案例-013

代码

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/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>
</head>

<body>
	<ul class="max">
		<li>1
			<div class="list">手机</div>
		</li>
		<li>2
			<div class="list">电脑</div>
		</li>
		<li>3
			<div class="list">智能家居</div>
		</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>9</li>
		<li>10</li>
	</ul>
</body>

</html>

CSS背景

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 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。

案例-016

如果没有设置背景图片（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 属性用于为一个元素设置一个或者多个背景图像。

示例

案例-017

在绘制时，图像以 z 方向堆叠的方式进行。先指定的图像会在之后指定的图像上面绘制。因此指定的第一个图像“最接近用户”。

然后元素的边框 border 会在它们之上被绘制，而 background-color 会在它们之下绘制。图像的绘制与盒子以及盒子的边框的关系，需要在 CSS 属性background-clip 和 background-origin 中定义。

如果一个指定的图像无法被绘制 (比如，被指定的 URI 所表示的文件无法被加载)，浏览器会将此情况等同于其值被设为 none。

案例-3-背景

示例-默认平铺

image-20240116203924113

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.max{
				width: 800px;
				height: 800px;
				background-color: skyblue;
				/* background-image表示背景图片 */
				/* 背景图片默认采用平铺的方式 */
				background-image: url(../static/avatar/0003.jpg);
			}
		</style>
	</head>
	<body>
		<div class="max"></div>
	</body>
</html>

示例-取消平铺

image-20240116204124910

代码

.max{
    width: 800px;
    height: 800px;
    background-color: skyblue;
    /* background-image表示背景图片 */
    /* 背景图片默认采用平铺的方式 */
    background-image: url(../static/avatar/0003.jpg);
    /* 设置背景图片的平铺方式-不平铺 */
    background-repeat: no-repeat;
    }

示例-X轴平铺

image-20240116204328174

代码

.max{
    width: 800px;
    height: 800px;
    background-color: skyblue;
    /* background-image表示背景图片 */
    /* 背景图片默认采用平铺的方式 */
    background-image: url(../static/avatar/0003.jpg);
    /* 设置背景图片的平铺方式 */
    background-repeat: repeat-x;
    }

示例-居中平铺

image-20240116204629565

.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

示例

案例-018

CSS display 属性设置元素是否被视为块或者内联元素以及用于子元素的布局，例如流式布局、网格布局或弹性布局。

形式上，display 属性设置元素的内部和外部的显示类型。外部类型设置元素参与流式布局；内部类型设置子元素的布局。一些 display 值在它们自己的单独规范中完整定义；例如，在 CSS 弹性盒模型的规范中，定义了声明 display: flex 时会发生的细节。

常用属性

  1. block（块级元素）：

    • 元素会生成一个块级框，独占一行。
    • 宽度默认是容器的100%。
    • 可以设置宽度、高度、内外边距。
    display: block;

  2. inline（行内元素）：

    • 元素会生成一个行内框，不会独占一行，相邻的行内元素会在同一行显示。
    • 宽度和高度只取决于内容。
    • 不能设置宽度、高度、上下边距。
    display: inline;

  3. inline-block（行内块级元素）：

    • 元素生成一个行内框，但可以设置宽度、高度、内外边距。
    • 相邻的行内块级元素会在同一行显示。
    display: inline-block;

  4. flex（弹性盒子）：

    • 元素成为弹性容器，其子元素成为弹性项目。
    • 可以使用弹性布局来实现灵活的盒子模型。
    display: flex;

  5. grid（网格布局）：

    • 元素成为网格容器，可以使用网格布局来定义行和列。
    • 提供了更灵活的布局方式。
    display: grid;

  6. none（隐藏元素）：

    • 元素在页面上不显示，不占据空间。
    • 与 visibility: hidden; 不同，display: none; 不占据布局空间。
    display: none;

float

示例

案例-019

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 较大的重叠元素会覆盖较小的元素。

示例

案例-020

对于定位盒子（即 position 属性值非 static 的盒子），z-index 属性会指定：

  1. 盒子在当前层叠上下文中的层叠等级。
  2. 盒子是否会创建局部层叠上下文。

语法

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>。

甲柒
关注
专栏目录
html+js+css-detection-m笔记
07-24
html+js+css-detection-m笔记
HTML+CSS+JS构建的电商网站页面（源码）
07-14
在本项目中，"HTML+CSS+JS构建的电商网站页面（源码）"是一个针对初学者和学生设计的Web前端开发实践项目。这个项目利用HTML、CSS和JavaScript这三种核心技术来创建一个基本的电商网站界面，是学习前端开发的重要...
iconfont在html种颜色,iconfont+开始支持彩色图标
weixin_35170789的博客
06-16 810
之前发表过一篇关于iconfont图标字体的相关教程，以文字的方式，实现网页中的图标和特殊字符。教程链接可参考：http://bbs.520it.com/forum.php?mod=viewthread&tid=1950前段时间去iconfont官网逛逛，发现iconfont已经升级iconfont+了，对比起之前的iconfont，iconfont+最大的特点是什么呢？iconfont+...
小程序中使用彩色图标（阿里iconfont）
qq_42961150的博客
09-08 863
前言 字体图标我相信大家都很熟悉，阿里图标库官网：https://www.iconfont.cn/ 一般我们在开发的时候，都是使用iconfont来管理项目里面的图标。但是我们该如何在小程序中使用彩色的字体图标？ 效果图： 使用步骤 1. 首先就是下载自己需要的彩色图标 2. 解压下载的文件后，进入相应文件打开黑窗口（cmd/git都可以），全局安装iconfont-tools（npm i -g iconfont-tools）,然后运行iconfont-tools，生成iconfont-weapp文
定位和字体图标的引入知识点分享
lak_an_ke的博客
07-13 284
定位和字体图标的引入知识点分享
iconfont阿里字体图标的使用方法
a7412605567的博客
02-05 662
　　我们在做web项目的时候，之前比较常用的是bootstrap,所以使用font awesome字体图标比较多,无意中在一个项目中接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!今天就写个文章介绍下： 　　阿里图标官方地址： http://iconfont.cn/ 一、登录注册，这步就不说了直接跳过 二、注册后，可以先浏览图标，添加到购物车 ...
HTML(3)
KyleCao的专栏
04-09 750
font family Each font-family contains a set of fonts that share common characteristics. There are five font families: sans-serif, serif,monospace, cursive, and fantasy. Each family includes a large s
HTML5 + CSS3
坏蛋阿土的博客
10-29 8616
HTML指的是超文本标记语言(HyperText Markup Language)，它是用来描述网页的一种语言。 HTML不是一种编程语言，而是一种标记语言(markup language)。 标记语言是一套标记标签(markup tag)。所谓超文本，有2层含义∶ 1.它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。 2.它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本)。网页是由网页元素组成的，这些元素是利用html标签描述出来，然后通过浏览器解析来显示给用户的。浏
HTML+CSS+JS总结
m0_51480841的博客
08-28 8554
HTML是超文本标记语言是一种用于创建网页的标准标记语言。可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。 二.HTML标签 标签的概念 一个html文件是由标签和元素组成的html的标签还有很多包括input,from等等html标签对照表CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。1:继承性:父元素的样
web前端——HTML+CSS
m0_64378422的博客
02-10 3575
web前端——HTML+CSS
网页设计期末大作业+html+css
05-25
9个网页布局，学校让做的网站作业，虽然是比较基础的网页静态页面，不过我也希望你能做的规范一些，我们专业制作学生...DIV+css+js学生网站如何做？ 不靠这个吃饭--你还用自己做网站吗？ 大学生静态网页成品作业代做
网页设计期末大作业-大鱼海棠(html+css+js) 背景音乐需打开浏览器自动播放
03-19
网页设计期末大作业-大鱼海棠(html+css+js) 背景音乐需打开浏览器自动播放 网页设计期末大作业-大鱼海棠(html+css+js) 背景音乐需打开浏览器自动播放 网页设计期末大作业-大鱼海棠(html+css+js) 背景音乐需打开...
html+css网页设计源代码
11-07
HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是构建网页的两种核心技术，它们共同决定了网页的结构和样式。在这个“html+css网页设计源代码”中，我们有机会深入理解这两种语言如何协同工作，...
Chromium html＜input＞对应c++接口定义
杰克东的专栏
10-11 461
定义和用法标签定义输入字段，用户可以在其中输入数据。元素是最重要的表单元素。元素可以以多种方式显示，具体取决于。参阅，以查看每种输入类型的实例！
React 插入不转义的html
y523648的博客
10-08 424
在 React 中，字符串作为内容插入到 JSX 中，默认会被转义。这是为了防止 执行恶意代码，XSS（跨站脚本攻击）等安全问题。如果想要 HTML 不被转义，可以使用dangerouslySetInnerHTML属性。
html中src/href区别
hexadecimal_001的博客
10-05 841
在HTML中，src和href是两个常见的属性，它们用于指定资源的位置，但用途和上下文有所不同。
002-Html
xiaogang1226的博客
10-08 868
【代码】002-Html。
v-html里面的标签设置样式没有用怎么办？
最新发布
eren_yeger的博客
10-11 330
v-html里面的标签设置样式没有用是因为style里面设置了scoped，html绑定渲染出的内容可以理解为是子组件的内容，子组件不会被加上对应的属性，所以不会应用css。2.另外一种方法利用vue的深度作用选择器，要为v-html渲染出中的标签添加CSS样式，我们需要在写样式的时候添加>>>就可以搞定了。1.一种是把scoped属性去掉就行了。
Chromium html＜body＞对应c++接口定义
杰克东的专栏
10-11 345
<!DOCTYPE html> <html> <head> <title>文档标题</title> </head> <body> <h1>这是一个标题</h1> <p>这是一个段落。</p> </body> </html> 1、html_body_element.idl中接口定义： （third_part
精通HTML+CSS文字阴影效果制作
资源摘要信息:"Web-前端html+css从入门到精通 158. textshadow文字阴影.zip" 在前端开发领域，HTML和CSS是构建网页的两大基石。HTML（HyperText Markup Language）负责网页的结构和内容，而CSS（Cascading Style ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

甲柒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值