HTML入门:[3]图片类的代码处理
1、本节需要用到一些图片,首先需要找一些图片素材,将图片改为英文名字(中文名字在网站链接中容易出现错误),修改图片大小。
![HTML入门:[3]图片类的代码处理](https://exp-picture.cdn.bcebos.com/52fae62064fb960b095a75d58fa355e982ae6cd3.jpg)
2、编写一个基础页面【图片.html】,和图片文件放在同一文件夹下。
![HTML入门:[3]图片类的代码处理](https://exp-picture.cdn.bcebos.com/04201aa355e983aed5ac299e68efe078153169d3.jpg)
3、图像标签
可以设置图片的源文件位置、图片大小和提示文字等内容。图片尺寸大小可以通过右键查看图片属性获得。
代码设置如下:
![HTML入门:[3]图片类的代码处理](https://exp-picture.cdn.bcebos.com/586bfdefe07814319dcd42d8dc6699cf035362d3.jpg)
![HTML入门:[3]图片类的代码处理](https://exp-picture.cdn.bcebos.com/988e1c532f632385a94d9225cce833e038725dd3.jpg)
4、页面显示如下:
并列显示3副图片。
![HTML入门:[3]图片类的代码处理](https://exp-picture.cdn.bcebos.com/38332303bbea3e86613311f75cd4483105eb55d3.jpg)
5、设置文字与图像对齐方式,可以设置上对齐、中间对齐或下对齐。
首先看代码设置,下面3副图的文字分别设置了上对齐、中间对齐和下对齐。
![HTML入门:[3]图片类的代码处理](https://exp-picture.cdn.bcebos.com/5e4e9c2b74ee1c321063219807f1d8a727334bd3.jpg)
6、页面显示如下:
![HTML入门:[3]图片类的代码处理](https://exp-picture.cdn.bcebos.com/cca2552c56ee7b7fe3750cc16ef4fcf5ef0d41d3.jpg)
![HTML入门:[3]图片类的代码处理](https://exp-picture.cdn.bcebos.com/ab966c6b0ce265e75b7414cc9f23beb9773eb7d3.jpg)
7、网页背景图片的设置;
在Body标签中可以设置背景图片的属性。
进行背景图片1设置的测试。
![HTML入门:[3]图片类的代码处理](https://exp-picture.cdn.bcebos.com/ba97ffd06de89a61ff5e312745e8b004551badd3.jpg)
![HTML入门:[3]图片类的代码处理](https://exp-picture.cdn.bcebos.com/555acf0ff2260d9ab075672d622abab84340a5d3.jpg)
8、进行背景图片2设置的测试。
![HTML入门:[3]图片类的代码处理](https://exp-picture.cdn.bcebos.com/e86ba4b842406afe446f81711eee41c1b6279fd3.jpg)
![HTML入门:[3]图片类的代码处理](https://exp-picture.cdn.bcebos.com/94af5fc1b727ac538bf3e1982ecadce8914899d3.jpg)
阅读量:159
阅读量:21
阅读量:138
阅读量:141
阅读量:168