CSS学习笔记8：图片样式
图片大小
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图片大小</title><style>img {width: 100px;height: 100px;}</style>
</head>
<body>
<img src="https://p92.com/binaries/content/gallery/p92website/technologies/htmlcssjs-overview.png" alt="HTML"/>
</body>
</html>
图片边框
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图片边框</title><style>img {width: 100px;height: 100px;border: 1px solid red;}</style>
</head>
<body>
<img src="https://p92.com/binaries/content/gallery/p92website/technologies/htmlcssjs-overview.png" alt="HTML"/>
</body>
</html>
图片水平对齐
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图片水平对齐</title><style>div {width: 300px;height: 100px;border: 1px solid silver;}img {width: 100px;height: 100px;}/*图片水平对齐使用text-align属性*//*left 左对齐（默认值）*//*center 居中对齐*//*right 右对齐*/.div1 {text-align: left;}.div2 {text-align: center;}.div3 {text-align: right;}</style>
</head>
<body>
<div class="div1"><img src="https://p92.com/binaries/content/gallery/p92website/technologies/htmlcssjs-overview.png" alt="HTML"/>
</div>
<div class="div2"><img src="https://p92.com/binaries/content/gallery/p92website/technologies/htmlcssjs-overview.png" alt="HTML"/>
</div>
<div class="div3"><img src="https://p92.com/binaries/content/gallery/p92website/technologies/htmlcssjs-overview.png" alt="HTML"/>
</div>
</body>
</html>
图片垂直对齐
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图片垂直对齐</title><style>img {width: 100px;height: 100px;border: 1px solid red;}/*图片垂直对齐使用vertical-align属性*//*vertical-align属性定义周围的行内元素或文本相对于该元素的垂直方式*//*top 顶部对齐*//*middle 中部对齐*//*baseline 基线对齐*//*bottom 底部对齐*/#img1 {vertical-align: top;}#img2 {vertical-align: middle;}#img3 {vertical-align: bottom;}#img4 {vertical-align: baseline;}</style>
</head>
<body>
顶部对齐<img id="img1" src="https://p92.com/binaries/content/gallery/p92website/technologies/htmlcssjs-overview.png"alt="HTML"/>顶部对齐(top)
<hr/>
中部对齐<img id="img2" src="https://p92.com/binaries/content/gallery/p92website/technologies/htmlcssjs-overview.png"alt="HTML"/>中部对齐(middle)
<hr/>
底部对齐<img id="img3" src="https://p92.com/binaries/content/gallery/p92website/technologies/htmlcssjs-overview.png"alt="HTML"/>底部对齐(bottom)
<hr/>
基线对齐<img id="img4" src="https://p92.com/binaries/content/gallery/p92website/technologies/htmlcssjs-overview.png"alt="HTML"/>基线对齐(baseline)
<hr/>
</body>
</html>
文字环绕
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>文字环绕</title><style>div {width: 400px;}/*float属性 文字环绕图片效果*//*left 元素向左浮动*//*right 元素向右浮动*/img {width: 100px;height: 100px;float: left;}</style>
</head>
<body>
<div><img src="https://p92.com/binaries/content/gallery/p92website/technologies/htmlcssjs-overview.png" alt="HTML"/><p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻；莲之爱，同予者何人?牡丹之爱，宜乎众矣。</p>
</div>
</body>
</html>
CSS学习笔记8：图片样式相关推荐
- css --- [学习笔记]背景图片小结 css三大特性
源代码 参考 1. 行高(line-height) 目标 理解 - 能说出行高和高度三种关系 - 能简单理解为什么行高等于单行文字会垂直居 应用 使用行高实现单行文字垂直居中 能会测量行高 2. CS ...
- 【温故知新】CSS学习笔记（字体样式属性）附加篇
CSS字体样式属性 目录 CSS字体样式属性 一.font属性 二.color属性 三.line-height 行间距(行高) 四.text-align 水平对齐方式 五.text-indent 首行 ...
- 【温故知新】CSS学习笔记（字体样式属性）
CSS字体样式属性 一.font-size:字号大小 该属性可以使用相对长度单位(推荐),也可以使用绝对长度单位,推荐使用像素单位px. 相对长度单位 说明 em ...
- HTML/CSS学习笔记02【表单标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- HTML+CSS学习笔记（3）- 认识标签（2）
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
- CSS 学习笔记 - 盒模型
CSS学习笔记 - 盒模型 外边距margin 内边距padding 背景background 背景图background-image 边框border 样式 宽度 颜色 圆角 边框图片border- ...
- CSS学习笔记——精灵图(sprite)
CSS学习笔记目录 一.什么是精灵图? 二.精灵图的优点 三.精灵图的基本用法 1.打开ps导入精灵图 2.测量字母的大小及坐标 3.效果图 4.代码实现 总结 一.什么是精灵图? 所谓精灵图就是图片 ...
- MUI学习笔记之图片上传和预览
MUI学习笔记之图片上传和预览 源代码是从博客园下载 我一边学习,一边注释,力求理解 <head> <meta charset="UTF-8"> <m ...
- CSS学习笔记（详细，不定期更新）
CSS 学习笔记 CSS书写规范 顺序 布局位置属性(position, top, right, z-index, display, float等) 自身大小盒子模型(width, height, p ...
- CSS学习笔记（狂神-完整版）
CSS学习笔记(狂神-完整版) HTML + CSS + JavaScript 结构 + 表现 + 动作 1.什么是CSS 如何学习 CSS是什么 CSS怎么用(快速入门) CSS选择器(重点+难点) ...
最新文章
- 线程池运用不当的一次线上事故
- QIIME 2教程. 31名词Glossary(2020.11)
- Office Word 2007下管理参考文献(比2003版的交叉引用神马的轻松多拉)(转)
- 【高校宿舍管理系统】第一章 建立数据库以及项目框架搭建
- mysql基础知识总结
- Freescale i.mx28 Boot-stream分析
- flume学习（三）：Flume Interceptors的使用
- 人工智能会使人类整体性地沦为彻底的“无用阶级”吗？
- 华硕笔记本屏幕亮度怎么调节？屏幕亮度调节方法
- python爬网站图片教程_Python超简单的爬取网站中图片
- LocalDateTime查找最近的五分钟点
- 让机器学会断句：基于词典的Bigram分词算法
- python外部库是什么_Python 常用外部模块详解
- 无人驾驶路径规划（三）局部路径规划-Frenet坐标系下的动态轨迹规划
- Unity之Animation
- bus hound 使用介绍
- 文华财经指标安装使用步骤，开多开空成功率95%公式指标多空买卖点信号
- ARCOCAD 五轴测量PH20
- 基于工业物联网的草场环境监测信息管理系统
- 虚拟机数据恢复案例（en Server虚拟机不可用）