HTML学习

已于 2022-10-27 14:10:19 修改
阅读量1.8k 收藏 1
点赞数 1
文章标签： html 学习 前端
于 2022-10-18 23:39:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_72238093/article/details/127359716
版权

HTML学习

一、HTML+CSS系列之导学

（一）、 拨云见日

  1. HTML+CSS基础学习
  2. 切图方式
  3. 实战讲解：pc企业站布局，pc游戏站布局

（二）、溯本求源

  1. HTML+CSS扩展内容
  2. HTML5新语法+CSS3新语法
  3. 不同浏览器兼容问题与解决方案

（三）、风生水起

  1. 弹性布局
  2. 网格布局
  3. 移动端布局
  4. 响应式布局
  5. Bootstrap框架

（四）、巧夺天工

  1. 预编译CSS
  2. postcss
  3. CSS框架
  4. 高级功能
  5. CSS与JS交互

二、HTML+CSS系列①之拨云见日

（一）、什么是HTML和CSS？

它们是两种编程语言，一般情况下需要配合使用，是作为网站开发的基础语言。

1.1如何看到网站原始代码？

通过鼠标右键点击选择查看网页源代码。

1.2如何创建html文件

可以直接创建一个文本文件再更改为后缀为.html的文件。

（二）、编辑器VS Code

简介：VS Code全称Visual Studio Code，来自微软，是一个开源、基于Electron的轻量代码编辑器。

2.1如何安装插件？

通过左侧边栏的扩展进行搜索下载。

2.2编辑器的基本使用

  • ctrl+s：保存　　　　　　　shift+end：从头选中一行
  • ctrl+a：全选　　　　　　　shift+home：从尾部选中一行
  • ctrl+x：剪切　　　　　　　shift+alt+↓：快速复制一行
  • ctrl+z：撤销　　　　　　　alt+↑或↓：快速移动一行
  • ctrl+c：复制　　　　　　　tab：向后缩进
  • ctrl+v：粘贴　　　　　　　tab+shift：向前缩进
  • ctrl+y：前进　　　　　　　alt+鼠标左键：多光标
  • ctrl+d：选择相同元素的下一个

2.3Chrome浏览器

（三）、深入了解网站开发

一个大型网站的开发，需要团队的配合，各个岗位不可或缺。
如：ui设计师，web前端开发工程师，web后端开发工程师。

（四）、Web前端的三大核心技术

HTML：结构
CSS：样式
JavaScript：行为

（五）、HTML基本结构和属性

HTML：超文本标记语言

5.1标记（标签）

有两种写法：①单标签：<img> ②双标签：<header></header>

创建标签的快捷键：单词+tab键

标签可以是上下排列也可以是组合嵌套。

标签的属性：来修饰标签的，设置当前标签的一些功能。
<标签 属性=“值” 属性2=“值2”…>

（六）、HTML的初始代码

每个html文件都有的代码叫做初始代码，要符合html文件的规范写法
tab键+！：快速创建html的初始代码

<!DOCTYPE html>   文档声明：告诉浏览器这是一个html文件
<html lang="en">文件的最外层标签：包裹着所有html标签代码lang="en"表示一个英文网站 lang="zh-CN"表示一个中文网站
<head>
    <meta charset="UTF-8">   元信息：是编写网页中的一些赋值信息
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>  设置网页的标题
</head>
<body>
    显示网页内容的区域
</body>
</html>

（七）、HTML中的注释

在浏览器中看不见，只能在代码中看见的注释内容
写法<!--注释内容-->
意义 1.把暂时不用的代码注释起来，方便以后使用。 2.对开发人员进行提示。
快捷键 添加删除注释：①ctrl+/ ②shift+alt+a

(八）、HTML中的语义化

根据网页中内容的结构，选择合适的标签进行书写

优点

  1. 在没有CSS的情况下，页面也能呈现出很好的结构。
  2. 有利于SEO，让搜索引擎爬虫更好的理解网页。
  3. 方便其他设备解析（如屏幕阅读器，盲人阅读器等）
  4. 便于团队开发和维护。

(九)、段落和标题

9.1标题

标题是一个双标签。在一个网页中h1标签最重要并且只能出现一次，h5和h6不常用

写法： <h1></h1>...<h6></h6>

9.2段落

段落是一个双标签

写法：<p></p>

（十）、标签

10.1文本修饰标签

表示强调的标签有两种都是双标签
区别：1. 写法和展示效果有区别，strong加粗，em斜体
　　　2. strong的强调性更强，em稍弱

写法：<strong></strong> <em></em>

上标：<sup></sup>
下标：<sub></sub>
删除文本：<del></del>
插入文本：<ins></ins>

10.2图片标签

img为单标签
属性：src：引入图片地址
　　　alt：当图片出现问题，可以显示一段文字
　　　title：提示信息
　　　width、height：图片的大小

（十一）、文件的地址路径

11.1相对路径

.在路径中表示当前路径,两个.表示上一级路径
例：<img src="./dog.jpg" alt="">
　　<img src="../dog.jpg" alt="">

11.2绝对路径

直接拷贝文件路径放进代码中（盘符名称可省略）
例：<img src="D:/dog.jpg" alt="">

（十二）、跳转

12.1跳转链接

a为双标签
写法：<a></a>
href属性：链接的地址
target属性：可以改变链接打开方式，默认为当前页面打开。
当前页面打开：_self 新窗口打开：_blank

base单标签 作用：改变链接的默认行为。

12.2跳转锚点

实现1：#号 ID属性（在href后添加）
例：<a href="#html">html</a> <h2 id="html">html超文本</h2>

实现2：#号 name属性（给a添加的属性）
例：<a href="#html">html</a>
<a name="html"></a>
<h2>html超文本</h2>

（十三）、特殊符号

  1. &+字符 2. 用来解决冲突

一些特殊字符的代码：

（十四）、列表

14.1无序列表

用ul,li标签表示
ul：列表的最外层容器 li：列表项
注意：ul和li必须组合出现，中间不能有其他标签。
type属性：改变前面标记样式（一般用css控制）

例：

<ul>
    <li>第一项</li>
    <li>第二项</li>
</ul>

14.2有序列表

用ol，li标签表示
ol：列表的最外层容器 li：列表项
注意：有序列表用到的非常少，经常用到的是无序列表，无序列表可以代替有序列表。两个标签中间不能有其他标签。
type属性：改变前面标记样式（一般用css控制）

例：

<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>

14.3定义列表

dl：定义列表
dt：定义专业术语或名词（标题）
dd：对名词进行解释和描述

例：

<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
</dl>

14.4嵌套列表

列表之间可以相互嵌套，形成多层级列表。

例：

<ul>
    <li>辽宁省
        <ul>
            <li>沈阳市</li>
        </ul>

    </li>

</ul>

（十五）、表格标签

<table>：表格的最外层容器
<tr>：定义表格行
<th>：定义表头
<td>：定义表格单元（具体内容）
<caption>：定义表格标题
语义化标签：<tHead>、<tBody>、<tFood>

在一个table中，tHead和tFood都是只能出现一次，tBody可以出现多次。

（十六）、表格属性

border：表格边框（加到table上）
cellpadding：单元格内的空间
cellspacing：单元格之间的空间
rowspan：合并行
colspan：合并列
align：左右对齐方式
valign：上下对齐方式

（十七）、表单

<form>：表单最外层容器
<input>：标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。

type属性：
在这里插入图片描述

常见标签：
textarea、select、label…

常见属性：
placeholder：输入一些提示内容
name：可以绑定两项
checked：选中
disabled：不能选择
action：发送表单数据
multiple：多选

表单表格结合示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <table border="1" cellpadding="30">
            <tBody>
                <tr align="center">
                    <td rowspan="4">总体信息</td>
                    <td colspan="2">用户注册</td>
                </tr>
                <tr align="right">
                    <td>用户名：</td>
                    <td><input type="text" placeholder="请输入用户名"></td>
                </tr>
                <tr align="right">
                    <td>密码：</td>
                    <td><input type="password" placeholder="请输入密码"></td>
                </tr>
                <tr align="center">
                    <td colspan="2">
                        <input type="submit">&nbsp;&nbsp;&nbsp;
                        <input type="reset">
                    </td>
                </tr>
            </tBody>
        </table>
    </form>
</body>
</html>

（十八）、div和span

div：表示分割，用来将网页分割，实现网页的规划和布局
span：对文字进行修饰的内联

（十九）、CSS语法

选择器{属性1：值1；属性2：值2}

width：宽
height：高
background-color：背景色

长度单位：
1.px（像素）
2.%（百分比）根据外容器大小决定

CSS注释：/* CSS注释内容 */

（二十）、内联和内部样式及外部样式

内联样式：在html标签上添加style属性来实现的
内部样式：在style标签内添加样式
注：内部样式的优点，可以复用代码

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{width: 100px;height: 100px;background-color: red;}
    </style>
</head>
<body>
    <div></div>
    <div style="width:200px;height:150px;background-color: blue;"></div>
</body>
</html>

外部样式：引入一个单独的CSS文件，name.css
1.通过link标签引入外部资源，rel属性指定资源跟页面的关系，href属性资源的地址
2.通过@import url来引入（不建议使用，会有很多问题）

rel的值：
在这里插入图片描述

（二十一）、CSS中的颜色表示法

1.单词表示法：red blue…
2.十六进制表示法：0到9加上a到f构成16位 如：#000000
3.rgb三原色表示法：取值为0到255 如rgb（0,0,0）

（二十二）、CSS背景样式

background-color：背景颜色

background-image：背景图片
url（背景地址）
默认会水平垂直都铺满背景图

background-repeat：背景图片的平铺方式
repeat-x x轴平铺
repeat-y y轴平铺
repeat （x，y轴都进行平铺，默认值）
no-repeat 都不平铺

background-position：背景图片的位置
x y:number（px、%）| 单词
x：left、center、right
y：left、center、right

background-attachment：背景图随滚动条的移动方式
scroll：默认值（背景位置是按照当前元素进行偏移的）
fixed（背景位置是按照浏览器进行偏移的）

视觉差示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{width: 2560px;height: 1440px;background-image: url(1.JPG);background-attachment: fixed;}
        #div2{width: 2560px;height: 1440px;background-image:url(./2.jpg);background-attachment: fixed;}
        #div3{width: 2560px;height: 1440px;background-image:url(./3.jpg);background-attachment: fixed;}
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>
</html>

（二十三）、CSS边框样式

border-style：边框的样式
solid：实线
dashed：虚线
dotted：点线

border-width：边框的大小
px…

border-color：边框的颜色
red #00000…
注：可以针对某一条边进行设置：border-left-style：中间是方向 left、right、top、bottom
透明颜色：transparent

边框实现三角形示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    div{width: 0px;height: 0px;
    border-top-color:transparent ;
    border-top-style:solid ;
    border-top-width: 30px;
    border-right-color:transparent ;
    border-right-style:solid ;
    border-right-width: 30px;
    border-left-color:transparent ;
    border-left-style:solid ;
    border-left-width: 30px;
    border-bottom-color:brown ;
    border-bottom-style:solid ;
    border-bottom-width: 30px;
    }

</style>
</head>
<body>
    <div></div>
</body>
</html>

（二十四）、CSS文字样式

font-family：字体类型
　有中文字体和英文字体
　衬线体和非衬线体
注意点：
　1.多个字体类型设置
　2.注意引号的使用（中间有空格的要用）

font-size：字体大小
　默认为16px
　写法：number（px）|单词（small large…不推荐使用）
　注：字体大小一般为偶数

font-weight：字体加粗
　模式：正常（normal） 加粗（bold）
　写法：单词（normal、bold）|number（100到900,100到500是正常的，600到900都是加粗的）

font-stytle：字体样式
　模式：正常（normal） 斜体（italic）
　写法：单词（normal、italic、）
注：oblique也是斜体，但使用较少，了解既可
区别：1.italic 所有带有倾斜字体的才可以设置倾斜操作
　　2.oblique 没有倾斜属性的字体也可以设置倾斜操作
　　color：颜色

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
#div1{font-style: italic;font-weight: bold;}
#div2{color: green;}

</style>
</head>
<body>
    <div id="div1">Angelababy(杨颖),1989年2月28日出生于上海市,华语影视女演员、时尚模特。
    </div>
        
     <div id="div2">
        2003年,Angelababy以模特身份出道,此后,因担任时尚模特而在香港崭露头角。2007年,开始将工作重心转向大银幕。2011年,在爱情片《夏日乐悠悠》中首次担任电影女主角。2012年,凭借言情片《第一次》获得第13届华语电影传媒大奖最受瞩目女演员奖。2013年,与其她三位女艺人被《南都娱乐周刊》选为新“四小花旦”；同年,她还完成了个人的荧屏处女作《大汉情缘之云中歌》。 2014年,开始凭借真人秀《奔跑吧兄弟》赢得广泛关注;同年,她还因出演古装剧《狄仁杰之神都龙王》获得第21届北京大学生电影节最受欢迎女演员奖。2015年,其主演的冒险片《鬼吹灯之寻龙诀》票房突破16亿人民币,而她也凭借该片获得第33届大众电影百花奖最佳女配角奖。2017年,其主演的古装剧《孤芳不自赏》取得全国同时段电视剧收视冠军。2020年,主演爱情片《明天你是否依然爱我》,同年,第八次入选福布斯中国名人榜,并位列第16位。
     </div>
</body>
</html>

（二十五）、CSS段落样式

text-decoration：文本装饰
　下划线：underline
　删除线：line-through
　上划线：overline
　不添加任何装饰：none
　注：添加多个文本修饰通过空格隔开

text-transform：文本大小写（针对英文段落）
　大写：uppercase
　小写：lowercase
　首字母大写：capitalize

text-indent：文本缩进
　首行缩进
　em单位：相对单位，1em永远和字体大小相同

text-align：文本对齐方式
　常用对齐方式：left right center justify（两端对齐）

line-height：定义行高
　行高：既一行文字的高度，上边距和下边距等价
　默认行高：不是固定值，随字体大小变化
　取值：number（px）|scale（比例值，跟文字大小成比例）如：1,2,3…

文本间距与折行：
　letter-spacing：字之间的间距
　word-spacing：词之间的间距（针对英文段落）
　英文和数字不自动折行问题
　1.word-break：break-all；（非常强烈的折行）
　2.word-wrap：break-word；（不是特别强烈的折行，会有一些空白区域）

（二十六）、CSS复合样式

复合的写法，是通过空格的方式实现的。复合写法有的是不需要关心顺序，例如background、border；有的需要考虑顺序，如font。
1.background:red url() repeat 0 0；
2.border:1px red solid；
3.fond：
　注：最少要有两个值 size family（并且要保证顺序，size和family写在最后）
　size/line-height family也是对的

注：尽量不要混写，如果混写，要先写复合样式再写单一样式

（二十七）、CSS选择器

id选择器：
CSS:　#elem{}
html:　id=“elem”
注：
1.在一个页面中，id值是唯一的。出现多次是不符合规范的
2.命名规范：字母、下划线、中划线、数字（命名的第一位不能是数字）
3.命名方式：
　　驼峰式：searchButton（小驼峰） SearchButton（大驼峰）
　　短线写法：search-small-button
　　下划线写法：search_small_button

CLASS选择器
CSS：.elem{}
html：class=“elem”
注：
　1.class选择器可以复用
　2.可以添加多个class样式
　3.多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序
　4.标签+类的写法（标签.class选择器名字）

银色-
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
NO.6 html容器的最大最小宽高设定，以及百分比宽高 （部分）
lzh131464的博客
12-24 1500
在HTML中，min与max属性 可以为容器设定最大、最小宽高。 格式语法： css选择器{ min-width:"值"；max-width:"值"； min-height:"值"；max-height:"值"； } 当设定了最大最小宽高值后，容器的大小会随内容的改变而自适应（在设定的值范围内），尽量避免内容溢出容器。 图解： 在这里插入图片描述 在HTML中，为容器的宽高属性赋“百分比”的值时，是根据
html容器标签_HTML容器标签
cuk0051的博客
08-27 4703
html容器标签 容器标签 (Container tags) HTML provides a set of container tags. Those tags can contain an unspecified set of other tags. HTML提供了一组容器标记。 这些标签可以包含一组未指定的其他标签。 We have: 我们有： article article s...
html 容器 div简介
小步教程
08-28 325
html 容器 div简介 | 小步教程div：动词divide，名词division；中文意思：划分。div标签用作容器，其中可以包含其它的html标签，div标签同时可以继续嵌套div标签。 div标签里的内容既可以是文本，也可以嵌套其它标签，图片、视频、段落、标题、等。需求场景：需要通过一个容器包含多个段落<p>，然后容器加上灰色边框。分析：段落p里无法继续嵌套段落p，外部需要使用div作为容器。错误代码 F12看浏览器如何解析的，将外层的p标签解析成了两个p标签，开始一个，结尾一个。简言之，
详解HTML的盒模型以及HTML相关知识点
rr20060119的博客
10-14 3333
HTML，全称为超文本标记语言（HyperText Markup Language），是一种用于创建网页结构的标记语言。HTML用于描述和定义网页的结构和内容，通过使用标签和属性来标记和组织文档中的各个元素。一个HTML文档由DOCTYPE>文档类型声明、根元素以及头部和主体组成。HTML标签用于定义文档的不同部分和元素，如标题、段落、链接、图像等。每个标签通常有一个起始标签和一个结束标签，并可以包含其他嵌套标签。
HTML初识-01
pijrix的博客
09-16 314
对于HTML的基础初识
html 学习教程.zip
03-13
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
HTML 学习记录.zip
03-13
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
css、html 学习.zip
03-13
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
HTML 学习和项目文件.zip
最新发布
03-13
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
Html 学习与实践项目.zip
03-13
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
HTML：容器元素
雷爷的博客
08-27 2072
容器元素 容器元素：该元素代表一个块区域，内部用于放置其他元素 div元素 没有语义 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-...
H5 布局 -- 让容器充满屏幕高度或自适应剩余高度
Alex_Zhao 的博客
05-15 3万+
在前端页面布局中，经常会碰到要让容器充满整个屏幕高度或者剩余屏幕高度的需求。一般这时候都会想当然的使用 height:100% 这样的 CSS 来写。这样写的话，当容器内内容很多的时候是没有问题的，可以达到预期的效果，但是如果容器内内容比较少，不足以撑起足够的高度的话，这个CSS 样式实际上是没起作用的。那要怎么解决这个问题呢？ 让容器高度充满这个屏幕 在容器内容很少的情况下，要想让这个容器充...
跟着小黑学Java-2-前端-HTML基础-容器、文字控件
loowooowool的博客
01-10 548
上一篇文章，我们从直观上先认识了一下HTML文件，并创建了第一个HTML文件。本篇开始，我们来一起充实这个网页。在我们平时经常浏览的网页中有各种各样的内容，到底是怎么产生的和排布的，我们来一起逐一学习。因为内容和样式密不可分，本篇开始，我们也会慢慢接触网页中的另一个重要文件CSS文件。简单理解就是HTML文件提供网页中的内容，而CSS文件则是控制这些内容的样式，样式概念如果没有接触过，可以这样理解
＜div＞ | HTML元素容器标签
weixin_44111587的博客
06-04 2318
定义与用法 <div>标签定义 HTML 文档中的一个区块或者一部分。 <div>标签用来组合块级元素，经常与 CSS 一起使用，用来布局网页。。 <div>标签就像一个容器单元，用于封装其他页面元素，并将HTML文档分为几部分。 提示：默认情况下，浏览器通常会在 <div> 元素前后放置一个换行符，我们您可以用 CSS 调整显示效果。 div标签和span标签的区别 div标签 跨度标签 HTML...
怎么创建一个html程序,html – 如何在引导程序中创建一个较小的容器
weixin_32822089的博客
06-24 145
这可能对您有所帮助：@media (min-width: 768px) {.container-small {width: 300px;}.container-large {width: 970px;}}@media (min-width: 992px) {.container-small {width: 500px;}.container-large {width: 1170px;}}@medi...
java 界面容器_Java 图形界面(其他容器)
weixin_42306699的博客
02-19 143
【1】 JSplitPane 主要功能是分割面板，可以将一个窗体分割为两个子窗体，可以是水平排列也可以是垂直排列的。【2】 JTabbedPane 是在一个面板上设置多个选项卡供用户选择。【3】 在一般的图形界面中，如果显示的区域不够大， 往往会出现滚动条以方便用户浏览，在Swing 中 JScrollPane 的主要功能就是为了显示 的内容加入水平滚动条。【4】 在Swing ...
Html容器机制说明
光英的记忆博客
04-09 579
目录   1.设计概要                                                                                                                           3 2.MyWebChromeClient（Html基础支撑）                                
html如何制作悬浮的容器,html – 如何中心浮动div在容器中
weixin_36168972的博客
06-05 183
是否有可能将浮动div放在容器中，如果是这样的话？例如，我有一个容器div包含大量可变大小(动态生成)浮动(左)div的页面。 divs溢出到下一行reguarly，但他们从来没有居中在容器div，而是左对齐。它看起来像这样：----------------------------- -- +++ +++++ ++++ ++ -- +...
【Web】HTML如何让IMG自动适应DIV容器大小
热门推荐
沙师弟专栏
05-22 15万+
如下是两个大小和比例都不同的图片，应用这个方法可以让图片自动填充并居中显示。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值