《HTML+CSS+JavaScript》之第18章图片样式

18.1 图片大小
18.2 图片边框
18.3 图片对齐
- 18.3.1 水平对齐
- 18.3.2 垂直对齐
18.4 文字环绕

18.1 图片大小

width:像素值;
height:像素值;

width，height与实际大小不一致时，图片会拉伸。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">img{width:60px;height:60px;}</style>
</head>
<body><img src="img/girl.gif" alt="卡通女孩" />
</body>
</html>

18.2 图片边框

border:1px solid red;

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">img{widht:60px;height:60px;border:1px solid red;}</style>
</head>
<body><img src="img/girl.gif" alt="卡通女孩" />
</body>
</html>

18.3 图片对齐

18.3.1 水平对齐

text-align:取值;

left，默认
center
right

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">div{width:300px;height:80px;border:1px solid silver;}.div1{text-align:left;}.div2{text-align:center;}.div3{text-align:right;}img{width:60px;height:60px;}</style>
</head>
<body><div class="div1"><img src="img/girl.gif" alt=""/></div><div class="div2"><img src=" img/girl.gif" alt=""/></div><div class="div3"><img src=" img/girl.gif" alt=""/></div>
</body>
</html>

18.3.2 垂直对齐

vertical-align定义周围的行内元素或文本相对于该元素的垂直方式，而不是该元素相对于父元素的垂直对齐。

vertical-align:取值;

top
middle
baseline，基线对齐
bottom

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">img{width:60px;height:60px;}#img1{vertical-align:top;}#img2{vertical-align:middle;}#img3{vertical-align:bottom;}#img4{vertical-align:baseline;}</style>
</head>
<body>绿叶学习网<img id="img1" src="img/girl.gif" alt=""/>绿叶学习网（top）<hr/>绿叶学习网<img id="img2" src="img/girl.gif" alt=""/>绿叶学习网（middle）<hr/>绿叶学习网<img id="img3" src="img/girl.gif" alt=""/>绿叶学习网（bottom）<hr/>绿叶学习网<img id="img4" src="img/girl.gif" alt=""/>绿叶学习网（baseline）
</body>
</html>

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">div{width:100px;height:80px;border:1px solid silver;}.div1{vertical-align:top;}.div2{vertical-align:middle;}.div3{vertical-align:bottom;}.div4{vertical-align:baseline;}img{width:60px;height:60px;}</style>
</head>
<body><div class="div1"><img src="img/girl.gif" alt=""/></div><div class="div2"><img src="img/girl.gif" alt=""/></div><div class="div3"><img src="img/girl.gif" alt=""/></div><div class="div4"><img src="img/girl.gif" alt=""/></div>
</body>
</html>

18.4 文字环绕

图文混排，指文字围绕着图片进行布局。

float:取值;

left，元素向左浮动
right，元素向右浮动

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">img{float:left;}p{font-family:"微软雅黑";font-size:12px;}</style>
</head>
<body><img src="img/lotus.png" alt=""/><p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻；莲之爱，同予者何人? 牡丹之爱，宜乎众矣。</p>
</body>
</html>

《HTML+CSS+JavaScript》之第18章图片样式相关推荐

【前端 HTML+CSS+JavaScript(JS)】DOM练习-图片在DIV间移动的实现-removeChild cloneNode position append 上下对齐带注释/总结
作业要求: 效果: 总结: 1.让元素上下对齐的方法: ①让图片上下对齐用vertical-align:cender; ②让其他元素上下对齐设置line-height与height一样. 2.CSS中 ...
Web前端开发精品课HTML CSS JavaScript基础教程CSS部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结第11章 CSS简介 1.HTML是网页的结构,CSS是网页的外观,JavaScript是网页的行为. 2. ...
HTML+CSS+JavaScript网页制作案例教程-黑马程序员-第五章课后习题(课程介绍专栏效果)
黑马程序员编著的教材 HTML+CSS+JavaScript网页制作案例教程第五章:"课程介绍"专栏-课后习题参考代码题目原型: 请结合给出的素材,运用列表标记,超链接标记以 ...
《HTML+CSS+JavaScript》之第14章文本样式
<HTML+CSS+JavaScript>之第14章文本样式 14.1 文本样式简介 14.2 首行缩进 14.3 水平对齐 14.4 文本修饰 14.5 大小写 14.6 行高 14. ...
《HTML+CSS+JavaScript》之第4章文本
<HTML+CSS+JavaScript>之第4章文本 4.1 文本简介 4.1.1 页面组成元素 4.1.2 HTML文本 4.2 标题标签 4.3 段落标签 4.3.1 段落标签 4 ...
《HTML+CSS+JavaScript》之第8章超链接
<HTML+CSS+JavaScript>之第8章超链接 8.1 超链接简介 8.1.1 a标签 8.1.2 target属性 8.2 内部链接 8.3 锚点链接 8.1 超链接简介 h ...
《HTML+CSS+JavaScript》之第20章超链接样式
<HTML+CSS+JavaScript>之第20章超链接样式 20.1 超链接伪类 20.1.1 超链接伪类简介 20.1.2 深入了解超链接伪类 20.2 深入了解hover 20. ...
《网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通》—— 第1章网页设计基础知识...
本节书摘来异步社区<网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通>一书中的第1章,作者: 何新起 , 任 ...
web大二实训作业：校园运动会网站设计——运动会图片轮播图片遮罩特效(4页)体育 HTML+CSS+JavaScript HTML5期末大作业...
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...

《HTML+CSS+JavaScript》之第18章图片样式

《HTML+CSS+JavaScript》之第18章图片样式

18.1 图片大小

18.2 图片边框

18.3 图片对齐

18.3.1 水平对齐

18.3.2 垂直对齐

18.4 文字环绕

《HTML+CSS+JavaScript》之第18章图片样式相关推荐

最新文章

热门文章

《HTML+CSS+JavaScript》之第18章 图片样式

《HTML+CSS+JavaScript》之第18章 图片样式

18.1 图片大小

18.2 图片边框

18.3 图片对齐

18.3.1 水平对齐

18.3.2 垂直对齐

18.4 文字环绕

《HTML+CSS+JavaScript》之第18章 图片样式相关推荐

最新文章

热门文章

《HTML+CSS+JavaScript》之第18章图片样式

《HTML+CSS+JavaScript》之第18章图片样式

《HTML+CSS+JavaScript》之第18章图片样式相关推荐